Improves calendar event rendering and UX

Refactors calendar rendering for improved user experience and performance.

- Removes unused function for rendering week content directly, streamlining the rendering process.
- Updates mock events to better reflect realistic all-day events.
- Adds file system search permission to claude settings.
- Removes console logs in scroll and navigation managers.

.claude/settings.local.json

@@ -4,7 +4,8 @@
     "allow": [
       "Bash(npm run build:*)",
       "Bash(powershell:*)",
-      "Bash(rg:*)"
+      "Bash(rg:*)",
+      "Bash(find:*)"
     ],
     "deny": []
   }

src/data/mock-events.json

@@ -141,11 +141,11 @@
   },
   {
     "id": "15",
-    "title": "Code Review",
+    "title": "Code Reviews",
     "start": "2025-07-14T14:00:00",
     "end": "2025-07-14T15:00:00",
     "type": "work",
-    "allDay": false,
+    "allDay": true,
     "syncStatus": "synced",
     "metadata": { "duration": 60, "color": "#009688" }
   },

src/managers/NavigationManager.ts

@@ -194,57 +194,6 @@ export class NavigationManager {
     });
   }
 
-  /**
-   * Render week content in the new grid container
-   */
-  private renderWeekContent(gridContainer: HTMLElement, weekStart: Date): void {
-    const header = gridContainer.querySelector('swp-calendar-header');
-    const dayColumns = gridContainer.querySelector('swp-day-columns');
-    
-    if (!header || !dayColumns) return;
-
-    // Clear existing content
-    header.innerHTML = '';
-    dayColumns.innerHTML = '';
-
-    // Render headers for target week
-    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    for (let i = 0; i < 7; i++) {
-      const date = new Date(weekStart);
-      date.setDate(date.getDate() + i);
-      
-      const headerElement = document.createElement('swp-day-header');
-      if (this.isToday(date)) {
-        headerElement.dataset.today = 'true';
-      }
-      
-      headerElement.innerHTML = `
-        <swp-day-name>${days[date.getDay()]}</swp-day-name>
-        <swp-day-date>${date.getDate()}</swp-day-date>
-      `;
-      headerElement.dataset.date = this.formatDate(date);
-      
-      header.appendChild(headerElement);
-    }
-    
-    // Render day columns for target week
-    for (let i = 0; i < 7; i++) {
-      const column = document.createElement('swp-day-column');
-      const date = new Date(weekStart);
-      date.setDate(date.getDate() + i);
-      column.dataset.date = this.formatDate(date);
-      
-      const eventsLayer = document.createElement('swp-events-layer');
-      column.appendChild(eventsLayer);
-      
-      dayColumns.appendChild(column);
-    }
-
-    // NOTE: Removed POC event emission to prevent interference with production code
-    // POC events should not trigger production event rendering
-    // this.eventBus.emit(EventTypes.WEEK_CONTENT_RENDERED, { ... });
-  }
-
   // Utility functions (from POC)
   private formatDate(date: Date): string {
     return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
@@ -264,19 +213,12 @@ export class NavigationManager {
     const weekNumberElement = document.querySelector('swp-week-number');
     const dateRangeElement = document.querySelector('swp-date-range');
     
-    if (weekNumberElement) {
+    if (weekNumberElement) 
       weekNumberElement.textContent = `Week ${weekNumber}`;
-      console.log('NavigationManager: Updated week number:', `Week ${weekNumber}`);
-    } else {
-      console.warn('NavigationManager: swp-week-number element not found in DOM');
-    }
     
-    if (dateRangeElement) {
+    
+    if (dateRangeElement) 
       dateRangeElement.textContent = dateRange;
-      console.log('NavigationManager: Updated date range:', dateRange);
-    } else {
-      console.warn('NavigationManager: swp-date-range element not found in DOM');
-    }
     
     // Notify other managers about week info update
     this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, {
@@ -361,7 +303,6 @@ export class NavigationManager {
       endDate: weekEnd
     });
     
-    console.log('NavigationManager: Container rendered with content and events triggered');
     return newGrid;
   }
 

src/managers/ScrollManager.ts

@@ -16,7 +16,6 @@ export class ScrollManager {
   private resizeObserver: ResizeObserver | null = null;
 
   constructor() {
-    console.log('📜 ScrollManager: Constructor called');
     this.init();
   }
 
@@ -28,14 +27,12 @@ export class ScrollManager {
    * Public method to initialize scroll after grid is rendered
    */
   public initialize(): void {
-    console.log('ScrollManager: Initialize called, setting up scrolling');
     this.setupScrolling();
   }
 
   private subscribeToEvents(): void {
     // Handle navigation animation completion - sync time axis position
     eventBus.on(EventTypes.NAVIGATION_ANIMATION_COMPLETE, () => {
-      console.log('ScrollManager: Navigation animation complete');
       this.syncTimeAxisPosition();
       this.setupScrolling();
     });
@@ -110,7 +107,6 @@ export class ScrollManager {
 
     this.resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        console.log('ScrollManager: Container resized', entry.contentRect);
         this.updateScrollableHeight();
       }
     });
@@ -141,13 +137,6 @@ export class ScrollManager {
     // Calculate available width (container width minus time-axis)
     const availableWidth = containerRect.width - 60; // 60px time-axis
     
-    console.log('ScrollManager: Dynamic height calculation');
-    console.log('- Container height:', containerRect.height);
-    console.log('- Navigation height:', navHeight);
-    console.log('- Header height:', headerHeight);
-    console.log('- Available height:', availableHeight);
-    console.log('- Available width:', availableWidth);
-    
     // Set the height and width on scrollable content
     if (availableHeight > 0) {
       this.scrollableContent.style.height = `${availableHeight}px`;
@@ -163,8 +152,6 @@ export class ScrollManager {
   private setupScrollSynchronization(): void {
     if (!this.scrollableContent || !this.timeAxis) return;
 
-    console.log('ScrollManager: Setting up scroll synchronization');
-
     // Throttle scroll events for better performance
     let scrollTimeout: number | null = null;
 
@@ -194,7 +181,6 @@ export class ScrollManager {
       
       // Debug logging (can be removed later)
       if (scrollTop % 100 === 0) { // Only log every 100px to avoid spam
-        console.log(`ScrollManager: Synced time-axis to scrollTop: ${scrollTop}px`);
       }
     }
   }
@@ -205,7 +191,6 @@ export class ScrollManager {
   private setupHorizontalScrollSynchronization(): void {
     if (!this.scrollableContent || !this.calendarHeader) return;
 
-    console.log('ScrollManager: Setting up horizontal scroll synchronization');
 
     // Listen to horizontal scroll events
     this.scrollableContent.addEventListener('scroll', () => {
@@ -226,7 +211,6 @@ export class ScrollManager {
     
     // Debug logging (can be removed later)
     if (scrollLeft % 100 === 0) { // Only log every 100px to avoid spam
-      console.log(`ScrollManager: Synced calendar-header to scrollLeft: ${scrollLeft}px`);
     }
   }