Refactored layout

src/App.tsx

@@ -1,237 +1,56 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
-import {
+import Sidebar from "./components/layout/Sidebar";
-  Play,
+import TopBar from "./components/layout/TopBar";
-  Puzzle,
-  Settings,
-  ChevronDown,
-  Check,
-  User,
-  LogOut,
-} from "lucide-react";
-import { getVersions } from "./lib/saturn";
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-import Logo from "@/assets/logo.png";
-
-// Utility for merging tailwind classes
-function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-// Components
 import PlaySection from "./components/PlaySection";
 import ModsSection from "./components/ModsSection";
 import SettingsSection from "./components/SettingsSection";
+import { getVersions } from "./lib/saturn";
 import { GameVersion } from "./lib/types";
 
 type Section = "play" | "mods" | "settings";
 
-const App: React.FC = () => {
+export default function App() {
-  const [activeSection, setActiveSection] = useState<Section>("play");
+  const [active, setActive] = useState<Section>("play");
   const [versions, setVersions] = useState<GameVersion[]>([]);
   const [selectedVersion, setSelectedVersion] = useState<GameVersion | null>(
     null,
   );
-  const [isVersionDropdownOpen, setIsVersionDropdownOpen] = useState(false);
-  const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false);
 
-  const versionRef = React.useRef<HTMLDivElement | null>(null);
+  const [versionOpen, setVersionOpen] = useState(false);
-  const accountRef = React.useRef<HTMLDivElement | null>(null);
+  const [accountOpen, setAccountOpen] = useState(false);
 
   useEffect(() => {
-    const fetchVersions = async () => {
+    getVersions().then((v) => {
-      const v = await getVersions();
       setVersions(v);
-      if (v.length > 0) setSelectedVersion(v[0]);
+      if (v.length) setSelectedVersion(v[0]);
-    };
+    });
-    fetchVersions();
-  }, []);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      const target = event.target as Node;
-
-      // Close version dropdown if clicked outside
-      if (versionRef.current && !versionRef.current.contains(target)) {
-        setIsVersionDropdownOpen(false);
-      }
-
-      // Close account dropdown if clicked outside
-      if (accountRef.current && !accountRef.current.contains(target)) {
-        setIsAccountDropdownOpen(false);
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
   }, []);
 
   return (
-    <div className="flex h-screen w-screen bg-saturn-bg text-saturn-text-primary overflow-hidden font-sans">
+    <div className="flex h-screen">
-      {/* Sidebar */}
+      <Sidebar active={active} setActive={setActive} />
-      <aside className="w-16 border-r border-saturn-border flex flex-col items-center py-6 gap-6 bg-saturn-panel/50">
-        <div>
-          <img src={Logo} alt="Saturn Logo" className="w-10 h-10" />
-        </div>
 
-        <nav className="flex flex-col gap-4 h-full">
+      <main className="flex-1 flex flex-col">
-          <button
+        <TopBar
-            onClick={() => setActiveSection("play")}
+          versions={versions}
-            className={cn("sidebar-icon", activeSection === "play" && "active")}
+          selectedVersion={selectedVersion}
-            title="Play"
+          setSelectedVersion={setSelectedVersion}
-          >
+          versionOpen={versionOpen}
-            <Play
+          setVersionOpen={setVersionOpen}
-              size={22}
+          accountOpen={accountOpen}
-              fill={activeSection === "play" ? "currentColor" : "none"}
+          setAccountOpen={setAccountOpen}
         />
-          </button>
 
-          <button
+        <div className="flex-1 p-8">
-            onClick={() => setActiveSection("mods")}
+          {active === "play" && selectedVersion && (
-            className={cn("sidebar-icon", activeSection === "mods" && "active")}
-            title="Mods"
-          >
-            <Puzzle
-              size={22}
-              fill={activeSection === "mods" ? "currentColor" : "none"}
-            />
-          </button>
-
-          <button
-            onClick={() => setActiveSection("settings")}
-            className={cn(
-              "sidebar-icon",
-              activeSection === "settings" && "active",
-            )}
-            title="Settings"
-          >
-            <Settings
-              size={22}
-              fill={activeSection === "settings" ? "currentColor" : "none"}
-            />
-          </button>
-        </nav>
-      </aside>
-
-      {/* Main Content Area */}
-      <main className="flex-1 flex flex-col min-w-0">
-        {/* Top Bar */}
-        <header className="h-14 border-b border-saturn-border flex items-center justify-between px-6 bg-saturn-panel/30 backdrop-blur-md z-100 py-10">
-          {/* Version Selector */}
-          <div ref={versionRef} className="relative">
-            <div className="relative group overflow-visible inline-block">
-              {/* Glow */}
-              <div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-md blur opacity-25 group-hover:opacity-50 transition duration-500 pointer-events-none" />
-
-              <button
-                onClick={() => {
-                  setIsVersionDropdownOpen((prev) => !prev);
-                  setIsAccountDropdownOpen(false);
-                }}
-                className="relative z-10 flex items-center gap-2 px-3 py-1.5 rounded-md btn-primary text-sm font-medium"
-              >
-                <span>{selectedVersion?.name || "Loading..."}</span>
-
-                <ChevronDown
-                  size={14}
-                  className={cn(
-                    "transition-transform",
-                    isVersionDropdownOpen && "rotate-180",
-                  )}
-                />
-              </button>
-            </div>
-
-            <div
-              className={cn(
-                "absolute top-full left-0 mt-2 w-48 bg-saturn-panel border border-saturn-border rounded-lg shadow-2xl z-50 py-1 overflow-hidden transition-all duration-200 origin-top",
-                isVersionDropdownOpen
-                  ? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
-                  : "opacity-0 scale-95 -translate-y-2 pointer-events-none",
-              )}
-            >
-              {versions.map((v) => (
-                <button
-                  key={v.id}
-                  onClick={() => {
-                    setSelectedVersion(v);
-                    setIsVersionDropdownOpen(false);
-                  }}
-                  className="w-full flex items-center justify-between px-4 py-2 text-sm hover:bg-saturn-accent/10 hover:text-saturn-accent transition-colors"
-                >
-                  <span>{v.name}</span>
-                  {selectedVersion?.id === v.id && <Check size={14} />}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Account Selector */}
-          <div ref={accountRef} className="relative group overflow-visible">
-            {/* Glow */}
-            <div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-lg blur opacity-25 group-hover:opacity-50 transition pointer-events-none duration-700" />
-
-            <button
-              className="relative z-10 flex items-center gap-3 pl-20 pr-4 py-2 rounded-lg btn-primary"
-              onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
-            >
-              {/* Avatar */}
-              <div className="absolute -top-2 left-4 group-hover:scale-110 transition-transform duration-700 w-12 overflow-hidden z-20">
-                <img
-                  src="https://render.crafty.gg/3d/bust/Kr4ight"
-                  className="w-full h-full object-cover"
-                />
-              </div>
-
-              <div className="leading-tight">
-                <p className="text-[10px] text-white/80 uppercase tracking-wide">
-                  Playing as
-                </p>
-                <p className="text-sm font-bold text-white">SaturnDev</p>
-              </div>
-            </button>
-
-            <div
-              className={cn(
-                "absolute top-full right-0 mt-2 w-48 bg-saturn-panel border border-saturn-border rounded-lg shadow-2xl z-50 py-1 overflow-hidden transition-all duration-200 origin-top",
-                isAccountDropdownOpen
-                  ? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
-                  : "opacity-0 scale-95 -translate-y-2 pointer-events-none",
-              )}
-            >
-              <div className="px-4 py-3 border-b border-saturn-border">
-                <p className="text-sm font-bold">SaturnDev</p>
-                <p className="text-xs text-saturn-text-secondary truncate">
-                  dev@saturnclient.com
-                </p>
-              </div>
-              <button className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-white/5 transition-colors">
-                <User size={14} />
-                <span>Switch Account</span>
-              </button>
-              <button className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-red-500/10 text-red-400 transition-colors">
-                <LogOut size={14} />
-                <span>Logout</span>
-              </button>
-            </div>
-          </div>
-        </header>
-
-        {/* Content Sections */}
-        <div className="flex-1 overflow-y-auto overflow-x-hidden p-8">
-          {activeSection === "play" && selectedVersion && (
             <PlaySection version={selectedVersion} />
           )}
-          {activeSection === "mods" && selectedVersion && (
+          {active === "mods" && selectedVersion && (
             <ModsSection version={selectedVersion} />
           )}
-          {activeSection === "settings" && <SettingsSection />}
+          {active === "settings" && <SettingsSection />}
         </div>
       </main>
     </div>
   );
-};
+}
-
-export default App;

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>
+  );
+}