refactor(ui): modular views + themed appearance setting - #2
Merged
Conversation
…setting Split the 1,580-line App.tsx into focused modules: one file per tab view (views/), shared form primitives and the naming modal (components/), and formatting/template-example helpers (lib/). No behavior change intended. Add a theme system: color tokens move to theme.css keyed off a data-theme attribute, with six themes — Daylight, Midnight, Darkroom (safelight red for night vision), Fjord, Paper, Graphite — plus System, which follows the OS light/dark setting live. The choice is a per-machine UI preference stored in localStorage, applied before first paint, picked from a new Appearance section in Settings with swatch previews; it never touches the saved rule config. UI cleanup along the way, per PRODUCT.md's restraint principles: primary buttons and the drive badge lose their gradients for a solid accent, badge and modal-backdrop colors are tokenized so every theme covers them, and index.html gets a real title instead of the template boilerplate. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UXjyz1PRH26JLiJfSDcPHc
Arylmera
marked this pull request as ready for review
July 16, 2026 16:17
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.
What
UI refactor
src/App.tsx(1,580 lines) is split into focused modules with no intended behavior change:src/views/— one file per tab:FlowView,StatusView,CardsView,FoldersView,ActivityView,SettingsViewsrc/components/— shared form primitives (Field,Group,CsvField,RegexField,DestField), the sharedNamingFormmodal, and the newThemePickersrc/lib/— list/format helpers and the template worked-example functionsApp.tsxkeeps only the shell: top bar, tabs, Save, progress strip, event subscriptions, naming-modal dispatchThemes
A new Appearance section in Settings offers seven options, each a token set in
src/theme.csskeyed off adata-themeattribute set bysrc/theme.ts:The choice is a per-machine UI preference in
localStorage— applied before first paint (no flash), switching instantly without dirtying the Save flow, and never written into the TOML rule config. No Rust changes.Cleanup (per PRODUCT.md's restraint principles)
--on-accentkeeps button text legible per theme.index.htmltitle fixed from theTauri + React + Typescriptboilerplate toFileFlow.Verification
tsc --noEmitandvite buildpass.vite dev(the frontend renders standalone via the non-Tauri IPC fallback): all six tabs render; adding/editing drive & folder rules flips the Save button to dirty; the invalid-regex badge still fires; each theme applies to the real computed background, persists across reload, and System follows emulated OS dark/light changes.🤖 Generated with Claude Code
https://claude.ai/code/session_01UXjyz1PRH26JLiJfSDcPHc
Generated by Claude Code