Docs

La partie Docs d’un projet HNetwork permet de rédiger une documentation rich-text façon Notion, organisée en arborescence de pages, et de lier chaque page à un ou plusieurs services du canvas pour conserver le contexte technique.

📷 [IMAGE — vue d’ensemble docs] (à venir)

1. Ouvrir la page Docs d’un projet

Depuis le Canvas, clique sur 📄 Docs dans la toolbar — tu es redirigé vers la page Docs du même projet.

Tu peux aussi accéder à une vue globale de toutes les docs depuis le dashboard, via le bouton Docs (voir Dashboard → vue Docs globale).

2. Organisation de l’écran

┌──────────────────────────────────────────────┐
│ Breadcrumb · Titre page · Save indicator     │
├────────────┬─────────────────────────────────┤
│ Sidebar    │  Éditeur de page                │
│  Pages /   │  ────────────────────           │
│  Services  │  Toolbar Tiptap (fixé)          │
│            │                                 │
│            │  NodeSummary (si lié)           │
│            │                                 │
│            │  Contenu rich-text (Tiptap)     │
└────────────┴─────────────────────────────────┘

3. Breadcrumb en haut

Navigation

• 🏠 Retour Dashboard
• Nom du projet (lien retour au canvas)
• « Docs »
• Fil d’Ariane des pages parentes si la page courante est imbriquée

Page active

• Titre éditable en ligne (champ texte).
• Bouton « Lier à un service » — ouvre la modale de liaison.
• Pastilles bleues : nodes liés à cette page (avec icône détacher au survol).

Indicateur de sauvegarde

À droite :

• 🟡 « Sauvegarde… » — write en cours.
• ⚪ « Enregistré » — état stable.
• 🔴 « Erreur » — la dernière sauvegarde a échoué.

📷 [IMAGE — breadcrumb docs] (à venir)

4. Sidebar des pages

La sidebar gauche propose deux onglets en tête :

Onglet	Contenu
Pages	Arborescence hiérarchique de toutes les pages du projet.
Services	Liste des services du canvas qui ont au moins une page liée.

Vue Pages

• Hiérarchie imbriquée avec indentation par niveau.
• Chaque ligne :
  • Chevron ▶ / ▼ pour plier / déplier.
  • 📄 Icône de page.
  • Titre éditable en place.
  • Pastille avec le nombre de services liés (si > 0).
  • Au survol : ➕ (ajouter une sous-page) et 🗑️ (supprimer).
• État vide : « Aucune page. Créez la première. »

Vue Services

• Liste des nodes du canvas regroupée par catégorie (couleur).
• Chaque ligne : nom du node + nombre de pages liées.
• Clique → ouvre la page liée correspondante.
• Au survol : possibilité de créer une nouvelle page pour ce service.

📷 [IMAGE — sidebar pages vs services] (à venir)

5. Créer une page

Trois façons :

1. Page racine — clique sur le « + » en haut de la sidebar.
2. Sous-page — survole une page parent → clique sur « + ».
3. Pour un service — depuis le panneau Node du canvas (« Créer une page pour ce service »), ou depuis la sidebar Services.

Le titre par défaut est :

• « Nouvelle page » pour une page vide.
• « Doc — {Nom du node} » pour une page créée depuis un service.

La page nouvellement créée est automatiquement sélectionnée et prête à l’édition.

6. Renommer une page

• Clique sur le titre dans le breadcrumb ou dans la sidebar.
• Modifie le texte.
• Le nouveau titre est sauvegardé automatiquement (le save indicator passe par « Sauvegarde… » puis « Enregistré »).

7. Supprimer une page

• Survole la page dans la sidebar → clique sur 🗑️.
• Une modale de confirmation rappelle le titre.
• ⚠️ Si la page a des sous-pages, elles sont supprimées en cascade (le message d’alerte le précise).
• Si la page courante est celle que tu supprimes, tu es redirigé sur la vue « pas de page sélectionnée ».

8. Réorganiser

L’arborescence est définie par le parent de chaque page. Pour l’instant, il n’y a pas de drag-and-drop dans la sidebar : la réorganisation passe par la modification du parent d’une page (via sa configuration).

9. Éditeur de page (Tiptap)

L’éditeur central est un Tiptap rich-text WYSIWYG.

📷 [IMAGE — éditeur Tiptap] (à venir)

Barre d’outils (en haut, fixée)

