connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement tabbed calendar management modal with improved styling

Browse Source 
- Replace separate Create Calendar and External Calendar modals with unified tabbed interface
- Redesign modal styling with less rounded corners and cleaner appearance
- Significantly increase padding throughout modal components for better spacing
- Fix CSS variable self-references (control-padding, standard-transition)
- Improve button styling with better padding (0.875rem 2rem) and colors
- Enhance form elements with generous padding (1rem) and improved focus states
- Redesign tab bar with segmented control appearance and proper active states
- Update context menus with modern glassmorphism styling and smooth animations
- Consolidate calendar management functionality into single reusable component

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-05 11:46:21 -04:00
parent b0a8ef09a8
commit aa7a15e6fa
5 changed files with 624 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/app.rs
View File

@@ -1,6 +1,6 @@
use crate::components::{
CalendarContextMenu, ContextMenu, CreateCalendarModal, CreateEventModal, DeleteAction,
EditAction, EventContextMenu, EventModal, EventCreationData, ExternalCalendarModal,
CalendarContextMenu, CalendarManagementModal, ContextMenu, CreateEventModal, DeleteAction,
EditAction, EventContextMenu, EventModal, EventCreationData,
MobileWarningModal, RouteHandler, Sidebar, Theme, ViewMode,
};
use crate::components::mobile_warning_modal::is_mobile_device;
@@ -95,7 +95,7 @@ pub fn App() -> Html {
let user_info = use_state(|| -> Option<UserInfo> { None });
let color_picker_open = use_state(|| -> Option<String> { None });
let create_modal_open = use_state(|| false);
let calendar_management_modal_open = use_state(|| false);
let context_menu_open = use_state(|| false);
let context_menu_pos = use_state(|| (0i32, 0i32));
let context_menu_calendar_path = use_state(|| -> Option<String> { None });
@@ -121,7 +121,6 @@ pub fn App() -> Html {
// Mobile warning state
let mobile_warning_open = use_state(|| is_mobile_device());
let external_calendar_modal_open = use_state(|| false);
let refresh_interval = use_state(|| -> Option<Interval> { None });
// Calendar view state - load from localStorage if available
@@ -1168,13 +1167,9 @@ pub fn App() -> Html {
<Sidebar
user_info={(*user_info).clone()}
on_logout={on_logout}
on_create_calendar={Callback::from({
let create_modal_open = create_modal_open.clone();
move |_| create_modal_open.set(true)
})}
on_create_external_calendar={Callback::from({
let external_calendar_modal_open = external_calendar_modal_open.clone();
move |_| external_calendar_modal_open.set(true)
on_add_calendar={Callback::from({
let calendar_management_modal_open = calendar_management_modal_open.clone();
move |_| calendar_management_modal_open.set(true)
})}
external_calendars={(*external_calendars).clone()}
on_external_calendar_toggle={Callback::from({
@@ -1386,20 +1381,20 @@ pub fn App() -> Html {
}
}
<CreateCalendarModal
is_open={*create_modal_open}
<CalendarManagementModal
is_open={*calendar_management_modal_open}
on_close={Callback::from({
let create_modal_open = create_modal_open.clone();
move |_| create_modal_open.set(false)
let calendar_management_modal_open = calendar_management_modal_open.clone();
move |_| calendar_management_modal_open.set(false)
})}
on_create={Callback::from({
on_create_calendar={Callback::from({
let auth_token = auth_token.clone();
let refresh_calendars = refresh_calendars.clone();
let create_modal_open = create_modal_open.clone();
let calendar_management_modal_open = calendar_management_modal_open.clone();
move |(name, description, color): (String, Option<String>, Option<String>)| {
if let Some(token) = (*auth_token).clone() {
let refresh_calendars = refresh_calendars.clone();
let create_modal_open = create_modal_open.clone();
let calendar_management_modal_open = calendar_management_modal_open.clone();
wasm_bindgen_futures::spawn_local(async move {
let calendar_service = CalendarService::new();
@@ -1418,17 +1413,41 @@ pub fn App() -> Html {
Ok(_) => {
web_sys::console::log_1(&"Calendar created successfully!".into());
refresh_calendars.emit(());
create_modal_open.set(false);
calendar_management_modal_open.set(false);
}
Err(err) => {
web_sys::console::log_1(&format!("Failed to create calendar: {}", err).into());
create_modal_open.set(false);
calendar_management_modal_open.set(false);
}
}
});
}
}
})}
on_external_success={Callback::from({
let external_calendars = external_calendars.clone();
let calendar_management_modal_open = calendar_management_modal_open.clone();
move |new_id: i32| {
// Refresh external calendars list
let external_calendars = external_calendars.clone();
let calendar_management_modal_open = calendar_management_modal_open.clone();
wasm_bindgen_futures::spawn_local(async move {
let calendar_service = CalendarService::new();
match CalendarService::get_external_calendars().await {
Ok(calendars) => {
external_calendars.set(calendars);
calendar_management_modal_open.set(false);
web_sys::console::log_1(&format!("External calendar {} added successfully!", new_id).into());
}
Err(err) => {
web_sys::console::error_1(&format!("Failed to refresh external calendars: {}", err).into());
calendar_management_modal_open.set(false);
}
}
});
}
})}
available_colors={available_colors.iter().map(|c| c.to_string()).collect::<Vec<_>>()}
/>
@@ -1623,58 +1642,6 @@ pub fn App() -> Html {
available_calendars={user_info.as_ref().map(|ui| ui.calendars.clone()).unwrap_or_default()}
/>
<ExternalCalendarModal
is_open={*external_calendar_modal_open}
on_close={Callback::from({
let external_calendar_modal_open = external_calendar_modal_open.clone();
move |_| external_calendar_modal_open.set(false)
})}
on_success={Callback::from({
let external_calendars = external_calendars.clone();
let external_calendar_events = external_calendar_events.clone();
move |new_calendar_id: i32| {
let external_calendars = external_calendars.clone();
let external_calendar_events = external_calendar_events.clone();
wasm_bindgen_futures::spawn_local(async move {
// First, refresh the calendar list to get the new calendar
match CalendarService::get_external_calendars().await {
Ok(calendars) => {
external_calendars.set(calendars.clone());
// Then immediately fetch events for the new calendar if it's visible
if let Some(new_calendar) = calendars.iter().find(|c| c.id == new_calendar_id) {
if new_calendar.is_visible {
match CalendarService::fetch_external_calendar_events(new_calendar_id).await {
Ok(mut events) => {
// Set calendar_path for color matching
for event in &mut events {
event.calendar_path = Some(format!("external_{}", new_calendar_id));
}
// Add the new calendar's events to existing events
let mut all_events = (*external_calendar_events).clone();
all_events.extend(events);
external_calendar_events.set(all_events);
}
Err(e) => {
web_sys::console::log_1(
&format!("Failed to fetch events for new calendar {}: {}", new_calendar_id, e).into(),
);
}
}
}
}
}
Err(err) => {
web_sys::console::log_1(
&format!("Failed to refresh calendars after creation: {}", err).into(),
);
}
}
});
}
})}
/>
<EventModal
event={if *view_event_modal_open { (*view_event_modal_event).clone() } else { None }}