feat: accordion sections, search, and filters on following page

- Each section (Bills, Members, Topics) collapses/expands independently,
  open by default
- Search input per section filters by bill label/title, member name,
  or topic string
- Chamber filter for bills, party filter for members — dropdowns only
  appear when more than one value is present in the loaded data
- useQueries batch-fetches bill/member data at page level for filtering;
  shares React Query cache with individual rows so no extra API calls

Authored-By: Jack Levy

frontend/app/following/page.tsx

@@ -1,20 +1,19 @@
 "use client";
 
+import { useState } from "react";
+import { useQueries } from "@tanstack/react-query";
 import Link from "next/link";
-import { Heart, ExternalLink, X } from "lucide-react";
+import { ChevronDown, ChevronRight, ExternalLink, Heart, Search, X } from "lucide-react";
 import { useFollows, useRemoveFollow } from "@/lib/hooks/useFollows";
-import { useBill } from "@/lib/hooks/useBills";
+import { billsAPI, membersAPI } from "@/lib/api";
-import { useMember } from "@/lib/hooks/useMembers";
 import { FollowButton } from "@/components/shared/FollowButton";
 import { billLabel, chamberBadgeColor, cn, formatDate, partyBadgeColor } from "@/lib/utils";
 import type { Follow } from "@/lib/types";
 
-// ── Bill row ────────────────────────────────────────────────────────────────
+// ── Bill row ─────────────────────────────────────────────────────────────────
 
