feat: add Nimbus UI mode with adaptive scrollbars and layout improvements

src/app.component.simple.html

@@ -1,4 +1,32 @@
 <!-- ObsiViewer - Application optimisée pour mobile et desktop -->
+@if (uiMode.isNimbusMode()) {
+  <app-shell-nimbus-layout
+    [vaultName]="vaultName()"
+    [effectiveFileTree]="effectiveFileTree()"
+    [selectedNoteId]="selectedNoteId()"
+    [selectedNote]="selectedNote()"
+    [renderedNoteContent]="renderedNoteContent()"
+    [tableOfContents]="tableOfContents()"
+    [isSidebarOpen]="isSidebarOpen()"
+    [isOutlineOpen]="isOutlineOpen()"
+    [leftSidebarWidth]="leftSidebarWidth()"
+    [rightSidebarWidth]="rightSidebarWidth()"
+    [centerPanelWidth]="centerPanelWidth()"
+    [searchTerm]="sidebarSearchTerm()"
+    [tags]="allTags()"
+    (noteSelected)="selectNote($event)"
+    (tagClicked)="handleTagClick($event)"
+    (wikiLinkActivated)="handleWikiLink($event)"
+    (leftResizeStart)="startLeftResize($event)"
+    (rightResizeStart)="startRightResize($event)"
+    (centerResizeStart)="startCenterResize($event)"
+    (toggleSidebarRequest)="toggleSidebar()"
+    (toggleOutlineRequest)="toggleOutline()"
+    (navigateHeading)="scrollToHeading($event)"
+    (searchTermChange)="onSidebarSearchTermChange($event)"
+    (searchOptionsChange)="onHeaderSearchOptionsChange($event)"
+  ></app-shell-nimbus-layout>
+} @else {
 <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
@@ -364,6 +392,15 @@
                 <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
+              type="button"
+              class="btn btn-ghost rounded px-2 py-1 text-xs font-semibold"
+              (click)="toggleUIMode()"
+              [attr.aria-label]="'Basculer vers ' + (uiMode.isNimbusMode() ? 'ancienne' : 'nouvelle') + ' interface'"
+              title="Basculer d'interface"
+            >
+              @if (uiMode.isNimbusMode()) { 🔧 Legacy } @else { ✨ Nimbus }
+            </button>
             <button
               (click)="toggleOutline()"
               class="btn btn-icon btn-ghost"
@@ -435,6 +472,15 @@
                 <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
+              type="button"
+              class="btn btn-ghost rounded px-2 py-1 text-xs font-semibold"
+              (click)="toggleUIMode()"
+              [attr.aria-label]="'Basculer vers ' + (uiMode.isNimbusMode() ? 'ancienne' : 'nouvelle') + ' interface'"
+              title="Basculer d'interface"
+            >
+              @if (uiMode.isNimbusMode()) { 🔧 Legacy } @else { ✨ Nimbus }
+            </button>
             <button
               (click)="toggleOutline()"
               class="btn btn-icon btn-ghost"
@@ -612,4 +658,5 @@
     </aside>
     }
   </main>
+}