feat(desktop): reveal snap grid while arranging icons and widgets

public/desktop-personalization.js

@@ -46,12 +46,18 @@
     if (!dragState) return;
     const dx = event.clientX - dragState.x, dy = event.clientY - dragState.y;
     if (Math.hypot(dx, dy) > 6) dragState.moved = true;
-    if (dragState.moved) { dragState.icon.classList.add('dragging'); dragState.icon.style.transform = `translate(${dx}px,${dy}px)`; }
+    if (dragState.moved) {
+      dragState.icon.classList.add('dragging'); dragState.icon.style.transform = `translate(${dx}px,${dy}px)`;
+      const { rows, columns } = bounds(), origin = placed[dragState.id];
+      const col = Math.max(0, Math.min(columns - 1, origin.col + Math.round(dx / cell.width)));
+      const row = Math.max(0, Math.min(rows - 1, origin.row + Math.round(dy / cell.height)));
+      window.LifeOSSnapGrid?.show(col, row);
+    }
   });
   icons.addEventListener('pointerup', event => {
     if (!dragState) return;
     const { icon, id, moved, x, y } = dragState; dragState = null;
-    icon.classList.remove('dragging'); icon.style.transform = '';
+    icon.classList.remove('dragging'); icon.style.transform = ''; window.LifeOSSnapGrid?.hide();
     if (!moved) return;
     suppressClick = true;
     setTimeout(() => { suppressClick = false; }, 0);
@@ -63,7 +69,20 @@
     if (other) positions[other] = origin;
     updateSettings({ iconPositions: positions }); arrangeIcons();
   });
-  icons.addEventListener('pointercancel', () => { if (dragState) { dragState.icon.style.transform = ''; dragState.icon.classList.remove('dragging'); dragState = null; } });
+  icons.addEventListener('pointercancel', () => { if (dragState) { dragState.icon.style.transform = ''; dragState.icon.classList.remove('dragging'); dragState = null; window.LifeOSSnapGrid?.hide(); } });
+  icons.addEventListener('keydown', event => {
+    const icon = event.target.closest('.app-icon');
+    if (!desktopMode() || !icon || !event.shiftKey || !['ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(event.key)) return;
+    event.preventDefault();
+    const id = icon.dataset.app, origin = placed[id], { rows, columns } = bounds();
+    const col = Math.max(0, Math.min(columns - 1, origin.col + (event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0)));
+    const row = Math.max(0, Math.min(rows - 1, origin.row + (event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0)));
+    const other = Object.keys(placed).find(key => key !== id && placed[key].col === col && placed[key].row === row);
+    const positions = { ...savedPositions(), [id]: { col, row } };
+    if (other) positions[other] = origin;
+    updateSettings({ iconPositions: positions }); arrangeIcons();
+    window.LifeOSSnapGrid?.show(col, row); window.LifeOSSnapGrid?.hide(900);
+  });
   icons.addEventListener('click', event => { if (suppressClick) { event.preventDefault(); event.stopImmediatePropagation(); } }, true);
   window.addEventListener('resize', () => { arrangeIcons(); if (desktopMode()) Object.values(windows).forEach(clampWindow); });