chore: update Angular cache and TypeScript build info

src/app.component.html

@@ -198,7 +198,7 @@
                       <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>
+                    <button class="btn-standard-xs" (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>
@@ -297,7 +297,7 @@
                           }
                           <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"
+                            class="btn-standard-icon"
                             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>
@@ -412,18 +412,6 @@
                 <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
               }
             </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"
-              [attr.aria-expanded]="isOutlineOpen()"
-              aria-label="Basculer la barre latérale droite"
-            >
-              @if (isOutlineOpen()) {
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>
-              } @else {
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>
-              }
-            </button>
           </div>
         </div>
         <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between lg:gap-6">
@@ -439,18 +427,6 @@
                 <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
               }
             </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"
-              [attr.aria-expanded]="isOutlineOpen()"
-              aria-label="Basculer le calendrier"
-            >
-              @if (isOutlineOpen()) {
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>
-              } @else {
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>
-              }
-            </button>
           </div>
           <div class="relative w-full lg:flex-1 lg:max-w-none lg:min-w-0">
             <app-search-input-with-assistant
@@ -546,20 +522,6 @@
                 title="Outline">
                 <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="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" /></svg>
               </button>
-              <button
-                type="button"
-                (click)="setOutlineTab('settings')"
-                (keydown.enter)="setOutlineTab('settings')"
-                (keydown.space)="setOutlineTab('settings'); $event.preventDefault()"
-                [class.opacity-100]="outlineTab() === 'settings'"
-                [class.opacity-60]="outlineTab() !== 'settings'"
-                class="rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-obs-l-accent dark:focus:ring-obs-d-accent"
-                aria-label="Ouvrir les réglages du graphe"
-                [attr.aria-pressed]="outlineTab() === 'settings'"
-                title="Graph-View Settings">
-                <!-- gear/network icon -->
-                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
-              </button>
             </div>
             <div class="text-xs font-semibold uppercase tracking-wide text-obs-l-text-muted dark:text-obs-d-text-muted">{{ outlineTab() | titlecase }}</div>
           </div>

src/app.component.simple.html

