feat: v1.0.0 — UX polish, security hardening, code quality

UI/UX: - Bill detail page tab UI (Analysis / Timeline / Votes / Notes) - Topic tag pills on bill detail and listing pages — filtered to known topics, clickable, properly labelled via shared lib/topics.ts - Notes panel always-open in Notes tab; sign-in prompt for guests - Collapsible sidebar with icon-only mode and localStorage persistence - Bills page defaults to has-text filter enabled - Follow mode dropdown transparency fix - Favicon (Landmark icon, blue background) Security: - Fernet encryption for ntfy passwords at rest (app/core/crypto.py) - Separate ENCRYPTION_SECRET_KEY env var; falls back to JWT derivation - ntfy_password no longer returned in GET response — replaced with ntfy_password_set: bool; NotificationSettingsUpdate type for writes - JWT_SECRET_KEY fail-fast on startup if using default placeholder - get_optional_user catches (JWTError, ValueError) only, not Exception Bug fixes & code quality: - Dashboard N+1 topic query replaced with single OR query - notification_utils.py topic follower N+1 replaced with batch query - Note query in bill detail page gated on token (enabled: !!token) - search.py max_length=500 guard against oversized queries - CollectionCreate.validate_name wired up with @field_validator - LLM_RATE_LIMIT_RPM default raised from 10 to 50 Authored by: Jack Levy
2026-03-15 01:10:31 -04:00
parent 4308404cca
commit 9633b4dcb8
24 changed files with 591 additions and 296 deletions
--- a/frontend/components/bills/AIBriefCard.tsx
+++ b/frontend/components/bills/AIBriefCard.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useState } from "react";
-import { AlertTriangle, CheckCircle, Clock, Cpu, ExternalLink, Tag } from "lucide-react";
+import { AlertTriangle, CheckCircle, Clock, Cpu, ExternalLink } from "lucide-react";
 import { BriefSchema, CitedPoint } from "@/lib/types";
 import { formatDate } from "@/lib/utils";

@@ -30,28 +30,32 @@ function CitedItem({ point, icon, govinfo_url, openKey, activeKey, setActiveKey
    <li className="text-sm">
      <div className="flex items-start gap-2">
        <span className="mt-0.5 shrink-0">{icon}</span>
-        <span className="flex-1">{cited ? point.text : point}</span>
-        {cited && point.label === "inference" && (
-          <span
-            title="This point is an analytical interpretation, not a literal statement from the bill text"
-            className="shrink-0 text-[10px] px-1.5 py-0.5 rounded border border-border text-muted-foreground font-sans leading-none"
-          >
-            Inferred
-          </span>
-        )}
-        {cited && (
-          <button
-            onClick={() => setActiveKey(isOpen ? null : openKey)}
-            title={isOpen ? "Hide source" : "View source"}
-            className={`shrink-0 text-xs px-1.5 py-0.5 rounded font-mono transition-colors ${
-              isOpen
-                ? "bg-primary text-primary-foreground"
-                : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
-            }`}
-          >
-            § {point.citation}
-          </button>
-        )}
+        <div className="flex-1 min-w-0 space-y-1">
+          <div className="flex items-start gap-2">
+            <span className="flex-1">{cited ? point.text : point}</span>
+            {cited && point.label === "inference" && (
+              <span
+                title="This point is an analytical interpretation, not a literal statement from the bill text"
+                className="shrink-0 text-[10px] px-1.5 py-0.5 rounded border border-border text-muted-foreground font-sans leading-none mt-0.5"
+              >
+                Inferred
+              </span>
+            )}
+          </div>
+          {cited && (
+            <button
+              onClick={() => setActiveKey(isOpen ? null : openKey)}
+              title={isOpen ? "Hide source" : "View source"}
+              className={`text-left text-xs px-1.5 py-0.5 rounded font-mono leading-snug transition-colors ${
+                isOpen
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
+              }`}
+            >
+              § {point.citation}
+            </button>
+          )}
+        </div>
      </div>
      {cited && isOpen && (
        <div className="mt-2 ml-5 rounded-md border border-border bg-muted/40 p-3 space-y-2">
@@ -165,19 +169,6 @@ export function AIBriefCard({ brief }: AIBriefCardProps) {
        </div>
      )}

-      {brief.topic_tags && brief.topic_tags.length > 0 && (
-        <div className="flex items-center gap-2 pt-1 border-t border-border flex-wrap">
-          <Tag className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
-          {brief.topic_tags.map((tag) => (
-            <span
-              key={tag}
-              className="text-xs px-2 py-1 bg-accent text-accent-foreground rounded-full"
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
-      )}
    </div>
  );
 }
--- a/frontend/components/bills/NotesPanel.tsx
+++ b/frontend/components/bills/NotesPanel.tsx
@@ -2,7 +2,7 @@

 import { useState, useEffect, useRef } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { StickyNote, Pin, PinOff, Trash2, ChevronDown, ChevronUp, Save } from "lucide-react";
+import { Pin, PinOff, Trash2, Save } from "lucide-react";
 import { notesAPI } from "@/lib/api";
 import { useAuthStore } from "@/stores/authStore";

@@ -23,7 +23,6 @@ export function NotesPanel({ billId }: NotesPanelProps) {
    throwOnError: false,
  });

-  const [open, setOpen] = useState(false);
  const [content, setContent] = useState("");
  const [pinned, setPinned] = useState(false);
  const [saved, setSaved] = useState(false);
@@ -43,7 +42,7 @@ export function NotesPanel({ billId }: NotesPanelProps) {
    if (!el) return;
    el.style.height = "auto";
    el.style.height = `${el.scrollHeight}px`;
-  }, [content, open]);
+  }, [content]);

  const upsert = useMutation({
    mutationFn: () => notesAPI.upsert(billId, content, pinned),
@@ -60,12 +59,14 @@ export function NotesPanel({ billId }: NotesPanelProps) {
      qc.removeQueries({ queryKey });
      setContent("");
      setPinned(false);
-      setOpen(false);
    },
  });

