setonc/claude-usage-widget
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
claude-usage-widget/CHANGES.md
Claude 0e46ef084e Add customizable color preferences with separate settings window 
## New Features
- **Customizable Progress Bar Colors**: Users can now customize the colors for normal, warning, and danger states through a dedicated settings window
- **Separate Settings Window**: Settings now open in a frameless, resizable window (500x680px) with live preview of color changes
- **CSS Variables**: Converted hardcoded colors to CSS custom properties for dynamic theming

## Files Modified
- **main.js**: Added settings window creation, color preference storage (electron-store), and IPC handlers
- **preload.js**: Exposed color preference and settings IPC methods to renderer
- **app.js**: Implemented color preference loading and live updates from settings window
- **styles.css**: Added CSS variables for customizable colors, updated scrollbar styling
- **index.html**: Removed unused settings overlay
- **.gitignore**: Added CLAUDE_NOTES.md to prevent credential leaks

## Files Added
- **src/renderer/settings.html**: Settings window UI with 2-column color picker layout
- **src/renderer/settings.js**: Settings window logic and color management
- **src/renderer/settings-styles.css**: Settings window styling
- **CHANGES.md**: Tracking document for modifications

## Technical Details
- Color preferences stored in electron-store with encryption
- Live color updates via IPC communication between settings and main windows
- Default color scheme: Purple (normal), Orange (warning), Red (danger)
- Settings accessible via tray menu or settings button

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-24 13:38:45 -05:00

1.4 KiB
Raw Blame History

Changes for Upstream PR

Feature: Customizable Progress Bar Colors

Modified Files

main.js

  • Added DEFAULT_COLOR_PREFERENCES constant with default color scheme (normal, warning, danger states)
  • Added IPC handler get-color-preferences to retrieve stored color preferences from electron-store
  • Added IPC handler set-color-preferences to save color preferences to electron-store
  • Storage schema: colorPreferences: { normal: {start, end}, warning: {start, end}, danger: {start, end} }

src/renderer/styles.css

  • TODO: Add CSS custom properties (--color-normal-start, --color-normal-end, etc.)
  • TODO: Convert hardcoded gradient colors to use CSS variables
  • TODO: Apply to both .progress-fill and .timer-progress elements

src/renderer/app.js

  • TODO: Add applyColorPreferences() function to set CSS custom properties
  • TODO: Load and apply color preferences on init
  • TODO: Add event listeners for color picker changes

src/renderer/index.html

  • TODO: Add color picker UI in settings overlay (6 inputs for simplified scheme)
  • TODO: Add "Reset to Defaults" button

preload.js

  • TODO: Expose getColorPreferences and setColorPreferences IPC methods

Feature: Dynamic Tray Icon with Usage Display (Planned)

  • Not yet started

Storage Changes

  • Using existing electron-store, no additional files
  • New keys: colorPreferences, trayDisplayMode (planned)