Voici le **prompt Windsurf révisé**, enrichi et aligné avec la **lecture anatomique UX de Nimbus Notes / FuseBase**, tout en maintenant la **compatibilité 100 % Desktop + Mobile (téléphone + tablette)** et en intégrant fidèlement les **8 principes Nimbus** :

---

# 🎯 Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)

## ObsiViewer → UI/UX “Nimbus-like” (simple, dense, rapide)

**Rôle & mode** : Agis comme **Staff Frontend Engineer Angular 20 + UX Designer**. Tu as les pleins pouvoirs pour refactoriser l’UI, ajouter des composants, migrer vers Tailwind, et réorganiser l’architecture. **Toutes les fonctionnalités existantes doivent être conservées** (wikilinks, graph, bookmarks, etc.).

**Contrainte majeure** : L’interface doit être **100 % responsive** (Desktop ≥1024px, Tablet 768–1023px, Mobile <768px). Un **bouton toggle UI** dans la navbar permet de basculer entre l’ancienne interface et la nouvelle **sans perte d’état**.

---

## 🧠 Philosophie Nimbus à reproduire (8 piliers)

1. **Workspace-first** : chaque espace est un univers isolé. Le sélecteur d’espace doit être visible dans le footer du rail gauche.
2. **Bi-axe organisationnel** : navigation par **dossiers (hiérarchie)** + **tags (multi-catégorisation)**.
3. **Recherche d’abord** : champ central + **chips de filtres persistants** (“All folders ▾”, “All tags ▾”, “All pages ▾”) avec badges de comptage.
4. **Progressive disclosure** : menus hover-reveal, overlays contextuels, panneau d’outline flottant activé *dans* la page.
5. **Un contenu, plusieurs façades** : chaque note peut être **partagée** ou **publiée dans un Portal** via des boutons toujours visibles (`Share`, `Add to portal`).
6. **CTA unique** : un seul bouton **+ Page** (turquoise) en haut, centré ou à droite selon le breakpoint.
7. **Lisibilité & densité** : typographie hiérarchisée, espacements respirants, contrastes élevés en dark mode.
8. **Feedback immédiat** : états visuels clairs (sélection, filtres actifs, compteurs), boutons `Clear` omniprésents.

---

## 🎯 Objectif final (résumé)

### Desktop (≥1024px)
**Layout 3 colonnes** :
1. **Sidebar gauche** : Quick Links, arborescence dossiers/tags, création hover-reveal (+), sélecteur workspace dans le footer.
2. **Colonne centrale** : barre de recherche + **trio de chips filtrables** → liste virtualisée de pages (titre, date, snippet, icônes bookmark).
3. **Panneau droit** : vue markdown + **barre d’actions contextuelles** (`Ask AI`, `Add to portal`, `Share`, plein écran) + **outline flottant** (hamburger rond à droite du contenu).

### Mobile/Tablet (<1024px)
**Navigation par onglets/drawer** :
- **Tab 1 : Sidebar** → drawer ou full-width (dossiers, tags, recherche, sélecteur workspace).
- **Tab 2 : Liste** → full-width, chips de filtres scrollables, items optimisés (titre + date + tags + excerpt).
- **Tab 3 : Page** → vue markdown plein écran, **ToC inline toggle** (bouton flottant), barre d’actions compacte.
- **Gestures** : swipe horizontal entre onglets, long-press = menu contextuel, pull-to-refresh (optionnel).

---

## 🔧 Architecture Feature Flag & Toggle

Identique au prompt initial :
- `UiModeService` avec localStorage
- `AppShellAdaptiveComponent`
- Bouton toggle dans la navbar

✅ **Garantir la persistance des filtres, sélection active, workspace, et thème lors du toggle.**

---

## 📱 Composants Nimbus Responsifs (ajouts clés)

### 1. **Search & Filter Bar**
- **Desktop** : champ large centré + icône filtre + **+ Page** (turquoise)
- **Mobile** : [☰] + champ + [⚙️] → chips de filtres scrollables horizontalement sous la barre

