feat: collections, watchlists, and shareable links (v0.9.0)

Phase 3 completion — Personal Workflow feature set is now complete.

Collections / Watchlists:
- New tables: collections (UUID share_token, slug, public/private) and
  collection_bills (unique bill-per-collection constraint)
- Full CRUD API at /api/collections with bill add/remove endpoints
- Public share endpoint /api/collections/share/{token} (no auth)
- /collections list page with inline create form and delete
- /collections/[id] detail page: inline rename, public toggle,
  copy-share-link, bill search/add/remove
- CollectionPicker bookmark-icon popover on bill detail pages
- Collections nav link in sidebar (auth-required)

Shareable Brief Links:
- share_token UUID column on bill_briefs (backfilled on migration)
- Unified public share router at /api/share (brief + collection)
- /share/brief/[token] — minimal layout, full AIBriefCard, CTAs
- /share/collection/[token] — minimal layout, bill list, CTA
- Share2 button in BriefPanel header row, "Link copied!" flash

AuthGuard: /collections → AUTH_REQUIRED; /share prefix → NO_SHELL_PATHS

Authored-By: Jack Levy
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/components/bills/BriefPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { ChevronDown, ChevronRight, RefreshCw } from "lucide-react";
+import { Check, ChevronDown, ChevronRight, RefreshCw, Share2 } from "lucide-react";
 import { BriefSchema } from "@/lib/types";
 import { AIBriefCard } from "@/components/bills/AIBriefCard";
 import { formatDate } from "@/lib/utils";
