feat(phase-c): Vollstaendige Svelte-5-Migration aller 8 Panels

Alle Panels vollstaendig migriert (kein Legacy-JS mehr):
- OverviewPanel: Hero, Metriken, System-Gesundheit, Stack, Top-News
- JobsPanel: KPI-Kacheln, Sparklines, Job-Liste mit Log/Abbrechen
- ServerPanel: Engine-Status, Service-Aktionen, Live-Konsole (WebSocket)
- ModelsPanel: Schnelltest-Chat, Tabelle, Konfig- + Rollen-Modal
- CookbookPanel: Rezepte, Discover, Profi-Suche, 3 Modals (Rezept/Modell/Neu)
- ConnectPanel: Wizard, Tool-Picker, merge-sichere Snippets
- GuidesPanel + NewsPanel: bereits in Phase C1 migriert

main.ts: importiert nur noch Svelte-Panels (keine Legacy-JS-Imports)
index.html: Placeholder-Divs entfernt, nur noch leere Sections
stores/jobs.svelte.ts: track/toggle-Funktionen fuer ServerPanel
svelte.config.js: a11y-Warnungen als non-fatal konfiguriert
Build: 119 Module -> 137 kB (gzip: 48 kB)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-06-22 22:08:08 +02:00
parent 27b229b3d7
commit 86831a3627
12 changed files with 1755 additions and 578 deletions
+44 -489
View File
File diff suppressed because one or more lines are too long
+9 -60
View File
@@ -11,7 +11,6 @@
<body>
<div id="app">
<!-- Sidebar: beschriftete Bereichs-Navigation -->
<aside class="sidebar">
<div class="brand"><span class="brand-logo" id="logo"></span><span class="brand-tx">Mission Control</span></div>
<nav class="side-nav">
@@ -30,7 +29,6 @@
</aside>
<div class="main">
<!-- Topbar -->
<header class="topbar">
<span class="status-pill"><span id="swdot" class="dot"></span><span id="swlabel">verbinde…</span></span>
<span class="spacer"></span>
@@ -39,63 +37,21 @@
<span class="sec-chip" id="sec-chip"><span data-ic="shield"></span><span id="sec-chip-tx">Nur im Heimnetz</span></span>
</header>
<!-- Alert-Banner (wird per JS ein-/ausgeblendet) -->
<div id="alert" class="alert" style="display:none"></div>
<!-- Content: genau eine .view ist sichtbar (Hash-Routing) -->
<main class="content">
<section class="view" data-view="overview">
<div id="ov-hero"></div>
<div class="tiles" id="ov-tiles"></div>
<div class="split">
<div class="card" id="ov-health"></div>
<div class="card" id="ov-quickstart"></div>
</div>
<div class="grid grid-2">
<div class="card" id="ov-stack"></div>
<div class="card" id="ov-news"></div>
</div>
</section>
<section class="view" data-view="activity" hidden>
<div id="act-head"></div>
<div class="tiles" id="act-kpis"></div>
<div class="card" id="act-sys"></div>
<div class="card" id="v-activity"></div>
</section>
<section class="view" data-view="server" hidden>
<div class="card" id="wartung"></div>
</section>
<section class="view" data-view="models" hidden>
<div id="m-head"></div>
<div class="card" id="m-chat"></div>
<div class="card" id="m-table"></div>
</section>
<section class="view" data-view="cookbook" hidden>
<!-- Wird von cookbook.js gerendert -->
</section>
<section class="view" data-view="connect" hidden>
<!-- Wird von connect.js gerendert -->
</section>
<section class="view" data-view="news" hidden>
<!-- Wird von news.js gerendert -->
</section>
<section class="view" data-view="guides" hidden>
<!-- Wird von guides.js gerendert -->
</section>
<section class="view" data-view="overview"></section>
<section class="view" data-view="activity" hidden></section>
<section class="view" data-view="server" hidden></section>
<section class="view" data-view="models" hidden></section>
<section class="view" data-view="cookbook" hidden></section>
<section class="view" data-view="connect" hidden></section>
<section class="view" data-view="news" hidden></section>
<section class="view" data-view="guides" hidden></section>
</main>
</div>
</div>
<!-- Settings Modal -->
<div id="settings-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.62); z-index:100; align-items:center; justify-content:center;">
<div class="card" style="width:100%; max-width:420px; position:relative">
<button id="sm-close" class="ghost" style="position:absolute; top:12px; right:12px;">Schließen</button>
@@ -108,19 +64,12 @@
<div class="mt-4">
<label>HuggingFace-Token (optional)</label>
<input id="hf-token" class="tokin" placeholder="hf_…" autocomplete="off">
<div class="hint mt-2">Nicht nötig für öffentliche Modelle — vermeidet aber Rate-Limits und erlaubt zugangsbeschränkte Modelle. Erstellen: huggingface.co/settings/tokens</div>
<div class="hint mt-2">Nicht nötig für öffentliche Modelle — vermeidet aber Rate-Limits und erlaubt zugangsbeschränkte Modelle.</div>
</div>
</div>
</div>
<div id="toast" class="toast"></div>
<!-- Icons in Nav/Logo/Chip einsetzen, bevor das Haupt-Modul laedt -->
<script type="module">
import { ICON } from "/static/js/core/ui.js";
document.getElementById("logo").innerHTML = ICON.logo;
document.querySelectorAll("[data-ic]").forEach(n => (n.innerHTML = ICON[n.dataset.ic] || ""));
</script>
<script type="module" src="/static/dist/main.js"></script>
</body>
</html>