@@ -202,7 +202,7 @@
                   </div>
                   @if (activeTagDisplay(); as tagDisplay) {
                     <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">
+                      <div class="flex items-center gap-2 text-sm font-small text-text-main">
                         <span>🔖</span>
                         <span class="truncate">{{ tagDisplay }}</span>
                       </div>
@@ -528,6 +528,7 @@
             <app-note-viewer
               [note]="note"
               [noteHtmlContent]="renderedNoteContent()"
+              [allNotes]="vaultService.allNotes()"
               (noteLinkClicked)="selectNote($event)"
               (tagClicked)="handleTagClick($event)"
               (wikiLinkActivated)="handleWikiLink($event)"

src/app.component.ts

@@ -53,7 +53,7 @@ interface TocEntry {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnDestroy {
-  private vaultService = inject(VaultService);
+  readonly vaultService = inject(VaultService);
   private markdownService = inject(MarkdownService);
   private markdownViewerService = inject(MarkdownViewerService);
   private downloadService = inject(DownloadService);

src/app/graph/ui/inline-settings-panel.component.ts

@@ -14,23 +14,48 @@ import { GraphSettingsAccordionComponent } from '../../../components/graph-setti
   ],
   template: `
     <div class="flex flex-col gap-3">
-      <!-- Header row for inline panel (optional small actions) -->
+      <!-- Header row for inline panel (actions aligned right) -->
       <div class="flex items-center justify-between">
         <h3 class="text-sm font-semibold text-obs-l-text-main dark:text-obs-d-text-main">Graph settings</h3>
-        <button
+        <div class="flex items-center gap-2">
-          type="button"
+          <!-- Expand all -->
-          (click)="resetAll()"
+          <button
-          class="rounded-lg p-1.5 text-obs-l-text-muted hover:bg-obs-l-bg-main/70 dark:text-obs-d-text-muted dark:hover:bg-obs-d-bg-main/60"
+            type="button"
-          title="Reset all settings">
+            class="btn-standard-icon"
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            title="Expand all"
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            (click)="accordion?.expandAll()">
-          </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        </button>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16M12 4v16" />
+            </svg>
+          </button>
+
+          <!-- Collapse all -->
+          <button
+            type="button"
+            class="btn-standard-icon"
+            title="Collapse all"
+            (click)="accordion?.collapseAll()">
+            <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="M4 12h16" />
+            </svg>
+          </button>
+
+          <!-- Reset all -->
+          <button
+            type="button"
+            (click)="resetAll()"
+            class="btn-standard-icon"
+            title="Reset all settings">
+            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        </div>
       </div>
 
       <ov-graph-settings-accordion
+        #accordion
         [config]="config()"
-        [showCollapseToggle]="true"
         (configChange)="onConfigChange($event)"
         (animateRequested)="animateRequested.emit()"
       ></ov-graph-settings-accordion>

src/app/graph/ui/sections/display-section.component.ts

@@ -84,7 +84,7 @@ import { GraphConfig, GRAPH_CONFIG_BOUNDS } from '../../graph-settings.types';
       <button 
         type="button"
         (click)="animateRequested.emit()"
-        class="w-full px-4 py-2 text-sm font-medium bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors shadow-sm">
+        class="btn-standard-primary w-full">
         Animate
       </button>
     </div>

src/app/graph/ui/sections/groups-section.component.ts

@@ -35,7 +35,7 @@ import { GraphConfig, GraphColorGroup, intToHex, createGraphColor } from '../../
               <button
                 type="button"
                 (click)="onDuplicate($index)"
-                class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
+                class="btn-standard-icon"
                 title="Duplicate">
                 <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
@@ -45,7 +45,7 @@ import { GraphConfig, GraphColorGroup, intToHex, createGraphColor } from '../../
               <button
                 type="button"
                 (click)="onDelete($index)"
-                class="p-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+                class="btn-standard-icon !text-red-500 hover:!text-red-700 dark:!text-red-400 dark:hover:!text-red-300"
                 title="Delete">
                 <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
@@ -60,7 +60,7 @@ import { GraphConfig, GraphColorGroup, intToHex, createGraphColor } from '../../
       <button 
         type="button"
         (click)="onAddGroup()"
-        class="w-full px-4 py-2 text-sm font-medium bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors shadow-sm">
+        class="btn-standard-primary w-full">
         New group
       </button>
 

src/app/graph/ui/settings-panel.component.ts

@@ -21,10 +21,32 @@ import { GraphSettingsAccordionComponent } from '../../../components/graph-setti
           <div class="panel-header">
             <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Graph settings</h2>
             <div class="flex items-center gap-2">
+              <!-- Expand all -->
+              <button
+                type="button"
+                class="btn-standard-icon"
+                title="Expand all"
+                (click)="accordion?.expandAll()">
+                <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 12h16M12 4v16" />
+                </svg>
+              </button>
+
+              <!-- Collapse all -->
+              <button
+                type="button"
+                class="btn-standard-icon"
+                title="Collapse all"
+                (click)="accordion?.collapseAll()">
+                <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 12h16" />
+                </svg>
+              </button>
+
               <button
                 type="button"
                 (click)="onResetAll()"
-                class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+                class="btn-standard-icon"
                 title="Reset all settings">
                 <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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
@@ -35,7 +57,7 @@ import { GraphSettingsAccordionComponent } from '../../../components/graph-setti
                 type="button"
                 (click)="close.emit()"
                 (keydown.escape)="close.emit()"
-                class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+                class="btn-standard-icon"
                 aria-label="Close settings"
                 title="Close">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -47,8 +69,8 @@ import { GraphSettingsAccordionComponent } from '../../../components/graph-setti
 
           <div class="panel-body">
             <ov-graph-settings-accordion
+              #accordion
               [config]="config()"
-              [showCollapseToggle]="true"
               (configChange)="onConfigChange($event)"
               (animateRequested)="animateRequested.emit()">
             </ov-graph-settings-accordion>

src/components/bookmarks-panel/bookmarks-panel.component.html

@@ -6,7 +6,7 @@
       <div class="flex items-center gap-2">
         <button
           type="button"
-          class="btn btn-sm btn-primary"
+          class="btn-standard-sm"
           (click)="createGroup()"
           title="Créer un groupe">
           + Group
@@ -29,7 +29,7 @@
       @if (searchTerm()) {
         <button
           (click)="onSearchChange('')"
-          class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          class="btn-standard-icon absolute right-2 top-1/2 -translate-y-1/2"
           title="Clear search">
           ✕
         </button>
@@ -51,7 +51,7 @@
           <span class="text-sm text-red-700 dark:text-red-300 flex-1">{{ error() }}</span>
           <button
             (click)="clearError()"
-            class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200"
+            class="btn-standard-icon !text-red-600 dark:!text-red-400 hover:!text-red-800 dark:hover:!text-red-200"
             title="Dismiss">
             ✕
           </button>
@@ -132,12 +132,12 @@
         <div class="flex gap-3">
           <button
             (click)="resolveConflictReload()"
-            class="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
+            class="btn-standard-primary flex-1">
             Reload from file
           </button>
           <button
             (click)="resolveConflictOverwrite()"
-            class="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors">
+            class="btn-standard-danger flex-1">
             Overwrite file
           </button>
         </div>

src/components/graph-settings/graph-settings-accordion.component.ts

@@ -130,17 +130,7 @@ interface AccordionSection {
       }
     </cdk-accordion>
 
-    <!-- Optional: Collapse All / Expand All Toggle -->
+    
-    @if (showCollapseToggle()) {
-      <div class="collapse-toggle-container">
-        <button
-          type="button"
-          class="collapse-toggle-button"
-          (click)="toggleAll()">
-          {{ allExpanded() ? 'Collapse all' : 'Expand all' }}
-        </button>
-      </div>
-    }
   `,
   styles: [`
     /* Container */
@@ -155,7 +145,8 @@ interface AccordionSection {
       border-radius: 1rem;
       border: 1px solid rgba(113, 113, 122, 0.3);
       background-color: rgba(255, 255, 255, 0.5);
-      overflow: hidden;
+      /* Important: allow inner popovers (search options) to overflow */
+      overflow: visible;
       transition: border-color 0.2s ease, box-shadow 0.2s ease;
     }
 
@@ -260,17 +251,27 @@ interface AccordionSection {
     .accordion-panel {
       display: grid;
       grid-template-rows: 0fr;
+      /* Keep hidden while collapsed to preserve animation */
       overflow: hidden;
       transition: grid-template-rows 0.2s ease-out;
     }
 
     .accordion-panel-expanded {
       grid-template-rows: 1fr;
+      /* Critical: allow popovers to escape the panel box */
+      overflow: visible;
+    }
+
+    /* Allow popovers to extend outside the panel when expanded */
+    .accordion-panel-expanded .accordion-panel-inner {
+      overflow: visible;
     }
 
     .accordion-panel-inner {
       min-height: 0;
       padding: 0 1.25rem;
+      /* Ensure inner content doesn't clip popovers */
+      overflow: visible;
     }
 
     .accordion-panel-expanded .accordion-panel-inner {
@@ -288,35 +289,6 @@ interface AccordionSection {
       display: flex;
       justify-content: center;
     }
-
-    .collapse-toggle-button {
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: #6b7280;
-      background: transparent;
-      border: 1px solid rgba(113, 113, 122, 0.3);
-      border-radius: 0.5rem;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-
-    .collapse-toggle-button:hover {
-      color: #374151;
-      border-color: rgba(113, 113, 122, 0.5);
-      background: rgba(249, 250, 251, 0.5);
-    }
-
-    :host-context(.dark) .collapse-toggle-button {
-      color: #9ca3af;
-      border-color: rgba(82, 82, 91, 0.5);
-    }
-
-    :host-context(.dark) .collapse-toggle-button:hover {
-      color: #d1d5db;
-      border-color: rgba(113, 113, 122, 0.6);
-      background: rgba(39, 39, 42, 0.5);
-    }
   `]
 })
 export class GraphSettingsAccordionComponent {
@@ -329,7 +301,7 @@ export class GraphSettingsAccordionComponent {
   /** Animate requested output */
   animateRequested = output<void>();
   
-  /** Show collapse/expand all toggle */
+  /** Show collapse/expand all toggle (no longer used in UI) */
   showCollapseToggle = input<boolean>(false);
 
   private settingsService = inject(GraphSettingsService);
@@ -424,24 +396,28 @@ export class GraphSettingsAccordionComponent {
     
     if (shouldExpandAll) {
       // Expand all
-      const allIds = new Set(sections.map(s => s.id));
+      this.expandAll();
-      this.openSectionsSet.set(allIds);
-      
-      // Persist all as expanded
-      sections.forEach(section => {
-        this.persistState(section.id, true);
-      });
     } else {
       // Collapse all
-      this.openSectionsSet.set(new Set());
+      this.collapseAll();
-      
-      // Persist all as collapsed
-      sections.forEach(section => {
-        this.persistState(section.id, false);
-      });
     }
   }
 
+  /** Expand all sections */
+  expandAll(): void {
+    const sections = this.sections();
+    const allIds = new Set(sections.map(s => s.id));
+    this.openSectionsSet.set(allIds);
+    sections.forEach(section => this.persistState(section.id, true));
+  }
+
+  /** Collapse all sections */
+  collapseAll(): void {
+    const sections = this.sections();
+    this.openSectionsSet.set(new Set());
+    sections.forEach(section => this.persistState(section.id, false));
+  }
+
   /**
    * Persist section state to GraphSettingsService
    */

src/components/search-bar/search-bar.component.ts

@@ -67,9 +67,7 @@ import { SearchOptions } from '../../core/search/search-parser.types';
             (click)="toggleCaseSensitivity()"
             [class.bg-accent]="caseSensitive()"
             [class.text-white]="caseSensitive()"
-            [class.hover:bg-bg-muted]="!caseSensitive()"
+            class="btn-standard-xs"
-            [class.dark:hover:bg-gray-700]="!caseSensitive()"
-            class="px-2 py-1 rounded text-xs font-semibold transition-colors border border-border dark:border-gray-600"
             [title]="caseSensitive() ? 'Case sensitive' : 'Case insensitive'"
             aria-label="Toggle case sensitivity"
           >
@@ -82,9 +80,7 @@ import { SearchOptions } from '../../core/search/search-parser.types';
             (click)="toggleRegexMode()"
             [class.bg-accent]="regexMode()"
             [class.text-white]="regexMode()"
-            [class.hover:bg-bg-muted]="!regexMode()"
+            class="btn-standard-xs font-mono"
-            [class.dark:hover:bg-gray-700]="!regexMode()"
-            class="px-2 py-1 rounded text-xs font-mono transition-colors border border-border dark:border-gray-600"
             [title]="regexMode() ? 'Regex mode enabled' : 'Regex mode disabled'"
             aria-label="Toggle regex mode"
           >
@@ -96,10 +92,10 @@ import { SearchOptions } from '../../core/search/search-parser.types';
             *ngIf="query"
             type="button"
             (click)="clear()"
-            class="p-1 rounded-full hover:bg-bg-muted dark:hover:bg-gray-700 transition-colors"
+            class="btn-standard-icon"
             aria-label="Clear search"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-text-muted dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <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>

src/components/search-query-assistant/search-query-assistant.component.ts

@@ -36,6 +36,7 @@ type NavigationItem =
         <div 
           #popover
           class="absolute top-full left-0 right-0 mt-1 bg-bg-primary dark:bg-gray-800 border border-border dark:border-gray-700 rounded-xl shadow-2xl z-50 overflow-hidden max-h-[360px]"
+          style="z-index: 9999;"
           (click)="$event.stopPropagation()"
         >
           <!-- Search Options -->

src/components/search-results/search-results.component.ts

@@ -71,7 +71,7 @@ type SortOption = 'relevance' | 'name' | 'modified';
           <!-- Expand/Collapse all -->
           <button
             (click)="toggleAllGroups()"
-            class="text-xs px-2 py-1 rounded hover:bg-bg-muted dark:hover:bg-gray-700 text-text-muted dark:text-gray-400"
+            class="btn-standard-xs"
             title="Expand/Collapse all"
           >
             {{ allExpanded() ? 'Collapse all' : 'Expand all' }}
@@ -134,7 +134,7 @@ type SortOption = 'relevance' | 'name' | 'modified';
                   <!-- Open button -->
                   <button
                     (click)="openNote(group.noteId, $event)"
-                    class="ml-2 p-1.5 rounded hover:bg-bg-primary dark:hover:bg-gray-700 text-text-muted dark:text-gray-400"
+                    class="btn-standard-icon ml-2"
                     title="Open note"
                   >
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">

src/components/tags-view/note-viewer/note-viewer.component.ts

@@ -15,6 +15,7 @@ import { CommonModule } from '@angular/common';
 import { Note } from '../../../types';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { NotePreviewService, PreviewData } from '../../../services/note-preview.service';
+import { Subscription } from 'rxjs';
 import mermaid from 'mermaid';
 
 type MermaidLib = typeof mermaid;
@@ -131,7 +132,7 @@ interface MetadataEntry {
 
           @if (metadataEntries().length > maxMetadataPreviewItems) {
             <div class="mt-3">
-              <button type="button" class="btn btn-secondary" (click)="toggleMetadataPanel()">
+              <button type="button" class="btn-standard-sm" (click)="toggleMetadataPanel()">
                 {{ metadataExpanded() ? translate('metadata.collapse') : translate('metadata.showAll') }}
               </button>
             </div>
@@ -201,6 +202,8 @@ export class NoteViewerComponent implements OnDestroy {
   private readonly metadataKeysToExclude = new Set(['tags', 'tag', 'keywords']);
   private attachmentErrorCleanup: (() => void) | null = null;
   private attachmentHandlersScheduled = false;
+  private wikiLinkHandlersScheduled = false;
+  private previewOpenSub: Subscription | null = null;
 
   readonly metadataExpanded = signal(false);
   readonly maxMetadataPreviewItems = 3;
@@ -265,6 +268,7 @@ export class NoteViewerComponent implements OnDestroy {
       this.scheduleMermaidRender();
       this.scheduleAttachmentHandlers();
       this.scheduleMathRender();
+      this.scheduleWikiLinkHoverHandlers();
     });
 
     afterNextRender(() => {
@@ -320,7 +324,8 @@ export class NoteViewerComponent implements OnDestroy {
       this.scheduleMermaidRender();
       this.scheduleAttachmentHandlers();
       this.scheduleMathRender();
-      this.setupWikiLinkHoverHandlers();
+      this.scheduleWikiLinkHoverHandlers();
+      this.subscribeToPreviewOpens();
     });
   }
 
@@ -333,37 +338,77 @@ export class NoteViewerComponent implements OnDestroy {
     this.attachmentErrorCleanup?.();
     this.attachmentErrorCleanup = null;
     this.previewService.hidePreviewImmediately();
+    this.previewOpenSub?.unsubscribe();
+    this.previewOpenSub = null;
+  }
+
+  private subscribeToPreviewOpens(): void {
+    if (this.previewOpenSub) return;
+    this.previewOpenSub = this.previewService.openNoteRequested$.subscribe(noteId => {
+      if (!noteId) return;
+      console.log('[NoteViewer] Preview open requested for note:', noteId);
+      this.noteLinkClicked.emit(noteId);
+    });
   }
 
   private setupWikiLinkHoverHandlers(): void {
     const hostElement = this.elementRef.nativeElement as HTMLElement;
     const wikiLinks = hostElement.querySelectorAll<HTMLAnchorElement>('a.md-wiki-link');
 
+    console.log('[NoteViewer] Setting up hover handlers for', wikiLinks.length, 'wiki links');
+
     wikiLinks.forEach(link => {
+      if (link.dataset.previewHoverBound === 'true') {
+        console.log('[NoteViewer] Link already bound, skipping:', link.textContent);
+        return;
+      }
+      link.dataset.previewHoverBound = 'true';
+
       link.addEventListener('mouseenter', () => {
         const targetValue = link.getAttribute('data-target') ?? '';
+        console.log('[NoteViewer] Mouse enter on link:', targetValue);
         const previewData = this.buildPreviewData(targetValue);
-        
+
         if (previewData) {
+          console.log('[NoteViewer] Showing preview for:', targetValue, previewData);
           this.previewService.showPreview(targetValue, link, previewData);
+        } else {
+          console.warn('[NoteViewer] No preview data found for:', targetValue);
         }
       });
 
       link.addEventListener('mouseleave', () => {
+        console.log('[NoteViewer] Mouse leave, hiding preview');
         this.previewService.hidePreview();
       });
     });
   }
 
+  private scheduleWikiLinkHoverHandlers(): void {
+    if (this.wikiLinkHandlersScheduled) return;
+    this.wikiLinkHandlersScheduled = true;
+    queueMicrotask(() => {
+      this.wikiLinkHandlersScheduled = false;
+      this.setupWikiLinkHoverHandlers();
+    });
+  }
+
   private buildPreviewData(noteTarget: string): PreviewData | null {
     const allNotes = this.allNotes();
+    console.log('[NoteViewer] Building preview for target:', noteTarget, 'from', allNotes.length, 'notes');
+    
     const targetNote = allNotes.find(n => 
       n.id.toLowerCase() === noteTarget.toLowerCase() ||
       n.title.toLowerCase() === noteTarget.toLowerCase() ||
       n.fileName?.replace(/\.md$/, '').toLowerCase() === noteTarget.toLowerCase()
     );
 
-    if (!targetNote) return null;
+    if (!targetNote) {
+      console.warn('[NoteViewer] Target note not found:', noteTarget);
+      return null;
+    }
+
+    console.log('[NoteViewer] Found target note:', targetNote.title);
 
     // Extraire un extrait (3-5 premières lignes)
     const lines = targetNote.content.split('\n').filter(line => line.trim());

src/components/tags-view/tags-view.component.ts

@@ -54,13 +54,34 @@ interface TagSection {
       :host-context(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
         background-color: var(--tv-scroll-thumb-dark);
       }
+
+      /* Remove blue focus rectangle and native search decorations */
+      #tag-search,
+      #tag-search:focus,
+      #tag-search:focus-visible {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      #tag-search {
+        appearance: none;
+        -webkit-appearance: none;
+        border: 0;
+      }
+
+      input[type='search']::-webkit-search-decoration,
+      input[type='search']::-webkit-search-cancel-button,
+      input[type='search']::-webkit-search-results-button,
+      input[type='search']::-webkit-search-results-decoration {
+        display: none;
+      }
     `,
   ],
   template: `
     <div class="flex h-full flex-col gap-4 p-3 bg-card">
-      <div class="rounded-xl border border-border bg-card px-3 py-2 shadow-subtle">
+      <div class="w-full rounded-full border border-border bg-card px-3 py-1.5 shadow-subtle focus-within:outline-none focus-within:ring-0">
         <label class="sr-only" for="tag-search">Rechercher des tags</label>
-        <div class="flex items-center gap-2 text-text-muted">
+        <div class="flex items-center gap-2.5 text-text-muted">
           <svg class="h-4 w-4" 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-5.2-5.2m0 0A7 7 0 105.8 5.8a7 7 0 0010 10z" />
           </svg>
@@ -70,20 +91,8 @@ interface TagSection {
             [value]="searchTerm()"
             (input)="onSearchChange($event.target?.value ?? '')"
             placeholder="Rechercher un tag..."
-            class="w-full bg-transparent text-sm text-text-main placeholder:text-text-muted focus:outline-none"
+            class="w-full border-0 bg-transparent text-sm text-text-main placeholder:text-text-muted outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0"
           />
-          @if (searchTerm(); as value) {
-            @if (value.length > 0) {
-              <button
-                type="button"
-                class="btn btn-sm btn-ghost px-2 py-1 text-xs"
-                aria-label="Effacer la recherche"
-                (click)="clearSearch()"
-              >
-                Effacer
-              </button>
-            }
-          }
         </div>
       </div>
 
@@ -105,7 +114,7 @@ interface TagSection {
                     @for (tag of section.tags; track tag.name) {
                       <button
                         type="button"
-                        class="chip justify-between px-3 py-1.5 text-sm"
+                        class="chip justify-between px-2 py-0.5 text-[0.7rem]"
                         (click)="tagSelected.emit(tag.name)"
                       >
                         <span class="flex items-center gap-2 text-text-main">
@@ -124,7 +133,7 @@ interface TagSection {
               Aucun tag ne correspond à votre recherche.
             </div>
           }
-        </div>
+          </div>
 
         <nav class="custom-scrollbar sticky top-0 flex h-full w-12 flex-col items-center justify-start gap-2 self-start rounded-lg border border-border bg-card px-2 py-3 text-[0.7rem] font-medium text-text-muted shadow-subtle overflow-y-auto">
           <span class="text-[0.6rem] uppercase tracking-wide text-text-muted/70">A–Z</span>

src/services/note-preview.service.ts

@@ -1,6 +1,7 @@
-import { Injectable, ComponentRef, inject, ApplicationRef, createComponent, EnvironmentInjector } from '@angular/core';
+import { Injectable, ComponentRef, inject, ApplicationRef, EnvironmentInjector } from '@angular/core';
 import { Overlay, OverlayRef, OverlayPositionBuilder, ConnectedPosition } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { Observable, Subject } from 'rxjs';
 
 export interface PreviewData {
   title: string;
@@ -61,6 +62,9 @@ export class NotePreviewService {
   private showTimeout?: number;
   private hideTimeout?: number;
   private currentNoteId?: string;
+  private readonly openNoteSubject = new Subject<string>();
+
+  readonly openNoteRequested$: Observable<string> = this.openNoteSubject.asObservable();
 
   /**
    * Affiche l'aperçu d'une note avec un délai de 300ms
@@ -246,8 +250,7 @@ export class NotePreviewService {
 
   private handleOpenNote(noteId: string): void {
     this.hidePreviewImmediately();
-    // L'événement de navigation sera géré par le composant parent
+    this.openNoteSubject.next(noteId);
-    // via un service de routing ou un event emitter
   }
 
   /**

src/styles.css

@@ -205,6 +205,11 @@
     --task-checkbox-checked-border: #22c55e;
     --task-checkbox-checked-bg: #22c55e;
     --task-checkbox-done-text: #94a3b8;
+    --btn-border-color: color-mix(in srgb, var(--border) 65%, transparent);
+    --btn-border-strong: var(--border);
+    --btn-hover-background: color-mix(in srgb, var(--bg-muted) 42%, transparent);
+    --btn-focus-ring: color-mix(in srgb, var(--border) 45%, transparent);
+    --btn-muted-text: var(--text-muted);
   }
 
   .dark {
@@ -214,6 +219,11 @@
     --task-checkbox-checked-border: #22c55e;
     --task-checkbox-checked-bg: #15803d;
     --task-checkbox-done-text: #64748b;
+    --btn-border-color: color-mix(in srgb, var(--border) 70%, transparent);
+    --btn-border-strong: color-mix(in srgb, var(--border) 88%, transparent);
+    --btn-hover-background: color-mix(in srgb, var(--bg-muted) 36%, transparent);
+    --btn-focus-ring: color-mix(in srgb, var(--border) 55%, transparent);
+    --btn-muted-text: var(--text-muted);
   }
 
   @media (min-width: 1024px) {
@@ -284,4 +294,101 @@
     /* @apply hidden; */
     display: none;
   }
+
+  /* Standardized Button Styles - Based on "Collapse all" design */
+  .btn-standard,
+  .btn-standard-sm,
+  .btn-standard-xs,
+  .btn-standard-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border: 1px solid var(--btn-border-color);
+    background-color: transparent;
+    color: var(--text-main);
+    font-weight: 500;
+    line-height: 1.2;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+  }
+
+  .btn-standard,
+  .btn-standard-primary,
+  .btn-standard-danger {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.75rem;
+  }
+
+  .btn-standard-sm {
+    padding: 0.5rem 1rem;
+    border-radius: 0.75rem;
+    font-size: 0.85rem;
+  }
+
+  .btn-standard-xs {
+    padding: 0.375rem 0.875rem;
+    border-radius: 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  .btn-standard-icon {
+    padding: 0.5rem;
+    border-radius: 0.625rem;
+    color: var(--btn-muted-text);
+    gap: 0.25rem;
+    min-width: auto;
+  }
+
+  .btn-standard:hover,
+  .btn-standard-sm:hover,
+  .btn-standard-xs:hover,
+  .btn-standard-icon:hover {
+    background-color: var(--btn-hover-background);
+    border-color: var(--btn-border-strong);
+    color: var(--text-main);
+  }
+
+  .btn-standard:focus-visible,
+  .btn-standard-sm:focus-visible,
+  .btn-standard-xs:focus-visible,
+  .btn-standard-icon:focus-visible {
+    box-shadow: 0 0 0 2px var(--btn-focus-ring);
+  }
+
+  .btn-standard-primary {
+    border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent);
+    background-color: color-mix(in srgb, var(--brand) 15%, transparent);
+    color: color-mix(in srgb, var(--brand) 90%, #ffffff);
+  }
+
+  .btn-standard-primary:hover {
+    background-color: color-mix(in srgb, var(--brand) 25%, transparent);
+    border-color: var(--brand);
+  }
+
+  .btn-standard-primary:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent);
+  }
+
+  .btn-standard-danger {
+    border: 1px solid color-mix(in srgb, var(--danger) 60%, transparent);
+    background-color: color-mix(in srgb, var(--danger) 12%, transparent);
+    color: color-mix(in srgb, var(--danger) 92%, #ffffff);
+  }
+
+  .btn-standard-danger:hover {
+    background-color: color-mix(in srgb, var(--danger) 22%, transparent);
+    border-color: var(--danger);
+  }
+
+  .btn-standard-danger:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 38%, transparent);
+  }
+
+  .btn-standard-icon:hover {
+    color: var(--text-main);
+  }
 }

src/styles/components.css

@@ -122,14 +122,20 @@
 
   .chip {
     @apply inline-flex items-center gap-2 rounded-full border border-app px-3 py-1 text-sm font-medium;
-    min-height: 3rem;
+    min-height: 2.25rem;
     background-color: color-mix(in srgb, var(--bg-muted) 88%, transparent);
     color: var(--text-main);
   }
 
+  .chip:hover {
+    border-color: var(--accent);
+    background-color: color-mix(in srgb, var(--accent) 28%, transparent);
+    color: var(--text-main);
+  }
+
   .chip-selected {
     border-color: var(--accent);
-    background-color: color-mix(in srgb, var(--accent) 25%, transparent);
+    background-color: color-mix(in srgb, var(--accent) 32%, transparent);
     color: var(--text-main);
   }
 

vault/.obsidian/graph.json

@@ -1,18 +1,26 @@
 {
-  "collapse-filter": false,
+  "collapse-filter": true,
   "search": "",
   "showTags": false,
   "showAttachments": false,
   "hideUnresolved": false,
   "showOrphans": false,
   "collapse-color-groups": true,
-  "colorGroups": [],
+  "colorGroups": [
-  "collapse-display": true,
+    {
+      "query": "tag:test",
+      "color": {
+        "a": 1,
+        "rgb": 11657324
+      }
+    }
+  ],
+  "collapse-display": false,
   "showArrow": false,
   "textFadeMultiplier": 0,
   "nodeSizeMultiplier": 1,
   "lineSizeMultiplier": 1,
-  "collapse-forces": true,
+  "collapse-forces": false,
   "centerStrength": 0.5,
   "repelStrength": 10,
   "linkStrength": 1,

vault/.obsidian/graph.json.bak

@@ -1,18 +1,26 @@
 {
-  "collapse-filter": false,
+  "collapse-filter": true,
   "search": "",
   "showTags": false,
   "showAttachments": false,
   "hideUnresolved": false,
-  "showOrphans": true,
+  "showOrphans": false,
   "collapse-color-groups": true,
-  "colorGroups": [],
+  "colorGroups": [
-  "collapse-display": true,
+    {
+      "query": "tag:test",
+      "color": {
+        "a": 1,
+        "rgb": 11657324
+      }
+    }
+  ],
+  "collapse-display": false,
   "showArrow": false,
   "textFadeMultiplier": 0,
   "nodeSizeMultiplier": 1,
   "lineSizeMultiplier": 1,
-  "collapse-forces": true,
+  "collapse-forces": false,
   "centerStrength": 0.5,
   "repelStrength": 10,
   "linkStrength": 1,

vault/.obsidian/workspace.json

@@ -11,10 +11,14 @@
             "id": "17cca9c5f5a7401d",
             "type": "leaf",
             "state": {
-              "type": "empty",
+              "type": "markdown",
-              "state": {},
+              "state": {
+                "file": "HOME.md",
+                "mode": "source",
+                "source": false
+              },
               "icon": "lucide-file",
-              "title": "New tab"
+              "title": "HOME"
             }
           }
         ]
@@ -70,8 +74,7 @@
               "title": "Bookmarks"
             }
           }
-        ],
+        ]
-        "currentTab": 1
       }
     ],
     "direction": "horizontal",
