feat(finance): Phase 4 — Tags

- tags table: name, color; transaction_tags junction table
- GET/POST /api/tags; DELETE /api/tags/:id
- POST/DELETE /api/transactions/:id/tags for per-transaction tagging
- Bulk tag/untag via /api/transactions/bulk (action: tag/untag)
- Tags returned inline with transaction list via LATERAL join
- Tag filter on Transactions page
- Bulk "Tag as..." in bulk action bar
- Tag pills + "+" picker on each transaction row
- /tags page: create with color picker, list with counts, delete

src/components/tag-picker.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useTags, useAddTransactionTag, useRemoveTransactionTag } from "@/lib/hooks";
+import type { TagRow } from "@/lib/queries";
+
+interface Props {
+  transactionId: number;
+  currentTags: TagRow[];
+}
+
+export function TagPicker({ transactionId, currentTags }: Props) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const { data: allTags } = useTags();
+  const addTag = useAddTransactionTag();
+  const removeTag = useRemoveTransactionTag();
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const currentIds = new Set(currentTags.map((t) => t.id));
+
+  const toggle = (tag: TagRow) => {
+    if (currentIds.has(tag.id)) {
+      removeTag.mutate({ transactionId, tagId: tag.id });
+    } else {
+      addTag.mutate({ transactionId, tagId: tag.id });
+    }
+  };
+
+  return (
+    <div ref={ref} className="relative inline-block">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="text-zinc-600 hover:text-zinc-300 transition-colors text-xs px-1"
+        title="Add tag"
+      >
+        +
+      </button>
+      {open && (
+        <div className="absolute right-0 top-full mt-1 z-50 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl w-44 py-1">
+          {!allTags?.length ? (
+            <p className="px-3 py-2 text-xs text-zinc-500">No tags yet — create on Tags page</p>
+          ) : (
+            allTags.map((tag) => {
+              const active = currentIds.has(tag.id);
+              return (
+                <button
+                  key={tag.id}
+                  onClick={() => toggle(tag)}
+                  className="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-zinc-800 transition-colors"
+                >
+                  <span
+                    className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: tag.color }}
+                  />
+                  <span className={active ? "text-white" : "text-zinc-400"}>{tag.name}</span>
+                  {active && <span className="ml-auto text-zinc-500">✓</span>}
+                </button>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}