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
This commit is contained in:
Jack Levy
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user