Add: Update-Dialog fuer Electron Auto-Updater

- main.js: IPC-Events an Renderer senden wenn Update bereit
- main.js: install-update IPC Handler (quitAndInstall)
- App.tsx: Update-Banner "Neues Update verfuegbar!" mit Restart-Button
- styles.css: Update-Bar Styling passend zum Design-System

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel 2026-03-07 13:53:26 +01:00
parent 06ab7f523b
commit 7ef4eefc55
3 changed files with 52 additions and 1 deletions

View file

@ -27,6 +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 [activeTab, setActiveTabRaw] = useState<string>(() => localStorage.getItem('hub_activeTab') ?? '');
const setActiveTab = (tab: string) => {
@ -93,6 +94,13 @@ export default function App() {
const version = (import.meta as any).env?.VITE_APP_VERSION ?? '1.5.0';
// Listen for Electron auto-update events
useEffect(() => {
const api = (window as any).electronAPI;
if (!api?.onUpdateReady) return;
api.onUpdateReady(() => setUpdateReady(true));
}, []);
// Tab icon mapping
const tabIcons: Record<string, string> = {
radio: '\u{1F30D}',
@ -145,6 +153,15 @@ 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>
</div>
)}
<main className="hub-content">
{plugins.length === 0 ? (
<div className="hub-empty">

View file

@ -226,6 +226,34 @@ html, body {
border-radius: 4px;
}
/* ── Update Banner ── */
.hub-update-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px 16px;
background: rgba(var(--accent-rgb), 0.15);
border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
font-size: 13px;
font-weight: 500;
color: var(--accent);
}
.hub-update-bar button {
padding: 4px 14px;
font-size: 12px;
font-weight: 600;
border: none;
border-radius: var(--radius);
background: var(--accent);
color: #fff;
cursor: pointer;
transition: opacity var(--transition);
}
.hub-update-bar button:hover {
opacity: 0.85;
}
/* ── Main Content Area ── */
.hub-content {
flex: 1;