Add resizable viewer panes

frontend-js/dist/app.js

@@ -0,0 +1,93 @@
+(function () {
+  const key = "mail-graveyard-pane-widths";
+  const minWidths = [160, 220, 260, 260];
+  const handleWidth = 6;
+
+  function panes(container) {
+    return Array.from(container.querySelectorAll(".pane"));
+  }
+
+  function widthsFromDOM(container) {
+    return panes(container).map((pane) => Math.round(pane.getBoundingClientRect().width));
+  }
+
+  function clampWidths(widths, total) {
+    const next = widths.map((w, i) => Math.max(minWidths[i], Math.round(w || minWidths[i])));
+    const max = Math.max(total - handleWidth * 3, minWidths.reduce((a, b) => a + b, 0));
+    const sum = next.reduce((a, b) => a + b, 0);
+    if (sum > max) {
+      let extra = sum - max;
+      for (let i = next.length - 1; i >= 0 && extra > 0; i--) {
+        const canTake = Math.max(0, next[i] - minWidths[i]);
+        const take = Math.min(canTake, extra);
+        next[i] -= take;
+        extra -= take;
+      }
+    }
+    return next;
+  }
+
+  function applyWidths(container, widths) {
+    const total = container.getBoundingClientRect().width;
+    const w = clampWidths(widths, total);
+    container.style.gridTemplateColumns =
+      `${w[0]}px ${handleWidth}px ${w[1]}px ${handleWidth}px ${w[2]}px ${handleWidth}px ${w[3]}px`;
+    localStorage.setItem(key, JSON.stringify(w));
+  }
+
+  function restore(container) {
+    try {
+      const saved = JSON.parse(localStorage.getItem(key) || "null");
+      if (Array.isArray(saved) && saved.length === 4) {
+        applyWidths(container, saved);
+      }
+    } catch (_) {
+      localStorage.removeItem(key);
+    }
+  }
+
+  function bind(container) {
+    if (!container || container.dataset.resizeBound === "1") return;
+    container.dataset.resizeBound = "1";
+    restore(container);
+
+    container.querySelectorAll(".pane-resizer").forEach((handle) => {
+      handle.addEventListener("pointerdown", (event) => {
+        if (window.matchMedia("(max-width: 820px)").matches) return;
+        event.preventDefault();
+        handle.setPointerCapture(event.pointerId);
+        handle.classList.add("dragging");
+        document.body.classList.add("resizing");
+
+        const index = Number(handle.dataset.resizeIndex || 0);
+        const startX = event.clientX;
+        const start = widthsFromDOM(container);
+
+        function move(moveEvent) {
+          const delta = moveEvent.clientX - startX;
+          const next = start.slice();
+          const left = Math.max(minWidths[index], start[index] + delta);
+          const used = left - start[index];
+          const right = Math.max(minWidths[index + 1], start[index + 1] - used);
+          const actual = start[index + 1] - right;
+          next[index] = start[index] + actual;
+          next[index + 1] = right;
+          applyWidths(container, next);
+        }
+
+        function up(upEvent) {
+          handle.releasePointerCapture(upEvent.pointerId);
+          handle.classList.remove("dragging");
+          document.body.classList.remove("resizing");
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+        }
+
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      });
+    });
+  }
+
+  window.addEventListener("DOMContentLoaded", () => bind(document.querySelector(".four-pane")));
+})();

frontend-js/dist/style.css

@@ -56,13 +56,22 @@ body.ol2013 {
   min-height: 0;               /* erlaubt Scrollen in den Panes */
 }
 .three-pane { grid-template-columns: 220px 340px 1fr; }
-.four-pane { grid-template-columns: 220px 340px minmax(280px, 1fr) minmax(280px, 1fr); }
+.four-pane { grid-template-columns: 220px 6px 340px 6px minmax(280px, 1fr) 6px minmax(280px, 1fr); }
 .pane {
   border-right: 1px solid var(--ol-border);
   background: var(--ol-pane);
   overflow-y: auto;
   min-height: 0;
 }
+.pane-resizer {
+  background: #f7f7f7;
+  border-right: 1px solid var(--ol-border);
+  cursor: col-resize;
+  min-height: 0;
+}
+.pane-resizer:hover,
+.pane-resizer.dragging { background: var(--ol-sel-bd); }
+body.resizing { cursor: col-resize; user-select: none; }
 .pane-tree { background: var(--ol-tree); }
 .pane-target { border-right: 0; }
 .pane-head {
@@ -163,11 +172,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
 
 @media (max-width: 1180px) {
   .four-pane {
-    grid-template-columns: 200px 320px minmax(300px, 1fr);
-  }
-  .pane-target {
-    grid-column: 3;
-    border-top: 1px solid var(--ol-border);
+    grid-template-columns: 200px 6px 320px 6px minmax(280px, 1fr) 6px minmax(280px, 1fr);
   }
 }
 
@@ -182,6 +187,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
     border-right: 0;
     border-bottom: 1px solid var(--ol-border);
   }
+  .pane-resizer { display: none; }
   .pane-target { grid-column: auto; }
   .searchbar { top: 30px; }
 }