asdsad

public/assets/desktop/desktop.css

@@ -180,6 +180,42 @@ h1 {
 
 .window-resize-handle {
     position: absolute;
+    z-index: 2;
+}
+
+.window-resize-handle[data-edge="right"] {
+    top: 18px;
+    right: 0;
+    width: 8px;
+    height: calc(100% - 36px);
+    cursor: ew-resize;
+}
+
+.window-resize-handle[data-edge="left"] {
+    top: 18px;
+    left: 0;
+    width: 8px;
+    height: calc(100% - 36px);
+    cursor: ew-resize;
+}
+
+.window-resize-handle[data-edge="bottom"] {
+    left: 18px;
+    bottom: 0;
+    width: calc(100% - 36px);
+    height: 8px;
+    cursor: ns-resize;
+}
+
+.window-resize-handle[data-edge="top"] {
+    left: 18px;
+    top: 0;
+    width: calc(100% - 36px);
+    height: 8px;
+    cursor: ns-resize;
+}
+
+.window-resize-handle[data-edge="corner"] {
     right: 0;
     bottom: 0;
     width: 18px;

public/assets/desktop/desktop.js

@@ -295,16 +295,20 @@ if (payloadNode) {
     };
 
     const wireResizing = (record) => {
-        const handle = record.node.querySelector('.window-resize-handle');
+        const handles = record.node.querySelectorAll('.window-resize-handle');
-        if (!handle || window.matchMedia('(max-width: 1100px)').matches) {
+        if (!handles.length || window.matchMedia('(max-width: 1100px)').matches) {
             return;
         }
 
+        handles.forEach((handle) => {
             let startX = 0;
             let startY = 0;
+            let originX = 0;
+            let originY = 0;
             let originWidth = 0;
             let originHeight = 0;
             let resizing = false;
+            const edge = handle.dataset.edge;
 
             handle.addEventListener('pointerdown', (event) => {
                 if (record.state.maximized) {
@@ -314,6 +318,8 @@ if (payloadNode) {
                 resizing = true;
                 startX = event.clientX;
                 startY = event.clientY;
+                originX = record.layout.x;
+                originY = record.layout.y;
                 originWidth = record.layout.width;
                 originHeight = record.layout.height;
                 handle.setPointerCapture(event.pointerId);
@@ -326,8 +332,27 @@ if (payloadNode) {
                     return;
                 }
 
-            record.layout.width = originWidth + event.clientX - startX;
+                const deltaX = event.clientX - startX;
-            record.layout.height = originHeight + event.clientY - startY;
+                const deltaY = event.clientY - startY;
+
+                if (edge === 'right' || edge === 'corner') {
+                    record.layout.width = originWidth + deltaX;
+                }
+
+                if (edge === 'bottom' || edge === 'corner') {
+                    record.layout.height = originHeight + deltaY;
+                }
+
+                if (edge === 'left') {
+                    record.layout.x = originX + deltaX;
+                    record.layout.width = originWidth - deltaX;
+                }
+
+                if (edge === 'top') {
+                    record.layout.y = originY + deltaY;
+                    record.layout.height = originHeight - deltaY;
+                }
+
                 clampWindowLayout(record);
                 applyWindowLayout(record);
             });
@@ -336,6 +361,7 @@ if (payloadNode) {
                 resizing = false;
                 saveWindowState();
             });
+        });
     };
 
     const createWindow = (definition) => {
@@ -354,7 +380,11 @@ if (payloadNode) {
                 <p>${definition.content}</p>
                 <p><strong>Route:</strong> ${definition.app_id}</p>
             </div>
-            <div class="window-resize-handle" aria-hidden="true"></div>
+            <div class="window-resize-handle" data-edge="top" aria-hidden="true"></div>
+            <div class="window-resize-handle" data-edge="right" aria-hidden="true"></div>
+            <div class="window-resize-handle" data-edge="bottom" aria-hidden="true"></div>
+            <div class="window-resize-handle" data-edge="left" aria-hidden="true"></div>
+            <div class="window-resize-handle" data-edge="corner" aria-hidden="true"></div>
         `;
 
         const persisted = persistedWindowState[definition.app_id] || {};