Absolument. Voici une version refondue et enrichie du prompt. Elle intègre la philosophie et les détails UX de l'analyse de Nimbus Notes directement dans les spécifications techniques pour le développement de ObsiViewer, tout en renforçant l'exigence d'une compatibilité parfaite entre Desktop et Mobile.
Ce prompt est conçu pour être donné directement à une équipe de développement.
-----
# 🎯 Prompt Windsurf — Refonte UI/UX "Nimbus-like" pour ObsiViewer (Desktop + Mobile)
## 👤 Rôle & Mode
Agis comme **Staff Frontend Engineer Angular 20 + UX Designer**. Tu as les pleins pouvoirs pour refondre l'UI, ajouter les composants nécessaires et migrer le CSS vers Tailwind. Ton raisonnement doit être détaillé et toutes les features existantes doivent rester fonctionnelles.
## 📜 Philosophie & Principes Directeurs (Inspiré de Nimbus/FuseBase)
L'objectif n'est pas juste de changer l'apparence, mais d'adopter une philosophie qui rend l'application plus intuitive et puissante.
1. **Trois Panneaux Stables (Desktop)** : La structure principale est claire : Navigation à gauche, Liste des résultats au centre, Contenu à droite. Sur mobile, ces panneaux deviennent des vues ou des drawers distincts.
2. **Filtres Persistants & Visibles** : La recherche est affinée via des "chips" (ex: `All folders ▾`) toujours visibles. L'état du filtre est un élément central de l'UI, pas un menu caché.
3. **Pickers Riches** : Cliquer sur un chip de filtre ouvre un overlay (picker) avec sa propre recherche interne, des sélections multiples et des actions claires (`Clear`/`Done`).
4. **Découverte Progressive (Progressive Disclosure)** : Les options complexes sont masquées jusqu'à ce qu'elles soient nécessaires (ex: le bouton `+` pour ajouter un sous-dossier au survol, le sommaire/ToC qui s'ouvre depuis un bouton flottant).
5. **Création Centralisée** : L'action de création principale (`+ Page`) est unique et toujours accessible au même endroit.
6. **Organisation Bi-Axiale** : L'utilisateur navigue via une **hiérarchie de dossiers** (structure) et des **tags transversaux** (contexte).
7. **Le Contenu est Roi** : La lisibilité est maximisée (hiérarchie de titres, marges, etc.) et le contenu peut être enrichi (cartes de bookmarks, etc.).
8. **Réinitialisation Facile** : Des options "Clear" sont omniprésentes pour annuler les filtres et recherches, encourageant l'exploration sans crainte de se perdre.
## 🚀 Contrainte Majeure
L'interface doit être **100% responsive et optimisée pour chaque format (Desktop, Tablette, Mobile)**. Un **bouton de bascule** dans la barre de navigation permettra de passer de l'ancienne interface à la nouvelle ("Nimbus mode") sans perte d'état, avec une persistance du choix dans `localStorage`.
-----
## 🎯 Objectif Final
### Desktop (≥1024px)
Refondre ObsiViewer en une interface à **3 colonnes resizables** :
1. **Sidebar Gauche** : Accès rapides, arborescence de dossiers, liste de tags.
2. **Colonne Centrale** : Barre de recherche principale, trio de **chips de filtres** (`Dossiers`, `Tags`, `Pages`), et la liste des résultats virtualisée.
3. **Panneau Droit** : Lecteur Markdown avec une barre d'actions et un **panneau de sommaire (ToC)** accessible via un bouton flottant à droite.
### Tablette & Mobile (\<1024px)
Transformer l'interface en une navigation par **onglets en bas de l'écran (Bottom Navigation)** ou via un **drawer latéral**.
- **Vue 1 (Navigation)** : Accès aux dossiers et tags (drawer ou vue dédiée).
- **Vue 2 (Liste)** : Barre de recherche et résultats en pleine largeur.
- **Vue 3 (Page)** : Lecteur Markdown en pleine largeur.
- **Gestures** : Le swipe horizontal permet de naviguer entre les vues ; le pull-to-refresh actualise les listes.
-----
## 📋 Architecture du Feature Flag
### 1\) Toggle UI dans la NavBar (`app-navbar.component.html`)
Ajouter un bouton clair pour basculer entre les modes.
```html
```
### 2\) Service de gestion du mode (`ui-mode.service.ts`)
Utiliser un Signal pour une réactivité instantanée et `localStorage` pour la persistance.
```typescript
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class UiModeService {
isNimbusMode = signal(this.loadUIMode());
toggleUIMode(): void {
const newMode = !this.isNimbusMode();
this.isNimbusMode.set(newMode);
localStorage.setItem('obsiviewer-ui-mode', newMode ? 'nimbus' : 'legacy');
}
private loadUIMode(): boolean {
if (typeof localStorage === 'undefined') return true; // Nimbus par défaut
return localStorage.getItem('obsiviewer-ui-mode') !== 'legacy';
}
}
```
### 3\) Layout adaptatif (`app-shell-adaptive.component.ts`)
Le composant racine qui charge dynamiquement le bon layout.
```typescript
import { Component, inject } from '@angular/core';
import { UiModeService } from '@app/shared/services/ui-mode.service';
import { AppShellNimbusLayoutComponent } from '../app-shell-nimbus/app-shell-nimbus.component';
import { AppShellLegacyLayoutComponent } from '../app-shell-legacy/app-shell-legacy.component';
import { AsyncPipe } from '@angular/common';
@Component({
selector: 'app-shell-adaptive',
template: `
@if (uiModeService.isNimbusMode()) {
} @else {
}
`,
standalone: true,
imports: [AppShellNimbusLayoutComponent, AppShellLegacyLayoutComponent, AsyncPipe],
})
export class AppShellAdaptiveComponent {
uiModeService = inject(UiModeService);
}
```
-----
## 🎨 Spécifications Détaillées des Composants (UX & UI)
### 1\. Colonne Centrale : Recherche & Filtres (Le Cerveau)
#### **Desktop & Mobile**
- **Barre de Recherche Principale** : Large, centrée sur Desktop. Sur mobile, elle est proéminente en haut de la vue "Liste".
- **Trio de Chips de Filtres** : Juste sous la recherche, implémenter trois boutons "stateful" :
- `Tous les dossiers ▾` | `Tous les tags ▾` | `Toutes les pages ▾`
- Chaque chip affiche un **badge de comptage** (ex: `+2`) si des sélections sont actives.
- Cliquer ouvre un **Picker flottant (overlay)** :
- **UI du Picker** : Barre de recherche interne, liste scrollable, et boutons `Réinitialiser` / `Appliquer` en bas.
- **Picker Dossiers** : Affiche l'arborescence avec des chevrons `›` pour déplier les sous-dossiers. Utilise des checkboxes pour la multi-sélection.
- **Picker Tags** : Liste alphabétique de tags avec des checkboxes.
- **Feedback de Recherche** : Afficher un message `N pages trouvées` avec un lien `Effacer les filtres` quand des filtres sont actifs.
### 2\. Colonne de Gauche : Navigation (La Carte)
#### **Desktop (`