Hitonabi/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactor design system to align with dense mockup

Browse Source
This commit is contained in:
Hitonabi
2026-06-20 22:53:48 +02:00
parent a51f6ee88a
commit c76bcc7293
9 changed files with 940 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/panels/models.js
+4 -4
View File
@@ -20,7 +20,7 @@ function mount() {
$("#m-table").innerHTML = `
<div class="card-h"><h3>Modelle &amp; Ports</h3><span class="meta" id="m-count"></span></div>
<div class="hint" style="margin-bottom: 16px;">
<div class="hint mb-4">
💡 <b>Modelle werden automatisch geladen</b>, sobald eine Chat-Anfrage an sie gestellt wird. Du musst sie nicht manuell starten.
</div>
<table>
@@ -36,13 +36,13 @@ function mount() {
<h2 style="margin-top:0">Modell konfigurieren</h2>
<p class="meta" id="cfg-model-name"></p>
<div style="margin-top:24px">
<div class="mt-6">
<label>Context-Size (Tokens)</label>
<input id="cfg-ctx" type="number" class="tokin" value="8192">
<div class="meta" style="font-size:12px; margin-top:4px;">Höhere Werte erlauben längere Dokumente, brauchen aber mehr VRAM.</div>
<div class="meta text-xs mt-2">Höhere Werte erlauben längere Dokumente, brauchen aber mehr VRAM.</div>
</div>
<button class="primary" id="cfg-save" style="width:100%; margin-top:24px; padding:12px">Speichern</button>
<button class="primary mt-6" id="cfg-save" style="width:100%; padding:var(--sp-3)">Speichern</button>
</div>
</div>
`;
static/js/panels/overview.js
+20 -20
View File
@@ -29,29 +29,29 @@ function renderHero() {
function renderQuickActions() {
// 3 Kacheln (Cookbook, Server-Status, Aktivität/Guides)
$("#ov-quick").innerHTML = `
<div class="card" style="cursor:pointer; display:flex; flex-direction:column; gap:12px; transition:border-color 0.2s" onclick="document.querySelector('.nav-item[data-view=\\'cookbook\\']').click()" onmouseover="this.style.borderColor='var(--act)'" onmouseout="this.style.borderColor='var(--line)'">
<div style="display:flex; justify-content:space-between; align-items:center;">
<h3 style="margin:0; font-size:16px;">Modell finden</h3>
<span style="color:var(--act)">${icon("book")}</span>
<button class="card-btn" onclick="document.querySelector('.nav-item[data-view=\\'cookbook\\']').click()">
<div class="flex justify-between items-center">
<h3>Modell finden</h3>
<span class="text-act">${icon("book")}</span>
</div>
<p style="margin:0; font-size:13px; color:var(--mut);">Durchsuche HuggingFace nach neuen Modellen im Cookbook.</p>
</div>
<p>Durchsuche HuggingFace nach neuen Modellen im Cookbook.</p>
</button>
<div class="card" style="cursor:pointer; display:flex; flex-direction:column; gap:12px; transition:border-color 0.2s" onclick="document.querySelector('.nav-item[data-view=\\'activity\\']').click()" onmouseover="this.style.borderColor='var(--act)'" onmouseout="this.style.borderColor='var(--line)'">
<div style="display:flex; justify-content:space-between; align-items:center;">
<h3 style="margin:0; font-size:16px;">Live Metriken</h3>
<span style="color:var(--act)">${icon("pulse")}</span>
<button class="card-btn" onclick="document.querySelector('.nav-item[data-view=\\'activity\\']').click()">
<div class="flex justify-between items-center">
<h3>Live Metriken</h3>
<span class="text-act">${icon("pulse")}</span>
</div>
<p style="margin:0; font-size:13px; color:var(--mut);">${SYS ? `System läuft (RAM: ${SYS.ram.percent.toFixed(0)}%, CPU: ${SYS.cpu.percent.toFixed(0)}%)` : 'Lade Metriken...'}</p>
</div>
<p>${SYS ? `System läuft (RAM: ${SYS.ram.percent.toFixed(0)}%, CPU: ${SYS.cpu.percent.toFixed(0)}%)` : 'Lade Metriken...'}</p>
</button>
<div class="card" style="cursor:pointer; display:flex; flex-direction:column; gap:12px; transition:border-color 0.2s" onclick="document.querySelector('.nav-item[data-view=\\'server\\']').click()" onmouseover="this.style.borderColor='var(--act)'" onmouseout="this.style.borderColor='var(--line)'">
<div style="display:flex; justify-content:space-between; align-items:center;">
<h3 style="margin:0; font-size:16px;">Wartung</h3>
<span style="color:var(--act)">${icon("server")}</span>
<button class="card-btn" onclick="document.querySelector('.nav-item[data-view=\\'server\\']').click()">
<div class="flex justify-between items-center">
<h3>Wartung</h3>
<span class="text-act">${icon("server")}</span>
</div>
<p style="margin:0; font-size:13px; color:var(--mut);">Server neustarten, VRAM leeren oder Engine aktualisieren.</p>
</div>
<p>Server neustarten, VRAM leeren oder Engine aktualisieren.</p>
</button>
`;
}
@@ -107,9 +107,9 @@ function renderRecentJobs() {
${latest.length
? `<div class="list">
${latest.map(j => `
<div class="li" style="padding:10px 4px">
<div class="li">
<div class="li-main">
<div class="li-id" style="font-size:12.5px">${esc(j.label)}</div>
<div class="li-id text-sm">${esc(j.label)}</div>
</div>
<div class="li-right">${statusBadge(j.state)}</div>
</div>