UNO refactor (stage 1): hub shell with nav rail + internal-scroll panel

Rebuild ScreenShell into a UNO-style app shell: a persistent NavRail (vertical
side rail in landscape, bottom tab bar in portrait — Home/Profile/Shop/Friends/
Leaderboard/Achievements, active highlighted gold) + a content panel that owns
its own scroll so the page never scrolls as a whole and uses the width in
landscape. Reskins all 10 menu screens at once. Transient screens (auth,
matchmaking, room) opt out via hideNav. New nav.home i18n key.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/online/NavRail.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Home, ShoppingBag, Star, Trophy, User, Users } from "lucide-react";
+import { useUIStore, type Screen } from "@/lib/ui-store";
+import { useSessionStore } from "@/lib/session-store";
+import { useI18n } from "@/lib/i18n";
+import { cn } from "@/lib/cn";
+
+type Item = { key: Screen; icon: typeof Home; label: string; authed?: boolean };
+
+/**
+ * UNO-style primary navigation. A vertical rail pinned to the side in landscape
+ * (the app's main orientation) and a bottom tab bar in portrait. Active section
+ * is highlighted gold and pulled forward.
+ */
+export function NavRail() {
+  const screen = useUIStore((s) => s.screen);
+  const go = useUIStore((s) => s.go);
+  const isAuthed = useSessionStore((s) => s.isAuthed);
+  const { t } = useI18n();
+
+  const items: Item[] = [
+    { key: "home", icon: Home, label: t("nav.home") },
+    { key: "profile", icon: User, label: t("menu.profile") },
+    { key: "shop", icon: ShoppingBag, label: t("menu.shop") },
+    { key: "friends", icon: Users, label: t("menu.friends"), authed: true },
+    { key: "leaderboard", icon: Trophy, label: t("menu.leaderboard") },
+    { key: "achievements", icon: Star, label: t("achv.title") },
+  ];
+
+  return (
+    <nav
+      className={cn(
+        "z-20 shrink-0 glass flex justify-around gap-1 p-1.5",
+        // portrait: bottom bar; landscape: side rail
+        "border-t border-gold/10 pb-[max(0.375rem,env(safe-area-inset-bottom))]",
+        "landscape:order-first landscape:h-full landscape:w-[78px] landscape:flex-col landscape:justify-start",
+        "landscape:gap-1.5 landscape:py-3 landscape:pb-3 landscape:border-t-0",
+        "ltr:landscape:border-r rtl:landscape:border-l"
+      )}
+    >
+      {items.map((it) => {
+        const active = screen === it.key;
+        return (
+          <button
+            key={it.key}
+            onClick={() => go(it.authed && !isAuthed ? "auth" : it.key)}
+            className={cn(
+              "flex min-w-[54px] flex-col items-center justify-center gap-1 rounded-2xl px-1.5 py-2 transition landscape:w-full landscape:py-2.5",
+              active ? "btn-gold shadow-lg" : "text-cream/55 hover:bg-navy-800/60 hover:text-cream"
+            )}
+          >
+            <it.icon className={cn("size-5", active && "text-[#2a1f04]")} />
+            <span className={cn("text-[10px] font-bold leading-none", active && "text-[#2a1f04]")}>
+              {it.label}
+            </span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

src/components/online/ScreenHeader.tsx

@@ -4,6 +4,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useI18n } from "@/lib/i18n";
 import { useUIStore, type Screen } from "@/lib/ui-store";
 import { LevelXpBar } from "./LevelXpBar";
+import { NavRail } from "./NavRail";
 
 export function ScreenHeader({
   title,
@@ -37,13 +38,28 @@ export function ScreenHeader({
   );
 }
 
-export function ScreenShell({ children }: { children: React.ReactNode }) {
+/**
+ * UNO-style app shell: a persistent {@link NavRail} (side rail in landscape /
+ * bottom bar in portrait) plus a content panel that owns its OWN scroll so the
+ * page never scrolls as a whole — lists scroll inside the panel and the chrome
+ * stays put. Set `hideNav` for transient/full-bleed screens (auth, matchmaking).
+ */
+export function ScreenShell({
+  children,
+  hideNav = false,
+}: {
+  children: React.ReactNode;
+  hideNav?: boolean;
+}) {
   return (
-    // Fixed-height viewport scroller: body is `overflow:hidden` (for the game
-    // table), so the shell must own its scroll (h-dvh + overflow-y-auto) — with
-    // min-h-dvh the content just expands past the body and gets clipped.
-    <main className="persian-pattern relative h-dvh w-full overflow-y-auto overflow-x-hidden overscroll-contain safe-top safe-x">
-      <div className="mx-auto w-full max-w-2xl px-4 pt-3 pb-[max(6rem,calc(env(safe-area-inset-bottom)+5rem))] sm:px-6">{children}</div>
+    <main className="persian-pattern relative h-dvh w-full overflow-hidden overscroll-contain safe-top safe-x flex flex-col landscape:flex-row">
+      {/* content panel — scrolls internally, uses the width in landscape */}
+      <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden overscroll-contain">
+        <div className="mx-auto w-full max-w-2xl landscape:max-w-5xl px-4 pt-3 pb-8 sm:px-6">
+          {children}
+        </div>
+      </div>
+      {!hideNav && <NavRail />}
     </main>
   );
 }

src/components/screens/AuthScreen.tsx

@@ -14,7 +14,7 @@ export function AuthScreen() {
   const done = () => go("online");
 
   return (
-    <ScreenShell>
+    <ScreenShell hideNav>
       <ScreenHeader title={t("auth.title")} />
       <div className="glass rounded-3xl p-6 max-w-md mx-auto">
         <p className="text-center text-cream/60 text-sm mb-5">{t("auth.subtitle")}</p>

src/components/screens/MatchmakingScreen.tsx

@@ -69,7 +69,7 @@ export function MatchmakingScreen() {
 
   if (queued) {
     return (
-      <ScreenShell>
+      <ScreenShell hideNav>
         <div className="flex flex-col items-center justify-center min-h-[80dvh] text-center">
           <div className="text-5xl mb-4">⏳</div>
           <h1 className="gold-text text-2xl font-black">{t("queue.title")}</h1>
@@ -101,7 +101,7 @@ export function MatchmakingScreen() {
   }
 
   return (
-    <ScreenShell>
+    <ScreenShell hideNav>
       <div className="flex flex-col items-center justify-center min-h-[80dvh] text-center">
         <motion.div
           animate={ready ? {} : { rotate: 360 }}

src/components/screens/RoomScreen.tsx

@@ -74,7 +74,7 @@ export function RoomScreen() {
   };
 
   return (
-    <ScreenShell>
+    <ScreenShell hideNav>
       <ScreenHeader
         title={t("room.title")}
         back="online"

src/lib/i18n.tsx

@@ -108,6 +108,7 @@ const fa: Dict = {
   "speed.desc": "حالت سریع: نوبت‌های کوتاه‌تر و بازی برق‌آسا",
   "menu.online": "بازی آنلاین",
   "menu.onlineDesc": "با دوستان یا بازیکن‌های واقعی",
+  "nav.home": "خانه",
   "menu.profile": "پروفایل",
   "menu.friends": "دوستان",
   "menu.leaderboard": "جدول امتیازات",
@@ -450,6 +451,7 @@ const en: Dict = {
   "speed.desc": "Blitz mode: short turns, lightning-fast match",
   "menu.online": "Play Online",
   "menu.onlineDesc": "With friends or real players",
+  "nav.home": "Home",
   "menu.profile": "Profile",
   "menu.friends": "Friends",
   "menu.leaderboard": "Leaderboard",