Skip to content

feat(app): theme pack, theme picker, and dev library preview mode#339

Merged
aaf2tbz merged 1 commit into
mainfrom
feat/theme-pack-dev-preview
Jul 27, 2026
Merged

feat(app): theme pack, theme picker, and dev library preview mode#339
aaf2tbz merged 1 commit into
mainfrom
feat/theme-pack-dev-preview

Conversation

@aaf2tbz

@aaf2tbz aaf2tbz commented Jul 27, 2026

Copy link
Copy Markdown
Collaborator

Summary

Adds four new UI themes (Skeleton, Forest, Orange Peel, Dragonfruit), a theme-picker popover replacing the cycle button, per-theme nav icon sets, light/developer theme polish, and a METALSHARP_DEV_LIBRARY=1 developer flow (npm run preview:dev) that skips first-launch/migration gates straight to the library view. Also widens the dev-mode backend /status timeout so a first-run bottle scan no longer triggers a backend kill/restart loop that left the library empty.

Changes

  • New themes in useTheme.ts + variables.css (full variable sets, same structure as existing themes); per-theme glass-header tints in base.css and sidebar backgrounds in Sidebar.vue. Shared glass blur values, sidebar widths, header sizing, and card hover scaling are unchanged — new themes supply tints only.
  • Light theme polish: warmer surfaces, deeper accent contrast, frosted header tint, stronger card borders. Developer theme polish: reduced non-accent saturation, brighter dim text, buttons use the standard border-radius instead of pill shape.
  • Theme picker popover on the sidebar-bottom button listing all 7 themes with lucide icons; button position/size unchanged.
  • Per-theme nav icon maps (library / sharp / logs / refresh / start-wine-steam) for custom themes; dark/light keep the original icons.
  • app/src/main/index.ts: METALSHARP_DEV_LIBRARY=1 appends skip-to=library to the loadFile query; App.vue consumes it, waits for backend readiness, then calls initApp() directly. New preview:dev npm script.
  • rust-bridge.ts: dev-mode /status timeout raised 1500ms → 10000ms so ensureRunning does not restart a busy dev backend mid-scan.
  • shims-vue.d.ts: ~icons/* module declaration for tsc.

PR Readiness (MANDATORY)

  • Compatibility verified with at least one real game (game + launch method noted below)
  • No hardcoded paths, secrets, or absolute /Users/... paths introduced
  • Config/rules TOML validated if configs/mtsp-rules.toml or DLL maps changed
  • Version triple (CMakeLists.txt, Cargo.toml, package.json, package-lock.json) in sync if version bumped
  • Bottle/runtime migration and launch behavior preserved (rollback plan noted if changed)
  • Docs / compatibility matrix updated for user-facing changes
  • Regression test added for each bug fix

Bypassed intentionally via checklist-exception: UI/renderer-only change — no launch behavior, configs, or version bumps touched.

Local toolchain (run before push)

  • TypeScript compiles if changed: cd app && npx tsc --noEmit
  • Biome pass if TS/JS changed: cd app && npx @biomejs/biome ci src/ (4 pre-existing CSS specificity warnings, unchanged)
  • Prettier check passes on changed files
  • No hardcoded paths, secrets, or absolute /Users/... paths
  • No new files added to the repo root

Test notes

Verified on macOS via npm run preview:dev (Electron, dev backend metalsharp-backend 0.56.8 on port 9276 against a real ~/.metalsharp library): app boots straight into the library view, real installed game cards load and render, all 7 themes apply correctly through the picker, sidebar/header glassmorphism and geometry intact in every theme. No games launched — UI-only change.

Risk

Low: renderer-only styling plus an opt-in dev env var. The one main-process behavior change (longer dev /status timeout) only affects unpackaged dev runs; production timeout unchanged. Rollback: revert this commit.

- Add four themes: Skeleton, Forest, Orange Peel, Dragonfruit, using the
  existing per-theme variable/tint pattern (shared glass-header blur,
  sidebar geometry, and card scaling are unchanged)
- Polish light and developer themes (contrast, glass tints, button shape)
- Replace theme cycle button with a picker popover listing all themes
- Per-theme nav icon sets for custom themes (dark/light unchanged)
- Add METALSHARP_DEV_LIBRARY=1 skip-to-library flow and preview:dev script
- Widen dev-mode backend /status timeout to survive first-run bottle scans
@aaf2tbz aaf2tbz added Feat Implements more coverage for an existing surface. checklist-exception Bypass mandatory PR readiness checklist when an item is intentionally not applicable Javascript Touches javascript based files. labels Jul 27, 2026
@aaf2tbz
aaf2tbz merged commit 09e2eda into main Jul 27, 2026
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

checklist-exception Bypass mandatory PR readiness checklist when an item is intentionally not applicable Feat Implements more coverage for an existing surface. Javascript Touches javascript based files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant