wow

apps/frontend/src/components/header.tsx

@@ -1,11 +1,148 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+type Me = {
+    id: string;
+    discordId: string;
+    username: string;
+    avatar?: string;
+    role: "admin" | "writer" | "reader";
+};
+
+function getAvatarUrl(me: Me) {
+    if (!me.avatar) {
+        return `https://cdn.discordapp.com/embed/avatars/${Number(me.discordId) % 5}.png`;
+    }
+
+    if (me.avatar.startsWith("http://") || me.avatar.startsWith("https://")) {
+        return me.avatar;
+    }
+
+    const ext = me.avatar.startsWith("a_") ? "gif" : "png";
+    return `https://cdn.discordapp.com/avatars/${me.discordId}/${me.avatar}.${ext}?size=128`;
+}
+
 export default function Header() {
+    const [me, setMe] = useState<Me | null>(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menuRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        let active = true;
+
+        async function loadMe() {
+            try {
+                const response = await fetch("/api/auth/me", { cache: "no-store" });
+                if (!response.ok) {
+                    if (response.status === 401 || response.status === 404) {
+                        if (active) setMe(null);
+                        return;
+                    }
+                    throw new Error(`Failed to load profile: ${response.status}`);
+                }
+
+                const profile = await response.json() as Me;
+                if (active) {
+                    setMe(profile);
+                }
+            } catch {
+                if (active) {
+                    setMe(null);
+                }
+            }
+        }
+
+        void loadMe();
+        return () => {
+            active = false;
+        };
+    }, []);
+
+    useEffect(() => {
+        function handleOutsideClick(event: MouseEvent) {
+            if (!menuRef.current) {
+                return;
+            }
+
+            if (!menuRef.current.contains(event.target as Node)) {
+                setMenuOpen(false);
+            }
+        }
+
+        document.addEventListener("mousedown", handleOutsideClick);
+        return () => {
+            document.removeEventListener("mousedown", handleOutsideClick);
+        };
+    }, []);
+
+    async function logout() {
+        try {
+            await fetch("/api/auth/logout", {
+                method: "POST",
+                cache: "no-store",
+            });
+        } finally {
+            setMenuOpen(false);
+            setMe(null);
+            window.location.href = "/";
+        }
+    }
+
     return (
-        <header className="flex h-16 items-center justify-between border-b border-border bg-background/90 backdrop-blur px-6">
+        <header className="relative z-60 flex h-16 items-center justify-between border-b border-border bg-background/90 backdrop-blur px-6">
             <a href="/" className="text-2xl">🎀</a>
-            <div className="flex items-center" id="menu">
-                <a href="/add" className="text-[16px] text-foreground/50">[ <span className="text-foreground">+</span> ]</a>
-                <a href="/login" className="text-[16px] text-foreground/50">[ <span className="text-foreground">Login</span> ]</a>
-            </div>
+            {me ? (
+            <div className="relative flex items-center gap-4" id="menu" ref={menuRef}>
+                    {me.role === "admin" || me.role === "writer" ? (
+                        <a href="/add" className="text-[16px] text-foreground/50">[ <span className="text-foreground">+</span> ]</a>
+                    ) : null}
+
+                    <button
+                        type="button"
+                        className="block"
+                        title={`${me.username} (${me.role})`}
+                        onClick={() => setMenuOpen((current) => !current)}
+                    >
+                        <img
+                            src={getAvatarUrl(me)}
+                            alt={`${me.username} profile`}
+                            className="h-8 w-8 rounded-full border border-border/70 object-cover"
+                            loading="lazy"
+                            decoding="async"
+                            referrerPolicy="no-referrer"
+                        />
+                    </button>
+
+                    {menuOpen ? (
+                        <div className="absolute right-0 top-full z-70 mt-2 min-w-40 overflow-hidden rounded-lg border border-border bg-background/95 p-1 shadow-xl backdrop-blur">
+                            <div className="px-3 py-2 text-xs text-foreground/60">
+                                {me.username} ({me.role})
+                            </div>
+                            {me.role === "admin" ? (
+                                <a
+                                    href="/dashboard"
+                                    className="block rounded px-3 py-2 text-sm text-foreground/80 hover:bg-black/5"
+                                    onClick={() => setMenuOpen(false)}
+                                >
+                                    Dashboard
+                                </a>
+                            ) : null}
+                            <button
+                                type="button"
+                                className="block w-full rounded px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50"
+                                onClick={() => {
+                                    void logout();
+                                }}
+                            >
+                                Logout
+                            </button>
+                        </div>
+                    ) : null}
+                </div>
+            ) : (
+                <a href="/api/auth/discord/login" className="text-[16px] text-foreground/50">[ <span className="text-foreground">Login</span> ]</a>
+            )}
         </header>
     );
 }