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>
2026-06-11 01:56:52 +03:30
parent 78dea770d7
commit 08d81cba65
6 changed files with 90 additions and 10 deletions
@@ -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>
+  );
+}