-  // Don't render for guests
-  if (!token) return null;
+  if (!token) return (
+    <div className="bg-card border border-border rounded-lg p-6 text-center">
+      <p className="text-sm text-muted-foreground">Sign in to add private notes.</p>
+    </div>
+  );
  if (isLoading) return null;

  const hasNote = !!note;
@@ -74,78 +75,56 @@ export function NotesPanel({ billId }: NotesPanelProps) {
    : content.trim().length > 0;

  return (
-    <div className="bg-card border border-border rounded-lg overflow-hidden">
-      {/* Header / toggle */}
-      <button
-        onClick={() => setOpen((v) => !v)}
-        className="w-full flex items-center justify-between px-4 py-3 text-sm hover:bg-accent transition-colors"
-      >
-        <span className="flex items-center gap-2 font-medium">
-          <StickyNote className="w-4 h-4 text-muted-foreground" />
-          My Note
+    <div className="bg-card border border-border rounded-lg p-4 space-y-3">
+      <textarea
+        ref={textareaRef}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        placeholder="Add a private note about this bill…"
+        rows={3}
+        className="w-full text-sm bg-background border border-border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary resize-none overflow-hidden"
+      />
+
+      <div className="flex items-center justify-between gap-3">
+        {/* Left: pin toggle + delete */}
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setPinned((v) => !v)}
+            title={pinned ? "Unpin note" : "Pin above tabs"}
+            className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border transition-colors ${
+              pinned
+                ? "border-primary text-primary bg-primary/10"
+                : "border-border text-muted-foreground hover:text-foreground hover:bg-accent"
+            }`}
+          >
+            {pinned ? <Pin className="w-3 h-3" /> : <PinOff className="w-3 h-3" />}
+            {pinned ? "Pinned" : "Pin"}
+          </button>
+
          {hasNote && (
-            <span className="flex items-center gap-1 text-xs text-muted-foreground font-normal">
-              {note.pinned && <Pin className="w-3 h-3" />}
-              {new Date(note.updated_at).toLocaleDateString()}
-            </span>
-          )}
-        </span>
-        {open ? <ChevronUp className="w-4 h-4 text-muted-foreground" /> : <ChevronDown className="w-4 h-4 text-muted-foreground" />}
-      </button>
-
-      {open && (
-        <div className="px-4 pb-4 space-y-3 border-t border-border pt-3">
-          <textarea
-            ref={textareaRef}
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            placeholder="Add a private note about this bill…"
-            rows={3}
-            className="w-full text-sm bg-background border border-border rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary resize-none overflow-hidden"
-          />
-
-          <div className="flex items-center justify-between gap-3">
-            {/* Left: pin toggle + delete */}
-            <div className="flex items-center gap-3">
-              <button
-                onClick={() => setPinned((v) => !v)}
-                title={pinned ? "Unpin note" : "Pin to top of page"}
-                className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border transition-colors ${
-                  pinned
-                    ? "border-primary text-primary bg-primary/10"
-                    : "border-border text-muted-foreground hover:text-foreground hover:bg-accent"
-                }`}
-              >
-                {pinned ? <Pin className="w-3 h-3" /> : <PinOff className="w-3 h-3" />}
-                {pinned ? "Pinned" : "Pin"}
-              </button>
-
-              {hasNote && (
-                <button
-                  onClick={() => remove.mutate()}
-                  disabled={remove.isPending}
-                  title="Delete note"
-                  className="p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-accent transition-colors"
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
-                </button>
-              )}
-            </div>
-
-            {/* Right: save */}
            <button
