Voici une version *prête à coller dans Windsurf* qui intègre fidèlement l’interface Nimbus/FuseBase **et** garantit une compatibilité à 100 % Desktop + Mobile (téléphone + tablette). J’ai resserré, clarifié et relié chaque exigence aux patterns “Nimbus” (chips filtrants, pickers Clear/Done, outline latéral, Portals/Share, workspaces, etc.).

---

# 🎯 Prompt Windsurf — ObsiViewer « Nimbus UI » (Desktop + Mobile 100%)

## Rôle & Autorité

Agis comme **Staff Frontend Engineer Angular 20 + UX Designer**. Raisonnement détaillé **autorisé**. Tu peux refactorer, introduire de nouveaux composants, migrer le CSS vers **Tailwind**, et **ne brise aucune feature** existante.

**Garde-fous**

* **Feature flag** : un **toggle** dans la navbar bascule *Nimbus UI* ↔ *Legacy UI* **sans perte d’état** (URL, sélection, filtres).
* **100 % Responsive** : Desktop, Tablet, Mobile (petits smartphones inclus).
* **A11y** : WCAG 2.1 AA, clavier + écran tactile.

---

## ADN Nimbus à reproduire (invariants UX)

1. **3 panneaux stables** : Nav gauche (Quick Links / Folders / Tags), Index central (Recherche + chips **All folders ▾ / All tags ▾ / All pages ▾**), Page à droite (markdown + **outline ToC** dockable).
2. **Recherche d’abord** : top bar centrée, **icône filtre** → options avancées.
3. **Chips persistantes** = *stateful filters* (caret + **badges comptage** + Clear/Done).
4. **Pickers riches** (dossiers hiérarchiques multi-sélection, tags à coches, **barre de recherche locale**).
5. **Progressive disclosure** : menus condensés, pickers/overlays, **hover-reveal “+”** pour créer un sous-dossier.
6. **Workspaces** strictement séparés ; **Share** et **Add to portal** accessibles depuis la barre d’action de la page (si disponibles).
7. **Contenu riche** : markdown, callouts, code, **cartes Bookmark** (titre/desc/vignette).
8. **Outline contextuel** : bouton rond “hamburger” flottant dans la page → rail ToC H1–H6 avec **scroll-to**.

> Référence de conception : Folders/Tags bi-axial, chips visibles en permanence, *Clear partout*, hiérarchie typographique nette, dark/light cohérents.

---

## Objectif Final (résumé)

* **Desktop (≥ 1024px)** : Layout **3 colonnes** (sidebar resizable 240–440px / index virtualisé / page + ToC fixe à droite).
* **Tablet (768–1023px)** : **Bottom tabs** (Sidebar • List • Page • ToC) + **drawer** pour la sidebar.
* **Mobile (< 768px)** : **Bottom nav** (4 icônes), sidebar en **drawer 80vw**, ToC **inline/drawer**, gestes **swipe** pour naviguer entre onglets.

---

## Feature Flag & Toggle (obligatoire)

* **UiModeService** (signal boolean, persistance `localStorage: obsiviewer-ui-mode = nimbus|legacy`).
* **AppShellAdaptiveComponent** sélectionne *Nimbus* vs *Legacy*.
* **Bouton toggle** dans la navbar, accessible (`aria-label`) et **sans reset de l’état** (on conserve : filtres actifs, élément sélectionné, scrolls, URL).

---

## Responsive Design — Stratégie

* **Mobile-first** avec Tailwind (`xs, sm, md, lg, xl, 2xl`).
* **Variants par composant** : `*.desktop.component` (≥ lg) / `*.mobile.component` (< lg).
* **Breakpoints cdk/layout** pour l’injection conditionnelle.
* **Touch targets ≥ 44×44px**, densité **compacte mais respirante** (Nimbus-style).

---

## Composants à livrer (Nimbus-compat)

1. **Left Sidebar** (desktop fixe/resizable, mobile drawer)

   * Sections : Quick Links, **Folders** (arbo + *hover-reveal “+”*), **Tags**, Trash.
   * **Workspace switcher** + **theme switch** via menu avatar en bas.
2. **Center List**

   * **Search bar** (champ centré + icône filtre)
   * **Chips** : All folders ▾ / All tags ▾ / All pages ▾ (badges + caret)
   * **Pickers overlays** :

     * **Folders** multi-sélection hiérarchique, recherche locale, **Clear/Done**, badges *+N*.
     * **Tags** alphabétique, **checkmarks**, Clear/Done.
   * **Liste virtualisée** (CDK) : titre, date grisée, **snippet** (line-clamp), petites icônes (ex. bookmark).
   * État : “Found pages: N” + **Clear** visible si filtres actifs.
