feat: add auth

components/auth/auth-card.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+/**
+ * Visual wrapper used by every /(auth) page. Centralises the card chrome
+ * so the per-page files only deal with form state.
+ */
+export function AuthCard({
+  title,
+  description,
+  footer,
+  children,
+}: {
+  title: string;
+  description?: string;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-8">
+        <CardTitle className="text-2xl">{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent className="space-y-4">{children}</CardContent>
+      {footer ? (
+        <div className="px-6 pb-6 text-sm text-muted-foreground">{footer}</div>
+      ) : null}
+    </Card>
+  );
+}
+
+export function AuthFooterLink({
+  prefix,
+  href,
+  label,
+}: {
+  prefix: string;
+  href: string;
+  label: string;
+}) {
+  return (
+    <p>
+      {prefix}{" "}
+      <Link href={href} className="text-primary underline-offset-4 hover:underline">
+        {label}
+      </Link>
+    </p>
+  );
+}

components/auth/auth-provider.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { auth, type User } from "@/lib/auth";
+
+/**
+ * AuthProvider holds the current-user state and exposes the auth actions
+ * to the rest of the app.
+ *
+ * On mount it calls /auth/me to hydrate. Until that completes, `loading`
+ * is true and consumers should render a placeholder rather than assuming
+ * the user is logged out.
+ *
+ * After a successful login/signup/logout the provider re-fetches /auth/me
+ * to keep state in sync with the cookie.
+ */
+type AuthContextValue = {
+  user: User | null;
+  loading: boolean;
+  signUp: (email: string, password: string, name: string) => Promise<User>;
+  logIn: (email: string, password: string) => Promise<User>;
+  logOut: () => Promise<void>;
+  refresh: () => Promise<void>;
+  /** Replace the user state without a network round-trip (after profile edit). */
+  setUser: (u: User | null) => void;
+};
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      const me = await auth.me();
+      setUser(me);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const signUp = useCallback(async (email: string, password: string, name: string) => {
+    const u = await auth.signUp(email, password, name);
+    setUser(u);
+    return u;
+  }, []);
+
+  const logIn = useCallback(async (email: string, password: string) => {
+    const u = await auth.logIn(email, password);
+    setUser(u);
+    return u;
+  }, []);
+
+  const logOut = useCallback(async () => {
+    await auth.logOut();
+    setUser(null);
+  }, []);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({ user, loading, signUp, logIn, logOut, refresh, setUser }),
+    [user, loading, signUp, logIn, logOut, refresh],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) {
+    throw new Error("useAuth must be used inside <AuthProvider>");
+  }
+  return ctx;
+}