-              onClick={() => upsert.mutate()}
-              disabled={!content.trim() || upsert.isPending || (!isDirty && !saved)}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
+              onClick={() => remove.mutate()}
+              disabled={remove.isPending}
+              title="Delete note"
+              className="p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-accent transition-colors"
            >
-              <Save className="w-3 h-3" />
-              {saved ? "Saved!" : upsert.isPending ? "Saving…" : "Save"}
+              <Trash2 className="w-3.5 h-3.5" />
            </button>
-          </div>
-
-          <p className="text-xs text-muted-foreground">Private — only visible to you.</p>
+          )}
        </div>
-      )}
+
+        {/* Right: save */}
+        <button
+          onClick={() => upsert.mutate()}
+          disabled={!content.trim() || upsert.isPending || (!isDirty && !saved)}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
+        >
+          <Save className="w-3 h-3" />
+          {saved ? "Saved!" : upsert.isPending ? "Saving…" : "Save"}
+        </button>
+      </div>
+
+      <p className="text-xs text-muted-foreground">Private — only visible to you.</p>
    </div>
  );
 }
--- a/frontend/components/bills/VotePanel.tsx
+++ b/frontend/components/bills/VotePanel.tsx
@@ -9,9 +9,10 @@ import type { BillVote, MemberVotePosition } from "@/lib/types";

 interface VotePanelProps {
  billId: string;
+  alwaysRender?: boolean;
 }

