From 493f22094b3c531ea4b3cf371fc28e37f26af3b0 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 28 Jan 2026 15:17:15 +0000
Subject: [PATCH] appview/pages: add script to create resizable panels

elements marked with `data-resizer` will now have a few event handlers
attached to them on load. when mouse operations take place on this
element, the target (`data-target`) is resized along the provided axis,
the width of the element can be no lesser than `data-min` and no greater
than `data-max`.

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../pages/templates/fragments/resizeable.html | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 appview/pages/templates/fragments/resizeable.html

diff --git a/appview/pages/templates/fragments/resizeable.html b/appview/pages/templates/fragments/resizeable.html
new file mode 100644
index 00000000..b48a0d64
--- /dev/null
+++ b/appview/pages/templates/fragments/resizeable.html
@@ -0,0 +1,113 @@
+{{ define "fragments/resizable" }}
+  <script>
+    class ResizablePanel {
+      constructor(resizerElement) {
+        this.resizer = resizerElement;
+        this.isResizing = false;
+        this.type = resizerElement.dataset.resizer;
+        this.targetId = resizerElement.dataset.target;
+        this.target = document.getElementById(this.targetId);
+        this.min = parseInt(resizerElement.dataset.min) || 100;
+        this.max = parseInt(resizerElement.dataset.max) || Infinity;
+
+        this.direction = resizerElement.dataset.direction || 'before'; // 'before' or 'after'
+
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+
+        this.init();
+      }
+
+      init() {
+        this.resizer.addEventListener('mousedown', this.handleMouseDown);
+      }
+
+      handleMouseDown(e) {
+        e.preventDefault();
+        this.isResizing = true;
+        this.resizer.classList.add('resizing');
+        document.body.style.cursor = this.type === 'vertical' ? 'col-resize' : 'row-resize';
+        document.body.style.userSelect = 'none';
+
+        this.startX = e.clientX;
+        this.startY = e.clientY;
+        this.startWidth = this.target.offsetWidth;
+        this.startHeight = this.target.offsetHeight;
+
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+      }
+
+      handleMouseMove(e) {
+        if (!this.isResizing) return;
+
+        if (this.type === 'vertical') {
+          let newWidth;
+
+          if (this.direction === 'after') {
+            const deltaX = this.startX - e.clientX;
+            newWidth = this.startWidth + deltaX;
+          } else {
+            const deltaX = e.clientX - this.startX;
+            newWidth = this.startWidth + deltaX;
+          }
+
+          if (newWidth >= this.min && newWidth <= this.max) {
+            this.target.style.width = newWidth + 'px';
+            this.target.style.flexShrink = '0';
+          }
+        } else {
+          let newHeight;
+
+          if (this.direction === 'after') {
+            const deltaY = this.startY - e.clientY;
+            newHeight = this.startHeight + deltaY;
+          } else {
+            const deltaY = e.clientY - this.startY;
+            newHeight = this.startHeight + deltaY;
+          }
+
+          if (newHeight >= this.min && newHeight <= this.max) {
+            this.target.style.height = newHeight + 'px';
+          }
+        }
+      }
+
+      handleMouseUp() {
+        if (!this.isResizing) return;
+
+        this.isResizing = false;
+        this.resizer.classList.remove('resizing');
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+      }
+
+      destroy() {
+        this.resizer.removeEventListener('mousedown', this.handleMouseDown);
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+      }
+    }
+
+    function initializeResizers() {
+      const resizers = document.querySelectorAll('[data-resizer]');
+      const instances = [];
+
+      resizers.forEach(resizer => {
+        instances.push(new ResizablePanel(resizer));
+      });
+
+      return instances;
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initializeResizers);
+    } else {
+      initializeResizers();
+    }
+  </script>
+{{ end }}
-- 
2.51.2