Refactored layout

src/components/layout/AccountDropdown.tsx

@@ -0,0 +1,38 @@
+import { User, LogOut } from "lucide-react";
+
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+}
+
+export default function AccountDropdown({ open, setOpen }: Props) {
+  return (
+    <div className="relative">
+      <button
+        className="flex items-center gap-3 px-4 py-2 rounded-lg btn-primary"
+        onClick={() => setOpen(!open)}
+      >
+        <div>
+          <p className="text-xs opacity-70">Playing as</p>
+          <p className="font-bold">SaturnDev</p>
+        </div>
+      </button>
+
+      <div
+        className={twMerge(
+          "absolute top-full right-0 mt-2 w-48 bg-saturn-panel border rounded-lg",
+          open ? "opacity-100" : "opacity-0 pointer-events-none",
+        )}
+      >
+        <button className="w-full flex gap-2 px-4 py-2 hover:bg-white/5">
+          <User size={14} /> Switch Account
+        </button>
+        <button className="w-full flex gap-2 px-4 py-2 text-red-400 hover:bg-red-500/10">
+          <LogOut size={14} /> Logout
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,44 @@
+import { Play, Puzzle, Settings } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+
+type Section = "play" | "mods" | "settings";
+
+interface Props {
+  active: Section;
+  setActive: (s: Section) => void;
+}
+
+export default function Sidebar({ active, setActive }: Props) {
+  return (
+    <aside className="w-16 border-r border-saturn-border flex flex-col items-center py-6 gap-6 bg-saturn-panel/50">
+      <nav className="flex flex-col gap-4 h-full">
+        <button
+          onClick={() => setActive("play")}
+          className={twMerge("sidebar-icon", active === "play" && "active")}
+        >
+          <Play size={22} fill={active === "play" ? "currentColor" : "none"} />
+        </button>
+
+        <button
+          onClick={() => setActive("mods")}
+          className={twMerge("sidebar-icon", active === "mods" && "active")}
+        >
+          <Puzzle
+            size={22}
+            fill={active === "mods" ? "currentColor" : "none"}
+          />
+        </button>
+
+        <button
+          onClick={() => setActive("settings")}
+          className={twMerge("sidebar-icon", active === "settings" && "active")}
+        >
+          <Settings
+            size={22}
+            fill={active === "settings" ? "currentColor" : "none"}
+          />
+        </button>
+      </nav>
+    </aside>
+  );
+}

src/components/layout/TopBar.tsx

@@ -0,0 +1,34 @@
+import VersionDropdown from "./VersionDropdown";
+import AccountDropdown from "./AccountDropdown";
+import { GameVersion } from "@/lib/types";
+
+interface Props {
+  versions: GameVersion[];
+  selectedVersion: GameVersion | null;
+  setSelectedVersion: (v: GameVersion) => void;
+
+  versionOpen: boolean;
+  setVersionOpen: (v: boolean) => void;
+
+  accountOpen: boolean;
+  setAccountOpen: (v: boolean) => void;
+}
+
+export default function TopBar(props: Props) {
+  return (
+    <header className="h-14 flex justify-between items-center px-6 border-b">
+      <VersionDropdown
+        versions={props.versions}
+        selected={props.selectedVersion}
+        onSelect={props.setSelectedVersion}
+        open={props.versionOpen}
+        setOpen={props.setVersionOpen}
+      />
+
+      <AccountDropdown
+        open={props.accountOpen}
+        setOpen={props.setAccountOpen}
+      />
+    </header>
+  );
+}

src/components/layout/VersionDropdown.tsx

@@ -0,0 +1,55 @@
+import { ChevronDown, Check } from "lucide-react";
+import { GameVersion } from "@/lib/types";
+import { twMerge } from "tailwind-merge";
+
+interface Props {
+  versions: GameVersion[];
+  selected: GameVersion | null;
+  onSelect: (v: GameVersion) => void;
+  open: boolean;
+  setOpen: (v: boolean) => void;
+}
+
+export default function VersionDropdown({
+  versions,
+  selected,
+  onSelect,
+  open,
+  setOpen,
+}: Props) {
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-3 py-1.5 rounded-md btn-primary text-sm"
+      >
+        <span>{selected?.name || "Loading..."}</span>
+        <ChevronDown
+          size={14}
+          className={twMerge("transition-transform", open && "rotate-180")}
+        />
+      </button>
+
+      <div
+        className={twMerge(
+          "absolute top-full left-0 mt-2 w-48 bg-saturn-panel border rounded-lg",
+          open ? "opacity-100" : "opacity-0 pointer-events-none",
+        )}
+      >
+        {versions.map((v) => (
+          <button
+            key={v.id}
+            onClick={() => {
+              onSelect(v);
+              setOpen(false);
+            }}
+            className="w-full flex justify-between px-4 py-2 text-sm hover:bg-saturn-accent/10"
+          >
+            {v.name}
+            {selected?.id === v.id && <Check size={14} />}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}