components/auth/user-menu.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+/**
+ * UserMenu — the right-most item in SiteHeader. Three states:
+ *
+ *   1. Loading (auth context hasn't hydrated) — render a quiet placeholder
+ *      so the row width doesn't jump when the user data arrives.
+ *   2. Logged out — single "Log in" link.
+ *   3. Logged in — avatar / initials chip that opens a popover with
+ *      "Profile" and "Log out". Built on @base-ui/react/popover so we
+ *      don't pull in additional shadcn primitives.
+ */
+
+import { Popover } from "@base-ui/react/popover";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { UserRound } from "lucide-react";
+import { useAuth } from "./auth-provider";
+import { cn } from "@/lib/utils";
+
+function initials(name: string): string {
+  return (
+    name
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?"
+  );
+}
+
+export function UserMenu() {
+  const { user, loading, logOut } = useAuth();
+  const router = useRouter();
+
+  if (loading) {
+    // Placeholder keeps the action row width stable until auth hydrates.
+    return <span aria-hidden className="size-9 inline-block" />;
+  }
+
+  if (!user) {
+    // Mobile: compact icon button so the header row fits on 375px viewports.
+    // Desktop: full "Log in" text — there's plenty of space.
+    // Same muted→foreground pattern as the search / reading-settings buttons
+    // so the icon sits at a consistent quiet shade across all themes.
+    return (
+      <Link
+        href="/login"
+        aria-label="Log in"
+        className="inline-flex items-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors size-9 justify-center md:size-auto md:h-9 md:px-3 md:gap-1.5"
+      >
+        <UserRound className="size-5 md:size-4" />
+        <span className="hidden md:inline text-sm font-medium">Log in</span>
+      </Link>
+    );
+  }
+
+  async function onLogOut() {
+    await logOut();
+    router.push("/");
+    router.refresh();
+  }
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        className="size-9 rounded-full overflow-hidden ring-1 ring-foreground/10 hover:ring-foreground/20 transition-shadow"
+        aria-label="Account menu"
+      >
+        {user.avatar_url ? (
+          <Image
+            src={user.avatar_url}
+            alt={user.name}
+            width={36}
+            height={36}
+            className="size-full object-cover"
+            unoptimized
+          />
+        ) : (
+          <span
+            className={cn(
+              "flex items-center justify-center size-full text-xs font-semibold",
+              "bg-primary/15 text-primary",
+            )}
+          >
+            {initials(user.name)}
+          </span>
+        )}
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner sideOffset={6} align="end">
+          <Popover.Popup className="min-w-44 rounded-xl bg-card border border-border shadow-md p-1 outline-none">
+            <div className="px-3 py-2">
+              <p className="text-sm font-medium text-foreground truncate">
+                {user.name}
+              </p>
+              <p className="text-xs text-muted-foreground truncate">
+                {user.email}
+              </p>
+            </div>
+            <div className="h-px bg-border my-1" />
+            <Link
+              href="/profile"
+              className="block rounded-lg px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
+            >
+              Profile
+            </Link>
+            <button
+              type="button"
+              onClick={onLogOut}
+              className="block w-full text-left rounded-lg px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
+            >
+              Log out
+            </button>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

components/auth/verify-email-banner.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import { auth, AuthError } from "@/lib/auth";
+import { useAuth } from "./auth-provider";
+
+/**
+ * Persistent top ribbon shown when a logged-in user has not yet verified
+ * their email. Lets them re-trigger the verification mail without leaving
+ * the page.
+ *
+ * Renders nothing when:
+ *   - auth state is still loading
+ *   - user is logged out
+ *   - user.email_verified_at is set
+ *   - user dismissed it for this session (banner is meant to be persistent
+ *     across navigations but skippable per-tab; we keep the dismissed flag
+ *     in component state so a refresh brings it back)
+ */
+export function VerifyEmailBanner() {
+  const { user, loading } = useAuth();
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  if (loading || !user || user.email_verified_at || dismissed) return null;
+
+  async function onResend() {
+    setError(null);
+    setBusy(true);
+    try {
+      await auth.resendVerification();
+      setSent(true);
+    } catch (err) {
+      setError(
+        err instanceof AuthError ? err.message : "Could not send verification email.",
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="w-full bg-amber-50 dark:bg-amber-950/40 text-amber-900 dark:text-amber-100 border-b border-amber-200/60 dark:border-amber-800/60">
+      <div className="max-w-5xl mx-auto px-4 py-2 flex flex-wrap items-center justify-between gap-3 text-sm">
+        <p>
+          {sent
+            ? "✓ Verification email sent — check your inbox."
+            : error
+              ? error
+              : `Verify your email (${user.email}) to secure your account.`}
+        </p>
+        <div className="flex items-center gap-2">
+          {!sent ? (
+            <button
+              type="button"
+              onClick={onResend}
+              disabled={busy}
+              className="font-medium underline-offset-2 hover:underline disabled:opacity-60"
+            >
+              {busy ? "Sending…" : "Resend email"}
+            </button>
+          ) : null}
+          <button
+            type="button"
+            onClick={() => setDismissed(true)}
+            aria-label="Dismiss"
+            className="opacity-70 hover:opacity-100"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}