saturnclientmc/launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Improved account switcher button

Browse Source
This commit is contained in:
selimaj-dev
2026-04-03 16:01:36 +02:00
parent 581a8ca282
commit 92a020e06f
1 changed files with 104 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+95 -51
View File
@@ -1,36 +1,46 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from "react";
import { Play, Puzzle, Settings, ChevronDown, User, LogOut, Check } from 'lucide-react' import {
import { launcherService, type GameVersion } from './services/LauncherService' Play,
import { clsx, type ClassValue } from 'clsx' Puzzle,
import { twMerge } from 'tailwind-merge' 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 // Utility for merging tailwind classes
function cn(...inputs: ClassValue[]) { function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs));
} }
// Components // Components
import PlaySection from './components/PlaySection' import PlaySection from "./components/PlaySection";
import ModsSection from './components/ModsSection' import ModsSection from "./components/ModsSection";
import SettingsSection from './components/SettingsSection' import SettingsSection from "./components/SettingsSection";
type Section = 'play' | 'mods' | 'settings' type Section = "play" | "mods" | "settings";
const App: React.FC = () => { const App: React.FC = () => {
const [activeSection, setActiveSection] = useState<Section>('play') const [activeSection, setActiveSection] = useState<Section>("play");
const [versions, setVersions] = useState<GameVersion[]>([]) const [versions, setVersions] = useState<GameVersion[]>([]);
const [selectedVersion, setSelectedVersion] = useState<GameVersion | null>(null) const [selectedVersion, setSelectedVersion] = useState<GameVersion | null>(
const [isVersionDropdownOpen, setIsVersionDropdownOpen] = useState(false) null,
const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false) );
const [isVersionDropdownOpen, setIsVersionDropdownOpen] = useState(false);
const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false);
useEffect(() => { useEffect(() => {
const fetchVersions = async () => { const fetchVersions = async () => {
const v = await launcherService.getVersions() const v = await launcherService.getVersions();
setVersions(v) setVersions(v);
if (v.length > 0) setSelectedVersion(v[0]) if (v.length > 0) setSelectedVersion(v[0]);
} };
fetchVersions() fetchVersions();
}, []) }, []);
return ( return (
<div className="flex h-screen w-screen bg-saturn-bg text-saturn-text-primary overflow-hidden font-sans"> <div className="flex h-screen w-screen bg-saturn-bg text-saturn-text-primary overflow-hidden font-sans">
@@ -44,27 +54,39 @@ const App: React.FC = () => {
<nav className="flex flex-col gap-4"> <nav className="flex flex-col gap-4">
<button <button
onClick={() => setActiveSection('play')} onClick={() => setActiveSection("play")}
className={cn("sidebar-icon", activeSection === 'play' && "active")} className={cn("sidebar-icon", activeSection === "play" && "active")}
title="Play" title="Play"
> >
<Play size={22} fill={activeSection === 'play' ? "currentColor" : "none"} /> <Play
size={22}
fill={activeSection === "play" ? "currentColor" : "none"}
/>
</button> </button>
<button <button
onClick={() => setActiveSection('mods')} onClick={() => setActiveSection("mods")}
className={cn("sidebar-icon", activeSection === 'mods' && "active")} className={cn("sidebar-icon", activeSection === "mods" && "active")}
title="Mods" title="Mods"
> >
<Puzzle size={22} fill={activeSection === 'mods' ? "currentColor" : "none"} /> <Puzzle
size={22}
fill={activeSection === "mods" ? "currentColor" : "none"}
/>
</button> </button>
<button <button
onClick={() => setActiveSection('settings')} onClick={() => setActiveSection("settings")}
className={cn("sidebar-icon", activeSection === 'settings' && "active")} className={cn(
"sidebar-icon",
activeSection === "settings" && "active",
)}
title="Settings" title="Settings"
> >
<Settings size={22} fill={activeSection === 'settings' ? "currentColor" : "none"} /> <Settings
size={22}
fill={activeSection === "settings" ? "currentColor" : "none"}
/>
</button> </button>
</nav> </nav>
</aside> </aside>
@@ -72,7 +94,7 @@ const App: React.FC = () => {
{/* Main Content Area */} {/* Main Content Area */}
<main className="flex-1 flex flex-col min-w-0"> <main className="flex-1 flex flex-col min-w-0">
{/* Top Bar */} {/* 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 */} {/* Version Selector */}
<div className="relative"> <div className="relative">
<button <button
@@ -80,18 +102,24 @@ const App: React.FC = () => {
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" 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 className="text-saturn-text-secondary">Version:</span>
<span>{selectedVersion?.name || 'Loading...'}</span> <span>{selectedVersion?.name || "Loading..."}</span>
<ChevronDown size={14} className={cn("transition-transform", isVersionDropdownOpen && "rotate-180")} /> <ChevronDown
size={14}
className={cn(
"transition-transform",
isVersionDropdownOpen && "rotate-180",
)}
/>
</button> </button>
{isVersionDropdownOpen && ( {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"> <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 <button
key={v.id} key={v.id}
onClick={() => { onClick={() => {
setSelectedVersion(v) setSelectedVersion(v);
setIsVersionDropdownOpen(false) 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" 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> </div>
{/* Account Display */} {/* Account Selector */}
<div className="relative"> <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 <button
className="relative z-10 flex items-center gap-3 pl-20 pr-4 py-2 rounded-lg btn-primary"
onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)} 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"> {/* Avatar */}
<p className="text-xs font-bold leading-none">SaturnDev</p> <div className="absolute -top-2 left-4 group-hover:scale-110 transition-transform duration-700 w-12 overflow-hidden z-20">
<p className="text-[10px] text-saturn-text-secondary leading-none mt-1">Microsoft Account</p> <img
src="https://render.crafty.gg/3d/bust/Kr4ight"
className="w-full h-full object-cover"
/>
</div> </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> </div>
</button> </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="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"> <div className="px-4 py-3 border-b border-saturn-border">
<p className="text-sm font-bold">SaturnDev</p> <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> </div>
<button className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-white/5 transition-colors"> <button className="w-full flex items-center gap-2 px-4 py-2 text-sm hover:bg-white/5 transition-colors">
<User size={14} /> <User size={14} />
@@ -139,13 +179,17 @@ const App: React.FC = () => {
{/* Content Sections */} {/* Content Sections */}
<div className="flex-1 overflow-y-auto overflow-x-hidden p-8"> <div className="flex-1 overflow-y-auto overflow-x-hidden p-8">
{activeSection === 'play' && selectedVersion && <PlaySection version={selectedVersion} />} {activeSection === "play" && selectedVersion && (
{activeSection === 'mods' && selectedVersion && <ModsSection version={selectedVersion} />} <PlaySection version={selectedVersion} />
{activeSection === 'settings' && <SettingsSection />} )}
{activeSection === "mods" && selectedVersion && (
<ModsSection version={selectedVersion} />
)}
{activeSection === "settings" && <SettingsSection />}
</div> </div>
</main> </main>
</div> </div>
) );
} };
export default App export default App;