Favorites: fix drag-down cue offset, keyboard-reorder highlight jump, and move dev Debug to Cmd+Shift+D

- Drag-down drop-line cue was one gap too high: it reused the post-removal move-target as a row index. Now driven by the raw insertion slot (new pure `pointerInsertionSlot`), with a bottom-edge cue for dropping past the last favorite. Cue and drop now agree.
- Keyboard reorder (Alt+Up/Down) moved the highlight to the current volume (Macintosh HD) instead of following the moved favorite: the open-effect re-ran on the post-reorder `volumes-changed` refresh and reset it. The init now reads the list `untrack`ed (fires only on open), and the reorder sets the highlight to the moved favorite's new index directly (favorites lead `allVolumes` in order) rather than racing an async findIndex.
- Dev-only Debug window shortcut moved from Cmd+D to Cmd+Shift+D, freeing Cmd+D.

Author: vdavid

apps/desktop/src/lib/file-explorer/navigation/VolumeBreadcrumb.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, onDestroy, tick } from 'svelte'
+    import { onMount, onDestroy, tick, untrack } from 'svelte'
     import {
         ejectVolume,
         getIpcErrorMessage,
@@ -15,7 +15,7 @@
         reorderFavorites,
         stripFavoritePrefix,
     } from '$lib/tauri-commands'
-    import { moveItem, clampedReorderTarget, pointerReorderTarget } from './favorites-reorder'
+    import { moveItem, clampedReorderTarget, pointerReorderTarget, pointerInsertionSlot } from './favorites-reorder'
     import { ask } from '@tauri-apps/plugin-dialog'
     import { triggerNetworkDiscovery } from '../network/lazy-trigger'
     import { addToast, dismissToast } from '$lib/ui/toast'
@@ -166,12 +166,17 @@
     // Flat list of all volumes for keyboard navigation
     const allVolumes = $derived(groupedVolumes.flatMap((g) => g.items))
 
-    // When dropdown opens, initialize highlight to current volume and fit to viewport
+    // When dropdown opens, initialize highlight to current volume and fit to viewport.
     $effect(() => {
         if (isOpen) {
-            const currentIdx = allVolumes.findIndex((v) => shouldShowCheckmark(v, containingVolumeId))
-            highlightedIndex = currentIdx >= 0 ? currentIdx : 0
-            void fitDropdownToViewport()
+            // Init ONCE on open. Read the volume list untracked: otherwise a later `volumes-changed`
+            // refresh (for example right after a favorite reorder) re-runs this effect and resets the
+            // highlight to the current volume, stealing it from the just-moved favorite.
+            untrack(() => {
+                const currentIdx = allVolumes.findIndex((v) => shouldShowCheckmark(v, containingVolumeId))
+                highlightedIndex = currentIdx >= 0 ? currentIdx : 0
+                void fitDropdownToViewport()
+            })
         } else {
             highlightedIndex = -1
             keyboardMode.reset()
@@ -292,16 +297,13 @@
                 const delta = e.key === 'ArrowUp' ? -1 : 1
                 void moveHighlightedFavorite(highlighted, delta).then((newFavIndex) => {
                     if (newFavIndex === null) return
-                    // Follow the moved favorite so repeated Alt+Down keeps moving the same item.
-                    void tick().then(() => {
-                        const movedIdx = allVolumes.findIndex(
-                            (v) => v.category === 'favorite' && v.id === highlighted.id,
-                        )
-                        if (movedIdx >= 0) {
-                            highlightedIndex = movedIdx
-                            enterKeyboardMode()
-                        }
-                    })
+                    // Favorites occupy the first slots of `allVolumes` in order, so the moved
+                    // favorite's new favorites index IS its new list index. Set it directly (no
+                    // findIndex against a list that may not have refreshed from `volumes-changed`
+                    // yet), so repeated Alt+Down keeps moving the same item instead of jumping to the
+                    // first volume. The open-effect's `untrack` keeps the refresh from resetting it.
+                    highlightedIndex = newFavIndex
+                    enterKeyboardMode()
                 })
                 return true
             }
@@ -636,8 +638,12 @@
         }
         const from = favorites.findIndex((f) => f.id === grabbed.id)
         if (from < 0) return
-        const target = pointerReorderTarget(favoriteRowMidpoints(), e.clientY, from)
-        dragOverIndex = target ?? from
+        // Drive the cue off the RAW insertion slot (the visual gap), not the move-target: dropping at
+        // slot `from` or `from + 1` leaves the item in place, so hide the cue then (matches when the
+        // drop's `pointerReorderTarget` returns null). Using the move-target here put the line one row
+        // too high on downward drags.
+        const slot = pointerInsertionSlot(favoriteRowMidpoints(), e.clientY)
+        dragOverIndex = slot === from || slot === from + 1 ? null : slot
     }
 
     function handleFavoriteMouseUp(e: MouseEvent) {
@@ -855,6 +861,10 @@
                         class:favorite-item={isFavorite}
                         class:is-dragging={isFavorite && draggingFavoriteId === volume.id}
                         class:is-drag-over={isFavorite && dragOverIndex === favIndex && draggingFavoriteId !== volume.id}
+                        class:is-drag-over-end={isFavorite &&
+                            draggingFavoriteId !== volume.id &&
+                            dragOverIndex === favorites.length &&
+                            favIndex === favorites.length - 1}
                         class:is-under-cursor={shouldShowCheckmark(volume, containingVolumeId)}
                         class:is-focused-and-under-cursor={allVolumes.indexOf(volume) === highlightedIndex && !submenu.volumeId}
                         class:is-restricted={isRestricted(volume.path)}
@@ -1276,6 +1286,12 @@
         box-shadow: inset 0 2px 0 0 var(--color-accent);
     }
 
