Savestate: Revert cinematic animation to top/left/width for smoother trajectory, and add drag support to popover, bump version to 1.8.25

index.html

@@ -51,7 +51,7 @@
 </head>
 <body class="dark-theme in-chat-view">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.24</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.25</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/views/documents/documents-view.js

@@ -488,19 +488,23 @@ export class DocumentsView {
     folderEl.style.position = 'fixed';
     folderEl.style.top = rect.top + 'px';
     folderEl.style.left = rect.left + 'px';
-    folderEl.style.width = rect.width + 'px';
-    folderEl.style.zIndex = '100';
-    
-    // Set random rotation
-    const randomRot = (Math.random() > 0.5 ? 1 : -1) * (8 + Math.random() * 8);
-    folderEl.dataset.rot = randomRot;
-    
-    // Combine everything into a single transform
-    folderEl.style.setProperty('--target-transform', `translate(${translateX}px, ${translateY}px) scale(${scale}) rotate(${randomRot}deg)`);
+    // Combine everything into a single transform for rotation ONLY
+    folderEl.style.setProperty('--folder-rot', `${randomRot}deg`);
+    if (randomRot < 0) folderEl.classList.add('tilt-left');
+    else folderEl.classList.add('tilt-right');
     
     folderEl.classList.remove('vault-folder-pressing');
     folderEl.classList.add('vault-folder-detail');
 
+    // Force reflow
+    folderEl.offsetHeight;
+
+    // Animate to detail position using top, left, width
+    folderEl.style.transition = 'top 0.45s cubic-bezier(.22,.68,0,1.1), left 0.45s cubic-bezier(.22,.68,0,1.1), width 0.45s cubic-bezier(.22,.68,0,1.1), transform 0.45s cubic-bezier(.22,.68,0,1.1)';
+    folderEl.style.top = targetTop + 'px';
+    folderEl.style.left = targetLeft + 'px';
+    folderEl.style.width = targetWidth + 'px';
+
     // 4. Update ambient title
     const titleEl = document.querySelector('.vault-ambient-title');
     if (titleEl) titleEl.textContent = folderName;
@@ -619,6 +623,7 @@ export class DocumentsView {
 
     // 3. Get fresh layout position in case of scroll
     folderEl.classList.remove('vault-folder-detail');
+    folderEl.classList.remove('tilt-left', 'tilt-right');
     folderEl.style.position = '';
     folderEl.style.top = '';
     folderEl.style.left = '';
@@ -627,30 +632,34 @@ export class DocumentsView {
     
     const freshRect = folderEl.getBoundingClientRect();
     
-    // RECALCULATE --target-transform so it doesn't jump!
+    // Put back to fixed detail state instantly
+    folderEl.style.position = 'fixed';
+    
+    // Restore current detail position before animating
     const targetWidth = window.innerWidth * 0.5;
     const targetTop = window.innerHeight - (targetWidth * 1.3) - 120;
     const targetLeft = window.innerWidth * 0.05;
-    const scale = targetWidth / freshRect.width;
-    const translateX = targetLeft - freshRect.left;
-    const translateY = targetTop - freshRect.top;
-    const randomRot = folderEl.dataset.rot || -12;
     
-    folderEl.style.setProperty('--target-transform', `translate(${translateX}px, ${translateY}px) scale(${scale}) rotate(${randomRot}deg)`);
+    folderEl.style.top = targetTop + 'px';
+    folderEl.style.left = targetLeft + 'px';
+    folderEl.style.width = targetWidth + 'px';
     
-    // Put back to fixed detail state instantly
-    folderEl.style.position = 'fixed';
-    folderEl.style.top = freshRect.top + 'px';
-    folderEl.style.left = freshRect.left + 'px';
-    folderEl.style.width = freshRect.width + 'px';
     folderEl.classList.add('vault-folder-detail');
+    const rot = folderEl.dataset.rot || -12;
+    if (rot < 0) folderEl.classList.add('tilt-left');
+    else folderEl.classList.add('tilt-right');
     
     // Force reflow
     folderEl.offsetHeight;
     
-    // Now animate smoothly
-    folderEl.style.transition = 'transform 0.45s cubic-bezier(.22,.68,0,1.1)';
+    // Now animate smoothly back to grid rect
+    folderEl.style.transition = 'top 0.45s cubic-bezier(.22,.68,0,1.1), left 0.45s cubic-bezier(.22,.68,0,1.1), width 0.45s cubic-bezier(.22,.68,0,1.1), transform 0.45s cubic-bezier(.22,.68,0,1.1)';
+    folderEl.style.top = freshRect.top + 'px';
+    folderEl.style.left = freshRect.left + 'px';
+    folderEl.style.width = freshRect.width + 'px';
+    
     folderEl.classList.remove('vault-folder-detail');
+    folderEl.classList.remove('tilt-left', 'tilt-right');
 
     await this._wait(450);
 
@@ -1097,6 +1106,51 @@ export class DocumentsView {
     
     popover.style.top = `${top}px`;
     popover.style.left = `${left}px`;
+    popover.style.touchAction = 'none'; // Prevent scrolling while dragging
+
+    // --- Drag Support ---
+    let isDragging = false;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let popoverStartLeft = 0;
+    let popoverStartTop = 0;
+
+    const dragStart = (e) => {
+      // Don't drag if clicking inside input/button/grid
+      if (e.target.closest('input, button, .icon-grid-item')) return;
+      
+      isDragging = true;
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+      dragStartX = clientX;
+      dragStartY = clientY;
+      popoverStartLeft = parseFloat(popover.style.left);
+      popoverStartTop = parseFloat(popover.style.top);
+    };
+
+    const dragMove = (e) => {
+      if (!isDragging) return;
+      e.preventDefault(); // Stop scrolling
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+      const dx = clientX - dragStartX;
+      const dy = clientY - dragStartY;
+      popover.style.left = `${popoverStartLeft + dx}px`;
+      popover.style.top = `${popoverStartTop + dy}px`;
+    };
+
+    const dragEnd = () => {
+      isDragging = false;
+    };
+
+    popover.addEventListener('mousedown', dragStart);
+    document.addEventListener('mousemove', dragMove);
+    document.addEventListener('mouseup', dragEnd);
+    
+    popover.addEventListener('touchstart', dragStart, { passive: false });
+    document.addEventListener('touchmove', dragMove, { passive: false });
+    document.addEventListener('touchend', dragEnd);
+    // --------------------
 
     popover.querySelector('#popover-save').addEventListener('click', () => {
       const newColor = popover.querySelector('#popover-color').value;
@@ -1106,9 +1160,15 @@ export class DocumentsView {
     });
 
     const closePopover = (e) => {
+      // Don't close if we were just dragging
+      if (isDragging) return;
       if (!popover.contains(e.target) && !btnEl.contains(e.target)) {
         popover.remove();
         document.removeEventListener('click', closePopover);
+        document.removeEventListener('mousemove', dragMove);
+        document.removeEventListener('mouseup', dragEnd);
+        document.removeEventListener('touchmove', dragMove);
+        document.removeEventListener('touchend', dragEnd);
       }
     };
     setTimeout(() => {