From 92a020e06f32bf06151a5987305371c70e059ea4 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Fri, 3 Apr 2026 16:01:36 +0200
Subject: [PATCH] Improved account switcher button

---
 src/App.tsx | 164 +++++++++++++++++++++++++++++++++-------------------
 1 file changed, 104 insertions(+), 60 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9e5aa24..4063bec 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,36 +1,46 @@
-import React, { useState, useEffect } from 'react'
-import { Play, Puzzle, Settings, ChevronDown, User, LogOut, Check } from 'lucide-react'
-import { launcherService, type GameVersion } from './services/LauncherService'
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import React, { useState, useEffect } from "react";
+import {
+  Play,
+  Puzzle,
+  Settings,
+  ChevronDown,
+  Check,
+  User,
+  LogOut,
+} from "lucide-react";
+import { launcherService, type GameVersion } from "./services/LauncherService";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 // Utility for merging tailwind classes
 function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 // Components
-import PlaySection from './components/PlaySection'
-import ModsSection from './components/ModsSection'
-import SettingsSection from './components/SettingsSection'
+import PlaySection from "./components/PlaySection";
+import ModsSection from "./components/ModsSection";
+import SettingsSection from "./components/SettingsSection";
 
-type Section = 'play' | 'mods' | 'settings'
+type Section = "play" | "mods" | "settings";
 
 const App: React.FC = () => {
-  const [activeSection, setActiveSection] = 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 [activeSection, setActiveSection] = 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);
 
   useEffect(() => {
     const fetchVersions = async () => {
-      const v = await launcherService.getVersions()
-      setVersions(v)
-      if (v.length > 0) setSelectedVersion(v[0])
-    }
-    fetchVersions()
-  }, [])
+      const v = await launcherService.getVersions();
+      setVersions(v);
+      if (v.length > 0) setSelectedVersion(v[0]);
+    };
+    fetchVersions();
+  }, []);
 
   return (
     <div className="flex h-screen w-screen bg-saturn-bg text-saturn-text-primary overflow-hidden font-sans">
@@ -41,30 +51,42 @@ const App: React.FC = () => {
             <span className="font-bold text-white text-xl">S</span>
           </div>
         </div>
-        
+
         <nav className="flex flex-col gap-4">
-          <button 
-            onClick={() => setActiveSection('play')}
-            className={cn("sidebar-icon", activeSection === 'play' && "active")}
+          <button
+            onClick={() => setActiveSection("play")}
+            className={cn("sidebar-icon", activeSection === "play" && "active")}
             title="Play"
           >
-            <Play size={22} fill={activeSection === 'play' ? "currentColor" : "none"} />
+            <Play
+              size={22}
+              fill={activeSection === "play" ? "currentColor" : "none"}
+            />
           </button>
-          
-          <button 
-            onClick={() => setActiveSection('mods')}
-            className={cn("sidebar-icon", activeSection === 'mods' && "active")}
+
+          <button
+            onClick={() => setActiveSection("mods")}
+            className={cn("sidebar-icon", activeSection === "mods" && "active")}
             title="Mods"
           >
-            <Puzzle size={22} fill={activeSection === 'mods' ? "currentColor" : "none"} />
+            <Puzzle
+              size={22}
+              fill={activeSection === "mods" ? "currentColor" : "none"}
+            />
           </button>
-          
-          <button 
-            onClick={() => setActiveSection('settings')}
-            className={cn("sidebar-icon", activeSection === 'settings' && "active")}
+
+          <button
+            onClick={() => setActiveSection("settings")}
+            className={cn(
+              "sidebar-icon",
+              activeSection === "settings" && "active",
+            )}
             title="Settings"
           >
-            <Settings size={22} fill={activeSection === 'settings' ? "currentColor" : "none"} />
+            <Settings
+              size={22}
+              fill={activeSection === "settings" ? "currentColor" : "none"}
+            />
           </button>
         </nav>
       </aside>
@@ -72,26 +94,32 @@ const App: React.FC = () => {
       {/* 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">
+        <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 className="relative">
-            <button 
+            <button
               onClick={() => setIsVersionDropdownOpen(!isVersionDropdownOpen)}
               className="flex items-center gap-2 px-3 py-1.5 rounded-md hover:bg-white/5 transition-colors text-sm font-medium border border-transparent hover:border-saturn-border"
             >
               <span className="text-saturn-text-secondary">Version:</span>
-              <span>{selectedVersion?.name || 'Loading...'}</span>
-              <ChevronDown size={14} className={cn("transition-transform", isVersionDropdownOpen && "rotate-180")} />
+              <span>{selectedVersion?.name || "Loading..."}</span>
+              <ChevronDown
+                size={14}
+                className={cn(
+                  "transition-transform",
+                  isVersionDropdownOpen && "rotate-180",
+                )}
+              />
             </button>
-            
+
             {isVersionDropdownOpen && (
               <div className="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">
-                {versions.map(v => (
+                {versions.map((v) => (
                   <button
                     key={v.id}
                     onClick={() => {
-                      setSelectedVersion(v)
-                      setIsVersionDropdownOpen(false)
+                      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"
                   >
@@ -103,18 +131,28 @@ const App: React.FC = () => {
             )}
           </div>
 
-          {/* Account Display */}
-          <div className="relative">
-            <button 
+          {/* Account Selector */}
+          <div 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)}
-              className="flex items-center gap-3 px-2 py-1 rounded-full hover:bg-white/5 transition-colors border border-transparent hover:border-saturn-border"
             >
-              <div className="text-right hidden sm:block">
-                <p className="text-xs font-bold leading-none">SaturnDev</p>
-                <p className="text-[10px] text-saturn-text-secondary leading-none mt-1">Microsoft Account</p>
+              {/* 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="w-8 h-8 rounded-md bg-zinc-800 border border-saturn-border overflow-hidden flex items-center justify-center">
-                <User size={18} className="text-saturn-text-secondary" />
+
+              <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>
 
@@ -122,7 +160,9 @@ const App: React.FC = () => {
               <div className="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">
                 <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>
+                  <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} />
@@ -139,13 +179,17 @@ const App: React.FC = () => {
 
         {/* Content Sections */}
         <div className="flex-1 overflow-y-auto overflow-x-hidden p-8">
-          {activeSection === 'play' && selectedVersion && <PlaySection version={selectedVersion} />}
-          {activeSection === 'mods' && selectedVersion && <ModsSection version={selectedVersion} />}
-          {activeSection === 'settings' && <SettingsSection />}
+          {activeSection === "play" && selectedVersion && (
+            <PlaySection version={selectedVersion} />
+          )}
+          {activeSection === "mods" && selectedVersion && (
+            <ModsSection version={selectedVersion} />
+          )}
+          {activeSection === "settings" && <SettingsSection />}
         </div>
       </main>
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;