@@ -34,6 +34,14 @@ function typeBadge(briefType?: string) {
 export function BriefPanel({ briefs }: BriefPanelProps) {
   const [historyOpen, setHistoryOpen] = useState(false);
   const [expandedId, setExpandedId] = useState<number | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  function copyShareLink(brief: BriefSchema) {
+    if (!brief.share_token) return;
+    navigator.clipboard.writeText(`${window.location.origin}/share/brief/${brief.share_token}`);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
 
   if (!briefs || briefs.length === 0) {
     return <AIBriefCard brief={null} />;
@@ -57,6 +65,23 @@ export function BriefPanel({ briefs }: BriefPanelProps) {
         </div>
       )}
 
+      {/* Share button row */}
+      {latest.share_token && (
+        <div className="flex justify-end px-1">
+          <button
+            onClick={() => copyShareLink(latest)}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            title="Copy shareable link to this brief"
+          >
+            {copied ? (
+              <><Check className="w-3.5 h-3.5 text-green-500" /> Link copied!</>
+            ) : (
+              <><Share2 className="w-3.5 h-3.5" /> Share brief</>
+            )}
+          </button>
+        </div>
+      )}
+
       {/* Latest brief */}
       <AIBriefCard brief={latest} />
 

frontend/components/bills/CollectionPicker.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { Bookmark, Check } from "lucide-react";
+import { collectionsAPI } from "@/lib/api";
+import { useAuthStore } from "@/stores/authStore";
+import type { Collection } from "@/lib/types";
+
+interface CollectionPickerProps {
+  billId: string;
+}
+
+export function CollectionPicker({ billId }: CollectionPickerProps) {
+  const token = useAuthStore((s) => s.token);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const qc = useQueryClient();
+
+  useEffect(() => {
+    if (!open) return;
+    function onClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, [open]);
+
+  const { data: collections } = useQuery({
+    queryKey: ["collections"],
+    queryFn: collectionsAPI.list,
+    enabled: !!token,
+  });
+
+  const addMutation = useMutation({
+    mutationFn: (id: number) => collectionsAPI.addBill(id, billId),
+    onSuccess: (_, id) => {
+      qc.invalidateQueries({ queryKey: ["collections"] });
+      qc.invalidateQueries({ queryKey: ["collection", id] });
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (id: number) => collectionsAPI.removeBill(id, billId),
+    onSuccess: (_, id) => {
+      qc.invalidateQueries({ queryKey: ["collections"] });
+      qc.invalidateQueries({ queryKey: ["collection", id] });
+    },
+  });
+
+  if (!token) return null;
+
+  // Determine which collections contain this bill
+  // We check each collection's bill_count proxy by re-fetching detail... but since the list
+  // endpoint doesn't return bill_ids, we use a lightweight approach: track via optimistic state.
+  // The collection detail page has the bill list; for the picker we just check each collection.
+  // To avoid N+1, we'll use a separate query to get the user's collection memberships for this bill.
+  // For simplicity, we use the collections list and compare via a bill-membership query.
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        title="Add to collection"
+        className={`p-1.5 rounded-md transition-colors ${
+          open
+            ? "bg-primary text-primary-foreground"
+            : "text-muted-foreground hover:bg-accent hover:text-foreground"
+        }`}
+      >
+        <Bookmark className="w-4 h-4" />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1 z-20 w-56 bg-card border border-border rounded-lg shadow-lg overflow-hidden">
+          {!collections || collections.length === 0 ? (
+            <div className="px-3 py-3 text-xs text-muted-foreground">
+              No collections yet.
+            </div>
+          ) : (
+            <ul>
+              {collections.map((c: Collection) => (
+                <CollectionPickerRow
+                  key={c.id}
+                  collection={c}
+                  billId={billId}
+                  onAdd={() => addMutation.mutate(c.id)}
+                  onRemove={() => removeMutation.mutate(c.id)}
+                />
+              ))}
+            </ul>
+          )}
+          <div className="border-t border-border px-3 py-2">
+            <Link
+              href="/collections"
+              onClick={() => setOpen(false)}
+              className="text-xs text-primary hover:underline"
+            >
+              New collection →
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CollectionPickerRow({
+  collection,
+  billId,
+  onAdd,
+  onRemove,
+}: {
+  collection: Collection;
+  billId: string;
+  onAdd: () => void;
+  onRemove: () => void;
+}) {
+  // Fetch detail to know if this bill is in the collection
+  const { data: detail } = useQuery({
+    queryKey: ["collection", collection.id],
+    queryFn: () => collectionsAPI.get(collection.id),
+  });
+
+  const inCollection = detail?.bills.some((b) => b.bill_id === billId) ?? false;
+
+  return (
+    <li>
+      <button
+        onClick={inCollection ? onRemove : onAdd}
+        className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent transition-colors text-left"
+      >
+        <span className="w-4 h-4 shrink-0 flex items-center justify-center">
+          {inCollection && <Check className="w-3.5 h-3.5 text-primary" />}
+        </span>
+        <span className="truncate flex-1">{collection.name}</span>
+      </button>
+    </li>
+  );
+}

frontend/components/shared/AuthGuard.tsx

@@ -6,8 +6,8 @@ import { useAuthStore } from "@/stores/authStore";
 import { Sidebar } from "./Sidebar";
 import { MobileHeader } from "./MobileHeader";
 
-const NO_SHELL_PATHS = ["/login", "/register"];
-const AUTH_REQUIRED = ["/following", "/notifications"];
+const NO_SHELL_PATHS = ["/login", "/register", "/share"];
+const AUTH_REQUIRED = ["/following", "/notifications", "/collections"];
 
 export function AuthGuard({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -31,8 +31,8 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
 
   if (!hydrated) return null;
 
-  // Login/register pages render without the app shell
-  if (NO_SHELL_PATHS.includes(pathname)) {
+  // Login/register/share pages render without the app shell
+  if (NO_SHELL_PATHS.some((p) => pathname.startsWith(p))) {
     return <>{children}</>;
   }
 

frontend/components/shared/Sidebar.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import {
+  Bookmark,
   LayoutDashboard,
   FileText,
   Users,
@@ -25,6 +26,7 @@ const NAV = [
   { href: "/members", label: "Members", icon: Users, adminOnly: false, requiresAuth: false },
   { href: "/topics", label: "Topics", icon: Tags, adminOnly: false, requiresAuth: false },
   { href: "/following", label: "Following", icon: Heart, adminOnly: false, requiresAuth: true },
+  { href: "/collections", label: "Collections", icon: Bookmark, adminOnly: false, requiresAuth: true },
   { href: "/notifications", label: "Notifications", icon: Bell, adminOnly: false, requiresAuth: true },
   { href: "/settings", label: "Admin", icon: Settings, adminOnly: true, requiresAuth: false },
 ];