From 8d9a1729933958ed1abaaabc048d7017da0de6ba Mon Sep 17 00:00:00 2001 From: mARTin-B78 Date: Fri, 4 Sep 2026 11:10:43 +0200 Subject: [PATCH] refactor: split resource diagnostics styles --- CHANGELOG.md | 2 ++ TODO.md | 1 + VERSION | 2 +- docs/ARCHITECTURE.md | 1 + static/css/resource-diagnostics.css | 6 ++++++ static/index.html | 7 ++++--- static/style.css | 5 ----- 7 files changed, 15 insertions(+), 9 deletions(-) create mode 100644 static/css/resource-diagnostics.css diff --git a/CHANGELOG.md b/CHANGELOG.md index bbe21e5..6cf8c27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi ## [Unreleased] ### Changed +- **Resource diagnostics stylesheet split.** Performance-panel styles now live in `static/css/resource-diagnostics.css` + and are loaded with the same release cache-busting version as the core stylesheet. - **Audiobook cast export extraction.** Markdown serialization and legacy page-stamping migration now live in `audiobook-cast.js`, leaving the live casting workflow in `audiobook.js` and preserving the same global helpers. - **Rehearser training extraction.** Transcript normalization, LCS matching, and word-level comparison now live in diff --git a/TODO.md b/TODO.md index b7bf8aa..6b0d299 100644 --- a/TODO.md +++ b/TODO.md @@ -136,6 +136,7 @@ architecture change: the larger Audiobook/Rehearser/style split. - [ ] Extract Audiobook parsing and casting. - [x] Extract Audiobook parsing primitives and speaker-heuristic constants into `audiobook-parse.js`. - [x] Extract Audiobook cast serialization and page-stamping helpers into `audiobook-cast.js`. +- [x] Split the Performance/resource diagnostic styles into `static/css/resource-diagnostics.css`. - [ ] Split `style.css` by feature. - [ ] Do not migrate to TypeScript or rewrite the frontend until behavior is covered by tests. diff --git a/VERSION b/VERSION index 7388294..a122672 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.24.33 +1.24.34 diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index d666ffc..a8e7f72 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -36,6 +36,7 @@ Done incrementally as global-scope ordered files (no ES-module change needed) - ✅ `rehearser-cast.js` — cast view, sort/filter state handlers, and cast toolbar wiring; card rendering remains in `rehearser.js`. - ✅ `audiobook-parse.js` — dialogue detection, dehyphenation, and speaker-heuristic constants; the casting pipeline remains in `audiobook.js`. - ✅ `audiobook-cast.js` — cast Markdown export and legacy page-stamping migration helpers; live casting remains in `audiobook.js`. +- ✅ `static/css/resource-diagnostics.css` — isolated Performance/resource diagnostic panel styles. - ✅ `rehearser-train.js` — transcript normalization, LCS comparison, and word-level training feedback; microphone/state wiring remains in `rehearser.js`. - ✅ `rehearser-library.js` — SQLite persistence helpers and IndexedDB migration; import/export and auto-save remain in `rehearser.js` until their UI/event-handler dependencies are isolated. diff --git a/static/css/resource-diagnostics.css b/static/css/resource-diagnostics.css new file mode 100644 index 0000000..8fe01ea --- /dev/null +++ b/static/css/resource-diagnostics.css @@ -0,0 +1,6 @@ +/* ── Performance/resource diagnostics ─────────────────────────────────────── */ +.resource-diagnostics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } +.resource-diagnostic-item { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); } +.resource-diagnostic-item span { color: var(--subtext); font-size: 11px; } +.resource-diagnostic-item strong { font-size: 14px; } +.resource-diagnostic-subhead { grid-column: 1 / -1; margin-top: 8px; color: var(--subtext); font-size: 12px; font-weight: 700; } diff --git a/static/index.html b/static/index.html index 45225db..50362ce 100644 --- a/static/index.html +++ b/static/index.html @@ -10,7 +10,7 @@ - + @@ -27,7 +27,8 @@ - + + @@ -392,7 +393,7 @@ window.toggleNavTree = function(treeId, chevronId) { - + diff --git a/static/style.css b/static/style.css index 531237d..111e40b 100644 --- a/static/style.css +++ b/static/style.css @@ -3742,11 +3742,6 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami .background-job-main code { color: var(--subtext); font-size: 10px; } .background-job-detail, .background-job-meta { grid-column: 1 / -1; color: var(--subtext); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .background-job-artifact { grid-column: 1 / -1; color: var(--accent); font-size: 11px; } -.resource-diagnostics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } -.resource-diagnostic-item { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); } -.resource-diagnostic-item span { color: var(--subtext); font-size: 11px; } -.resource-diagnostic-item strong { font-size: 14px; } -.resource-diagnostic-subhead { grid-column: 1 / -1; margin-top: 8px; color: var(--subtext); font-size: 12px; font-weight: 700; } .background-job-row.is-error .background-job-detail { color: var(--red); } .background-job-row.is-done .background-job-meta { color: var(--green, #22c55e); } .background-job-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }