hugo/RuDS
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement the GUI Style tab (Pico CSS theme editor) #41

New Issue
Closed
opened 2026-07-20 10:38:17 +00:00 by hugo · 1 comment
hugo commented 2026-07-20 10:38:17 +00:00
Owner
Copy Link

Context

The style singleton tab is specified in specs/editor_settings.allium (lines 251–325, StyleViewSurface) and specs/tabs.allium ("style: Pico CSS theme editor"), and bDS2 implements it (../bDS2/lib/bds/desktop/shell_live/settings_editor/style_editor.ex). In RuDS the tab exists but renders a bare placeholder: crates/bds-ui/src/views/workspace.rs maps TabType::Style to ContentRoute::Placeholder. There is currently no way to change the project picoTheme from any surface. This editor is GUI-only — the TUI must not get one (see the companion issue that removes the TUI Style section).

The backend already exists:

  • Preview route /__style-preview in crates/bds-core/src/engine/preview.rs (accepts theme and mode query params, covered by tests).
  • Theme list: supported_pico_themes per specs/metadata.allium (20 named themes).
  • Persistence: picoTheme in meta/project.json via engine::meta (read_project_json / project metadata update; see engine_side_effects.allium UpdateProjectMetadataSideEffects).
  • The GUI already reads picoTheme for the status-bar badge (crates/bds-ui/src/app.rs, search theme_badge).
  • The settings sidebar nav entry (settings.nav.style) already opens the Style tab (crates/bds-ui/src/views/sidebar.rs).

Task

