Fix category dropdown showing ID and sort alphabetically

SelectValue now renders the category name instead of the raw ID.
Categories are sorted alphabetically when fetched.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/TransactionModal.tsx

@@ -47,7 +47,10 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
   const [error, setError] = useState('');
 
   useEffect(() => {
-    api.get('/categories/').then((r) => setCategories(r.data));
+    api.get('/categories/').then((r) => {
+      const sorted = [...r.data].sort((a: Category, b: Category) => a.name.localeCompare(b.name));
+      setCategories(sorted);
+    });
   }, []);
 
   useEffect(() => {
@@ -178,7 +181,11 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
                 onValueChange={(v) => setForm({ ...form, category_id: v === 'auto' ? '' : v })}
               >
                 <SelectTrigger className="w-full">
-                  <SelectValue />
+                  <SelectValue>
+                    {form.category_id
+                      ? categories.find((c) => c.id === Number(form.category_id))?.name ?? form.category_id
+                      : 'Auto-detect'}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="auto">Auto-detect</SelectItem>