Refactored

src/App.tsx

@@ -1,30 +1,25 @@
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
 import Sidebar from "./components/layout/Sidebar";
 import TopBar from "./components/layout/TopBar";
 import PlaySection from "./components/PlaySection";
 import ModsSection from "./components/ModsSection";
 import SettingsSection from "./components/SettingsSection";
-import { getVersions } from "./lib/saturn";
+import { versions } from "./lib/saturn";
 import { GameVersion } from "./lib/types";
 
 type Section = "play" | "mods" | "settings";
 
 export default function App() {
   const [active, setActive] = useState<Section>("play");
-  const [versions, setVersions] = useState<GameVersion[]>([]);
   const [selectedVersion, setSelectedVersion] = useState<GameVersion | null>(
     null,
   );
 
-  const [versionOpen, setVersionOpen] = useState(false);
+  const [isVersionDropdownOpen, setIsVersionDropdownOpen] = useState(false);
-  const [accountOpen, setAccountOpen] = useState(false);
+  const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false);
 
-  useEffect(() => {
+  const versionRef = useRef<HTMLDivElement | null>(null);
-    getVersions().then((v) => {
+  const accountRef = useRef<HTMLDivElement | null>(null);
-      setVersions(v);
-      if (v.length) setSelectedVersion(v[0]);
-    });
-  }, []);
 
   return (
     <div className="flex h-screen">
@@ -35,10 +30,12 @@ export default function App() {
           versions={versions}
           selectedVersion={selectedVersion}
           setSelectedVersion={setSelectedVersion}
-          versionOpen={versionOpen}
+          isVersionDropdownOpen={isVersionDropdownOpen}
-          setVersionOpen={setVersionOpen}
+          setIsVersionDropdownOpen={setIsVersionDropdownOpen}
-          accountOpen={accountOpen}
+          isAccountDropdownOpen={isAccountDropdownOpen}
-          setAccountOpen={setAccountOpen}
+          setIsAccountDropdownOpen={setIsAccountDropdownOpen}
+          versionRef={versionRef}
+          accountRef={accountRef}
         />
 
         <div className="flex-1 p-8">

src/components/layout/AccountDropdown.tsx

@@ -1,36 +1,58 @@
 import { User, LogOut } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Props } from "./props";
 
-import { twMerge } from "tailwind-merge";
+export default function AccountDropdown({
-
+  isAccountDropdownOpen,
-interface Props {
+  setIsAccountDropdownOpen,
-  open: boolean;
+  accountRef,
-  setOpen: (v: boolean) => void;
+}: Props) {
-}
-
-export default function AccountDropdown({ open, setOpen }: Props) {
   return (
-    <div className="relative">
+    <div ref={accountRef} className="relative group overflow-visible">
+      <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="flex items-center gap-3 px-4 py-2 rounded-lg btn-primary"
+        className="relative z-10 flex items-center gap-3 pl-20 pr-4 py-2 rounded-lg btn-primary"
-        onClick={() => setOpen(!open)}
+        onClick={() => setIsAccountDropdownOpen((prev: boolean) => !prev)}
       >
-        <div>
+        <div className="absolute -top-2 left-4 group-hover:scale-110 transition-transform duration-700 w-12 overflow-hidden z-20">
-          <p className="text-xs opacity-70">Playing as</p>
+          <img
-          <p className="font-bold">SaturnDev</p>
+            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={twMerge(
+        className={cn(
-          "absolute top-full right-0 mt-2 w-48 bg-saturn-panel border rounded-lg",
+          "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",
-          open ? "opacity-100" : "opacity-0 pointer-events-none",
+          isAccountDropdownOpen
+            ? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
+            : "opacity-0 scale-95 -translate-y-2 pointer-events-none",
         )}
       >
-        <button className="w-full flex gap-2 px-4 py-2 hover:bg-white/5">
+        <div className="px-4 py-3 border-b border-saturn-border">
-          <User size={14} /> Switch Account
+          <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 gap-2 px-4 py-2 text-red-400 hover:bg-red-500/10">
+
-          <LogOut size={14} /> Logout
+        <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>

src/components/layout/Sidebar.tsx

@@ -1,27 +1,25 @@
 import { Play, Puzzle, Settings } from "lucide-react";
-import { twMerge } from "tailwind-merge";
+import Logo from "@/assets/logo.png";
+import { cn } from "@/lib/utils";
 
-type Section = "play" | "mods" | "settings";
+export default function Sidebar({ active, setActive }: any) {
-
-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">
+      <div>
+        <img src={Logo} alt="Saturn Logo" className="w-10 h-10" />
+      </div>
+
       <nav className="flex flex-col gap-4 h-full">
         <button
           onClick={() => setActive("play")}
-          className={twMerge("sidebar-icon", active === "play" && "active")}
+          className={cn("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")}
+          className={cn("sidebar-icon", active === "mods" && "active")}
         >
           <Puzzle
             size={22}
@@ -31,7 +29,7 @@ export default function Sidebar({ active, setActive }: Props) {
 
         <button
           onClick={() => setActive("settings")}
-          className={twMerge("sidebar-icon", active === "settings" && "active")}
+          className={cn("sidebar-icon", active === "settings" && "active")}
         >
           <Settings
             size={22}

src/components/layout/TopBar.tsx

@@ -1,34 +1,13 @@
 import VersionDropdown from "./VersionDropdown";
 import AccountDropdown from "./AccountDropdown";
-import { GameVersion } from "@/lib/types";
+import { Props } from "./props";
-
-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">
+    <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">
-      <VersionDropdown
+      <VersionDropdown {...props} />
-        versions={props.versions}
-        selected={props.selectedVersion}
-        onSelect={props.setSelectedVersion}
-        open={props.versionOpen}
-        setOpen={props.setVersionOpen}
-      />
 
-      <AccountDropdown
+      <AccountDropdown {...props} />
-        open={props.accountOpen}
-        setOpen={props.setAccountOpen}
-      />
     </header>
   );
 }

src/components/layout/VersionDropdown.tsx

@@ -1,52 +1,60 @@
 import { ChevronDown, Check } from "lucide-react";
 import { GameVersion } from "@/lib/types";
-import { twMerge } from "tailwind-merge";
+import { cn } from "@/lib/utils";
-
+import { Props } from "./props";
-interface Props {
-  versions: GameVersion[];
-  selected: GameVersion | null;
-  onSelect: (v: GameVersion) => void;
-  open: boolean;
-  setOpen: (v: boolean) => void;
-}
 
 export default function VersionDropdown({
   versions,
-  selected,
+  selectedVersion,
-  onSelect,
+  setSelectedVersion,
-  open,
+  isVersionDropdownOpen,
-  setOpen,
+  setIsVersionDropdownOpen,
+  setIsAccountDropdownOpen,
+  versionRef,
 }: Props) {
   return (
-    <div className="relative">
+    <div ref={versionRef} className="relative">
-      <button
+      <div className="relative group overflow-visible inline-block">
-        onClick={() => setOpen(!open)}
+        <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" />
-        className="flex items-center gap-2 px-3 py-1.5 rounded-md btn-primary text-sm"
+
-      >
+        <button
-        <span>{selected?.name || "Loading..."}</span>
+          onClick={() => {
-        <ChevronDown
+            setIsVersionDropdownOpen((prev: boolean) => !prev);
-          size={14}
+            setIsAccountDropdownOpen(false);
-          className={twMerge("transition-transform", open && "rotate-180")}
+          }}
-        />
+          className="relative z-10 flex items-center gap-2 px-3 py-1.5 rounded-md btn-primary text-sm font-medium"
-      </button>
+        >
+          <span>{selectedVersion?.name || "Loading..."}</span>
+
+          <ChevronDown
+            size={14}
+            className={cn(
+              "transition-transform",
+              isVersionDropdownOpen && "rotate-180",
+            )}
+          />
+        </button>
+      </div>
 
       <div
-        className={twMerge(
+        className={cn(
-          "absolute top-full left-0 mt-2 w-48 bg-saturn-panel border rounded-lg",
+          "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",
-          open ? "opacity-100" : "opacity-0 pointer-events-none",
+          isVersionDropdownOpen
+            ? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
+            : "opacity-0 scale-95 -translate-y-2 pointer-events-none",
         )}
       >
-        {versions.map((v) => (
+        {versions.map((v: GameVersion) => (
           <button
             key={v.id}
             onClick={() => {
-              onSelect(v);
+              setSelectedVersion(v);
-              setOpen(false);
+              setIsVersionDropdownOpen(false);
             }}
-            className="w-full flex justify-between px-4 py-2 text-sm hover:bg-saturn-accent/10"
+            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"
           >
-            {v.name}
+            <span>{v.name}</span>
-            {selected?.id === v.id && <Check size={14} />}
+            {selectedVersion?.id === v.id && <Check size={14} />}
           </button>
         ))}
       </div>

src/components/layout/props.ts

@@ -0,0 +1,18 @@
+import { GameVersion } from "@/lib/types";
+
+export type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
+
+export interface Props {
+  versions: GameVersion[];
+  selectedVersion: GameVersion | null;
+  setSelectedVersion: SetState<GameVersion | null>;
+
+  isVersionDropdownOpen: boolean;
+  setIsVersionDropdownOpen: SetState<boolean>;
+
+  isAccountDropdownOpen: boolean;
+  setIsAccountDropdownOpen: SetState<boolean>;
+
+  versionRef: React.RefObject<HTMLDivElement | null>;
+  accountRef: React.RefObject<HTMLDivElement | null>;
+}

src/lib/saturn.ts

@@ -2,14 +2,12 @@ import { invoke } from "@tauri-apps/api/core";
 import { GameVersion, LauncherSettings, Mod } from "./types";
 
 // --- Versions ---
-export async function getVersions(): Promise<GameVersion[]> {
+export const versions: GameVersion[] = [
-  return [
+  {
-    {
+    id: "1.21.4",
-      id: "1.21.4",
+    name: "Fabric 1.21.4",
-      name: "Fabric 1.21.4",
+  },
-    },
+];
-  ];
-}
 
 // --- Mods ---
 export async function getInstalledMods(versionId: string): Promise<Mod[]> {

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: any[]) {
+  return twMerge(clsx(inputs));
+}