feat: Implement UI appearance configuration module

Browse Source

This commit introduces a new configuration module for UI appearance settings.
You can now customize various aspects of the application's look and feel.

Key features:
- Customizable color palette: primary, secondary, warning, and background colors.
- Font customization: font family and font size.
- Theme selection: light and dark themes.
- Animation control: toggle animations on/off.

Changes include:
- Extended `ui/src/stores/useUi.js` to manage appearance state, including actions for updates and integration with local storage for persistence.
- Created `ui/src/views/SettingsView.vue` with UI controls for all customizable settings.
- Implemented dynamic application of settings in `ui/src/App.vue` by updating CSS variables and classes on the root element.
- Enhanced `SettingsView.vue` with modern styling (TailwindCSS) and subtle animations, ensuring it's theme-aware and respects animation preferences.
- Added comprehensive unit tests for the `useUi` store and component tests for `SettingsView.vue` using Vitest and Vue Test Utils.

The settings page allows for real-time previews of changes, and all preferences are saved locally to persist across sessions.

...

This commit is contained in:

google-labs-jules[bot]

2025-05-30 23:17:04 +00:00

parent 4f1ec58a99

commit 56fd503642

9 changed files with 3437 additions and 14 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

2713

ui/package-lock.json generated

File diff suppressed because it is too large Load Diff