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_qwen3-max.md

7.0 KiB
Raw Blame History

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)

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