3. **Note View + ToC**

   * Page markdown (prose), **barre d’actions** à droite : **Ask AI**, **Add to portal**, **Share**, loupe “find in page”, attachements, **plein écran**.
   * **ToC Drawer** : fixe à droite (desktop) ; **inline/drawer** (mobile).
   * **Bouton flottant ToC** (rond) *dans* la page.
   * **Cards Bookmark** (preview URL).
4. **Mobile Shell**

   * **Bottom navigation** (Sidebar / List / Page / ToC).
   * **Gestures** : swipe gauche/droite pour changer d’onglet, pull-to-refresh (optionnel), long-press menu contextuel.
   * **Search compact** (menu, champ, bouton filtres → popover).

---

## Exigences Techniques Clés

* **URL state** : sélection dossier/tag/tri dans l’URL (deep link).
* **Persistences** : chips actives, split sizes, dernier onglet mobile, thème, workspace.
* **Virtual scroll** : item 70–80px, 60 fps sur 1000+ items.
* **Dark/Light** : palette stable, **contrastes sûrs** (Nimbus dark très contrasté).
* **Overlays** : pickers centrés, **Clear/Done** persistants en pied, focus trap + ESC.
* **Perf Mobile** : debounce recherche (300 ms mobile / 150 ms desktop), images lazy, évite CLS (skeletons, `aspect-[ratio]`).
* **A11y** : ARIA, focus visible, nav clavier complète (Tab/Shift+Tab, Arrow), *skip links*.

---

## Livrables (code & docs)

**Code**

1. `UiModeService`, bouton navbar, `AppShellAdaptiveComponent`.
2. Variants responsive : `left-sidebar`, `center-list`, `note-view`, `toc-drawer`, `search-bar`.
3. **BottomNav**, **MobileNavService**, **SwipeNavDirective**.
4. **Pickers** (Folders/Tags) avec recherche locale + Clear/Done.
5. **Resizable handle** (sidebar), **virtual scroll** (index).

**Styling**

* `tailwind.config.js` (breakpoints), tokens light/dark, classes utilitaires mobile-first.
* Prose markdown responsive, badges/chips Nimbus-like, states *hover/selected*.

**Docs**

* `README_UI.md` (diagrammes 3 breakpoints + captures).
* `MOBILE_GUIDE.md` (flow onglets, gestes, drawer).
* `RESPONSIVE_CHECKLIST.md` (tests par breakpoint + devices).
* `DEPLOYMENT.md` (feature flag rollout).

**Tests**

* E2E : toggle persistant, switch sans perte d’état, pickers Clear/Done, deep links.
* Visuel : snapshots Desktop/Tablet/Mobile.
* A11y : axe + audits clavier.
* Perf : 60 fps scroll, TTI < 2.5 s (mobile cold), Lighthouse Mobile ≥ 85 / A11y ≥ 95.

---

## Critères d’Acceptation (DoD)

**Desktop (≥ 1024px)**

* [x] 3 colonnes, sidebar **resizable**, ToC fixe à droite.
* [x] Chips visibles + pickers overlays Clear/Done, **badges comptage**.
* [x] 1000+ items fluide (virtual scroll 60 fps).
* [x] *Ask AI / Add to portal / Share* visibles si feature activée.

**Tablet (768–1023px)**

* [x] **Bottom tabs** + sidebar **drawer** (swipe).
* [x] ToC **inline** repliable.
* [x] Tous contenus **full-width** par onglet.

**Mobile (< 768px)**

* [x] **Bottom nav** (4 onglets), sidebar **drawer 80vw**.
* [x] Search compact + popover filtres, badges actifs scrollables en horizontal.
* [x] Markdown **full-screen**, ToC overlay/inline toggle.
* [x] Touch targets ≥ 44×44px.

**Feature Flag & A11y/Perf**

* [x] Toggle visible, persistant, **sans perte d’état**.
* [x] WCAG 2.1 AA, focus visible, ARIA.
* [x] Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y.

---

## Plan d’Implémentation (ordre conseillé)