Bouton	Effet	Raccourci
B	Gras	Ctrl + B
I	Italique	Ctrl + I
S̶	Barré	—
H1 / H2 / H3	Titres niveaux 1 à 3	—
•	Liste à puces	—
1.	Liste numérotée	—
☐	Liste de tâches (cases à cocher)	—
❝	Citation	—
<>	Code inline	—
{}	Bloc de code	—
🔗	Lien	Ctrl + K
↶ ↷	Undo / Redo Tiptap local	Ctrl + Z / Ctrl + Y

Commandes slash

Tape « / » dans l’éditeur pour ouvrir le menu de commandes : insertions rapides de titres, listes, blocs de code, etc.

Comportement

• Auto-save à chaque frappe (debounced).
• Liens stylés en indigo souligné.
• Cases à cocher des tâches : cliquables inline.
• Placeholder : « Tape ’/’ pour les commandes, ou écris directement… ».

10. Lier une page à un service du canvas

Une page peut être liée à zéro, un ou plusieurs services du canvas. Cette liaison sert deux objectifs :

• Contextualiser la doc : on sait à quel service elle se rapporte.
• Afficher le NodeSummary (voir section 11) en tête de la page lorsqu’un seul service est lié.

Ajouter un lien

1. Clique sur « Lier à un service » dans le breadcrumb.
2. Une modale liste les services du canvas (recherche par nom).
3. Les services déjà liés à cette page sont masqués pour éviter les doublons.
4. Clique sur un service → liaison créée.

Visualiser les liens

• Les services liés apparaissent en pastilles bleues dans le breadcrumb.
• Au survol d’une pastille : icône ❌ pour détacher (sauf en lecture seule).

📷 [IMAGE — modale lier un service] (à venir)

11. NodeSummary (le résumé automatique)

Quand une page est liée à exactement un service, un encart résumé est affiché en haut du contenu éditable :

• Reste affiché au-dessus de la page mais partage le même scroll que le contenu (comme une intro Notion).
• En lecture seule, sourcé directement depuis le canvas — pas besoin de recopier les infos manuellement.

📷 [IMAGE — NodeSummary en tête de page] (à venir)

Contenu du résumé

Section	Détails
Fil d’Ariane	Nom du host parent · Catégorie du service.
Nom du service	Grand, en gras.
Type	Badge gris en majuscules.
Statut	Pastille colorée si un champ status est présent.
Identifiants	IP / Hostname si renseignés.
Description	Texte libre s’il y en a un.
Champs	Tableau clé/valeur des champs du schéma du node.
Connexions	Liste des liens vers d’autres services (protocole + port).

💡 Les valeurs affichées sont effectives : si un environnement est actif, les overrides sont appliqués automatiquement.

Personnaliser les champs affichés

À côté du libellé « Champs », un petit ✏️ ouvre la modale « Personnaliser les champs affichés » :

• Cases à cocher pour afficher / masquer chaque champ individuel.
• Bouton « Réinitialiser » pour tout réafficher.
• Le choix est persistant côté serveur (pages.meta.summary_hidden_fields) et donc partagé pour tous les collaborateurs d’un projet (pas uniquement local à ton navigateur).

📷 [IMAGE — modale personnaliser les champs] (à venir)

12. Mode lecture seule

Si tu es viewer sur le projet :

• L’éditeur Tiptap est editable=false — pas de modification possible.
• La barre d’outils Tiptap est masquée.
• Le bouton « Lier à un service » est masqué.
• Les boutons détacher sur les pastilles sont masqués.
• Les boutons ➕ / 🗑️ dans la sidebar sont masqués.
• Le ✏️ de personnalisation du NodeSummary est masqué.

💡 La doc reste navigable intégralement — seules les actions d’écriture sont coupées.

13. Collaboration temps réel

Comme le canvas, la partie Docs est collaborative en temps réel :

• L’édition Tiptap est synchronisée via la couche Yjs (positions des curseurs des autres membres visibles si activé, contenu mis à jour instantanément).
• L’arborescence des pages et leurs métadonnées (titre, parents, nodes liés, personnalisation du NodeSummary) sont également partagées.
• L’indicateur « Enregistré » dans le breadcrumb te confirme l’état de synchronisation.

14. Raccourcis utiles

Raccourci	Action
Ctrl + B / Cmd + B	Gras
Ctrl + I / Cmd + I	Italique
Ctrl + K / Cmd + K	Insérer un lien
Ctrl + Z / Cmd + Z	Undo Tiptap
Ctrl + Y / Ctrl + Shift + Z	Redo Tiptap
/	Ouvrir le menu de commandes
Entrée (sidebar titre)	Valider le renommage
Échap (sidebar titre)	Annuler le renommage

Suite

• Retour Canvas
• Administration de l’organisation