feat(web): iOS-soft design system, overview page and compact density - #69
Merged
Conversation
Replace the stylesheet with a tokenised design system (light hero, dark via surface elevation, iOS blue accent) and route the existing dashboard as the new "Übersicht" page. - app.css: full rewrite into commented sections (tokens, shell, topbar, buttons, forms, cards, badges, inset lists, overview, scan flow, history, manage, settings, statistics, dialogs, bottom nav, motion, responsive, density) - nav: add overview between scan and history (sidebar, bottom nav, store) - App.svelte: render DashboardView for page "overview", add its labels - DashboardView: map hero/empty-state actions to real pages - settings: honour settings.compactTables via data-density="compact" on the app shell and expose the switch in Einstellungen → Oberfläche - align PWA theme colour (index.html, manifest.json) with the blue accent - drop the arrow from the history button label (design anti-pattern) - meta boxes: keep both columns equal and ellipsise long routes - docs: replace the stale redesign plan with the design-system reference Verified with npm run build, npm run check (0/0) and npm run test:e2e, plus a stubbed click-through of every view in light, dark, compact and mobile. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PnunQ6KenoLUPCZRxjvhDd
fgrfn
marked this pull request as ready for review
September 7, 2026 21:30
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Setzt das abgestimmte WebUI-Redesign auf der bestehenden Svelte-4-Basis um. Kein Rewrite, keine neuen Dependencies, API/WebSocket/i18n-Flows unangetastet.
Änderungen
Design-System
app/web/src/app.csskomplett neu: Token-Layer (Light als Held, Dark gleichwertig über Flächen-Ebenen statt Schatten, iOS-Blau#007aff/#0a84ff) und 20 kommentierte Sektionen. Klassennamen bleiben stabil, die Views erben den Look ohne Markup-Churn.index.htmlundpublic/manifest.jsonauf den Blau-Akzent vereinheitlicht (vorher#38bdf8bzw.#6ae3ff).Navigation
overviewzwischen Scan und Verlauf (Store, Sidebar, BottomNav → jetzt 5 Items).App.svelterendert die bereits vorhandene, bislang nicht verdrahteteDashboardViewfürpage === 'overview'und ergänzt Titel/Untertitel (DE+EN).DashboardView: Hero- und Empty-State-Aktionen zeigen auf reale Seiten (new-scan→scan,devices/targets→manage).Compact-Modus
settings.compactTableswirkt jetzt:App.sveltesetztdata-density="compact"auf.app-shell(analog zudata-theme), Sektion 20 inapp.cssreduziert Padding und Zeilenhöhe in Listen, History-, Resource- und Settings-Karten.compactTablesLabel. Vorher war die Einstellung weder sichtbar noch wirksam.Kleinigkeiten aus dem Durchklick
.meta-box:min-width:0und Block-Wert, damit beide Spalten gleich breit bleiben und lange Routen mit Ellipse abgeschnitten werden statt die Karte zu sprengen.Doku
docs/webui-redesign-plan.mdbeschrieb einen nicht mehr existierenden Stand (monolithischeApp.svelte,Mobile.svelte,alert()). Ersetzt durch die Design-System-Referenz: Entscheidungen, Tokens, Aufbau vonapp.css, Density, Leitplanken, Verifikationsbefehle.Verifikation
npm run build✓npm run check→ 0 errors / 0 warningsnpm run test:e2e→ 1/1 (Multipage-Scan-Flow)app.cssvs. Svelte-Markup: keine ungestylten KlassenOffen (nicht Teil dieses PRs)
views/StatisticsView.svelteist in keiner Route eingebunden; die Chart-Styles existieren, die View ist nicht erreichbar.delivery_failed,scanning,processing,delivering,retry_scheduledfehlenstatus_*-Keys inlib/i18n.js— Badges zeigen dort den Rohwert. Übersetzung ist eine inhaltliche Entscheidung.🤖 Generated with Claude Code
https://claude.ai/code/session_01PnunQ6KenoLUPCZRxjvhDd
Generated by Claude Code