@@ -91,6 +94,7 @@
             "state": {
               "type": "backlink",
               "state": {
+                "file": "HOME.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -100,7 +104,7 @@
                 "unlinkedCollapsed": true
               },
               "icon": "links-coming-in",
-              "title": "Backlinks"
+              "title": "Backlinks for HOME"
             }
           },
           {
@@ -109,11 +113,12 @@
             "state": {
               "type": "outgoing-link",
               "state": {
+                "file": "HOME.md",
                 "linksCollapsed": false,
                 "unlinkedCollapsed": true
               },
               "icon": "links-going-out",
-              "title": "Outgoing links"
+              "title": "Outgoing links from HOME"
             }
           },
           {
@@ -137,12 +142,13 @@
             "state": {
               "type": "outline",
               "state": {
+                "file": "HOME.md",
                 "followCursor": false,
                 "showSearch": false,
                 "searchQuery": ""
               },
               "icon": "lucide-list",
-              "title": "Outline"
+              "title": "Outline of HOME"
             }
           },
           {
@@ -150,7 +156,9 @@
             "type": "leaf",
             "state": {
               "type": "footnotes",
-              "state": {},
+              "state": {
+                "file": "HOME.md"
+              },
               "icon": "lucide-file-signature",
               "title": "Footnotes"
             }
@@ -173,9 +181,13 @@
       "bases:Create new base": false
     }
   },