-function BillRow({ follow }: { follow: Follow }) {
+function BillRow({ follow, bill }: { follow: Follow; bill?: ReturnType<typeof billsAPI.get> extends Promise<infer T> ? T : never }) {
-  const { data: bill } = useBill(follow.follow_value);
   const label = bill ? billLabel(bill.bill_type, bill.bill_number) : follow.follow_value;
-
   return (
     <div className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-4">
       <div className="flex-1 min-w-0">
@@ -46,35 +45,27 @@ function BillRow({ follow }: { follow: Follow }) {
   );
 }
 
-// ── Member row ───────────────────────────────────────────────────────────────
+// ── Member row ────────────────────────────────────────────────────────────────
-
-function MemberRow({ follow, onRemove }: { follow: Follow; onRemove: () => void }) {
-  const { data: member } = useMember(follow.follow_value);
 
+function MemberRow({ follow, member, onRemove }: {
+  follow: Follow;
+  member?: ReturnType<typeof membersAPI.get> extends Promise<infer T> ? T : never;
+  onRemove: () => void;
+}) {
   return (
     <div className="bg-card border border-border rounded-lg p-4 flex items-center gap-4">
-      {/* Photo */}
       <div className="shrink-0">
         {member?.photo_url ? (
-          <img
+          <img src={member.photo_url} alt={member.name} className="w-12 h-12 rounded-full object-cover border border-border" />
-            src={member.photo_url}
-            alt={member.name}
-            className="w-12 h-12 rounded-full object-cover border border-border"
-          />
         ) : (
           <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center text-lg font-semibold text-muted-foreground">
             {member ? member.name[0] : "?"}
           </div>
         )}
       </div>
-
-      {/* Info */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 flex-wrap">
-          <Link
+          <Link href={`/members/${follow.follow_value}`} className="text-sm font-semibold hover:text-primary transition-colors">
-            href={`/members/${follow.follow_value}`}
-            className="text-sm font-semibold hover:text-primary transition-colors"
-          >
             {member?.name ?? follow.follow_value}
           </Link>
           {member?.party && (
@@ -86,44 +77,111 @@ function MemberRow({ follow, onRemove }: { follow: Follow; onRemove: () => void
         {(member?.chamber || member?.state || member?.district) && (
           <p className="text-xs text-muted-foreground mt-0.5">
             {[member.chamber, member.state, member.district ? `District ${member.district}` : null]
-              .filter(Boolean)
+              .filter(Boolean).join(" · ")}
-              .join(" · ")}
           </p>
         )}
         {member?.official_url && (
-          <a
+          <a href={member.official_url} target="_blank" rel="noopener noreferrer"
-            href={member.official_url}
+            className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1">
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1"
-          >
             Official site <ExternalLink className="w-3 h-3" />
           </a>
         )}
       </div>
-
+      <button onClick={onRemove} className="text-muted-foreground hover:text-destructive transition-colors p-1 shrink-0" title="Unfollow">
-      {/* Unfollow */}
-      <button
-        onClick={onRemove}
-        className="text-muted-foreground hover:text-destructive transition-colors p-1 shrink-0"
-        title="Unfollow"
-      >
         <X className="w-4 h-4" />
       </button>
     </div>
   );
 }
 
-// ── Page ─────────────────────────────────────────────────────────────────────
+// ── Section accordion wrapper ─────────────────────────────────────────────────
+
+function Section({ title, count, children }: { title: string; count: number; children: React.ReactNode }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <div>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-2 mb-3 group"
+      >
+        {open ? <ChevronDown className="w-4 h-4 text-muted-foreground" /> : <ChevronRight className="w-4 h-4 text-muted-foreground" />}
+        <span className="font-semibold">{title}</span>
+        <span className="text-xs text-muted-foreground font-normal">({count})</span>
+      </button>
+      {open && children}
+    </div>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
 
 export default function FollowingPage() {
   const { data: follows = [], isLoading } = useFollows();
   const remove = useRemoveFollow();
 
+  const [billSearch, setBillSearch] = useState("");
+  const [billChamber, setBillChamber] = useState("");
+  const [memberSearch, setMemberSearch] = useState("");
+  const [memberParty, setMemberParty] = useState("");
+  const [topicSearch, setTopicSearch] = useState("");
+
   const bills = follows.filter((f) => f.follow_type === "bill");
   const members = follows.filter((f) => f.follow_type === "member");
   const topics = follows.filter((f) => f.follow_type === "topic");
 
+  // Batch-fetch bill + member data at page level so filters have access to titles/names.
+  // Uses the same query keys as BillRow/MemberRow — React Query deduplicates, no extra calls.
+  const billQueries = useQueries({
+    queries: bills.map((f) => ({
+      queryKey: ["bill", f.follow_value],
+      queryFn: () => billsAPI.get(f.follow_value),
+      staleTime: 2 * 60 * 1000,
+    })),
+  });
+
+  const memberQueries = useQueries({
+    queries: members.map((f) => ({
+      queryKey: ["member", f.follow_value],
+      queryFn: () => membersAPI.get(f.follow_value),
+      staleTime: 10 * 60 * 1000,
+    })),
+  });
+
+  // Filter bills
+  const filteredBills = bills.filter((f, i) => {
+    const bill = billQueries[i]?.data;
+    if (billChamber && bill?.chamber?.toLowerCase() !== billChamber.toLowerCase()) return false;
+    if (billSearch) {
+      const q = billSearch.toLowerCase();
+      const label = bill ? billLabel(bill.bill_type, bill.bill_number).toLowerCase() : "";
+      const title = (bill?.short_title || bill?.title || "").toLowerCase();
+      const id = f.follow_value.toLowerCase();
+      if (!label.includes(q) && !title.includes(q) && !id.includes(q)) return false;
+    }
+    return true;
+  });
+
+  // Filter members
+  const filteredMembers = members.filter((f, i) => {
+    const member = memberQueries[i]?.data;
+    if (memberParty && member?.party !== memberParty) return false;
+    if (memberSearch) {
+      const q = memberSearch.toLowerCase();
+      const name = (member?.name || f.follow_value).toLowerCase();
+      if (!name.includes(q)) return false;
+    }
+    return true;
+  });
+
+  // Filter topics
+  const filteredTopics = topics.filter((f) =>
+    !topicSearch || f.follow_value.toLowerCase().includes(topicSearch.toLowerCase())
+  );
+
+  // Unique parties and chambers from loaded data for filter dropdowns
+  const loadedChambers = [...new Set(billQueries.map((q) => q.data?.chamber).filter(Boolean))] as string[];
+  const loadedParties = [...new Set(memberQueries.map((q) => q.data?.party).filter(Boolean))] as string[];
+
   if (isLoading) return <div className="text-center py-20 text-muted-foreground">Loading...</div>;
 
   return (
@@ -136,57 +194,137 @@ export default function FollowingPage() {
       </div>
 
       {/* Bills */}
-      <div>
+      <Section title="Bills" count={bills.length}>
-        <h2 className="font-semibold mb-3">Bills ({bills.length})</h2>
+        <div className="space-y-3">
-        {!bills.length ? (
+          {/* Search + filter bar */}
-          <p className="text-sm text-muted-foreground">No bills followed yet.</p>
+          {bills.length > 0 && (
-        ) : (
+            <div className="flex gap-2 flex-wrap">
-          <div className="space-y-2">
+              <div className="relative flex-1 min-w-48">
-            {bills.map((f) => <BillRow key={f.id} follow={f} />)}
+                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
-          </div>
+                <input
-        )}
+                  type="text"
-      </div>
+                  placeholder="Search bills…"
+                  value={billSearch}
+                  onChange={(e) => setBillSearch(e.target.value)}
+                  className="w-full pl-8 pr-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
+                />
+              </div>
+              {loadedChambers.length > 1 && (
+                <select
+                  value={billChamber}
+                  onChange={(e) => setBillChamber(e.target.value)}
+                  className="px-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none"
+                >
+                  <option value="">All Chambers</option>
+                  {loadedChambers.map((c) => <option key={c} value={c}>{c}</option>)}
+                </select>
+              )}
+            </div>
+          )}
+
+          {!bills.length ? (
+            <p className="text-sm text-muted-foreground">No bills followed yet.</p>
+          ) : !filteredBills.length ? (
+            <p className="text-sm text-muted-foreground">No bills match your filters.</p>
+          ) : (
+            filteredBills.map((f, i) => {
+              const originalIndex = bills.indexOf(f);
+              return <BillRow key={f.id} follow={f} bill={billQueries[originalIndex]?.data} />;
+            })
+          )}
+        </div>
+      </Section>
 
       {/* Members */}
-      <div>
+      <Section title="Members" count={members.length}>
-        <h2 className="font-semibold mb-3">Members ({members.length})</h2>
+        <div className="space-y-3">
-        {!members.length ? (
+          {members.length > 0 && (
-          <p className="text-sm text-muted-foreground">No members followed yet.</p>
+            <div className="flex gap-2 flex-wrap">
-        ) : (
+              <div className="relative flex-1 min-w-48">
-          <div className="space-y-2">
+                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
-            {members.map((f) => (
+                <input
-              <MemberRow key={f.id} follow={f} onRemove={() => remove.mutate(f.id)} />
+                  type="text"
-            ))}
+                  placeholder="Search members…"
-          </div>
+                  value={memberSearch}
-        )}
+                  onChange={(e) => setMemberSearch(e.target.value)}
-      </div>
+                  className="w-full pl-8 pr-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
+                />
+              </div>
+              {loadedParties.length > 1 && (
+                <select
+                  value={memberParty}
+                  onChange={(e) => setMemberParty(e.target.value)}
+                  className="px-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none"
+                >
+                  <option value="">All Parties</option>
+                  {loadedParties.map((p) => <option key={p} value={p}>{p}</option>)}
+                </select>
+              )}
+            </div>
+          )}
+
+          {!members.length ? (
+            <p className="text-sm text-muted-foreground">No members followed yet.</p>
+          ) : !filteredMembers.length ? (
+            <p className="text-sm text-muted-foreground">No members match your filters.</p>
+          ) : (
+            filteredMembers.map((f, i) => {
+              const originalIndex = members.indexOf(f);
+              return (
+                <MemberRow
+                  key={f.id}
+                  follow={f}
+                  member={memberQueries[originalIndex]?.data}
+                  onRemove={() => remove.mutate(f.id)}
+                />
+              );
+            })
+          )}
+        </div>
+      </Section>
 
       {/* Topics */}
-      <div>
+      <Section title="Topics" count={topics.length}>
-        <h2 className="font-semibold mb-3">Topics ({topics.length})</h2>
+        <div className="space-y-3">
-        {!topics.length ? (
+          {topics.length > 0 && (
-          <p className="text-sm text-muted-foreground">No topics followed yet.</p>
+            <div className="relative">
-        ) : (
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
-          <div className="space-y-2">
+              <input
-            {topics.map((f) => (
+                type="text"
-              <div key={f.id} className="bg-card border border-border rounded-lg p-3 flex items-center justify-between">
+                placeholder="Search topics…"
-                <Link
+                value={topicSearch}
-                  href={`/bills?topic=${f.follow_value}`}
+                onChange={(e) => setTopicSearch(e.target.value)}
-                  className="text-sm font-medium hover:text-primary transition-colors capitalize"
+                className="w-full pl-8 pr-3 py-1.5 text-sm bg-card border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
-                >
+              />
-                  {f.follow_value.replace(/-/g, " ")}
+            </div>
-                </Link>
+          )}
-                <button
+
-                  onClick={() => remove.mutate(f.id)}
+          {!topics.length ? (
-                  className="text-muted-foreground hover:text-destructive transition-colors p-1"
+            <p className="text-sm text-muted-foreground">No topics followed yet.</p>
-                >
+          ) : !filteredTopics.length ? (
-                  <X className="w-4 h-4" />
+            <p className="text-sm text-muted-foreground">No topics match your search.</p>
-                </button>
+          ) : (
-              </div>
+            <div className="space-y-2">
-            ))}
+              {filteredTopics.map((f) => (
-          </div>
+                <div key={f.id} className="bg-card border border-border rounded-lg p-3 flex items-center justify-between">
-        )}
+                  <Link
-      </div>
+                    href={`/bills?topic=${f.follow_value}`}
+                    className="text-sm font-medium hover:text-primary transition-colors capitalize"
+                  >
+                    {f.follow_value.replace(/-/g, " ")}
+                  </Link>
+                  <button
+                    onClick={() => remove.mutate(f.id)}
+                    className="text-muted-foreground hover:text-destructive transition-colors p-1"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </Section>
     </div>
   );
 }