+    /* Drop at the very end of the list: bottom border on the last favorite. */
+    /*noinspection CssUnusedSymbol*/
+    .favorite-item.is-drag-over-end {
+        box-shadow: inset 0 -2px 0 0 var(--color-accent);
+    }
+
     .favorite-rename-input {
         flex: 1;
         min-width: 0;

apps/desktop/src/lib/file-explorer/navigation/favorites-reorder.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { moveItem, clampedReorderTarget, pointerReorderTarget } from './favorites-reorder'
+import { moveItem, clampedReorderTarget, pointerReorderTarget, pointerInsertionSlot } from './favorites-reorder'
 
 describe('moveItem', () => {
   it('moves an item later in the list, shifting the rest', () => {
@@ -75,3 +75,18 @@ describe('pointerReorderTarget', () => {
     expect(pointerReorderTarget(midpoints, 50, 9)).toBeNull()
   })
 })
+
+describe('pointerInsertionSlot', () => {
+  // Four rows, 20px tall, stacked from y=0: midpoints at 10, 30, 50, 70.
+  const midpoints = [10, 30, 50, 70]
+
+  it('returns the gap index for the drop-line cue (NOT adjusted for removal)', () => {
+    // Above every midpoint → insert before row 0.
+    expect(pointerInsertionSlot(midpoints, 5)).toBe(0)
+    // Between rows 2 and 3 (below midpoints 10/30/50, above 70) → slot 3, the gap above row 3.
+    // This is the case that was one row too high when the cue reused the move-target.
+    expect(pointerInsertionSlot(midpoints, 60)).toBe(3)
+    // Below every midpoint → slot 4 (past the last row, the bottom-edge cue).
+    expect(pointerInsertionSlot(midpoints, 999)).toBe(4)
+  })
+})

apps/desktop/src/lib/file-explorer/navigation/favorites-reorder.ts

@@ -42,14 +42,25 @@ export function clampedReorderTarget(from: number, delta: number, length: number
  */
 export function pointerReorderTarget(midpoints: readonly number[], pointerY: number, from: number): number | null {
   if (from < 0 || from >= midpoints.length) return null
-  // Number of rows whose midpoint is above the pointer = the insertion slot.
-  let slot = 0
-  for (const mid of midpoints) {
-    if (pointerY > mid) slot++
-  }
+  const slot = pointerInsertionSlot(midpoints, pointerY)
   // `slot` is an insertion index into the full list (0..length). Clamp to a valid move target and
   // account for the grabbed item being removed first: a slot past `from` shifts down by one.
   const target = slot > from ? slot - 1 : slot
   const clamped = Math.max(0, Math.min(midpoints.length - 1, target))
   return clamped === from ? null : clamped
 }
+
+/**
+ * The raw insertion slot for the drop-line CUE: how many rows the pointer sits below, i.e. the gap
+ * index in `0..length` where the grabbed item would be inserted. Unlike `pointerReorderTarget`, this
+ * is NOT adjusted for the grabbed item being removed first, so it maps directly to a visual gap (slot
+ * `k` = the line above row `k`; slot `length` = below the last row). Keeping the cue on the raw slot
+ * is why a downward drag highlights the correct gap instead of one row too high.
+ */
+export function pointerInsertionSlot(midpoints: readonly number[], pointerY: number): number {
+  let slot = 0
+  for (const mid of midpoints) {
+    if (pointerY > mid) slot++
+  }
+  return slot
+}

apps/desktop/src/routes/(main)/+page.svelte

@@ -127,9 +127,9 @@
         }
     }
 
-    /** Check if key event matches ⌘D (debug window, dev only) */
+    /** Check if key event matches ⌘⇧D (debug window, dev only) */
     function isDebugWindowShortcut(e: KeyboardEvent): boolean {
-        return import.meta.env.DEV && e.metaKey && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'd'
+        return import.meta.env.DEV && e.metaKey && e.shiftKey && !e.altKey && e.key.toLowerCase() === 'd'
     }
 
     /** Check if key event should be suppressed (Cmd+A, Cmd+Opt+I in prod) */