5b73b60d9e
- User model with email/hashed_password/is_admin/notification_prefs - JWT auth: POST /api/auth/register, /login, /me - First registered user auto-promoted to admin - Migration 0005: users table + user_id FK on follows (clears global follows) - Follows, dashboard, settings, admin endpoints all require authentication - Admin endpoints (settings writes, celery triggers) require is_admin - Frontend: login/register pages, Zustand auth store (localStorage persist) - AuthGuard component gates all app routes, shows app shell only when authed - Sidebar shows user email + logout; Admin nav link visible to admins only - Admin panel (/settings): user list with delete + promote/demote, LLM config, data source settings, and manual celery controls Authored-By: Jack Levy
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import {
|
|
LayoutDashboard,
|
|
FileText,
|
|
Users,
|
|
Tags,
|
|
Heart,
|
|
Settings,
|
|
Landmark,
|
|
LogOut,
|
|
} from "lucide-react";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { cn } from "@/lib/utils";
|
|
import { ThemeToggle } from "./ThemeToggle";
|
|
import { useAuthStore } from "@/stores/authStore";
|
|
|
|
const NAV = [
|
|
{ href: "/", label: "Dashboard", icon: LayoutDashboard, adminOnly: false },
|
|
{ href: "/bills", label: "Bills", icon: FileText, adminOnly: false },
|
|
{ href: "/members", label: "Members", icon: Users, adminOnly: false },
|
|
{ href: "/topics", label: "Topics", icon: Tags, adminOnly: false },
|
|
{ href: "/following", label: "Following", icon: Heart, adminOnly: false },
|
|
{ href: "/settings", label: "Admin", icon: Settings, adminOnly: true },
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const qc = useQueryClient();
|
|
const user = useAuthStore((s) => s.user);
|
|
const logout = useAuthStore((s) => s.logout);
|
|
|
|
function handleLogout() {
|
|
logout();
|
|
qc.clear();
|
|
router.replace("/login");
|
|
}
|
|
|
|
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">PocketVeto</span>
|
|
</div>
|
|
|
|
<nav className="flex-1 p-3 space-y-1">
|
|
{NAV.filter(({ adminOnly }) => !adminOnly || user?.is_admin).map(({ href, label, icon: Icon }) => {
|
|
const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
|
|
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}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-3 border-t border-border space-y-2">
|
|
{user && (
|
|
<div className="flex items-center justify-between">
|
|
<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>
|
|
)}
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-muted-foreground">Theme</span>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|