Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ObsiViewer/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_gemini.md

11 KiB
Raw Blame History

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.

<button (click)="uiModeService.toggleUIMode()"
        [attr.aria-label]="'Basculez vers l\'interface ' + ((uiModeService.isNimbusMode$ | async) ? 'Legacy' : 'Nimbus')"
        class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 text-sm">
  <span *ngIf="(uiModeService.isNimbusMode$ | async)">✨ Mode Nimbus</span>
  <span *ngIf="!(uiModeService.isNimbusMode$ | async)">🔧 Mode Legacy</span>
</button>

2) Service de gestion du mode (ui-mode.service.ts)

Utiliser un Signal pour une réactivité instantanée et localStorage pour la persistance.

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UiModeService {
  isNimbusMode = signal<boolean>(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.

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()) {
      <app-shell-nimbus-layout></app-shell-nimbus-layout>
    } @else {
      <app-shell-legacy-layout></app-shell-legacy-layout>
    }
  `,
  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 (<app-left-sidebar.desktop.component.ts)

  • Layout fixe et resizable.
  • Structure : Liens Rapides, puis Dossiers, Tags.
  • Pattern Hover-Reveal : Une icône + apparaît à droite d'un nom de dossier au survol pour créer un sous-dossier, gardant l'interface épurée.
  • Styling : Autoriser les emojis dans les noms de dossiers/tags. Le dossier actif doit avoir un surlignage clair (ex: fond bleu pâle et bordure gauche bleue).

Mobile (<app-left-sidebar.mobile.component.ts)

  • Le contenu de la sidebar est placé dans un drawer qui s'ouvre depuis la gauche (via un bouton "hamburger" ou un swipe depuis le bord de l'écran).
  • Le drawer doit avoir un fond semi-opaque (backdrop) pour fermer en cliquant à l'extérieur.

3. Panneau de Droite : Lecteur & Sommaire (La Page)

Desktop (<app-note-view.desktop.component.ts)

  • Le titre de la page est large et très lisible.
  • Bouton de Sommaire (ToC) Flottant : Un bouton circulaire avec une icône de type "liste" est fixé verticalement à droite du contenu.
    • Au clic, il déplie un panneau latéral listant les titres H1-H6 du document.
    • Cliquer sur un titre dans le sommaire scrolle la vue jusqu'à l'ancre correspondante.
  • Barre d'Actions : Placer les actions contextuelles (Partager, Exporter, etc.) dans une barre d'outils en haut à droite du panneau.

Mobile (<app-note-view.mobile.component.ts)

  • Le lecteur prend toute la largeur de l'écran pour une immersion maximale.
  • Le bouton de sommaire flottant est également présent, mais en bas à droite (comme un FAB - Floating Action Button).
  • Au clic, le sommaire s'ouvre en overlay pleine page ou dans un panneau qui glisse depuis le bas.

4. Navigation Mobile : Bottom Bar & Gestures

  • Bottom Navigation Bar (<app-bottom-nav.component.ts) :
    • Fixée en bas, toujours visible sur mobile/tablette.
    • Contient 3 ou 4 icônes pour basculer entre les vues principales : Navigation (Dossiers/Tags), Liste, et Page. L'icône active est visuellement distincte.
  • Directive de Swipe (swipe-nav.directive.ts) :
    • Créer une directive Angular pour détecter les swipes gauche/droite.
    • L'appliquer au conteneur principal pour permettre de naviguer entre les vues Liste et Page de manière fluide.

⚡ Performance & Optimisations Mobiles

  • Virtual Scrolling : Indispensable pour la colonne centrale pour afficher des milliers de notes sans impacter les performances. Utiliser le CDK de Angular.
  • Lazy Loading : Charger les composants de layout (Nimbus/Legacy) et les vues mobiles/desktop en lazy loading.
  • Debounce : Appliquer un debounce de 300ms sur l'input de recherche pour éviter des requêtes excessives.
  • Touch Targets : Sur mobile, tous les éléments cliquables (boutons, items de liste) doivent avoir une taille minimale de 44x44px pour l'accessibilité.

✅ Critères d'Acceptation

Général

  • Le toggle UI fonctionne, persiste l'état, et ne cause aucune perte de contexte.
  • L'application est fluide et réactive sur tous les breakpoints, de 320px à 1920px+.

Desktop (≥1024px)

  • Le layout à 3 colonnes est fonctionnel, avec des séparateurs resizables.
  • Les pickers de filtres (dossiers/tags) fonctionnent avec leur recherche interne.
  • Le bouton + pour créer des sous-dossiers apparaît bien au survol.
  • Le panneau de sommaire (ToC) se déplie depuis le bouton flottant et la navigation par ancre fonctionne.

Tablette & Mobile (<1024px)

  • La navigation par onglets en bas de l'écran est fonctionnelle et intuitive.
  • La sidebar de navigation s'ouvre et se ferme correctement en tant que drawer.
  • Les gestures de swipe pour naviguer entre les vues sont fluides.
  • Le sommaire s'ouvre dans un overlay ou un panneau adapté au format mobile.
  • L'UI est optimisée pour le tactile (grandes zones de clic, pas de hover-dependant features).

Accessibilité & Performance

  • Score Lighthouse : Performance ≥ 90, Accessibilité ≥ 95.
  • Navigation au clavier complète sur Desktop.
  • ARIA-labels corrects pour tous les contrôles interactifs.