feat: Overhaul Theme Generation and Settings System #2
Conversation
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
- Use absolute imports for provider hooks/providers instead of relative paths - Standardize export pattern in trpc client (const + export instead of export const) - Improve consistency across import organization in App.tsx
…cture
This commit introduces a major refactoring of the theme generation and
settings management systems to improve performance, configurability, and
code structure.
### Theme Generation Overhaul
- **Performance:** Theme generation has been moved from the renderer
process to a dedicated worker thread in the main process. This prevents
the UI from freezing when generating themes from images or videos.
- **Backend Logic:** A new `theme` TRPC router now handles generation.
It utilizes the `canvas` library for server-side image processing. The
client-side theme library (`src/renderer/lib/theme`) has been removed.
- **Configurability:** Users can now select between "Material" and
"quantize" as the color extraction library. New settings have been added
to fine-tune the Base16 generation, including saturation, luminance, and
brightness controls.
### Settings System Refactor
- **Migration to `conf`:** The settings store has been migrated from
`electron-store` to `conf`.
- **Strict Schema:** A comprehensive, strictly-typed `SettingsSchema`
has been implemented, organizing all settings into logical groups:
`app`, `themeGeneration`, `themeOutput`, `wallpaperSources`, and
`internal`.
- **Revamped UI:** The settings UI has been completely rebuilt to
support the new nested schema, introducing new components like sliders
and dropdowns for more granular control over theme generation.
### Code and Route Reorganization
- **TRPC Routes:** The original `theme` router has been split for better
separation of concerns:
- `wallpaper` router: Manages searching for and applying wallpapers.
- `theme` router: Handles theme generation and template rendering.
- **Frontend Components:** React components have been updated to use the
new routes and a more generic type system (`<T extends BaseWallpaper>`)
for better reusability.
This commit enhances the user experience on the settings page by replacing the `onBlur` save mechanism with a debounced, automatic save for text inputs. - Input fields now automatically save 500ms after the user stops typing, using `useDebouncedCallback`. - A loading spinner is displayed inside the input field during the save operation for immediate visual feedback. - If a save operation fails, the input's value reverts to the last known valid state to prevent UI discrepancies. - Mutation handlers in settings components are renamed to `setValueMutation` for consistency. - Added `use-debounce` dependency at `10.0.5`.
- Exported `SettingsSchema` and `SecretsSchema` from the settings route - Replaced local `Base16Settings` interface with type reference to `SettingsSchema["themeGeneration"]["base16"]` - Ensures consistency between settings schema and theme generation logic
- Removed conditional check that prevented the configuration screen from rendering when `configValue` was undefined or errored. - Updated `ConfigurationScreen` to always render setup instructions and quick actions when required, regardless of loading state. - Added an additional check to `WallpapersGrid` to show the configuration screen when `configValue` is an empty array.
- Updated `requiresConfiguration.setting.key` in image, video, and wallpaper engine tabs to reflect the new settings structure under `wallpaperSources`. - Fixes missing configuration screens due to outdated keys.
- Added `themeToChroma` function to recursively convert all theme values to chroma color instances. - Ensures consistent chroma color behavior (e.g., `.hex()`, `.luminance()`, etc.) in template rendering. - Applied `themeToChroma` to all template rendering and post-hook invocations in the theme router.
- Replaced static `<span>` displaying slider value with an `<Input>` field. - Allows users to type precise values manually in addition to using the slider. - Input respects `min`, `max`, and `step` constraints and debounces value updates.
- Add generics for sorting and configuration keys in WallpapersGridProps - Introduce ApiWallpaper to replace DownloadableWallpaper with stricter typing - Enforce required fields in DynamicControlDefinition - Remove SecretsSchema and exclude secrets from SettingKey - Add "type" field to BaseWallpaper for better discrimination - Rename getImageBytesFromSrc to getBytesFromImageSrc - Update @trpc/server to 11.4.4 and lock via overrides - Remove continue-on-error from CI lint/type/format steps
- Created a reusable `useSettings` hook to manage query and mutation logic for settings - Replaced repeated logic in `InputSetting`, `BooleanSetting`, `DropdownSetting`, `SliderSetting`, `FolderListSetting`, and `TemplateListSetting` with the new hook - Renamed `encrypt` prop to `encrypted` for clarity and consistency - Updated all usages and components to use the new `useSettings` hook - Reduced code duplication and improved maintainability of settings components
- Renamed `lint:types` script to `ts:check` in package.json - Updated CI workflow to use the new `ts:check` script
…e imports - Moved TRPC route files into directories with `index.ts` for improved modularity and readability - Updated all imports to point to new index-based paths - Renamed `base.ts` to `index.ts` to better reflect its role as the root router - Replaced `total` with `totalItems` and `numberOfPages` with `totalPages` for consistency in pagination responses
- Previously checked the `lastWallpaperCmd` object, which was always truthy - Now correctly checks the `command` string to determine if a wallpaper should be reapplied
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This pull request introduces a fundamental architectural change to the theme generation and settings management systems, significantly improving application performance, user experience, and code maintainability.
Major Changes
1. Theme Generation Rearchitecture
The theme generation logic has been moved from the renderer process to a dedicated worker thread.
themeTRPC router now uses thecanvaslibrary for server-side image processing. The client-side theme library has been entirely removed.2. Complete Settings System Overhaul
The settings system has been migrated from
electron-storetoconfand completely rebuilt.SettingsSchemais introduced, organizing all settings into logical groups (app,themeGeneration,themeOutput,wallpaperSources, etc.) for improved clarity and type safety.3. Debounced Autosave & Improved UX in Settings
The user experience on the settings page has been significantly improved.
useDebouncedCallback. This replaces the previousonBlursave mechanism.4. Code and Route Reorganization
themerouter has been split into awallpaperrouter (for searching/applying wallpapers) and a newthemerouter (for generation/application) for a clearer separation of concerns.electron-storewithconf.canvasanduuid.use-debounce.