Improve desktop grid positioning and spacing

- Increase icon spacing from 20px to 30px padding
- Add vertical grid offset (-30px) to start grid higher
- Remove screen-size dependent grid columns/rows (now fully dynamic)
- Fix dropzone visualization to use consistent snapToGrid function
- Clean up unused UI store dependencies

package.json

@@ -1,7 +1,7 @@
 {
   "name": "haex-hub",
   "private": true,
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "scripts": {
     "build": "nuxt build",

src/components/haex/desktop/icon.vue

@@ -196,9 +196,12 @@ const handlePointerMove = (e: PointerEvent) => {
   const newX = e.clientX - parentRect.left - offsetX.value
   const newY = e.clientY - parentRect.top - offsetY.value
 
-  // Clamp y position to minimum 0 (parent is already below header)
-  x.value = newX
-  y.value = Math.max(0, newY)
+  // Clamp position to viewport bounds during drag
+  const maxX = viewportSize ? Math.max(0, viewportSize.width.value - iconWidth.value) : Number.MAX_SAFE_INTEGER
+  const maxY = viewportSize ? Math.max(0, viewportSize.height.value - iconHeight.value) : Number.MAX_SAFE_INTEGER
+
+  x.value = Math.max(0, Math.min(maxX, newX))
+  y.value = Math.max(0, Math.min(maxY, newY))
 
   // Emit current position during drag
   emit('dragging', props.id, x.value, y.value)

src/components/haex/desktop/index.vue

@@ -301,7 +301,7 @@ const { x: mouseX, y: mouseY } = useMouse()
 const dropTargetZone = computed(() => {
   if (!isDragging.value) return null
 
-  // Use the actual icon position during drag, not the mouse position
+  // Use the actual icon position during drag
   const iconX = currentDraggedItem.x
   const iconY = currentDraggedItem.y
 
@@ -313,11 +313,14 @@ const dropTargetZone = computed(() => {
     currentDraggedItem.height || undefined,
   )
 
+  // Show dropzone at snapped position with grid cell size
+  const cellSize = desktopStore.gridCellSize
+
   return {
     x: snapped.x,
     y: snapped.y,
-    width: currentDraggedItem.width || desktopStore.gridCellSize,
-    height: currentDraggedItem.height || desktopStore.gridCellSize,
+    width: currentDraggedItem.width || cellSize,
+    height: currentDraggedItem.height || cellSize,
   }
 })
 

src/stores/desktop/index.ts

@@ -24,8 +24,6 @@ export const useDesktopStore = defineStore('desktopStore', () => {
   const workspaceStore = useWorkspaceStore()
   const { currentWorkspace } = storeToRefs(workspaceStore)
   const { $i18n } = useNuxtApp()
-  const uiStore = useUiStore()
-  const { isSmallScreen } = storeToRefs(uiStore)
   const deviceStore = useDeviceStore()
   const settingsStore = useVaultSettingsStore()
 
@@ -69,33 +67,30 @@ export const useDesktopStore = defineStore('desktopStore', () => {
     iconSizePreset.value = preset
   }
 
-  // Reactive grid settings based on screen size
-  const effectiveGridColumns = computed(() => {
-    return isSmallScreen.value ? 4 : 8
-  })
-
-  const effectiveGridRows = computed(() => {
-    return isSmallScreen.value ? 5 : 6
-  })
-
   const effectiveIconSize = computed(() => {
     return iconSizePresetValues[iconSizePreset.value]
   })
 
   // Calculate grid cell size based on icon size
   const gridCellSize = computed(() => {
-    // Add padding around icon (20px extra for spacing)
-    return effectiveIconSize.value + 20
+    // Add padding around icon (30px extra for spacing)
+    return effectiveIconSize.value + 30
   })
 
+  // Grid offsets for start position (negative = move grid up)
+  const gridOffsetY = -30 // Start grid 30px higher
+
   // Snap position to grid (centers icon in cell)
   // iconWidth and iconHeight are optional - if provided, they're used for centering
   const snapToGrid = (x: number, y: number, iconWidth?: number, iconHeight?: number) => {
     const cellSize = gridCellSize.value
 
+    // Adjust y for grid offset
+    const adjustedY = Math.max(0, y - gridOffsetY)
+
     // Calculate which grid cell the position falls into
     const col = Math.floor(x / cellSize)
-    const row = Math.floor(y / cellSize)
+    const row = Math.floor(adjustedY / cellSize)
 
     // Use provided dimensions or fall back to cell size
     const actualIconWidth = iconWidth || cellSize
@@ -113,7 +108,7 @@ export const useDesktopStore = defineStore('desktopStore', () => {
 
     return {
       x: col * cellSize + paddingX,
-      y: row * cellSize + paddingY,
+      y: row * cellSize + paddingY + gridOffsetY,
     }
   }
 
@@ -439,8 +434,6 @@ export const useDesktopStore = defineStore('desktopStore', () => {
     iconSizePreset,
     syncDesktopIconSizeAsync,
     updateDesktopIconSizeAsync,
-    effectiveGridColumns,
-    effectiveGridRows,
     effectiveIconSize,
     gridCellSize,
     snapToGrid,