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_chatgpt.md

11 KiB
Raw Blame History

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)

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

Tablet (768–1023px)

  • Bottom tabs + sidebar drawer (swipe).
  • ToC inline repliable.
  • Tous contenus full-width par onglet.

Mobile (< 768px)

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

Feature Flag & A11y/Perf

  • Toggle visible, persistant, sans perte d’état.
  • WCAG 2.1 AA, focus visible, ARIA.
  • 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)

<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

@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)

<!-- 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)

<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.