Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update TypeScript build info cache for Angular 20.3.3

Browse Source
This commit is contained in:
bruno
2025-09-29 11:18:25 -04:00
parent 0e604c06d0
commit 0b72a6b810
20 changed files with 763 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.component.simple.html
+87 -93
View File
@@ -1,5 +1,5 @@
<!-- ObsiViewer - Application optimisée pour mobile et desktop -->
<main class="relative flex min-h-screen flex-col bg-obs-l-bg-main text-obs-l-text-main dark:bg-obs-d-bg-main dark:text-obs-d-text-main lg:flex-row lg:h-screen lg:overflow-hidden">
<main class="relative flex min-h-screen flex-col bg-bg-main text-text-main lg:flex-row lg:h-screen lg:overflow-hidden">
@if (isRawViewOpen()) {
<app-raw-view-overlay
[content]="rawNoteContent()"
@@ -10,57 +10,52 @@
></app-raw-view-overlay>
}
<!-- Navigation latérale desktop -->
<nav class="hidden w-14 flex-col items-center gap-4 border-r border-obs-l-border bg-obs-l-bg-main py-4 dark:border-obs-d-border dark:bg-obs-d-bg-main lg:flex">
<nav class="hidden w-14 flex-col items-center gap-4 border-r border-border bg-bg-main py-4 lg:flex">
<button
(click)="setView('files')"
class="rounded-lg p-2 transition hover:bg-obs-l-bg-secondary dark:hover:bg-obs-d-bg-secondary"
[class.bg-obs-l-bg-secondary]="activeView() === 'files'"
[class.dark:bg-obs-d-bg-secondary]="activeView() === 'files'"
class="btn btn-sm btn-icon"
[ngClass]="activeView() === 'files' ? 'btn-primary' : 'btn-ghost'"
aria-label="Afficher les fichiers"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-obs-l-text-muted dark:text-obs-d-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
</button>
<button
(click)="setView('search')"
class="rounded-lg p-2 transition hover:bg-obs-l-bg-secondary dark:hover:bg-obs-d-bg-secondary"
[class.bg-obs-l-bg-secondary]="activeView() === 'search'"
[class.dark:bg-obs-d-bg-secondary]="activeView() === 'search'"
class="btn btn-sm btn-icon"
[ngClass]="activeView() === 'search' ? 'btn-primary' : 'btn-ghost'"
aria-label="Ouvrir la recherche"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-obs-l-text-muted dark:text-obs-d-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</button>
<button
(click)="setView('tags')"
class="rounded-lg p-2 transition hover:bg-obs-l-bg-secondary dark:hover:bg-obs-d-bg-secondary"
[class.bg-obs-l-bg-secondary]="activeView() === 'tags'"
[class.dark:bg-obs-d-bg-secondary]="activeView() === 'tags'"
class="btn btn-sm btn-icon"
[ngClass]="activeView() === 'tags' ? 'btn-primary' : 'btn-ghost'"
aria-label="Afficher les tags"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-obs-l-text-muted dark:text-obs-d-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-5 5a2 2 0 01-2.828 0l-7-7A2 2 0 013 8V3z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-5 5a2 2 0 01-2.828 0l-7-7A2 2 0 013 8V3z" /></svg>
</button>
<button
(click)="setView('graph')"
class="rounded-lg p-2 transition hover:bg-obs-l-bg-secondary dark:hover:bg-obs-d-bg-secondary"
[class.bg-obs-l-bg-secondary]="activeView() === 'graph'"
[class.dark:bg-obs-d-bg-secondary]="activeView() === 'graph'"
class="btn btn-sm btn-icon"
[ngClass]="activeView() === 'graph' ? 'btn-primary' : 'btn-ghost'"
aria-label="Afficher la vue graphe"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-obs-l-text-muted dark:text-obs-d-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
</button>
<button
(click)="setView('calendar')"
class="rounded-lg p-2 transition hover:bg-obs-l-bg-secondary dark:hover:bg-obs-d-bg-secondary"
[class.bg-obs-l-bg-secondary]="activeView() === 'calendar'"
[class.dark:bg-obs-d-bg-secondary]="activeView() === 'calendar'"
class="btn btn-sm btn-icon"
[ngClass]="activeView() === 'calendar' ? 'btn-primary' : 'btn-ghost'"
aria-label="Afficher le calendrier"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-obs-l-text-muted dark:text-obs-d-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2h-1.5a1.5 1.5 0 01-3 0h-5a1.5 1.5 0 01-3 0H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2h-1.5a1.5 1.5 0 01-3 0h-5a1.5 1.5 0 01-3 0H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
</button>
</nav>
@if (isDesktop() || isSidebarOpen()) {
<aside
class="fixed inset-y-0 left-0 z-40 flex h-screen w-[min(320px,85vw)] -translate-x-full transform flex-col border-r border-obs-l-border bg-obs-l-bg-secondary shadow-xl transition-transform duration-200 ease-in-out dark:border-obs-d-border dark:bg-obs-d-bg-secondary lg:static lg:h-auto lg:w-auto lg:translate-x-0 lg:shadow-none"
class="fixed inset-y-0 left-0 z-40 flex h-screen w-[min(320px,85vw)] -translate-x-full transform flex-col border-r border-border bg-bg-muted shadow-xl transition-transform duration-200 ease-in-out lg:static lg:h-auto lg:w-auto lg:translate-x-0 lg:shadow-none"
[class.translate-x-0]="isSidebarOpen() || isDesktop()"
[class.pointer-events-none]="!isSidebarOpen() && !isDesktop()"
[style.width.px]="isDesktop() ? (isSidebarOpen() ? leftSidebarWidth() : 0) : null"
@@ -69,27 +64,27 @@
role="navigation"
aria-label="Arborescence de la voûte"
>
<div class="flex h-full flex-col overflow-hidden"
<div class="flex h-full flex-col overflow-hidden bg-card"
[style.width.px]="isDesktop() ? (isSidebarOpen() ? leftSidebarWidth() : 0) : null"
>
<div class="space-y-4 border-b border-obs-l-border bg-obs-l-bg-secondary/60 px-4 py-4 dark:border-obs-d-border dark:bg-obs-d-bg-secondary/60">
<div class="space-y-4 border-b border-border/80 bg-bg-muted/70 px-4 py-4">
<div class="flex items-start justify-between gap-3">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-2xl border border-obs-l-border/60 bg-obs-l-bg-main/70 text-obs-l-text-muted shadow-sm dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/60 dark:text-obs-d-text-muted">
<div class="flex h-10 w-10 items-center justify-center rounded-2xl border border-border/70 bg-card/80 text-text-muted shadow-subtle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM5.5 21a6.5 6.5 0 0113 0" /></svg>
</div>
<div>
<span class="text-sm font-semibold tracking-wide text-obs-l-text-main dark:text-obs-d-text-main">{{ vaultName() }}</span>
<div class="mt-1 flex items-center gap-2 text-xs uppercase text-obs-l-text-muted dark:text-obs-d-text-muted">
<span class="inline-flex items-center gap-1 rounded-full bg-obs-l-bg-main/70 px-2 py-0.5 text-[0.65rem] font-semibold tracking-widest text-obs-l-text-main/80 dark:bg-obs-d-bg-main/60 dark:text-obs-d-text-main/80">{{ activeView() | titlecase }}</span>
<span class="hidden text-[0.65rem] tracking-widest text-obs-l-text-muted/80 dark:text-obs-d-text-muted/70 sm:inline">Vue active</span>
<span class="text-sm font-semibold tracking-wide text-text-main">{{ vaultName() }}</span>
<div class="mt-1 flex items-center gap-2 text-xs uppercase text-text-muted">
<span class="inline-flex items-center gap-1 rounded-full bg-card/80 px-2 py-0.5 text-[0.65rem] font-semibold tracking-widest text-text-main/80">{{ activeView() | titlecase }}</span>
<span class="hidden text-[0.65rem] tracking-widest text-text-muted/80 sm:inline">Vue active</span>
</div>
</div>
</div>
@if (!isDesktop()) {
<button
class="rounded-xl border border-transparent bg-obs-l-bg-main/70 p-2 text-obs-l-text-muted transition hover:border-obs-l-border/50 hover:bg-obs-l-bg-main/90 dark:bg-obs-d-bg-main/60 dark:text-obs-d-text-muted dark:hover:border-obs-d-border/60 dark:hover:bg-obs-d-bg-main/70"
class="btn btn-icon btn-ghost"
(click)="closeSidebar()"
aria-label="Fermer le panneau latéral"
>
@@ -98,12 +93,12 @@
}
</div>
<div class="rounded-2xl border border-obs-l-border/60 bg-obs-l-bg-main/75 px-3 py-3 shadow-inner dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/60">
<div class="rounded-2xl border border-border/70 bg-card/85 px-3 py-3 shadow-subtle">
<div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
<button
(click)="setView('files')"
class="group flex flex-col items-center gap-1 rounded-xl border border-transparent px-2.5 py-2 text-xs font-medium text-obs-l-text-muted transition duration-150 hover:border-obs-l-border/50 hover:bg-obs-l-bg-main/60 hover:text-obs-l-text-main dark:text-obs-d-text-muted dark:hover:border-obs-d-border/50 dark:hover:bg-obs-d-bg-main/60 dark:hover:text-obs-d-text-main"
[ngClass]="{ 'bg-obs-l-bg-main/80 text-obs-l-text-main shadow-sm dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-main': activeView() === 'files' }"
class="group flex flex-col items-center gap-1 rounded-xl border border-transparent px-2.5 py-2 text-xs font-medium text-text-muted transition duration-150 hover:border-border/60 hover:bg-bg-muted/70 hover:text-text-main"
[ngClass]="{ 'bg-bg-muted/80 text-text-main shadow-subtle': activeView() === 'files' }"
aria-label="Afficher les fichiers"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
@@ -111,8 +106,8 @@
</button>
<button
(click)="setView('search')"
class="group flex flex-col items-center gap-1 rounded-xl border border-transparent px-2.5 py-2 text-xs font-medium text-obs-l-text-muted transition duration-150 hover:border-obs-l-border/50 hover:bg-obs-l-bg-main/60 hover:text-obs-l-text-main dark:text-obs-d-text-muted dark:hover:border-obs-d-border/50 dark:hover:bg-obs-d-bg-main/60 dark:hover:text-obs-d-text-main"
[ngClass]="{ 'bg-obs-l-bg-main/80 text-obs-l-text-main shadow-sm dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-main': activeView() === 'search' }"
class="group flex flex-col items-center gap-1 rounded-xl border border-transparent px-2.5 py-2 text-xs font-medium text-text-muted transition duration-150 hover:border-border/60 hover:bg-bg-muted/70 hover:text-text-main"
[ngClass]="{ 'bg-bg-muted/80 text-text-main shadow-subtle': activeView() === 'search' }"
aria-label="Ouvrir la recherche"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
@@ -120,8 +115,8 @@
</button>
<button
(click)="setView('tags')"
class="group flex flex-col items-center gap-1 rounded-xl border border-transparent px-2.5 py-2 text-xs font-medium text-obs-l-text-muted transition duration-150 hover:border-obs-l-border/50 hover:bg-obs-l-bg-main/60 hover:text-obs-l-text-main dark:text-obs-d-text-muted dark:hover:border-obs-d-border/50 dark:hover:bg-obs-d-bg-main/60 dark:hover:text-obs-d-text-main"
[ngClass]="{ 'bg-obs-l-bg-main/80 text-obs-l-text-main shadow-sm dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-main': activeView() === 'tags' }"
class="group flex flex-col items-center gap-1 rounded-xl border border-transparent px-2.5 py-2 text-xs font-medium text-text-muted transition duration-150 hover:border-border/60 hover:bg-bg-muted/70 hover:text-text-main"
[ngClass]="{ 'bg-bg-muted/80 text-text-main shadow-subtle': activeView() === 'tags' }"
aria-label="Afficher les tags"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-5 5a2 2 0 01-2.828 0l-7-7A2 2 0 013 8V3z" /></svg>
@@ -129,8 +124,8 @@
</button>
<button
(click)="setView('calendar')"
class="group flex flex-col items-center gap-1 rounded-xl border border-transparent px-2.5 py-2 text-xs font-medium text-obs-l-text-muted transition duration-150 hover:border-obs-l-border/50 hover:bg-obs-l-bg-main/60 hover:text-obs-l-text-main dark:text-obs-d-text-muted dark:hover:border-obs-d-border/50 dark:hover:bg-obs-d-bg-main/60 dark:hover:text-obs-d-text-main"
[ngClass]="{ 'bg-obs-l-bg-main/80 text-obs-l-text-main shadow-sm dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-main': activeView() === 'calendar' }"
class="group flex flex-col items-center gap-1 rounded-xl border border-transparent px-2.5 py-2 text-xs font-medium text-text-muted transition duration-150 hover:border-border/60 hover:bg-bg-muted/70 hover:text-text-main"
[ngClass]="{ 'bg-bg-muted/80 text-text-main shadow-subtle': activeView() === 'calendar' }"
[attr.aria-pressed]="activeView() === 'calendar'"
aria-label="Afficher l'agenda"
>
@@ -164,55 +159,54 @@
placeholder="Rechercher dans la voûte..."
[ngModel]="sidebarSearchTerm()"
(ngModelChange)="updateSearchTerm($event)"
class="w-full rounded-xl border border-obs-l-border/60 bg-obs-l-bg-main/80 px-3 py-2.5 text-sm text-obs-l-text-main placeholder:text-obs-l-text-muted shadow-sm focus:outline-none focus:ring-2 focus:ring-obs-l-accent dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-main dark:placeholder:text-obs-d-text-muted dark:focus:ring-obs-d-accent"
class="input"
aria-label="Rechercher dans la voûte"
/>
</div>
@if (activeTagDisplay(); as tagDisplay) {
<div class="flex items-center justify-between rounded-lg border border-obs-l-border/60 bg-obs-l-bg-main/75 px-3 py-2 dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/65">
<div class="flex items-center gap-2 text-sm font-medium text-obs-l-text-main dark:text-obs-d-text-main">
<div class="flex items-center justify-between rounded-lg border border-border bg-card px-3 py-2">
<div class="flex items-center gap-2 text-sm font-medium text-text-main">
<span>🔖</span>
<span class="truncate">{{ tagDisplay }}</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>
<button class="btn btn-sm btn-ghost" (click)="clearTagFilter()">Effacer</button>
</div>
}
</div>
<div class="space-y-3">
<div class="flex items-center justify-between px-2">
<h3 class="text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">Résultats</h3>
<span class="text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">{{ searchResults().length }}</span>
<h3 class="text-xs font-semibold uppercase tracking-wide text-text-muted">Résultats</h3>
<span class="text-xs text-text-muted">{{ searchResults().length }}</span>
</div>
@if (searchResults().length > 0) {
<ul class="space-y-1">
@for (note of searchResults(); track note.id) {
<li
(click)="selectNote(note.id)"
class="cursor-pointer rounded-lg px-3 py-2 transition hover:bg-obs-l-bg-main/70 dark:hover:bg-obs-d-bg-main/60"
[class.bg-obs-l-bg-main]="selectedNoteId() === note.id"
[class.dark:bg-obs-d-bg-main]="selectedNoteId() === note.id"
class="cursor-pointer rounded-lg border border-transparent bg-card px-3 py-2 transition hover:border-border hover:bg-bg-muted"
[ngClass]="{ 'border-border bg-bg-muted': selectedNoteId() === note.id }"
>
<div class="truncate text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">{{ 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>
<div class="truncate text-sm font-semibold text-text-main">{{ note.title }}</div>
<div class="truncate text-xs text-text-muted">{{ note.content.substring(0, 100) }}</div>
</li>
}
</ul>
} @else {
<p class="rounded-lg border border-dashed border-obs-l-border/60 px-3 py-3 text-sm text-obs-l-text-muted dark:border-obs-d-border/60 dark:text-obs-d-text-muted">Aucun résultat pour cette recherche.</p>
<p class="rounded-lg border border-dashed border-border px-3 py-3 text-sm text-text-muted">Aucun résultat pour cette recherche.</p>
}
</div>
@if (calendarSelectionLabel() || calendarSearchState() !== 'idle' || calendarResults().length > 0 || calendarSearchError()) {
<div class="space-y-3 rounded-xl border border-obs-l-border/60 bg-obs-l-bg-main/75 p-3 shadow-inner dark:border-obs-d-border/60 dark:bg-obs-d-bg-main/65">
<div class="space-y-3 rounded-xl border border-border bg-card p-3 shadow-subtle">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">Résultats du calendrier</h3>
<h3 class="text-sm font-semibold text-text-main">Résultats du calendrier</h3>
@if (calendarSelectionLabel(); as selectionLabel) {
<p class="text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">{{ selectionLabel }}</p>
<p class="text-xs text-text-muted">{{ selectionLabel }}</p>
}
</div>
<button
class="rounded-lg border border-transparent px-2 py-1 text-xs 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"
class="btn btn-sm btn-ghost"
(click)="clearCalendarResults()"
aria-label="Effacer les résultats du calendrier"
>
@@ -221,21 +215,21 @@
</div>
@if (calendarSearchState() === 'loading') {
<div class="rounded-lg bg-obs-l-bg-main/80 px-3 py-2 text-xs text-obs-l-text-muted dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-muted">Recherche en cours...</div>
<div class="rounded-lg bg-bg-muted px-3 py-2 text-xs text-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-2 text-xs 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/80 px-3 py-2 text-xs text-obs-l-text-muted dark:bg-obs-d-bg-main/70 dark:text-obs-d-text-muted">Sélectionnez une date dans le calendrier pour voir les notes correspondantes.</div>
<div class="rounded-lg bg-bg-muted px-3 py-2 text-xs text-text-muted">Sélectionnez une date dans le calendrier pour voir les notes correspondantes.</div>
} @else {
<ul class="space-y-2">
@for (file of calendarResults(); track file.id) {
<li>
<button
(click)="selectNote(file.id)"
class="w-full rounded-lg border border-transparent bg-obs-l-bg-main/85 px-3 py-2 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"
class="w-full rounded-lg border border-transparent bg-card px-3 py-2 text-left transition hover:border-border hover:bg-bg-muted"
>
<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">
<div class="truncate text-sm font-semibold text-text-main">{{ file.title }}</div>
<div class="mt-1 flex flex-wrap gap-2 text-xs text-text-muted">
<span>Créé&nbsp;: {{ file.createdAt | date:'mediumDate' }}</span>
<span>Modifié&nbsp;: {{ file.updatedAt | date:'mediumDate' }}</span>
</div>
@@ -250,9 +244,9 @@
}
@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 class="flex items-center justify-between border-b border-border bg-card px-4 py-3">
<div>
<h3 class="text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">Vue agenda</h3>
<h3 class="text-sm font-semibold text-text-main">Vue agenda</h3>
</div>
</div>
<div class="flex-1 overflow-auto px-3 py-4">
@@ -290,12 +284,12 @@
></div>
</div>
<section class="flex min-w-0 flex-col bg-obs-l-bg-main pb-16 dark:bg-obs-d-bg-main lg:flex-1 lg:min-h-0 lg:overflow-hidden lg:pb-0">
<header class="flex flex-col gap-4 border-b border-obs-l-border/60 bg-obs-l-bg-main/95 px-4 py-3 backdrop-blur-xs dark:border-obs-d-border dark:bg-obs-d-bg-main/95 lg:px-6">
<section class="flex min-w-0 flex-col bg-bg-main pb-16 lg:flex-1 lg:min-h-0 lg:overflow-hidden lg:pb-0">
<header class="flex flex-col gap-4 border-b border-border bg-bg-main/95 px-4 py-3 backdrop-blur-xs lg:px-6">
<div class="flex items-start justify-between gap-4">
<div class="flex items-center gap-3 min-w-0">
<button
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary lg:hidden"
class="btn btn-icon btn-ghost lg:hidden"
(click)="toggleSidebar()"
[attr.aria-expanded]="isSidebarOpen()"
aria-label="Basculer le menu"
@@ -303,7 +297,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
</button>
<button
class="hidden rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary lg:inline-flex"
class="hidden btn btn-icon btn-ghost lg:inline-flex"
(click)="toggleSidebar()"
[attr.aria-expanded]="isSidebarOpen()"
aria-label="Afficher ou masquer la barre latérale gauche"
@@ -316,20 +310,20 @@
</button>
<div class="min-w-0 flex flex-col gap-1">
<div class="flex items-center gap-2 min-w-0">
<span class="inline-flex items-center rounded-lg border border-obs-l-border bg-obs-l-bg-secondary/60 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted dark:border-obs-d-border dark:bg-obs-d-bg-secondary/60 dark:text-obs-d-text-muted">{{ vaultName() }}</span>
<h1 class="text-lg font-semibold leading-tight text-obs-l-text-main dark:text-obs-d-text-main">ObsiWatcher</h1>
<span class="inline-flex items-center rounded-lg border border-border bg-bg-muted/70 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-text-muted">{{ vaultName() }}</span>
<h1 class="text-lg font-semibold leading-tight text-text-main">ObsiWatcher</h1>
</div>
@if (selectedNoteBreadcrumb().length > 0) {
<p class="truncate text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">{{ selectedNoteBreadcrumb().join(' / ') }}</p>
<p class="truncate text-xs text-text-muted">{{ selectedNoteBreadcrumb().join(' / ') }}</p>
} @else {
<p class="truncate text-xs text-obs-l-text-muted dark:text-obs-d-text-muted">Aucune note sélectionnée</p>
<p class="truncate text-xs text-text-muted">Aucune note sélectionnée</p>
}
</div>
</div>
<div class="hidden items-center gap-2 lg:flex">
<button
type="button"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary disabled:opacity-40 disabled:pointer-events-none"
class="btn btn-icon btn-ghost disabled:opacity-40 disabled:pointer-events-none"
(click)="toggleRawView()"
[disabled]="!selectedNote()"
aria-label="Afficher le markdown brut"
@@ -345,7 +339,7 @@
</button>
<button
type="button"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary disabled:opacity-40 disabled:pointer-events-none"
class="btn btn-icon btn-ghost disabled:opacity-40 disabled:pointer-events-none"
(click)="downloadCurrentNote()"
[disabled]="!selectedNote()"
aria-label="Télécharger le fichier markdown"
@@ -361,7 +355,7 @@
</button>
<button
(click)="toggleTheme()"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary"
class="btn btn-icon btn-ghost"
aria-label="Basculer le thème"
>
@if (isDarkMode()) {
@@ -372,7 +366,7 @@
</button>
<button
(click)="toggleOutline()"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary"
class="btn btn-icon btn-ghost"
[attr.aria-expanded]="isOutlineOpen()"
aria-label="Basculer la barre latérale droite"
>
@@ -388,7 +382,7 @@
<div class="flex items-center gap-2 lg:hidden">
<button
type="button"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary disabled:opacity-40 disabled:pointer-events-none"
class="btn btn-icon btn-ghost disabled:opacity-40 disabled:pointer-events-none"
(click)="toggleRawView()"
[disabled]="!selectedNote()"
aria-label="Afficher le markdown brut"
@@ -404,7 +398,7 @@
</button>
<button
type="button"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary disabled:opacity-40 disabled:pointer-events-none"
class="btn btn-icon btn-ghost disabled:opacity-40 disabled:pointer-events-none"
(click)="downloadCurrentNote()"
[disabled]="!selectedNote()"
aria-label="Télécharger le fichier markdown"
@@ -420,7 +414,7 @@
</button>
<button
(click)="toggleTheme()"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary"
class="btn btn-icon btn-ghost"
aria-label="Basculer le thème"
>
@if (isDarkMode()) {
@@ -431,7 +425,7 @@
</button>
<button
(click)="toggleOutline()"
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary"
class="btn btn-icon btn-ghost"
[attr.aria-expanded]="isOutlineOpen()"
aria-label="Basculer la barre latérale droite"
>
@@ -444,18 +438,18 @@
</div>
<div class="flex flex-1 items-center gap-3">
<div class="relative w-full flex-1 min-w-0">
<svg class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-obs-l-text-muted dark:text-obs-d-text-muted" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
<svg class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-text-muted" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
<input
type="text"
placeholder="Rechercher dans la voûte..."
[ngModel]="sidebarSearchTerm()"
(ngModelChange)="updateSearchTerm($event, true)"
class="w-full rounded-full border border-obs-l-border bg-obs-l-bg-secondary/60 pl-11 pr-4 py-2.5 text-sm text-obs-l-text-main placeholder:text-obs-l-text-muted shadow-sm focus:outline-none focus:ring-2 focus:ring-obs-l-accent dark:border-obs-d-border dark:bg-obs-d-bg-secondary/60 dark:text-obs-d-text-main dark:placeholder:text-obs-d-text-muted dark:focus:ring-obs-d-accent"
class="w-full rounded-full border border-border bg-bg-muted/70 pl-11 pr-4 py-2.5 text-sm text-text-main placeholder:text-text-muted shadow-subtle focus:outline-none focus:ring-2 focus:ring-ring"
aria-label="Rechercher dans la voûte"
/>
</div>
<button
class="hidden rounded-full border border-obs-l-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted transition hover:bg-obs-l-bg-secondary dark:border-obs-d-border dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-secondary lg:inline-flex"
class="hidden rounded-full border border-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-text-muted transition hover:bg-bg-muted lg:inline-flex"
(click)="toggleOutline()"
[attr.aria-pressed]="isOutlineOpen()"
>
@@ -475,7 +469,7 @@
></app-note-viewer>
} @else {
<div class="flex h-full items-center justify-center">
<p class="text-obs-l-text-muted dark:text-obs-d-text-muted">Sélectionnez une note pour commencer</p>
<p class="text-text-muted">Sélectionnez une note pour commencer</p>
</div>
}
</div>
@@ -500,7 +494,7 @@
@if (isDesktop() || isOutlineOpen()) {
<aside
class="fixed inset-x-0 bottom-0 z-40 flex max-h-[80vh] flex-col overflow-hidden border-t border-obs-l-border bg-obs-l-bg-secondary shadow-2xl transition-all duration-200 ease-out dark:border-obs-d-border dark:bg-obs-d-bg-secondary lg:static lg:max-h-none lg:border-l lg:shadow-none"
class="fixed inset-x-0 bottom-0 z-40 flex max-h-[80vh] flex-col overflow-hidden border-t border-border bg-card shadow-2xl transition-all duration-200 ease-out lg:static lg:max-h-none lg:border-l lg:shadow-none"
[ngClass]="{
'translate-y-0 opacity-100 pointer-events-auto': isOutlineOpen() || isDesktop(),
'translate-y-full opacity-0 pointer-events-none': !isOutlineOpen() && !isDesktop()
@@ -514,37 +508,37 @@
<div class="flex flex-col lg:h-full">
@if (!isDesktop()) {
<div class="px-4 pt-3">
<div class="mx-auto mb-3 h-1.5 w-12 rounded-full bg-obs-l-border dark:bg-obs-d-border"></div>
<div class="mx-auto mb-3 h-1.5 w-12 rounded-full bg-border"></div>
<div class="flex items-center justify-between">
<h2 class="text-base font-semibold text-obs-l-text-main dark:text-obs-d-text-main">Navigation</h2>
<h2 class="text-base font-semibold text-text-main">Navigation</h2>
<button
class="rounded-lg p-2 text-obs-l-text-muted transition hover:bg-obs-l-bg-main/70 dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-main/60"
class="btn btn-icon btn-ghost"
(click)="closeOutlinePanel()"
aria-label="Fermer la barre latérale droite"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
<p class="mt-1 text-xs uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">Table des matières & calendrier</p>
<p class="mt-1 text-xs uppercase tracking-wide text-text-muted">Table des matières & calendrier</p>
</div>
}
<div class="hidden border-b border-obs-l-border px-4 py-3 text-sm font-semibold uppercase tracking-wide text-obs-l-text-muted dark:border-obs-d-border dark:text-obs-d-text-muted lg:block">
<div class="hidden border-b border-border px-4 py-3 text-sm font-semibold uppercase tracking-wide text-text-muted lg:block">
Outline
</div>
<div class="flex-1 overflow-y-auto px-4 py-4">
@if (tableOfContents().length > 0) {
<ul class="space-y-2">
@for (entry of tableOfContents(); track entry.id) {
<li [style.padding-left.rem]="(entry.level - 1) * 0.75" class="flex items-start gap-2 text-sm text-obs-l-text-muted dark:text-obs-d-text-muted">
<li [style.padding-left.rem]="(entry.level - 1) * 0.75" class="flex items-start gap-2 text-sm text-text-muted">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-1 h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" /></svg>
<a (click)="scrollToHeading(entry.id)" class="cursor-pointer leading-tight transition hover:text-obs-l-text-main dark:hover:text-obs-d-text-main">
<a (click)="scrollToHeading(entry.id)" class="cursor-pointer leading-tight text-text-muted transition hover:text-text-main">
{{ entry.text }}
</a>
</li>
}
</ul>
} @else {
<p class="text-sm italic text-obs-l-text-muted dark:text-obs-d-text-muted">Aucun titre dans cette note.</p>
<p class="text-sm italic text-text-muted">Aucun titre dans cette note.</p>
}
</div>
</div>