1. **Feature Flag infra** (UiModeService + AppShellAdaptive + toggle navbar).
2. **Shell Responsive** (3 colonnes desktop, Tailwind tokens, resizable sidebar).
3. **Mobile Navigation** (BottomNav + MobileNavService + routing/états).
4. **Sidebar Drawer** (anim, backdrop, swipe dismiss, z-index).
5. **Pickers** (Folders/Tags) + chips/overlays + Clear/Done + recherche locale.
6. **ToC Drawer** (fixe desktop / inline mobile) + bouton flottant.
7. **Perf & A11y** (virtual scroll, debounce, lazy, focus trap).
8. **Tests & Docs** (E2E, visuel, a11y, guides).

---

## Squelette de code minimal (extraits)

### Toggle UI (navbar)

```html
<button (click)="ui.toggleUIMode()"
        [attr.aria-label]="'Toggle ' + (ui.isNimbusMode() ? 'legacy' : 'nimbus') + ' UI'"
        class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
  <span *ngIf="ui.isNimbusMode()">✨ Nimbus</span>
  <span *ngIf="!ui.isNimbusMode()">🔧 Legacy</span>
</button>
```

### Shell adaptatif

```ts
@Component({
  selector: 'app-shell-adaptive',
  template: `
    @if (ui.isNimbusMode()) { <app-shell-nimbus/> } @else { <app-shell-legacy/> }
  `,
  standalone: true,
  imports: [AppShellNimbusComponent, AppShellLegacyComponent]
})
export class AppShellAdaptiveComponent { constructor(public ui: UiModeService) {} }
```

### Chips + Pickers (pattern)

```html
<!-- Chips persistants -->
<div class="flex gap-2 flex-wrap">
  <app-chip [label]="foldersLabel" (click)="openFoldersPicker()"></app-chip>
  <app-chip [label]="tagsLabel" (click)="openTagsPicker()"></app-chip>
  <app-chip [label]="pagesLabel" (click)="openPagesPicker()"></app-chip>
</div>

<!-- Overlay picker Folders (multi + Clear/Done + search locale) -->
<app-folders-picker *ngIf="showFolders"
  [selected]="selectedFolders"
  (search)="onLocalSearch($event)"
  (clear)="clearFolders()" (done)="applyFolders($event)">
</app-folders-picker>
```

### Bottom Nav (mobile)

```html
<nav class="fixed bottom-0 inset-x-0 h-16 md:hidden
            bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800
            flex justify-around z-30">
  <button *ngFor="let t of tabs" (click)="setTab(t.id)"
          class="flex-1 flex flex-col items-center justify-center text-xs gap-1">
    <span class="text-lg">{{t.icon}}</span><span>{{t.label}}</span>
  </button>
</nav>
```

---

## Arborescence proposée

```
src/app/
├─ layout/
│  ├─ app-shell-adaptive/
│  ├─ app-shell-nimbus/ (desktop/mobile variants)
│  └─ app-navbar/
├─ features/
│  ├─ sidebar/ (desktop + mobile drawer)
│  ├─ search-bar/ (desktop + mobile)
│  ├─ center-list/ (+ virtual scroll + chips + pickers)
│  ├─ note-view/ (+ toolbar AskAI/Share/Portal si activées)
│  └─ toc-drawer/ (desktop fixe / mobile inline)
├─ shared/
│  ├─ services/ (ui-mode, mobile-nav, breakpoint)
│  ├─ directives/ (swipe-nav)
│  └─ components/ (resizable-handle, chip, picker, badge)
└─ styles/ (tokens, responsive, mobile)
```

---

## Raccourcis & Gestes

* **Desktop** : `Ctrl/Cmd+K` palette, `Ctrl/Cmd+F` recherche, `Alt+←/→` historique, `[` `]` ToC.
* **Mobile** : **swipe** onglet précédent/suivant, **long-press** menu item, **tap** ouvre note, **pull-to-refresh** (optionnel).

---

## Cibles Perf & Qualité

* **TTI** < 2.5 s sur mobile cold.
* **60 fps** scroll 1000+ items.
* **CLS** < 0.1 (skeletons, ratios).
* **Lighthouse Mobile** ≥ 85 (Perf) / ≥ 95 (A11y).

---

## Consignes supplémentaires

* **Zéro régression** : graph view, wikilinks, bookmarks, search operators fonctionnels.
* **Internationalisation** prête (labels chips, Clear/Done).
* **State durable** : localStorage ou service (fallback SSR).
* **Thèmes** : switch Light/Dark depuis avatar footer (comme Nimbus).

---

**Exécute ce plan** : implémente le *Nimbus UI* responsive avec toggle, livre le MR complet (code + tests + docs), conforme aux critères ci-dessus, Desktop/Tablet/Mobile **100 % OK**.