feat: add user centric features

2026-05-30 23:44:08 +05:30
parent 7bd2952caa
commit dcdd2383c6
63 changed files with 16783 additions and 1735 deletions
@@ -0,0 +1,189 @@
+"use client";
+
+/**
+ * ProfileSidebar — the navigation rail for /u/me.
+ *
+ *   • Desktop (md+): permanent left column, ~240px wide, sticky below the
+ *     SiteHeader so it stays in view while content scrolls.
+ *   • Mobile: a hamburger button reveals the same nav as a left drawer.
+ *
+ * Items are intentionally just three (Profile / Collections / Bookmarks) to
+ * keep the surface focused; "Log out" sits as a footer action separated by
+ * a divider.
+ */
+
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+import { User as UserIcon, FolderOpen, Bookmark, LogOut, Menu } from "lucide-react";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { useAuth } from "@/components/auth/auth-provider";
+import type { User } from "@/lib/auth";
+import { cn } from "@/lib/utils";
+
+type NavItem = {
+  href: string;
+  label: string;
+  icon: typeof UserIcon;
+  /** Match only when pathname === href; otherwise startsWith is used. */
+  exact?: boolean;
+};
+
+const ITEMS: NavItem[] = [
+  { href: "/u/me", label: "Profile", icon: UserIcon, exact: true },
+  { href: "/u/me/collections", label: "Collections", icon: FolderOpen },
+  { href: "/u/me/bookmarks", label: "Bookmarks", icon: Bookmark },
+];
+
+export function ProfileSidebar({ user }: { user: User }) {
+  return (
+    <>
+      {/* Desktop rail — always visible on md+ */}
+      <aside className="hidden md:block w-60 shrink-0">
+        <div className="sticky top-20 space-y-4">
+          <SidebarHeader user={user} />
+          <SidebarNav onItemClick={() => {}} />
+          <SidebarFooter />
+        </div>
+      </aside>
+
+      {/* Mobile trigger + drawer */}
+      <MobileSidebar user={user} />
+    </>
+  );
+}
+
+function MobileSidebar({ user }: { user: User }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="md:hidden mb-4">
+      <Drawer open={open} onOpenChange={setOpen} direction="left">
+        <DrawerTrigger
+          className={cn(
+            "inline-flex items-center gap-2 rounded-lg border border-border bg-card",
+            "px-3 h-10 text-sm font-medium text-foreground hover:bg-muted transition-colors",
+          )}
+        >
+          <Menu className="size-4" />
+          Library menu
+        </DrawerTrigger>
+        <DrawerContent direction="left" className="h-full w-72 max-w-[80%]">
+          <DrawerHeader className="text-left border-b border-border pb-4">
+            <DrawerTitle className="font-[family-name:var(--font-title)] font-semibold uppercase tracking-[0.14em] text-sm">
+              Your library
+            </DrawerTitle>
+            <DrawerDescription className="sr-only">
+              Switch between profile, collections, and bookmarks.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="overflow-y-auto flex-1 p-4 space-y-4">
+            <SidebarHeader user={user} />
+            <SidebarNav onItemClick={() => setOpen(false)} />
+            <SidebarFooter />
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}
+
+function SidebarHeader({ user }: { user: User }) {
+  return (
+    <div className="flex items-center gap-3 px-3 py-3 rounded-lg bg-card ring-1 ring-foreground/10">
+      <Avatar src={user.avatar_url} name={user.name} />
+      <div className="min-w-0">
+        <p className="text-sm font-semibold text-foreground truncate">
+          {user.name}
+        </p>
+        <p className="text-xs text-muted-foreground truncate">@{user.handle}</p>
+      </div>
+    </div>
+  );
+}
+
+function SidebarNav({ onItemClick }: { onItemClick: () => void }) {
+  const pathname = usePathname();
+  return (
+    <nav className="space-y-0.5" aria-label="Library sections">
+      {ITEMS.map((item) => {
+        const active = item.exact
+          ? pathname === item.href
+          : pathname.startsWith(item.href);
+        const Icon = item.icon;
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            onClick={onItemClick}
+            className={cn(
+              "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
+              active
+                ? "bg-primary/10 text-primary"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+          >
+            <Icon className="size-4" />
+            {item.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+function SidebarFooter() {
+  const { logOut } = useAuth();
+  const router = useRouter();
+  async function onLogOut() {
+    await logOut();
+    router.push("/");
+    router.refresh();
+  }
+  return (
+    <div className="pt-3 border-t border-border">
+      <button
+        type="button"
+        onClick={onLogOut}
+        className="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+      >
+        <LogOut className="size-4" />
+        Log out
+      </button>
+    </div>
+  );
+}
+
+function Avatar({ src, name }: { src: string | null; name: string }) {
+  if (src) {
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={40}
+        height={40}
+        className="size-10 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
+        unoptimized
+      />
+    );
+  }
+  const initials =
+    name
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?";
+  return (
+    <div className="size-10 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10 shrink-0">
+      {initials}
+    </div>
+  );
+}