Implement the Style view per StyleViewSurface:

  1. New view module crates/bds-ui/src/views/style_view.rs rendering:
    • A grid of theme buttons, one per supported Pico theme. Each button shows a 3-tone swatch (accent, light bg, dark bg colors) plus the theme name. Display transform for names: - → space, first letter capitalized. Selected theme visually highlighted.
    • Controls row: Preview Mode dropdown (Auto/Light/Dark) and an Apply Theme button, disabled when selection equals the applied theme.
    • Live preview of http://127.0.0.1:4123/__style-preview?theme=<sel>&mode=<mode> using the existing embedded webview component (crates/bds-ui/src/components/webview.rs), updating on selection or preview-mode change.
  2. State: selected theme defaults to applied theme; preview mode is local UI state only and never persisted (@guarantee PreviewModeLocal).
  3. Apply: persist picoTheme into meta/project.json through the shared project-metadata engine path (must emit the normal project metadata domain event), then refresh the status-bar theme badge.
  4. Route TabType::Style to the new view in workspace.rs; remove ContentRoute::Placeholder if the style tab was its last user (it is — delete the variant and welcome::tab_placeholder if now unused).
  5. Requires an active project; without one, no view (@guarantee SeparateTab).
  6. Theme metadata (accent / light bg / dark bg hex per theme) mirrors bDS2's style editor; take the values from ../bDS2/lib/bds/desktop/shell_live/settings_editor/style_editor.ex.
  7. i18n: all new labels via fluent keys in all five locales/ui/*.ftl files (en, de, es, fr, it). No untranslated string constants.
  8. Red/green TDD: state-transition tests (selection vs applied, apply enable/disable, persistence call) plus a test that the applied theme lands in meta/project.json and in the metadata written to the filesystem.

Definition of done

  • Style tab shows the working editor; picking a theme updates the live preview; Apply persists picoTheme and updates the badge.
  • cargo test --workspace passes; no clippy warnings.
  • README.md updated (user-visible feature).
## Context The `style` singleton tab is specified in `specs/editor_settings.allium` (lines 251–325, `StyleViewSurface`) and `specs/tabs.allium` ("style: Pico CSS theme editor"), and bDS2 implements it (`../bDS2/lib/bds/desktop/shell_live/settings_editor/style_editor.ex`). In RuDS the tab exists but renders a bare placeholder: `crates/bds-ui/src/views/workspace.rs` maps `TabType::Style` to `ContentRoute::Placeholder`. There is currently no way to change the project `picoTheme` from any surface. This editor is **GUI-only** — the TUI must not get one (see the companion issue that removes the TUI Style section). The backend already exists: - Preview route `/__style-preview` in `crates/bds-core/src/engine/preview.rs` (accepts `theme` and `mode` query params, covered by tests). - Theme list: `supported_pico_themes` per `specs/metadata.allium` (20 named themes). - Persistence: `picoTheme` in `meta/project.json` via `engine::meta` (`read_project_json` / project metadata update; see `engine_side_effects.allium` UpdateProjectMetadataSideEffects). - The GUI already reads `picoTheme` for the status-bar badge (`crates/bds-ui/src/app.rs`, search `theme_badge`). - The settings sidebar nav entry (`settings.nav.style`) already opens the Style tab (`crates/bds-ui/src/views/sidebar.rs`). ## Task Implement the Style view per `StyleViewSurface`: 1. New view module `crates/bds-ui/src/views/style_view.rs` rendering: - A grid of theme buttons, one per supported Pico theme. Each button shows a 3-tone swatch (accent, light bg, dark bg colors) plus the theme name. Display transform for names: `-` → space, first letter capitalized. Selected theme visually highlighted. - Controls row: Preview Mode dropdown (Auto/Light/Dark) and an Apply Theme button, disabled when selection equals the applied theme. - Live preview of `http://127.0.0.1:4123/__style-preview?theme=<sel>&mode=<mode>` using the existing embedded webview component (`crates/bds-ui/src/components/webview.rs`), updating on selection or preview-mode change. 2. State: selected theme defaults to applied theme; preview mode is local UI state only and never persisted (`@guarantee PreviewModeLocal`). 3. Apply: persist `picoTheme` into `meta/project.json` through the shared project-metadata engine path (must emit the normal project metadata domain event), then refresh the status-bar theme badge. 4. Route `TabType::Style` to the new view in `workspace.rs`; remove `ContentRoute::Placeholder` if the style tab was its last user (it is — delete the variant and `welcome::tab_placeholder` if now unused). 5. Requires an active project; without one, no view (`@guarantee SeparateTab`). 6. Theme metadata (accent / light bg / dark bg hex per theme) mirrors bDS2's style editor; take the values from `../bDS2/lib/bds/desktop/shell_live/settings_editor/style_editor.ex`. 7. i18n: all new labels via fluent keys in all five `locales/ui/*.ftl` files (en, de, es, fr, it). No untranslated string constants. 8. Red/green TDD: state-transition tests (selection vs applied, apply enable/disable, persistence call) plus a test that the applied theme lands in `meta/project.json` and in the metadata written to the filesystem. ## Definition of done - Style tab shows the working editor; picking a theme updates the live preview; Apply persists `picoTheme` and updates the badge. - `cargo test --workspace` passes; no clippy warnings. - README.md updated (user-visible feature).
hugo added the enhancement label 2026-07-20 10:40:22 +00:00
hugo commented 2026-07-20 12:30:08 +00:00
Author
Owner
Copy Link

Implemented in fe7dd82. Added the real GUI-only Style singleton tab with all 20 supported themes, distinct swatches derived from the bundled Pico CSS, localized Auto/Light/Dark controls, a visibly disabled unchanged Apply action, and an independently managed embedded Wry preview. The preview now selects /assets/pico.THEME.min.css, uses data-theme only for the Light/Dark color scheme, removes forced mode for Auto, serves bundled preview assets when older projects lack theme files, and applies persisted themes to rendered pages. Apply writes picoTheme through the shared project-metadata engine, emits the normal Project Updated event, and refreshes the status badge; placeholder routing was removed and all five locales plus README were updated. Verified with focused red/green state, persistence, filesystem, renderer, preview-server, theme-validation, routing, disabled-style, and i18n tests; cargo test --workspace; cargo clippy --workspace --all-targets -- -D warnings; cargo build --workspace; cargo machete; cargo outdated; Allium check/analyse; release packaging; and visual Light/Dark/Auto plus theme switching in the packaged app. A neutral review against the issue, bDS2 preview override behavior, the Allium contracts, and the UI style guide found no remaining gaps. The swatches intentionally improve on bDS2s identical placeholder triplets by showing the actual bundled Pico theme accents, as confirmed during visual QA.

Implemented in fe7dd82. Added the real GUI-only Style singleton tab with all 20 supported themes, distinct swatches derived from the bundled Pico CSS, localized Auto/Light/Dark controls, a visibly disabled unchanged Apply action, and an independently managed embedded Wry preview. The preview now selects /assets/pico.THEME.min.css, uses data-theme only for the Light/Dark color scheme, removes forced mode for Auto, serves bundled preview assets when older projects lack theme files, and applies persisted themes to rendered pages. Apply writes picoTheme through the shared project-metadata engine, emits the normal Project Updated event, and refreshes the status badge; placeholder routing was removed and all five locales plus README were updated. Verified with focused red/green state, persistence, filesystem, renderer, preview-server, theme-validation, routing, disabled-style, and i18n tests; cargo test --workspace; cargo clippy --workspace --all-targets -- -D warnings; cargo build --workspace; cargo machete; cargo outdated; Allium check/analyse; release packaging; and visual Light/Dark/Auto plus theme switching in the packaged app. A neutral review against the issue, bDS2 preview override behavior, the Allium contracts, and the UI style guide found no remaining gaps. The swatches intentionally improve on bDS2s identical placeholder triplets by showing the actual bundled Pico theme accents, as confirmed during visual QA.
hugo closed this issue 2026-07-20 12:31:33 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 wontfix
This won't be fixed
No Label enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
hugo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: hugo/RuDS#41
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?