feat: add drag-to-reorder plugin icons in sidebar

Use @dnd-kit/core and @dnd-kit/sortable to support drag-and-drop
reordering of plugin icons in SideNav. Long-press (300ms delay) to
initiate drag; dropping fires onReorder with the new ordered plugin IDs.

Author: hearsilent

src/App.tsx

@@ -236,6 +236,7 @@ function App() {
       selectedPlugin={selectedPlugin}
       onPluginContextAction={handlePluginContextAction}
       isPluginRefreshAvailable={isPluginRefreshAvailable}
+      onNavReorder={handleReorder}
       appContentProps={{
         onRetryPlugin: handleRetryPlugin,
         onReorder: handleReorder,

src/components/app/app-shell.tsx

@@ -20,6 +20,7 @@ type AppShellProps = {
   selectedPlugin: DisplayPluginState | null
   onPluginContextAction: (pluginId: string, action: PluginContextAction) => void
   isPluginRefreshAvailable: (pluginId: string) => boolean
+  onNavReorder: (orderedIds: string[]) => void
   appContentProps: AppContentActionProps
 }
 
@@ -32,6 +33,7 @@ export function AppShell({
   selectedPlugin,
   onPluginContextAction,
   isPluginRefreshAvailable,
+  onNavReorder,
   appContentProps,
 }: AppShellProps) {
   const {
@@ -78,6 +80,7 @@ export function AppShell({
             plugins={navPlugins}
             onPluginContextAction={onPluginContextAction}
             isPluginRefreshAvailable={isPluginRefreshAvailable}
+            onReorder={onNavReorder}
           />
           <div className="flex-1 flex flex-col px-3 pt-2 pb-1.5 min-w-0 bg-card dark:bg-muted/50">
             <div className="relative flex-1 min-h-0">

src/components/side-nav.tsx

@@ -3,6 +3,21 @@ import { CircleHelp, Settings } from "lucide-react"
 import { openUrl } from "@tauri-apps/plugin-opener"
 import { invoke } from "@tauri-apps/api/core"
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu"
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core"
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
 
 function GaugeIcon({ className }: { className?: string }) {
   return (
@@ -32,6 +47,7 @@ interface SideNavProps {
   plugins: NavPlugin[]
   onPluginContextAction?: (pluginId: string, action: PluginContextAction) => void
   isPluginRefreshAvailable?: (pluginId: string) => boolean
+  onReorder?: (orderedIds: string[]) => void
 }
 
 interface NavButtonProps {
@@ -70,15 +86,90 @@ function getIconColor(brandColor: string | undefined, isDark: boolean): string {
   return brandColor
 }
 
+interface SortableNavPluginProps {
+  plugin: NavPlugin
+  isActive: boolean
+  isDark: boolean
+  onClick: () => void
+  onContextMenu: (e: React.MouseEvent) => void
+}
+
+function SortableNavPlugin({ plugin, isActive, isDark, onClick, onContextMenu }: SortableNavPluginProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: plugin.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : undefined,
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <NavButton
+        isActive={isActive}
+        onClick={onClick}
+        onContextMenu={onContextMenu}
+        aria-label={plugin.name}
+      >
+        <span
+          role="img"
+          aria-label={plugin.name}
+          className="size-6 inline-block"
+          style={{
+            backgroundColor: getIconColor(plugin.brandColor, isDark),
+            WebkitMaskImage: `url(${plugin.iconUrl})`,
+            WebkitMaskSize: "contain",
+            WebkitMaskRepeat: "no-repeat",
+            WebkitMaskPosition: "center",
+            maskImage: `url(${plugin.iconUrl})`,
+            maskSize: "contain",
+            maskRepeat: "no-repeat",
+            maskPosition: "center",
+          }}
+        />
+      </NavButton>
+    </div>
+  )
+}
+
 export function SideNav({
   activeView,
   onViewChange,
   plugins,
   onPluginContextAction,
   isPluginRefreshAvailable,
+  onReorder,
 }: SideNavProps) {
   const isDark = useDarkMode()
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { delay: 300, tolerance: 5 },
+    })
+  )
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      if (!onReorder) return
+      const { active, over } = event
+      if (over && active.id !== over.id) {
+        const oldIndex = plugins.findIndex((p) => p.id === active.id)
+        const newIndex = plugins.findIndex((p) => p.id === over.id)
+        if (oldIndex === -1 || newIndex === -1) return
+        const next = arrayMove(plugins, oldIndex, newIndex)
+        onReorder(next.map((p) => p.id))
+      }
+    },
+    [onReorder, plugins]
+  )
+
   const handlePluginContextMenu = useCallback(
     (e: React.MouseEvent, pluginId: string) => {
       e.preventDefault()
@@ -135,32 +226,27 @@ export function SideNav({
       </NavButton>
 
       {/* Plugin icons */}
-      {plugins.map((plugin) => (
-        <NavButton
-          key={plugin.id}
-          isActive={activeView === plugin.id}
-          onClick={() => onViewChange(plugin.id)}
-          onContextMenu={(e) => handlePluginContextMenu(e, plugin.id)}
-          aria-label={plugin.name}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={plugins.map((p) => p.id)}
+          strategy={verticalListSortingStrategy}
         >
-          <span
-            role="img"
-            aria-label={plugin.name}
-            className="size-6 inline-block"
-            style={{
-              backgroundColor: getIconColor(plugin.brandColor, isDark),
-              WebkitMaskImage: `url(${plugin.iconUrl})`,
-              WebkitMaskSize: "contain",
-              WebkitMaskRepeat: "no-repeat",
-              WebkitMaskPosition: "center",
-              maskImage: `url(${plugin.iconUrl})`,
-              maskSize: "contain",
-              maskRepeat: "no-repeat",
-              maskPosition: "center",
-            }}
-          />
-        </NavButton>
-      ))}
+          {plugins.map((plugin) => (
+            <SortableNavPlugin
+              key={plugin.id}
+              plugin={plugin}
+              isActive={activeView === plugin.id}
+              isDark={isDark}
+              onClick={() => onViewChange(plugin.id)}
+              onContextMenu={(e) => handlePluginContextMenu(e, plugin.id)}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
 
       {/* Spacer */}
       <div className="flex-1" />