feat: Professional UI overhaul - design system, CSS/JS extraction, settings reorg (#198)#199
Conversation
…ab reorganization (#198) - Extract 728 lines of inline CSS from base.html into static/css/style.css - Add CSS design tokens (spacing scale, border radius, transitions) - Consolidate duplicate escapeHtml/showToast from 5 templates into static/js/common.js - Reorganize Settings from 7 tabs to 4 (Library, Engine, Pipeline, Integrations) - Add mobile responsive breakpoints for tables, nav-tabs, cards, stat numbers - Replace hardcoded hex colors with CSS variables across all templates - Change accent success color from #00ff00 to #2ecc71 - Add sticky settings save bar with backdrop blur - Replace inline font-size styles with utility classes - Extract setup wizard styles with setup-mode body class - Bump version to 0.9.0-beta.143
![bucket-agent[bot]](https://avatars.githubusercontent.com/in/2751175?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review complete. Written to pr_199_review.md.
Summary: One blocking issue found — 11 duplicate class attributes across 4 template files. When style="font-size: 2rem;" was replaced with class="fs-icon-lg", the replacement was added as a second class attribute instead of being merged into the existing one. Browsers silently ignore the second class, so the icons will lose their sizing and stat cards will lose their pointer cursor. The fix is mechanical — merge into single class attributes.
Everything else is solid work: CSS extraction with proper design tokens, JS consolidation with improved null handling, settings reorg from 7→4 tabs, correct Skaldleita theme preservation, and proper scope alignment with issue #198.
There was a problem hiding this comment.
Review written to pr_199_review.md.
Verdict: APPROVE
This is a clean UI refactoring PR that does exactly what it claims:
- Extracts ~730 lines of inline CSS from
base.htmlintostatic/css/style.csswith a proper design token system - Consolidates duplicate
escapeHtml()andshowToast()from 5+ templates intostatic/js/common.js - Reorganizes settings from 7 tabs to 4 logical groups
- Replaces hardcoded hex colors with CSS variables
- Adds mobile responsive breakpoints
- Bonus: fixes an undefined
--theme-text-tertiaryCSS variable that was silently failing
No security issues, no logic changes, no backend modifications beyond the version bump. Flask serves /static/ by default, and the Dockerfile's COPY . . captures the new directory. Scope fully aligned with issue #198.
1 participant
Summary
Comprehensive frontend overhaul touching every template. Professional polish, not a reskin.
CSS Extraction & Design System
<style>in base.html →static/css/style.css--theme-accent-successfrom eye-burning#00ff00→ professional#2ecc71JS Consolidation
static/js/common.jswith sharedescapeHtml()andshowToast()Settings Reorganization (7 tabs → 4)
No form field names changed — backend POST handler untouched.
Consistency Pass
style=attributes replaced with CSS classes where possible.fs-icon-lg,.fs-icon-xl,.cursor-pointer,.scroll-container.settings-save-bar)Test plan
Closes #198