Adds dynamic header hiding for date groupings

Introduces hideHeader option for date grouping configurations
Enables suppressing date headers in specific views like day view
Improves calendar view flexibility by conditionally rendering headers

src/v2/demo/DemoApp.ts

@@ -14,14 +14,16 @@ import { EventPersistenceManager } from '../managers/EventPersistenceManager';
 import { HeaderDrawerRenderer } from '../features/headerdrawer/HeaderDrawerRenderer';
 import { AuditService } from '../storage/audit/AuditService';
 import { SettingsService } from '../storage/settings/SettingsService';
+import { ResourceService } from '../storage/resources/ResourceService';
 import { IWorkweekPreset } from '../types/SettingsTypes';
 
 export class DemoApp {
   private animator!: NavigationAnimator;
   private container!: HTMLElement;
   private weekOffset = 0;
-  private currentView: 'day' | 'simple' | 'resource' | 'team' | 'department' = 'simple';
+  private currentView: 'day' | 'simple' | 'resource' | 'picker' | 'team' | 'department' = 'simple';
   private workweekPreset: IWorkweekPreset | null = null;
+  private selectedResourceIds: string[] = [];
 
   constructor(
     private orchestrator: CalendarOrchestrator,
@@ -37,7 +39,8 @@ export class DemoApp {
     private headerDrawerRenderer: HeaderDrawerRenderer,
     private eventPersistenceManager: EventPersistenceManager,
     private auditService: AuditService,
-    private settingsService: SettingsService
+    private settingsService: SettingsService,
+    private resourceService: ResourceService
   ) {}
 
   async init(): Promise<void> {
@@ -88,6 +91,9 @@ export class DemoApp {
     this.setupDrawerToggle();
     this.setupViewSwitching();
 
+    // Setup resource selector for picker view
+    await this.setupResourceSelector();
+
     // Initial render
     this.render();
   }
@@ -109,7 +115,7 @@ export class DemoApp {
           templateId: 'day',
           groupings: [
             { type: 'resource', values: ['EMP001', 'EMP002'], idProperty: 'resourceId' },
-            { type: 'date', values: today, idProperty: 'date', derivedFrom: 'start' }
+            { type: 'date', values: today, idProperty: 'date', derivedFrom: 'start', hideHeader: true }
           ]
         };
 
@@ -149,6 +155,15 @@ export class DemoApp {
             { type: 'date', values: dates, idProperty: 'date', derivedFrom: 'start' }
           ]
         };
+
+      case 'picker':
+        return {
+          templateId: 'picker',
+          groupings: [
+            { type: 'resource', values: this.selectedResourceIds, idProperty: 'resourceId' },
+            { type: 'date', values: dates, idProperty: 'date', derivedFrom: 'start' }
+          ]
+        };
     }
   }
 
@@ -177,6 +192,7 @@ export class DemoApp {
         const view = (chip as HTMLElement).dataset.view as typeof this.currentView;
         if (view) {
           this.currentView = view;
+          this.updateSelectorVisibility();
           this.render();
         }
       });
@@ -199,4 +215,38 @@ export class DemoApp {
       this.headerDrawerManager.toggle();
     };
   }
+
+  private async setupResourceSelector(): Promise<void> {
+    const resources = await this.resourceService.getAll();
+    const container = document.querySelector('.resource-checkboxes') as HTMLElement;
+    if (!container) return;
+
+    // Clear existing
+    container.innerHTML = '';
+
+    // Create checkboxes for each resource
+    resources.forEach(r => {
+      const label = document.createElement('label');
+      label.innerHTML = `
+        <input type="checkbox" value="${r.id}" checked>
+        ${r.displayName}
+      `;
+      container.appendChild(label);
+    });
+
+    // Default: all selected
+    this.selectedResourceIds = resources.map(r => r.id);
+
+    // Event listener for checkbox changes
+    container.addEventListener('change', () => {
+      const checked = container.querySelectorAll('input:checked') as NodeListOf<HTMLInputElement>;
+      this.selectedResourceIds = Array.from(checked).map(cb => cb.value);
+      this.render();
+    });
+  }
+
+  private updateSelectorVisibility(): void {
+    const selector = document.querySelector('swp-resource-selector');
+    selector?.classList.toggle('hidden', this.currentView !== 'picker');
+  }
 }