Squash Odysseus development history

static/js/tileManager.js

@@ -7,12 +7,9 @@
  * to fill that zone with a springy animation.
  *
  * Snap zones:
- *   - over top edge               → fullscreen
- *   - top strip                   → maximize
- *   - top edge                    → top half
+ *   - top edge                    → maximize beside the active sidebar
  *   - left edge                   → left half
  *   - right edge                  → right half
- *   - bottom edge                 → bottom half
  *
  * Mobile (≤768px) is excluded — the swipe-dismiss UX takes precedence.
  *
@@ -21,7 +18,6 @@
  */
 
 const EDGE_THRESHOLD_PX = 24;     // how close to an edge counts as "near"
-const TOP_FULL_STRIP_PX = 8;      // top strip → maximize
 
 let _ghost = null;
 let _activeZone = null;
@@ -75,18 +71,33 @@ function _showGhost(rect) {
 }
 
 function _viewportSafeRect() {
-  // Account for the icon rail / sidebar on the left side of the viewport.
+  // Reserve navigation on whichever edge it actually occupies. Treating a
+  // right-side sidebar as left navigation makes leftEdge nearly viewport-wide,
+  // yielding negative tile widths and sending dragged windows off-screen.
   const sidebar = document.getElementById('sidebar');
   const rail = document.querySelector('.icon-rail') || document.querySelector('#icon-rail');
-  let leftEdge = 0;
-  const sb = sidebar?.getBoundingClientRect();
-  if (sb && sb.right > 0 && !sidebar.classList.contains('hidden')) leftEdge = Math.max(leftEdge, sb.right);
-  const rr = rail?.getBoundingClientRect();
-  if (rr && rr.right > 0) leftEdge = Math.max(leftEdge, rr.right);
+  let leftEdge = 4;
+  let rightEdge = window.innerWidth - 4;
+  const reserve = (element, isRight) => {
+    if (!element || window.getComputedStyle(element).display === 'none') return;
+    const rect = element.getBoundingClientRect();
+    if (!rect.width || rect.bottom <= 0 || rect.top >= window.innerHeight) return;
+    if (isRight) rightEdge = Math.min(rightEdge, rect.left - 4);
+    else leftEdge = Math.max(leftEdge, rect.right + 4);
+  };
+  if (sidebar && !sidebar.classList.contains('hidden')) {
+    reserve(sidebar, sidebar.classList.contains('right-side'));
+  }
+  reserve(rail, rail?.classList.contains('right-side'));
+  // Keep a valid workspace even during a transient resize frame.
+  if (rightEdge <= leftEdge) {
+    leftEdge = 4;
+    rightEdge = window.innerWidth - 4;
+  }
   return {
-    left: leftEdge + 4,
+    left: leftEdge,
     top: 4,
-    right: window.innerWidth - 4,
+    right: rightEdge,
     bottom: window.innerHeight - 4,
   };
 }
