Implement interactive calendar color picker

Backend enhancements:
- Add calendar_path field to CalendarEvent for color mapping
- Generate consistent colors for calendars using path-based hashing
- Update CalDAV parsing to associate events with their calendar paths
- Add 16-color palette with hash-based assignment algorithm

Frontend features:
- Interactive color picker with 4x4 grid of selectable colors
- Click color swatches to open dropdown with all available colors
- Instant color changes for both sidebar and calendar events
- Persistent color preferences using local storage
- Enhanced UX with hover effects and visual feedback

Styling improvements:
- Larger 16px color swatches for better clickability
- Professional color picker dropdown with smooth animations
- Dynamic event coloring based on calendar assignment
- Improved contrast with text shadows and borders
- Click-outside-to-close functionality for better UX

Users can now personalize their calendar organization with custom colors
that persist across sessions and immediately update throughout the app.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-28 20:14:56 -04:00
parent 5d519fd875
commit f94d057f81
7 changed files with 255 additions and 16 deletions

View File

@@ -36,6 +36,7 @@ pub struct UserInfo {
pub struct CalendarInfo {
pub path: String,
pub display_name: String,
pub color: String,
}
#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
@@ -59,6 +60,7 @@ pub struct CalendarEvent {
pub reminders: Vec<EventReminder>,
pub etag: Option<String>,
pub href: Option<String>,
pub calendar_path: Option<String>,
}
#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]