s

app/digital/components/Header.tsx

@@ -5,6 +5,7 @@ import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/app/d
 import { getStoredUserEmail } from "@/app/digital/lib/pocketbase";
 import { useCrossSiteUrls } from "@/app/digital/lib/useCrossSiteUrls";
 import AuthModal from "./AuthModal";
+import DigitalThemeIcon from "./DigitalThemeIcon";
 import ThemeToggle from "./ThemeToggle";
 import UserAvatar from "./UserAvatar";
 
@@ -15,16 +16,18 @@ export default function Header() {
   const pathname = usePathname();
   const router = useRouter();
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
+  const [scrolled, setScrolled] = useState(() =>
+    typeof window !== "undefined" ? window.scrollY > 8 : false
+  );
   const [authOpen, setAuthOpen] = useState(false);
   const [userEmail, setUserEmail] = useState<string | null>(null);
   const [vip, setVip] = useState(false);
   const { vipUrl } = useCrossSiteUrls();
   const navLinks = [
-    { labelKey: "roadmap" as const, href: "#roadmap" },
-    { labelKey: "tools" as const, href: "#tools" },
+    { labelKey: "roadmap" as const, href: "/#roadmap" },
+    { labelKey: "tools" as const, href: "/#tools" },
     { labelKey: "community" as const, href: vipUrl, external: true },
-    { labelKey: "resources" as const, href: "#resources" },
+    { labelKey: "resources" as const, href: "/#resources" },
   ];
 
   const fetchAuthAndVip = useCallback(async () => {
@@ -52,43 +55,62 @@ export default function Header() {
     fetchAuthAndVip();
   }, [fetchAuthAndVip]);
 
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
   useEffect(() => {
     const onVipUpdated = () => fetchAuthAndVip();
     const onAuthSuccess = () => fetchAuthAndVip();
+    const onAuthUpdated = () => fetchAuthAndVip();
     window.addEventListener("vip:updated", onVipUpdated);
     window.addEventListener("auth:success", onAuthSuccess);
+    window.addEventListener("auth:updated", onAuthUpdated);
     return () => {
       window.removeEventListener("vip:updated", onVipUpdated);
       window.removeEventListener("auth:success", onAuthSuccess);
+      window.removeEventListener("auth:updated", onAuthUpdated);
     };
   }, [fetchAuthAndVip]);
 
   return (
     <header
-      className={`fixed top-0 left-0 right-0 z-50 w-full max-w-[100vw] transition-all duration-300 ${
+      className={`dn-header fixed top-0 left-0 right-0 z-50 w-full max-w-[100vw] transition-all duration-300 ${
         scrolled
-          ? "bg-white/80 backdrop-blur-lg shadow-sm dark:bg-slate-900/80 dark:shadow-slate-950/50"
+          ? "dn-header-scrolled bg-white/80 backdrop-blur-lg shadow-sm dark:bg-slate-900/80 dark:shadow-slate-950/50"
           : "bg-transparent"
       }`}
     >
-      <div className="mx-auto flex h-16 w-full min-w-0 max-w-7xl items-center justify-between gap-2 pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))] sm:pl-[max(1.5rem,env(safe-area-inset-left))] sm:pr-[max(1.5rem,env(safe-area-inset-right))] lg:pl-[max(2rem,env(safe-area-inset-left))] lg:pr-[max(2rem,env(safe-area-inset-right))]">
-          <Link href="/" className="flex min-w-0 shrink items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
-            <span className="text-2xl">🌍</span>
+      <div className="dn-container mx-auto flex h-16 w-full min-w-0 max-w-7xl items-center justify-between gap-2 pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))] sm:pl-[max(1.5rem,env(safe-area-inset-left))] sm:pr-[max(1.5rem,env(safe-area-inset-right))] lg:pl-[max(2rem,env(safe-area-inset-left))] lg:pr-[max(2rem,env(safe-area-inset-right))]">
+          <Link href="/" className="dn-brand flex min-w-0 shrink items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+            <DigitalThemeIcon name="globe" emoji="🌍" className="h-7 w-7 text-2xl" />
             <span className="hidden sm:inline">{t("siteName")}</span>
             <span className="sm:hidden">{t("siteNameShort")}</span>
           </Link>
 
-          <nav className="hidden items-center gap-1 md:flex">
+          <nav className="dn-nav hidden items-center gap-1 md:flex">
             {navLinks.map((link) => (
-              <a
-                key={link.href}
-                href={link.href}
-                target={"external" in link && link.external ? "_blank" : undefined}
-                rel={"external" in link && link.external ? "noopener noreferrer" : undefined}
-                className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
-              >
-                {tNav(link.labelKey)}
-              </a>
+              "external" in link && link.external ? (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="dn-nav-link rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+                >
+                  {tNav(link.labelKey)}
+                </a>
+              ) : (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className="dn-nav-link rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+                >
+                  {tNav(link.labelKey)}
+                </Link>
+              )
             ))}
           </nav>
 
@@ -98,7 +120,7 @@ export default function Header() {
             ) : (
               <button
                 onClick={() => setAuthOpen(true)}
-                className="hidden rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 sm:inline-flex"
+                className="dn-button-secondary hidden rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 sm:inline-flex"
               >
                 {t("loginRegister")}
               </button>
@@ -106,7 +128,7 @@ export default function Header() {
             <button
               type="button"
               onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
-              className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
+              className="dn-header-control inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
               aria-label={locale === "zh" ? "Switch to English" : "切换到中文"}
               title={locale === "zh" ? "EN" : "中文"}
             >
@@ -115,7 +137,7 @@ export default function Header() {
             <ThemeToggle />
             <button
               onClick={() => setMobileOpen(!mobileOpen)}
-              className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 md:hidden"
+              className="dn-header-control inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 md:hidden"
               aria-label={t("toggleMenu")}
             >
               {mobileOpen ? (
@@ -128,29 +150,40 @@ export default function Header() {
                 </svg>
               )}
             </button>
-            <a
-              href="#roadmap"
-              className="hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500 sm:inline-flex"
+            <Link
+              href="/#roadmap"
+              className="dn-button-primary hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500 sm:inline-flex"
             >
               {t("explore")}
-            </a>
+            </Link>
           </div>
         </div>
 
       {mobileOpen && (
-        <div className="overflow-x-hidden border-t border-slate-100 bg-white/95 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-900/95 md:hidden">
+        <div className="dn-mobile-menu overflow-x-hidden border-t border-slate-100 bg-white/95 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-900/95 md:hidden">
           <nav className="mx-auto w-full max-w-7xl space-y-1 px-4 py-3 pr-[max(1rem,env(safe-area-inset-right))]">
             {navLinks.map((link) => (
-              <a
-                key={link.href}
-                href={link.href}
-                target={"external" in link && link.external ? "_blank" : undefined}
-                rel={"external" in link && link.external ? "noopener noreferrer" : undefined}
-                onClick={() => setMobileOpen(false)}
-                className="block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
-              >
-                {tNav(link.labelKey)}
-              </a>
+              "external" in link && link.external ? (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => setMobileOpen(false)}
+                  className="dn-nav-link block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+                >
+                  {tNav(link.labelKey)}
+                </a>
+              ) : (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  onClick={() => setMobileOpen(false)}
+                  className="dn-nav-link block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+                >
+                  {tNav(link.labelKey)}
+                </Link>
+              )
             ))}
             <button
               type="button"
@@ -163,9 +196,16 @@ export default function Header() {
               {locale === "zh" ? "EN" : "中文"}
             </button>
             {userEmail ? (
-              <div className="mt-2 flex items-center gap-3 rounded-lg border border-slate-100 bg-slate-50 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
+              <div className="dn-mobile-account mt-2 flex items-center gap-3 rounded-lg border border-slate-100 bg-slate-50 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
                 <UserAvatar email={userEmail} vip={vip} onLogout={() => { setUserEmail(null); setVip(false); setMobileOpen(false); router.replace("/"); }} />
-                <span className="truncate text-sm text-slate-600 dark:text-slate-400">{userEmail}</span>
+                <Link
+                  href="/profile"
+                  onClick={() => setMobileOpen(false)}
+                  className="min-w-0 flex-1"
+                >
+                  <span className="block truncate text-sm font-semibold text-slate-700 dark:text-slate-200">{userEmail}</span>
+                  <span className="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">{t("profile")}</span>
+                </Link>
               </div>
             ) : (
               <button
@@ -173,18 +213,18 @@ export default function Header() {
                   setMobileOpen(false);
                   setAuthOpen(true);
                 }}
-                className="mt-2 block w-full rounded-full border border-slate-200 px-4 py-2.5 text-center text-base font-medium text-slate-600 dark:border-slate-700 dark:text-slate-400"
+                className="dn-button-secondary mt-2 block w-full rounded-full border border-slate-200 px-4 py-2.5 text-center text-base font-medium text-slate-600 dark:border-slate-700 dark:text-slate-400"
               >
                 {t("loginRegister")}
               </button>
             )}
-            <a
-              href="#roadmap"
+            <Link
+              href="/#roadmap"
               onClick={() => setMobileOpen(false)}
-              className="mt-2 block rounded-full bg-sky-500 px-4 py-2.5 text-center text-base font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500"
+              className="dn-button-primary mt-2 block rounded-full bg-sky-500 px-4 py-2.5 text-center text-base font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500"
             >
               {t("explore")}
-            </a>
+            </Link>
           </nav>
         </div>
       )}