@@ -96,29 +107,19 @@ function _zoneForPointer(x, y) {
   const W = safe.right - safe.left;
   const H = safe.bottom - safe.top;
 
-  // Dragged OVER the top edge (cursor at/past the very top) → TRUE fullscreen
-  // that covers everything, including the sidebar.
-  if (y <= 0) {
-    return { name: 'fullscreen', rect: { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight } };
-  }
-  // Near the top edge (but not over it) → "maximize": fill the safe area,
-  // which sits NEXT TO the sidebar/rail rather than covering it.
-  if (y <= safe.top + TOP_FULL_STRIP_PX) {
-    return { name: 'maximize', rect: { left: safe.left, top: safe.top, width: W, height: H } };
-  }
-
-  // Symmetric edge half-snaps. The safe rect already starts to the right of
-  // the sidebar/rail, so left-half fills the left side of the workspace
-  // without covering navigation.
+  // The whole top-edge target means one sidebar-aware maximize state. The previous nested
+  // maximize/top-half bands made nearly identical gestures produce three
+  // different heights, including a shallow half-window and a sidebar-covering
+  // fullscreen state.
   if (y <= safe.top + EDGE_THRESHOLD_PX)
-    return { name: 'top-half', rect: { left: safe.left, top: safe.top, width: W, height: H / 2 } };
+    return { name: 'maximize', rect: { left: safe.left, top: safe.top, width: W, height: H } };
+
+  // Symmetric side half-snaps. The safe rect starts to the right of
+  // the sidebar/rail so left-half does not cover navigation.
   if (x <= safe.left + EDGE_THRESHOLD_PX)
     return { name: 'left-half', rect: { left: safe.left, top: safe.top, width: W / 2, height: H } };
   if (x >= safe.right - EDGE_THRESHOLD_PX)
     return { name: 'right-half', rect: { left: safe.left + W / 2, top: safe.top, width: W / 2, height: H } };
-  if (y >= safe.bottom - EDGE_THRESHOLD_PX)
-    return { name: 'bottom-half', rect: { left: safe.left, top: safe.top + H / 2, width: W, height: H / 2 } };
-
   return null;
 }
 
@@ -132,7 +133,7 @@ function _zoneForContent(content, x, y) {
   if (modal && modal.id === 'settings-modal' && zone.name !== 'right-half') return null;
   if (modal && (modal.id === 'cookbook-modal'
       || modal.id === 'theme-modal')
-      && zone.name !== 'fullscreen') return null;
+      && zone.name !== 'maximize') return null;
   return zone;
 }
 
@@ -301,12 +302,18 @@ function _reclampAll(animate = false) {
     const W = safe.right - safe.left, H = safe.bottom - safe.top;
     let r;
     switch (name) {
-      case 'fullscreen':     r = { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; break;
-      case 'maximize':       r = { left: safe.left, top: safe.top, width: W, height: H }; break;
-      case 'top-half':       r = { left: safe.left, top: safe.top, width: W, height: H/2 }; break;
+      // Migrate every retired top-edge state to the single sidebar-aware one.
+      case 'fullscreen':
+      case 'maximize':
+      case 'top-half':
+        c.dataset._tileZone = 'maximize';
+        r = { left: safe.left, top: safe.top, width: W, height: H };
+        break;
       case 'left-half':      r = { left: safe.left, top: safe.top, width: W/2, height: H }; break;
       case 'right-half':     r = { left: safe.left + W/2, top: safe.top, width: W/2, height: H }; break;
-      case 'bottom-half':    r = { left: safe.left, top: safe.top + H/2, width: W, height: H/2 }; break;
+      case 'bottom-half':
+        _unsnap(c);
+        return;
       case 'top-left':       r = { left: safe.left, top: safe.top, width: W/2, height: H/2 }; break;
       case 'top-right':      r = { left: safe.left + W/2, top: safe.top, width: W/2, height: H/2 }; break;
       case 'bottom-left':    r = { left: safe.left, top: safe.top + H/2, width: W/2, height: H/2 }; break;
@@ -387,6 +394,20 @@ export function snapModalToZone(modal, zone) {
   if (!modal || !zone) return;
   const content = modal.querySelector ? (modal.querySelector('.modal-content, .research-pane') || modal) : modal;
   if (!content) return;
+  // Old callers still request `fullscreen`; keep them from recreating the
+  // retired viewport-covering or half-height top states.
+  if (zone.name === 'fullscreen' || zone.name === 'top-half') {
+    const safe = _viewportSafeRect();
+    zone = {
+      name: 'maximize',
+      rect: {
+        left: safe.left,
+        top: safe.top,
+        width: safe.right - safe.left,
+        height: safe.bottom - safe.top,
+      },
+    };
+  }
   if (modal.id === 'settings-modal' && zone.name !== 'right-half') return;
   _applySnap(content, zone.rect, zone.name);
 }