feat: add user centric features

components/ui/checkbox.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+/**
+ * Checkbox — themed replacement for the native `<input type="checkbox" />`.
+ *
+ * The native control is rendered visually hidden (sr-only) so screen
+ * readers and keyboard focus still work the way browsers expect, while
+ * we paint a small rounded box next to it that fills with the primary
+ * color when checked. Fully controlled — caller owns `checked` state.
+ *
+ * Usage:
+ *
+ *   <Checkbox checked={ok} onCheckedChange={setOk} />
+ *
+ *   <label className="flex items-center gap-2">
+ *     <Checkbox checked={ok} onCheckedChange={setOk} />
+ *     Accept terms
+ *   </label>
+ */
+
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  disabled,
+  className,
+  ariaLabel,
+}: {
+  checked: boolean;
+  onCheckedChange: (next: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  ariaLabel?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "relative inline-flex items-center justify-center shrink-0",
+        className,
+      )}
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        onChange={(e) => onCheckedChange(e.target.checked)}
+        className="peer absolute inset-0 size-full appearance-none m-0 cursor-pointer disabled:cursor-not-allowed rounded-md"
+      />
+      <span
+        aria-hidden
+        className={cn(
+          "pointer-events-none size-5 rounded-md border transition-colors",
+          "flex items-center justify-center",
+          checked
+            ? "bg-primary border-primary"
+            : "bg-background border-border",
+          "peer-hover:border-foreground/40",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-background",
+          disabled && "opacity-50",
+        )}
+      >
+        {checked ? (
+          <Check className="size-3.5 text-primary-foreground" strokeWidth={3} />
+        ) : null}
+      </span>
+    </span>
+  );
+}

components/ui/confirm-modal.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+/**
+ * ConfirmModal — palette-themed replacement for native `window.confirm`.
+ *
+ * Mirrors the structure of AuthModal (portal + backdrop + Esc-to-close +
+ * click-outside dismiss + body-scroll lock) but with a single primary
+ * action button. The default tone is "destructive" since that's the
+ * common case (delete this thing), but the `tone` prop swaps to neutral
+ * for less-scary confirms.
+ *
+ * Usage:
+ *
+ *   const [open, setOpen] = useState(false);
+ *   <ConfirmModal
+ *     open={open}
+ *     onClose={() => setOpen(false)}
+ *     title="Delete this collection?"
+ *     message="Posts inside will stay on your feed."
+ *     confirmLabel="Delete"
+ *     onConfirm={async () => { await collections.delete(id); ... }}
+ *   />
+ *
+ * The `onConfirm` may return a promise — the dialog shows a pending state
+ * and stays open until it resolves, then auto-closes on success. Errors
+ * thrown from onConfirm surface inline below the buttons.
+ */
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { AlertTriangle, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type Tone = "destructive" | "neutral";
+
+export function ConfirmModal({
+  open,
+  onClose,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  tone = "destructive",
+  onConfirm,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  message?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  tone?: Tone;
+  /** Called when the user confirms. May return a promise. Throw to keep the modal open with an error message. */
+  onConfirm: () => void | Promise<void>;
+}) {
+  const [working, setWorking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset transient state every time the modal opens — otherwise an error
+  // from a previous attempt would linger on the next open.
+  useEffect(() => {
+    if (open) {
+      setWorking(false);
+      setError(null);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape" && !working) onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, working, onClose]);
+
+  // Body-scroll lock while open.
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  if (!open) return null;
+  if (typeof document === "undefined") return null;
+
+  async function handleConfirm() {
+    setError(null);
+    setWorking(true);
+    try {
+      await onConfirm();
+      onClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Something went wrong.",
+      );
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  return createPortal(
+    <>
+      <div
+        className="fixed inset-0 z-100 bg-foreground/40 backdrop-blur-sm animate-in fade-in-0"
+        onClick={() => !working && onClose()}
+        aria-hidden
+      />
+      <div
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="confirm-modal-title"
+        aria-describedby={message ? "confirm-modal-message" : undefined}
+        className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
+      >
+        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
+          <div className="flex items-start gap-3 px-5 pt-5">
+            {tone === "destructive" ? (
+              <span
+                className="shrink-0 size-10 rounded-full bg-destructive/10 text-destructive flex items-center justify-center"
+                aria-hidden
+              >
+                <AlertTriangle className="size-5" />
+              </span>
+            ) : null}
+            <div className="flex-1 min-w-0">
+              <h2
+                id="confirm-modal-title"
+                className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground"
+              >
+                {title}
+              </h2>
+              {message ? (
+                <p
+                  id="confirm-modal-message"
+                  className="mt-1 text-sm text-muted-foreground leading-relaxed"
+                >
+                  {message}
+                </p>
+              ) : null}
+            </div>
+            <button
+              type="button"
+              onClick={() => !working && onClose()}
+              aria-label="Close"
+              className="shrink-0 size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center disabled:opacity-50"
+              disabled={working}
+            >
+              <X className="size-4" />
+            </button>
+          </div>
+
+          {error ? (
+            <p className="mx-5 mt-3 text-sm text-destructive">{error}</p>
+          ) : null}
+
+          <div className="px-5 py-4 mt-2 flex items-center justify-end gap-2 border-t border-border bg-muted/30">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={working}
+              className="h-10 px-4 rounded-md text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
+            >
+              {cancelLabel}
+            </button>
+            <button
+              type="button"
+              onClick={handleConfirm}
+              disabled={working}
+              className={cn(
+                "h-10 px-4 rounded-md text-sm font-medium transition-colors disabled:opacity-60",
+                tone === "destructive"
+                  ? "bg-destructive text-white hover:bg-destructive/90"
+                  : "bg-primary text-primary-foreground hover:bg-primary/90",
+              )}
+            >
+              {working ? "Working…" : confirmLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body,
+  );
+}

components/ui/toaster.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+/**
+ * Toaster — sonner mounted with our palette tokens, so toasts read the
+ * same `--card`, `--foreground`, etc. variables the rest of the site uses.
+ * That keeps notifications on-theme across all six light/dark palettes
+ * without per-palette overrides.
+ */
+
+import { useTheme } from "next-themes";
+import { Toaster as SonnerToaster } from "sonner";
+
+export function Toaster() {
+  const { resolvedTheme } = useTheme();
+  return (
+    <SonnerToaster
+      theme={(resolvedTheme as "light" | "dark") || "light"}
+      position="bottom-right"
+      richColors={false}
+      closeButton
+      toastOptions={{
+        // Inline styles win over sonner's defaults, but stay token-driven
+        // so the active palette is honoured.
+        style: {
+          background: "var(--card)",
+          color: "var(--foreground)",
+          border: "1px solid var(--border)",
+        },
+        classNames: {
+          toast: "font-[family-name:var(--font-title)]",
+          description: "text-[var(--muted-foreground)]",
+          actionButton: "bg-[var(--primary)] text-[var(--primary-foreground)]",
+        },
+      }}
+    />
+  );
+}