feat: add auth

2026-05-30 02:34:22 +05:30
parent 3767a3a9b6
commit 6b6ce0813e
23 changed files with 2025 additions and 447 deletions
@@ -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>
+  );
+}