feat: drag-to-reorder snippets in Settings

[StanK23]

Summary

• Add reorderSnippets(fromIndex, toIndex) store action using splice-remove + insert pattern
• Add HTML5 drag-and-drop to snippet rows in SettingsPanel with drag handle, opacity feedback, and accent highlight on drop target
• Follows same DnD pattern as workspace tab reorder in TabBar

Test plan

• Open Settings > Commands with 3+ snippets
• Drag a snippet by the grip handle — verify opacity drops on source, accent highlight on target
• Drop on a different position — verify order persists after closing/reopening Settings
• Verify editing and deleting still work after reorder
• Verify snippet dropdown in pane header reflects new order

🤖 Generated with Claude Code

[StanK23]

Automated Review — Findings

Summary: 3 files reviewed, 8 agents ran (code quality, security, simplification, DRY/reuse, comments, types, frontend UI, TypeScript)

Must Fix (4 items)

• store/index.ts:922 — [6 agents] Add console.warn for out-of-range indices (inconsistent with reorderWorkspaceTabs)
• SettingsPanel.tsx:224 — [frontend-ui] Drag handle not keyboard-accessible (needs role="button", tabIndex, key handlers)
• SettingsPanel.tsx:174 — [frontend-ui] Missing ARIA aria-roledescription on draggable rows
• SettingsPanel.tsx:174 — [frontend-ui] No aria-live announcement after reorder

Suggestions (8 items)

• store + SettingsPanel + TabBar — [5 agents] Extract shared useDragReorder hook + reorderArray utility (follow-up)
• store/index.test.ts — [code-reviewer, dry-reuse] Add unit tests for reorderSnippets
• SettingsPanel.tsx:143 — [3 agents] Add e.dataTransfer.setData() call (Firefox compat)
• SettingsPanel.tsx:177 — [frontend-ui] Hide drag handle during edit mode
• SettingsPanel.tsx:166 — [frontend-ui] Hide drag handle when single snippet
• store/index.ts:926 — [code-simplifier, typescript-pro] Remove unreachable if (!moved) return guard
• SettingsPanel.tsx:182 — [code-simplifier] Extract drag classes into local variable
• SettingsPanel.tsx:143 — [typescript-pro] Align handleDragStart signature with TabBar

Nitpicks (3 items)

• SettingsPanel.tsx:228 — Braille char may not render on all platforms
• SettingsPanel.tsx:182 — className concat could use clsx
• store/index.ts:254 — JSDoc could clarify post-removal indexing

Review ran: code-reviewer, security-auditor, code-simplifier, dry-reuse, comment-analyzer, type-design-analyzer, frontend-ui, typescript-pro

[StanK23]

Review Fixes Applied

Fixed:

• store/index.ts:922 — Added console.warn on out-of-range indices + removed unreachable dead-code guard
• SettingsPanel.tsx:251 — Drag handle is now a <button> with tabIndex for keyboard focus
• SettingsPanel.tsx:255 — Added onKeyDown with Alt+ArrowUp/Down for keyboard reorder
• SettingsPanel.tsx:240 — Added aria-roledescription="reorderable snippet" on rows
• SettingsPanel.tsx:295 — Added aria-live="polite" region announcing position changes
• SettingsPanel.tsx:253 — aria-label includes position info ("item N of M, use Alt+Arrow keys")
• SettingsPanel.tsx:145 — Added e.dataTransfer.setData('text/plain', '') for Firefox compat
• SettingsPanel.tsx:250 — Drag handle hidden during edit mode (shows empty spacer)
• SettingsPanel.tsx:250 — Drag handle hidden when only one snippet
• SettingsPanel.tsx:243-245 — Extracted drag classes into named variables for readability
• index.test.ts — Added 5 unit tests for reorderSnippets (forward, backward, no-op, OOB, persist)

Skipped (with reason):

• Extract shared useDragReorder hook — follow-up task, only 2 call sites currently
• Extract shared reorderArray utility — follow-up task, same rationale
• Align handleDragStart signature with TabBar — moot without shared hook extraction
• Braille char portability — U+283F has excellent cross-platform font support
• clsx for className concat — project doesn't use clsx, named variables already address readability
• JSDoc wording — matches reorderWorkspaceTabs exactly, changing both is out of scope

All changes in latest push