root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add: Update-Modal mit Download-Fortschritt in Electron App

Browse source 
- Modal-Overlay statt Banner fuer Update-Benachrichtigung
- 3 Zustaende: Downloading (Ladeanimation), Ready (OK-Button), Error
- IPC-Events: update-available, update-ready, update-error
This commit is contained in:
Daniel 2026-03-07 14:24:59 +01:00
parent feeabe147c
commit c2942737bd
4 changed files with 94 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

48
web/src/App.tsx
View file

@ -27,7 +27,7 @@ export function registerTab(pluginName: string, component: React.FC<{ data: any
export default function App() {
const [connected, setConnected] = useState(false);
const [plugins, setPlugins] = useState<PluginInfo[]>([]);
const [updateReady, setUpdateReady] = useState(false);
const [updateState, setUpdateState] = useState<'idle' | 'downloading' | 'ready' | 'error'>('idle');
const [activeTab, setActiveTabRaw] = useState<string>(() => localStorage.getItem('hub_activeTab') ?? '');
const setActiveTab = (tab: string) => {
@ -97,8 +97,10 @@ export default function App() {
// Listen for Electron auto-update events
useEffect(() => {
const api = (window as any).electronAPI;
if (!api?.onUpdateReady) return;
api.onUpdateReady(() => setUpdateReady(true));
if (!api?.onUpdateAvailable) return;
api.onUpdateAvailable(() => setUpdateState('downloading'));
api.onUpdateReady(() => setUpdateState('ready'));
api.onUpdateError?.(() => setUpdateState('error'));
}, []);
// Tab icon mapping
@ -153,12 +155,40 @@ export default function App() {
</div>
</header>
{updateReady && (
<div className="hub-update-bar">
<span>Neues Update verfügbar!</span>
<button onClick={() => (window as any).electronAPI?.installUpdate()}>
Jetzt neu starten
</button>
{updateState !== 'idle' && (
<div className="hub-update-overlay">
<div className="hub-update-modal">
{updateState === 'downloading' && (
<>
<div className="hub-update-icon">{'\u2B07\uFE0F'}</div>
<h2>Update verfügbar</h2>
<p>Update wird heruntergeladen...</p>
<div className="hub-update-progress">
<div className="hub-update-progress-bar" />
</div>
</>
)}
{updateState === 'ready' && (
<>
<div className="hub-update-icon">{'\u2705'}</div>
<h2>Update bereit!</h2>
<p>Die App wird neu gestartet, um das Update zu installieren.</p>
<button className="hub-update-btn" onClick={() => (window as any).electronAPI?.installUpdate()}>
OK
</button>
</>
)}
{updateState === 'error' && (
<>
<div className="hub-update-icon">{'\u274C'}</div>
<h2>Update fehlgeschlagen</h2>
<p>Das Update konnte nicht heruntergeladen werden.</p>
<button className="hub-update-btn" onClick={() => setUpdateState('idle')}>
Schließen
</button>
</>
)}
</div>
</div>
)}