feat: add user centric features

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)]",
+        },
+      }}
+    />
+  );
+}