### 2. **Filter Chips**
- Format : `All folders ▾ (+2)`, `All tags ▾ (+5)`
- Clic → **overlay picker** :
  - **Folders** : arbo hiérarchique, recherche interne, multi-sélection, Clear/Done
  - **Tags** : liste à coches, recherche locale, Clear/Done

### 3. **Sidebar**
- **Desktop** : rail fixe, hover-reveal “+” pour sous-dossier, icônes colorées, emojis supportés
- **Mobile** : drawer animé (80vw), accessible via [☰] ou swipe

### 4. **Result List Item**
- Compact mais lisible
- Icône bookmark si lien externe (carte enrichie)
- État sélectionné : fond + bordure turquoise

### 5. **Note View Toolbar**
- **Desktop** : `Ask AI` | `Add to portal` | `Share` | 🔍 | 📎 | 🖥️ | ⋮
- **Mobile** : icônes uniquement, en haut ou en bottom sheet

### 6. **Outline / ToC**
- **Desktop** : rail fixe à droite (≥1024px)
- **Mobile** : bouton flottant 📋 → overlay plein écran ou panneau repliable en haut

### 7. **Workspace Selector**
- Dans le **footer du rail gauche** (Desktop) ou dans le **menu avatar** (Mobile)
- Options : changement d’espace, thème (Light/Dark), settings, logout

---

## 🎨 Responsive Strategy

- **Mobile-first** : base mobile → enrichissements `md:`, `lg:`
- **Breakpoints Tailwind** :
  - `xs: 320px`, `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`
- **Touch targets** ≥ 44×44px
- **Dark/Light mode** : palettes calibrées, contrastes WCAG AA

---

## 🗂️ Arborescence mise à jour (ajouts clés)

```diff
src/app/features/
├── sidebar/
│   └── app-workspace-selector.component.ts   ← [NEW]
├── search-bar/
│   ├── app-filter-chip.component.ts          ← [NEW]
│   └── app-picker-overlay.component.ts       ← [NEW]
├── note-view/
│   └── app-note-actions-bar.component.ts     ← [NEW: Share, Portal, AI]
└── bookmarks/
    └── app-bookmark-card.component.ts        ← [NEW: rich preview]
```

---

## ✅ Critères d’acceptation mis à jour

### Fonctionnels
- [ ] Filtres **persistants** et **éditables** via chips
- [ ] Pickers **avec recherche locale** et **Clear/Done**
- [ ] Boutons **Share** et **Add to portal** toujours visibles dans l’éditeur
- [ ] **Workspace switcher** dans le rail gauche (desktop) ou menu (mobile)
- [ ] **Bookmark cards** enrichies (titre + description + vignette)

### Techniques
- [ ] Aucune régression sur les features legacy (graph, wikilinks…)
- [ ] État UI (filtres, sélection, workspace) persisté **indépendamment du mode**
- [ ] Virtual scroll fluide (≥60fps) sur 1000+ items
- [ ] Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y

---

## 📖 Documentation à produire

- **README_UI.md** : schémas 3 breakpoints + explication des 8 principes Nimbus
- **MOBILE_GUIDE.md** : flow de navigation tactile, gestures, drawer patterns
- **NIMBUS_SPEC.md** : tokens couleur, tailles de typo, comportements exacts des pickers/chips

---

## 💡 Notes finales

- **Ne pas surcharger l’écran** : cacher les actions rares (kebab menu, hover-reveal)
- **Feedback utilisateur** : badges de comptage, messages “Found pages: N”, Clear partout
- **Continuum édition → diffusion** : `Share` et `Add to portal` doivent être **immédiatement accessibles**

---

**Exécute ce plan** : implémente les composants, connecte les états (filtres, workspace, sélection), assure la compatibilité totale Desktop/Mobile, et livre un MR conforme aux 8 principes Nimbus + checklist qualité.