"use client"; import { useState, useEffect, useCallback } from "react"; import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/i18n/navigation"; import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase"; import { getNavLinks } from "@/config"; import AuthModal from "./AuthModal"; import ThemeToggle from "./ThemeToggle"; import SiteMenu from "./SiteMenu"; import UserAvatar from "./UserAvatar"; export default function NavbarComponent() { const { t } = useTranslation("common"); const { t: tNav } = useTranslation("nav"); const locale = useLocale(); const pathname = usePathname(); const router = useRouter(); const [mobileOpen, setMobileOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [authOpen, setAuthOpen] = useState(false); const [userEmail, setUserEmail] = useState(null); const [userVip, setUserVip] = useState(false); const navLinks = getNavLinks(); const fetchAuth = useCallback(async () => { try { const res = await fetch("/api/auth/me", { credentials: "include", cache: "no-store" }); const data = await res.json(); if (data?.user && data?.token) { const { pbSaveAuth } = await import("@/app/lib/pocketbase"); pbSaveAuth(data.token, { id: data.user.id, email: data.user.email }); setUserEmail(data.user.email); setUserVip(!!data.user.vip); return; } } catch { /* ignore */ } setUserEmail(getStoredUserEmail()); setUserVip(false); }, []); useEffect(() => { fetchAuth(); }, [fetchAuth]); useEffect(() => { const onAuthUpdated = () => fetchAuth(); window.addEventListener("auth:updated", onAuthUpdated); return () => window.removeEventListener("auth:updated", onAuthUpdated); }, [fetchAuth]); const handleLogout = useCallback(async () => { await pbLogout(); setUserEmail(null); setUserVip(false); }, []); const isActive = useCallback((href: string) => { if (href.startsWith("/#")) return false; if (href === "/") return pathname === "/"; return pathname.startsWith(href); }, [pathname]); return ( ); }