ObsiViewer/src/app.component.corrected2.html

            @case ('search') {
              <div class="space-y-2 p-3">
                @if (activeTagFilter(); as tagFilter) {
                  <div class="flex items-center justify-between rounded-lg border border-obs-l-border/60 bg-obs-l-bg-main/70 px-3 py-2 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/70">
                    <div class="flex items-center gap-2 text-sm font-medium text-obs-l-text-main dark:text-obs-d-text-main">
                      <span>🔖</span>
                      <span class="truncate">#{{ tagFilter }}</span>
                    </div>
                    <button class="text-xs text-obs-l-text-muted transition hover:text-obs-l-text-main dark:text-obs-d-text-muted dark:hover:text-obs-d-text-main" (click)="clearTagFilter()">Effacer</button>
                  </div>
                }
                <h3 class="px-2 py-1 text-sm font-semibold text-obs-l-text-muted dark:text-obs-d-text-muted">{{ searchResults().length }} résultats</h3>
                <ul class="space-y-1">
                  @for (note of searchResults(); track note.id) {
                    <li
                      (click)="selectNote(note.id)"
                      class="cursor-pointer rounded px-2 py-2 transition hover:bg-obs-l-bg-main dark:hover:bg-obs-d-bg-main"
                      [class.bg-obs-l-bg-main]="selectedNoteId() === note.id"
                      [class.dark:bg-obs-d-bg-main]="selectedNoteId() === note.id"
                    >
                      <div class="truncate font-semibold">{{ note.title }}</div>
                      <div class="truncate text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">
                        {{ note.content.substring(0, 100) }}
                      </div>
                    </li>
                  }
                </ul>
  
                @if (calendarSelectionLabel() || calendarSearchState() !== 'idle' || calendarResults().length > 0 || calendarSearchError()) {
                  <div class="mt-4 space-y-2 border-t border-obs-l-border/60 pt-3 dark:border-obs-d-border/60">
                    <div class="flex items-center justify-between px-2">
                      <h3 class="text-sm font-semibold text-obs-l-text-muted dark:text-obs-d-text-muted">Résultats du calendrier</h3>
                      @if (calendarSelectionLabel(); as selectionLabel) {
                        <span class="text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">{{ selectionLabel }}</span>
                      }
                    </div>
  
                    @if (calendarSearchState() === 'loading') {
                      <div class="px-2 py-2 text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">Recherche en cours...</div>
                    } @else if (calendarSearchError(); as calError) {
                      <div class="px-2 py-2 text-xs text-red-500 dark:text-red-400">{{ calError }}</div>
                    } @else if (calendarResults().length === 0) {
                      <div class="px-2 py-2 text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">Sélectionnez un jour ou une plage dans le calendrier.</div>
                    } @else {
                      <ul class="mt-2 space-y-1">
                        @for (file of calendarResults(); track file.id) {
                          <li>
                            <button
                              (click)="selectNote(file.id)"
                              class="w-full rounded-lg bg-obs-l-bg-main/80 px-2 py-2 text-left transition hover:bg-obs-l-bg-main dark:bg-obs-d-bg-main/60 dark:hover:bg-obs-d-bg-main"
                            >
                              <div class="truncate text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">{{ file.title }}</div>
                              <div class="flex flex-wrap gap-2 text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">
                                <span>Créé&nbsp;: {{ file.createdAt | date:'mediumDate' }}</span>
                                <span>Modifié&nbsp;: {{ file.updatedAt | date:'mediumDate' }}</span>
                              </div>
                            </button>
                          </li>
                        }
                      </ul>
                    }
                  </div>
                }
              </div>
            }
            @case ('calendar') {
              <div class="flex h-full flex-col">
                <div class="flex items-center justify-between border-b border-obs-l-border/60 bg-obs-l-bg-main/70 px-4 py-3 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/60">
                  <div>
                    <h3 class="text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">Vue agenda</h3>
                    @if (calendarSelectionLabel(); as selectionLabel) {
                      <p class="mt-1 text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">{{ selectionLabel }}</p>
                    } @else {
                      <p class="mt-1 text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">Sélectionnez un jour ou une plage pour voir les notes correspondantes.</p>
                    }
                  </div>
                </div>
                <div class="relative flex-1 px-3 py-4">
                  <div
                    class="rounded-2xl border border-obs-l-border/50 bg-obs-l-bg-main/80 p-3 shadow-sm transition duration-200 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/70"
                    [class.opacity-0]="calendarOverlayVisible()"
                    [class.pointer-events-none]="calendarOverlayVisible()"
                  >
                    <app-markdown-calendar
                      (fileSelected)="selectNote($event)"
                      (searchResultsChange)="onCalendarResultsChange($event)"
                      (searchStateChange)="onCalendarSearchStateChange($event)"
                      (searchErrorChange)="onCalendarSearchErrorChange($event)"
                      (selectionSummaryChange)="onCalendarSelectionSummaryChange($event)"
                      (requestSearchPanel)="onCalendarRequestSearchPanel()"
                    ></app-markdown-calendar>
                  </div>
                  @if (calendarOverlayVisible()) {
                    <div class="absolute inset-0 flex flex-col overflow-hidden rounded-2xl border border-obs-l-border/60 bg-obs-l-bg-main/95 shadow-2xl dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/95">
                      <div class="flex items-center justify-between border-b border-obs-l-border/60 px-4 py-3 dark:border-obs-d-border/60">
                        <div class="flex flex-col gap-1">
                          <h4 class="text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">Notes correspondantes</h4>
                          @if (calendarSelectionLabel(); as selectionLabel) {
                            <span class="text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">{{ selectionLabel }}</span>
                          }
                        </div>
                        <div class="flex items-center gap-3">
                          @if (calendarResults().length > 0) {
                            <span class="text-xs font-medium text-obs-l-text-muted dark:text-obs-d-text-muted">{{ calendarResults().length }} {{ calendarResults().length > 1 ? 'notes' : 'note' }}</span>
                          }
                          <button
                            (click)="clearCalendarResults()"
                            class="rounded-lg border border-transparent p-1.5 text-obs-l-text-muted transition hover:border-obs-l-border/60 hover:bg-obs-l-bg-main/80 hover:text-obs-l-text-main dark:text-obs-d-text-muted dark:hover:border-obs-d-border/60 dark:hover:bg-obs-d-bg-main/70 dark:hover:text-obs-d-text-main"
                            aria-label="Fermer les résultats du calendrier"
                          >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                          </button>
                        </div>
                      </div>
                      <div class="flex-1 space-y-2 overflow-y-auto px-4 py-4">
                        @if (calendarSearchState() === 'loading') {
                          <div class="rounded-lg bg-obs-l-bg-main/70 px-3 py-3 text-sm text-obs-l-text-muted dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-muted">Recherche en cours...</div>
                        } @else if (calendarSearchError(); as calError) {
                          <div class="rounded-lg border border-red-500/40 bg-red-500/10 px-3 py-3 text-sm text-red-500 dark:border-red-500/30 dark:bg-red-500/15 dark:text-red-400">{{ calError }}</div>
                        } @else if (calendarResults().length === 0) {
                          <div class="rounded-lg bg-obs-l-bg-main/70 px-3 py-3 text-sm text-obs-l-text-muted dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-muted">Sélectionnez une période pour afficher les notes.</div>
                        } @else {
                          <ul class="space-y-2">
                            @for (file of calendarResults(); track file.id) {
                              <li>
                                <button
                                  (click)="selectNote(file.id)"
                                  class="w-full rounded-xl border border-transparent bg-obs-l-bg-main/85 px-3 py-3 text-left transition hover:border-obs-l-border/60 hover:bg-obs-l-bg-main dark:bg-obs-d-bg-main/70 dark:hover:border-obs-d-border/60 dark:hover:bg-obs-d-bg-main"
                                >
                                  <div class="truncate text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">{{ file.title }}</div>
                                  <div class="mt-1 flex flex-wrap gap-2 text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">
                                    <span>Créé&nbsp;: {{ file.createdAt | date:'mediumDate' }}</span>
                                    <span>Modifié&nbsp;: {{ file.updatedAt | date:'mediumDate' }}</span>
                                  </div>
                                </button>
                              </li>
                            }
                          </ul>
                        }
                      </div>
                    </div>
                  }
                </div>
                <div class="border-t border-obs-l-border/60 bg-obs-l-bg-main/60 px-4 py-4 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/60">
                  @if (calendarOverlayVisible()) {
                    <p class="text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">Fermez le panneau pour revenir au calendrier ou sélectionner une nouvelle période.</p>
                  } @else {
                    <p class="text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">Choisissez une date pour afficher les notes associées.</p>
                  }
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </aside>
    }