Refactor calendar component into modular architecture with view switching

- Split monolithic Calendar component into focused sub-components:
  - CalendarHeader: Navigation buttons and title display
  - MonthView: Monthly calendar grid layout and event rendering
  - WeekView: Weekly calendar view with full-height day containers
- Add ViewMode enum for Month/Week view switching in sidebar dropdown
- Fix event styling by correcting CSS class from "event" to "event-box"
- Implement proper week view layout with full-height day containers
- Maintain all existing functionality: event handling, context menus, localStorage persistence

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/app.rs

@@ -2,7 +2,7 @@ use yew::prelude::*;
 use yew_router::prelude::*;
 use gloo_storage::{LocalStorage, Storage};
 use web_sys::MouseEvent;
-use crate::components::{Sidebar, CreateCalendarModal, ContextMenu, EventContextMenu, CalendarContextMenu, CreateEventModal, EventCreationData, RouteHandler, EventStatus, EventClass, ReminderType, RecurrenceType, DeleteAction};
+use crate::components::{Sidebar, ViewMode, CreateCalendarModal, ContextMenu, EventContextMenu, CalendarContextMenu, CreateEventModal, EventCreationData, RouteHandler, EventStatus, EventClass, ReminderType, RecurrenceType, DeleteAction};
 use crate::services::{CalendarService, calendar_service::{UserInfo, CalendarEvent}};
 use chrono::NaiveDate;
 
@@ -28,6 +28,9 @@ pub fn App() -> Html {
     let create_event_modal_open = use_state(|| false);
     let selected_date_for_event = use_state(|| -> Option<NaiveDate> { None });
     
+    // Calendar view state
+    let current_view = use_state(|| ViewMode::Month);
+    
     let available_colors = [
         "#3B82F6", "#10B981", "#F59E0B", "#EF4444", 
         "#8B5CF6", "#06B6D4", "#84CC16", "#F97316",
@@ -52,6 +55,13 @@ pub fn App() -> Html {
         })
     };
 
+    let on_view_change = {
+        let current_view = current_view.clone();
+        Callback::from(move |new_view: ViewMode| {
+            current_view.set(new_view);
+        })
+    };
+
     // Fetch user info when token is available
     {
         let user_info = user_info.clone();
@@ -354,6 +364,8 @@ pub fn App() -> Html {
                                     on_color_picker_toggle={on_color_picker_toggle}
                                     available_colors={available_colors.iter().map(|c| c.to_string()).collect::<Vec<_>>()}
                                     on_calendar_context_menu={on_calendar_context_menu}
+                                    current_view={(*current_view).clone()}
+                                    on_view_change={on_view_change}
                                 />
                                 <main class="app-main">
                                     <RouteHandler 
@@ -362,6 +374,7 @@ pub fn App() -> Html {
                                         on_login={on_login.clone()}
                                         on_event_context_menu={Some(on_event_context_menu.clone())}
                                         on_calendar_context_menu={Some(on_calendar_date_context_menu.clone())}
+                                        view={(*current_view).clone()}
                                     />
                                 </main>
                             </>