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 { 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">
@@ -44,27 +54,39 @@ const App: React.FC = () => {
<nav className="flex flex-col gap-4">
<button
onClick={() => setActiveSection('play')}
className={cn("sidebar-icon", activeSection === 'play' && "active")}
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")}
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")}
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,7 +94,7 @@ 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
@@ -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"
>
<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">
{/* 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;