-export function VotePanel({ billId }: VotePanelProps) {
+export function VotePanel({ billId, alwaysRender = false }: VotePanelProps) {
  const [expanded, setExpanded] = useState(true);

  const { data: votes, isLoading } = useQuery({
@@ -33,7 +34,16 @@ export function VotePanel({ billId }: VotePanelProps) {
      .map((f) => f.follow_value)
  );

-  if (isLoading || !votes || votes.length === 0) return null;
+  if (isLoading || !votes || votes.length === 0) {
+    if (!alwaysRender) return null;
+    return (
+      <div className="bg-card border border-border rounded-lg p-6 text-center">
+        <p className="text-sm text-muted-foreground">
+          {isLoading ? "Checking for roll-call votes…" : "No roll-call votes have been recorded for this bill."}
+        </p>
+      </div>
+    );
+  }

  return (
    <div className="bg-card border border-border rounded-lg overflow-hidden">
--- a/frontend/components/shared/BillCard.tsx
+++ b/frontend/components/shared/BillCard.tsx
@@ -3,6 +3,7 @@ import { TrendingUp, Calendar, User, FileText, FileClock, FileX, Tag } from "luc
 import { Bill } from "@/lib/types";
 import { billLabel, chamberBadgeColor, cn, formatDate, partyBadgeColor, trendColor } from "@/lib/utils";
 import { FollowButton } from "./FollowButton";
+import { TOPIC_LABEL, TOPIC_TAGS } from "@/lib/topics";

 interface BillCardProps {
  bill: Bill;
@@ -12,7 +13,7 @@ interface BillCardProps {
 export function BillCard({ bill, compact = false }: BillCardProps) {
  const label = billLabel(bill.bill_type, bill.bill_number);
  const score = bill.latest_trend?.composite_score;
-  const tags = bill.latest_brief?.topic_tags?.slice(0, 3) || [];
+  const tags = (bill.latest_brief?.topic_tags || []).filter((t) => TOPIC_TAGS.has(t)).slice(0, 3);

  return (
    <div className="bg-card border border-border rounded-lg p-4 hover:border-primary/30 transition-colors">
@@ -35,7 +36,7 @@ export function BillCard({ bill, compact = false }: BillCardProps) {
                className="inline-flex items-center gap-0.5 text-xs px-1.5 py-0.5 rounded-full bg-accent text-accent-foreground hover:bg-accent/70 transition-colors"
              >
                <Tag className="w-2.5 h-2.5" />
-                {tag}
+                {TOPIC_LABEL[tag] ?? tag}
              </Link>
            ))}
          </div>
--- a/frontend/components/shared/FollowButton.tsx
+++ b/frontend/components/shared/FollowButton.tsx
@@ -153,7 +153,7 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
        </button>

        {open && (
-          <div className="absolute right-0 mt-1 w-64 bg-popover border border-border rounded-md shadow-lg z-50 py-1">
+          <div className="absolute right-0 mt-1 w-64 bg-card border border-border rounded-md shadow-lg z-50 py-1">
            {otherModes.map((mode) => {
              const { label: optLabel, icon: OptIcon } = MODES[mode];
              return (
@@ -161,7 +161,7 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
                  key={mode}
                  onClick={() => switchMode(mode)}
                  title={modeDescriptions[mode]}
-                  className="w-full text-left px-3 py-2 text-sm hover:bg-accent transition-colors flex flex-col gap-0.5"
+                  className="w-full text-left px-3 py-2 text-sm bg-card hover:bg-accent text-card-foreground transition-colors flex flex-col gap-0.5"
                >
                  <span className="flex items-center gap-1.5 font-medium">
                    <OptIcon className="w-3.5 h-3.5" />
@@ -174,7 +174,7 @@ export function FollowButton({ type, value, label, supportsModes = false }: Foll
            <div className="border-t border-border mt-1 pt-1">
              <button
                onClick={handleUnfollow}
-                className="w-full text-left px-3 py-2 text-sm text-destructive hover:bg-accent transition-colors"
+                className="w-full text-left px-3 py-2 text-sm bg-card hover:bg-accent text-destructive transition-colors"
              >
                Unfollow
              </button>
--- a/frontend/components/shared/Sidebar.tsx
+++ b/frontend/components/shared/Sidebar.tsx
@@ -1,9 +1,12 @@
 "use client";

+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import {
  Bookmark,
+  ChevronLeft,
+  ChevronRight,
  HelpCircle,
  LayoutDashboard,
  FileText,
@@ -42,6 +45,23 @@ export function Sidebar({ onClose }: { onClose?: () => void }) {
  const user = useAuthStore((s) => s.user);
  const token = useAuthStore((s) => s.token);
  const logout = useAuthStore((s) => s.logout);
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Mobile drawer always shows full sidebar
+  const isMobile = !!onClose;
+  const isCollapsed = collapsed && !isMobile;
+
+  useEffect(() => {
+    const saved = localStorage.getItem("sidebar-collapsed");
+    if (saved === "true") setCollapsed(true);
+  }, []);
+
+  function toggleCollapsed() {
+    setCollapsed((v) => {
+      localStorage.setItem("sidebar-collapsed", String(!v));
+      return !v;
+    });
+  }

  function handleLogout() {
    logout();
@@ -50,18 +70,38 @@ export function Sidebar({ onClose }: { onClose?: () => void }) {
  }

  return (
-    <aside className="w-56 shrink-0 border-r border-border bg-card flex flex-col">
-      <div className="p-4 border-b border-border flex items-center gap-2">
-        <Landmark className="w-5 h-5 text-primary" />
-        <span className="font-semibold text-sm flex-1">PocketVeto</span>
-        {onClose && (
-          <button onClick={onClose} className="p-1 rounded-md hover:bg-accent transition-colors" aria-label="Close menu">
-            <X className="w-4 h-4" />
-          </button>
+    <aside
+      className={cn(
+        "shrink-0 border-r border-border bg-card flex flex-col transition-all duration-200",
+        isCollapsed ? "w-14" : "w-56"
+      )}
+    >
+      {/* Header */}
+      <div
+        className={cn(
+          "h-14 border-b border-border flex items-center gap-2 px-4",
+          isCollapsed && "justify-center px-0"
+        )}
+      >
+        <Landmark className="w-5 h-5 text-primary shrink-0" />
+        {!isCollapsed && (
+          <>
+            <span className="font-semibold text-sm flex-1">PocketVeto</span>
+            {onClose && (
+              <button
+                onClick={onClose}
+                className="p-1 rounded-md hover:bg-accent transition-colors"
+                aria-label="Close menu"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            )}
+          </>
        )}
      </div>

-      <nav className="flex-1 p-3 space-y-1">
+      {/* Nav */}
+      <nav className="flex-1 p-2 space-y-0.5">
        {NAV.filter(({ adminOnly, requiresAuth }) => {
          if (adminOnly && !user?.is_admin) return false;
          if (requiresAuth && !token) return false;
@@ -73,52 +113,75 @@ export function Sidebar({ onClose }: { onClose?: () => void }) {
              key={href}
              href={href}
              onClick={onClose}
+              title={isCollapsed ? label : undefined}
              className={cn(
                "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
+                isCollapsed && "justify-center px-0",
                active
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
              )}
            >
              <Icon className="w-4 h-4 shrink-0" />
-              {label}
+              {!isCollapsed && label}
            </Link>
          );
        })}
      </nav>

-      <div className="p-3 border-t border-border space-y-2">
+      {/* Footer */}
+      <div className={cn("p-3 border-t border-border space-y-2", isCollapsed && "p-2")}>
        {token ? (
-          <>
-            {user && (
-              <div className="flex items-center justify-between">
+          user && (
+            <div className={cn("flex items-center justify-between", isCollapsed && "justify-center")}>
+              {!isCollapsed && (
                <span className="text-xs text-muted-foreground truncate max-w-[120px]" title={user.email}>
                  {user.email}
                </span>
-                <button
-                  onClick={handleLogout}
-                  className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent"
-                  title="Sign out"
-                >
-                  <LogOut className="w-3.5 h-3.5" />
-                </button>
-              </div>
-            )}
-          </>
-        ) : (
+              )}
+              <button
+                onClick={handleLogout}
+                className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent"
+                title="Sign out"
+              >
+                <LogOut className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          )
+        ) : !isCollapsed ? (
          <div className="flex flex-col gap-2">
-            <Link href="/register" onClick={onClose} className="w-full px-3 py-1.5 text-sm font-medium text-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
+            <Link
+              href="/register"
+              onClick={onClose}
+              className="w-full px-3 py-1.5 text-sm font-medium text-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
              Register
            </Link>
-            <Link href="/login" onClick={onClose} className="w-full px-3 py-1.5 text-sm font-medium text-center rounded-md border border-border text-foreground hover:bg-accent transition-colors">
+            <Link
+              href="/login"
+              onClick={onClose}
+              className="w-full px-3 py-1.5 text-sm font-medium text-center rounded-md border border-border text-foreground hover:bg-accent transition-colors"
+            >
              Sign in
            </Link>
          </div>
-        )}
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-muted-foreground">Theme</span>
+        ) : null}
+
+        <div className={cn("flex items-center justify-between", isCollapsed && "justify-center")}>
+          {!isCollapsed && <span className="text-xs text-muted-foreground">Theme</span>}
          <ThemeToggle />
        </div>
+
+        {/* Collapse toggle — desktop only */}
+        {!isMobile && (
+          <button
+            onClick={toggleCollapsed}
+            title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+            className="w-full flex items-center justify-center p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+          >
+            {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+          </button>
+        )}
      </div>
    </aside>
  );