Add drag-drop and keyboard link ordering

frontend/src/app.tsx

@@ -84,6 +84,14 @@ export default function App() {
               showToast('Link deleted.');
               await refresh();
             }}
+            onReorder={async (items) => {
+              await api.request('/api/links/order', {
+                method: 'PATCH',
+                body: JSON.stringify({ items: items.map((item, index) => ({ id: item.id, sort_order: index })) }),
+              });
+              showToast('Order saved.');
+              await refresh();
+            }}
             showToast={showToast}
           />
         </div>
@@ -311,11 +319,13 @@ function AdminPage({
   links,
   onSave,
   onDelete,
+  onReorder,
   showToast,
 }: {
   links: LinkItem[];
   onSave: (payload: LinkForm, file?: File | null, editingId?: number) => Promise<void>;
   onDelete: (id: number) => Promise<void>;
+  onReorder: (items: LinkItem[]) => Promise<void>;
   showToast: (message: string, tone?: 'success' | 'error') => void;
 }) {
   const [form, setForm] = useState<LinkForm>(emptyForm());
@@ -323,6 +333,12 @@ function AdminPage({
   const [editingId, setEditingId] = useState<number | null>(null);
   const [restoreText, setRestoreText] = useState('');
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [orderedLinks, setOrderedLinks] = useState<LinkItem[]>(links);
+  const [draggingId, setDraggingId] = useState<number | null>(null);
+
+  useEffect(() => {
+    setOrderedLinks(links);
+  }, [links]);
 
   const startEdit = (link: LinkItem) => {
     setEditingId(link.id);
@@ -343,6 +359,30 @@ function AdminPage({
     setForm(emptyForm());
   };
 
+  const moveBy = async (id: number, delta: number) => {
+    const index = orderedLinks.findIndex((link) => link.id === id);
+    const nextIndex = index + delta;
+    if (index < 0 || nextIndex < 0 || nextIndex >= orderedLinks.length) return;
+    const next = [...orderedLinks];
+    const [item] = next.splice(index, 1);
+    next.splice(nextIndex, 0, item);
+    setOrderedLinks(next);
+    await onReorder(next);
+  };
+
+  const handleDropOn = async (targetId: number) => {
+    if (draggingId === null || draggingId === targetId) return;
+    const from = orderedLinks.findIndex((link) => link.id === draggingId);
+    const to = orderedLinks.findIndex((link) => link.id === targetId);
+    if (from < 0 || to < 0) return;
+    const next = [...orderedLinks];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    setOrderedLinks(next);
+    setDraggingId(null);
+    await onReorder(next);
+  };
+
   return (
     <div className="mt-4 grid gap-4 lg:grid-cols-[320px_1fr]">
       <div className="space-y-4">
@@ -445,13 +485,24 @@ function AdminPage({
 
       <div className="panel">
         <ul className="admin-list">
-          {links.map((link) => (
-            <li key={link.id} className="admin-row">
+          {orderedLinks.map((link, index) => (
+            <li
+              key={link.id}
+              className="admin-row"
+              draggable
+              onDragStart={() => setDraggingId(link.id)}
+              onDragOver={(event) => event.preventDefault()}
+              onDrop={async () => {
+                await handleDropOn(link.id);
+              }}
+            >
               <div className="min-w-0">
                 <div className="truncate text-sm text-slate-100">{link.name}</div>
                 <div className="truncate text-xs text-slate-500">{link.category || 'General'} | {link.enabled ? 'enabled' : 'disabled'}</div>
               </div>
               <div className="flex gap-2">
+                <button type="button" className="btn-subtle" onClick={() => moveBy(link.id, -1)} disabled={index === 0}>Up</button>
+                <button type="button" className="btn-subtle" onClick={() => moveBy(link.id, 1)} disabled={index === orderedLinks.length - 1}>Down</button>
                 <button type="button" className="btn-subtle" onClick={() => startEdit(link)}>Edit</button>
                 <button type="button" className="btn-subtle" onClick={() => onDelete(link.id)}>Delete</button>
               </div>