add stable media support and sync skillhub UI

web/components/site-chrome.tsx

@@ -1,4 +1,8 @@
 import Link from "next/link";
+import { HeaderControls } from "@/components/header-controls";
+import { MainNav } from "@/components/main-nav";
+import { getViewerSession } from "@/lib/popiart-api";
+import { getLiveCopy } from "@/lib/live-copy";
 import type { AppDictionary, Locale } from "@/lib/site-content";
 
 function localize(locale: Locale, path: string) {
@@ -8,7 +12,7 @@ function localize(locale: Locale, path: string) {
   return `/${locale}${path}`;
 }
 
-export function SiteChrome({
+export async function SiteChrome({
   children,
   dictionary,
   locale,
@@ -17,6 +21,9 @@ export function SiteChrome({
   dictionary: AppDictionary;
   locale: Locale;
 }) {
+  const liveCopy = getLiveCopy(locale);
+  const session = await getViewerSession();
+
   return (
     <div className="site-shell">
       <header className="site-header">
@@ -30,32 +37,30 @@ export function SiteChrome({
           </div>
         </div>
 
-        <nav className="main-nav">
-          <Link href={localize(locale, "/")}>{dictionary.nav.home}</Link>
-          <Link href={localize(locale, "/docs")}>{dictionary.nav.docs}</Link>
-          <Link href={localize(locale, "/console")}>{dictionary.nav.console}</Link>
-          <Link href={localize(locale, "/pricing")}>{dictionary.nav.pricing}</Link>
-        </nav>
+        <MainNav
+          labels={{
+            home: dictionary.nav.home,
+            docs: dictionary.nav.docs,
+            skills: liveCopy.nav.skills,
+            console: dictionary.nav.console,
+            pricing: dictionary.nav.pricing,
+          }}
+          locale={locale}
+        />
 
-        <div className="header-actions">
-          <div className="locale-switch">
-            <Link
-              className={locale === "zh" ? "locale-active" : ""}
-              href={localize("zh", "/")}
-            >
-              中文
-            </Link>
-            <Link
-              className={locale === "en" ? "locale-active" : ""}
-              href={localize("en", "/")}
-            >
-              EN
-            </Link>
-          </div>
-          <Link className="button button-light button-small" href={localize(locale, "/login")}>
-            {dictionary.nav.login}
-          </Link>
-        </div>
+        <HeaderControls
+          labels={{
+            zh: liveCopy.header.zh,
+            en: liveCopy.header.en,
+            logout: liveCopy.header.logout,
+            loggingOut: liveCopy.header.loggingOut,
+            loginHint: liveCopy.header.loginHint,
+            login: dictionary.nav.login,
+          }}
+          locale={locale}
+          loginHref={localize(locale, "/login")}
+          user={session?.user ?? null}
+        />
       </header>
 
       <main className="main-content">{children}</main>
@@ -67,6 +72,7 @@ export function SiteChrome({
         </div>
         <div className="footer-links">
           <Link href={localize(locale, "/docs")}>{dictionary.nav.docs}</Link>
+          <Link href={localize(locale, "/skills")}>{liveCopy.nav.skills}</Link>
           <Link href={localize(locale, "/pricing")}>{dictionary.nav.pricing}</Link>
           <Link href={localize(locale, "/console")}>{dictionary.nav.console}</Link>
         </div>