-  "active": "6be1f25c351d6c9f",
+  "active": "17cca9c5f5a7401d",
   "lastOpenFiles": [
     "test.md",
+    "folder1/test2.md",
+    "folder2/test2.md",
+    "folder2",
+    "folder1",
     "NonExistentNote.md",
     "tata/titi-coco.md",
     "folder/test2.md",

vault/HOME.md

@@ -6,10 +6,12 @@ tags:
   - home
   - accueil
   - configuration
+  - test
 attachements-path: attachements/
 ---
 Page principal - IT
 
 [[Voute_IT.png]]
 
-[[test.md]]
+[[test]]
+[[test2]]

vault/folder1/test2.md

@@ -0,0 +1,4 @@
+---
+tag: testTag
+---
+Ceci est la page 1

vault/folder2/test2.md

@@ -0,0 +1,3 @@
+
+ceci est la page 2
+

vault/test.md

@@ -17,7 +17,7 @@ image: https://images.unsplash.com/photo-1675789652575-0a5d2425b6c2?ixlib=rb-4.0
 ---
 #tag1 #tag2 #test #test2
 
-# Page de test Markdown
+# Test 1 Markdown
 
 ## Titres
 
@@ -33,6 +33,10 @@ image: https://images.unsplash.com/photo-1675789652575-0a5d2425b6c2?ixlib=rb-4.0
 
 ###### Niveau 6
 
+[[test2]]
+
+[[folder2/test2|test2]]
+
 ## Mise en emphase
 
 *Italique* et _italique_
@@ -55,9 +59,6 @@ Citation en ligne : « > Ceci est une citation »
 
 Le Markdown peut inclure des notes de bas de page[^1].
 
-[^1]: Ceci est un exemple de note de bas de page.
-
-
 ## Listes
 
 - Élément non ordonné 1
@@ -172,6 +173,7 @@ $$
 
 > [!note]
 > Ceci est une note informative.
+
 ---
 
 > [!tip]
@@ -243,4 +245,4 @@ Host: localhost:4000
 
 Fin de la page de test.
 
-
+[^1]: Ceci est un exemple de note de bas de page.