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.
Here's what I did:
- Added `container_name` for `api` and `ui` services in `docker-compose.yml`.
- Created `ui/src/apiClient.js` to configure the API base URL using the API container name (`http://planilla-api:4000/api`).
- Added `axios` as a dependency to the UI project.
- Ensured UI store files correctly import the new `apiClient.js`.
This will allow your UI to reliably connect to the API service using Docker's internal DNS resolution via container names.
