Mise en place d'un bouton + au hover plutot qu'un affichage constant

2026-04-22 13:31:06 +02:00
parent 8efa148739
commit f189f67aaf
6 changed files with 151 additions and 33 deletions
--- a/web/src/app/campaigns/campaign-tree.helper.ts
+++ b/web/src/app/campaigns/campaign-tree.helper.ts
@@ -80,30 +80,30 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
        label: sc.name,
        route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}/scenes/${sc.id}`
      }));
-      sceneItems.push({
-        id: `new-scene-${ch.id}`,
-        label: '+ Nouvelle scène',
-        isAction: true,
-        route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}/scenes/create`
-      });
      return {
        id: `chapter-${ch.id}`,
        label: ch.name,
        children: sceneItems,
-        route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}`
+        route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}`,
+        createActions: [{
+          id: `new-scene-${ch.id}`,
+          label: 'Nouvelle scène',
+          route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}/scenes/create`,
+          actionIcon: 'plus'
+        }]
      };
    });
-    chapterItems.push({
-      id: `new-chapter-${arc.id}`,
-      label: '+ Nouveau chapitre',
-      isAction: true,
-      route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/create`
-    });
    return {
      id: `arc-${arc.id}`,
      label: arc.name,
      children: chapterItems,
-      route: `/campaigns/${campaignId}/arcs/${arc.id}`
+      route: `/campaigns/${campaignId}/arcs/${arc.id}`,
+      createActions: [{
+        id: `new-chapter-${arc.id}`,
+        label: 'Nouveau chapitre',
+        route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/create`,
+        actionIcon: 'plus'
+      }]
    };
  });
 }
--- a/web/src/app/lore/lore-sidebar.helper.ts
+++ b/web/src/app/lore/lore-sidebar.helper.ts
@@ -75,19 +75,7 @@ export function buildLoreSidebarConfig(data: LoreSidebarData): SecondarySidebarC
        id: `page-${p.id}`,
        label: p.title,
        route: `/lore/${lore.id}/pages/${p.id}`
-      })),
-      {
-        id: `create-folder-${node.id}`,
-        label: '+ Nouveau dossier',
-        isAction: true,
-        route: `/lore/${lore.id}/folders/${node.id}/create`
-      },
-      {
-        id: `create-page-${node.id}`,
-        label: '+ Nouvelle page',
-        isAction: true,
-        route: `/lore/${lore.id}/nodes/${node.id}/pages/create`
-      }
+      }))
    ];
    // IDs préfixés par type — chaque entité a sa propre séquence IDENTITY en base,
    // donc node.id=1 et page.id=1 peuvent coexister et collisionner dans le
@@ -98,7 +86,21 @@ export function buildLoreSidebarConfig(data: LoreSidebarData): SecondarySidebarC
      iconKey: node.icon ?? undefined,
      route: `/lore/${lore.id}/folders/${node.id}/edit`,
      meta: nodePages.length > 0 ? String(nodePages.length) : undefined,
-      children
+      children,
+      createActions: [
+        {
+          id: `create-folder-${node.id}`,
+          label: 'Nouveau sous-dossier',
+          route: `/lore/${lore.id}/folders/${node.id}/create`,
+          actionIcon: 'folder-plus'
+        },
+        {
+          id: `create-page-${node.id}`,
+          label: 'Nouvelle page',
+          route: `/lore/${lore.id}/nodes/${node.id}/pages/create`,
+          actionIcon: 'file-plus'
+        }
+      ]
    };
  };

--- a/web/src/app/services/layout.service.ts
+++ b/web/src/app/services/layout.service.ts
@@ -11,6 +11,21 @@ export interface TreeItem {
  iconKey?: string;
  /** Petit badge affiché à droite (ex: "3" pour compter les pages d'un dossier). */
  meta?: string;
+  /**
+   * Actions de creation contextuelles (ex: "+ Nouveau chapitre" sur un arc).
+   * Affichees comme boutons icone au survol du noeud (repli visuel), et en
+   * pleine largeur si le noeud est expanded sans aucun enfant reel
+   * (empty-state inline, meilleur des deux mondes).
+   */
+  createActions?: TreeCreateAction[];
+}
+
+export interface TreeCreateAction {
+  id: string;
+  label: string;      // tooltip au hover, texte complet en empty-state
+  route: string;
+  /** Cle d'icone cote sidebar (plus | folder-plus | file-plus). */
+  actionIcon?: 'plus' | 'folder-plus' | 'file-plus';
 }

 export interface GlobalItem {
--- a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html
+++ b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html
@@ -30,7 +30,7 @@
      <div class="tree-item" [style.padding-left.px]="level * 12">
        <div class="tree-row">
          <button
-            *ngIf="!item.isAction && item.children?.length"
+            *ngIf="!item.isAction && isExpandable(item)"
            type="button"
            class="chevron-btn"
            (click)="clickChevron($event, item)">
@@ -39,7 +39,7 @@
              [size]="12">
            </lucide-icon>
          </button>
-          <span *ngIf="item.isAction || !item.children?.length" class="chevron-spacer"></span>
+          <span *ngIf="item.isAction || !isExpandable(item)" class="chevron-spacer"></span>

          <button type="button" class="tree-btn" [class.action]="item.isAction" (click)="clickItem(item)">
            <lucide-icon
@@ -51,11 +51,39 @@
            {{ item.label }}
            <span class="tree-item-meta" *ngIf="!item.isAction && item.meta">{{ item.meta }}</span>
          </button>
+
+          <!-- Actions de creation contextuelles, revelees au survol de la ligne -->
+          <span class="node-actions" *ngIf="item.createActions?.length">
+            <button
+              *ngFor="let a of item.createActions"
+              type="button"
+              class="node-action-btn"
+              [title]="a.label"
+              [attr.aria-label]="a.label"
+              (click)="runCreateAction($event, a)">
+              <lucide-icon [img]="iconForAction(a)" [size]="12"></lucide-icon>
+            </button>
+          </span>
        </div>
-        <div class="tree-children" *ngIf="isExpanded(item.id) && item.children?.length">
+        <div class="tree-children" *ngIf="isExpanded(item.id) && (hasChildren(item) || item.createActions?.length)">
          <ng-container *ngFor="let child of item.children">
            <ng-container *ngTemplateOutlet="treeNode; context: { $implicit: child, level: level + 1 }"></ng-container>
          </ng-container>
+          <!-- Empty-state inline : createActions affichees en pleine largeur
+               UNIQUEMENT si le noeud n'a aucun vrai enfant (sinon le hover-reveal
+               sur le parent suffit, pas de pollution visuelle). -->
+          <ng-container *ngIf="!hasChildren(item) && item.createActions?.length">
+            <div class="tree-item empty-action" *ngFor="let a of item.createActions"
+                 [style.padding-left.px]="(level + 1) * 12">
+              <div class="tree-row">
+                <span class="chevron-spacer"></span>
+                <button type="button" class="tree-btn action" (click)="runCreateAction($event, a)">
+                  <lucide-icon [img]="iconForAction(a)" [size]="12" class="item-icon"></lucide-icon>
+                  + {{ a.label }}
+                </button>
+              </div>
+            </div>
+          </ng-container>
        </div>
      </div>
    </ng-template>
--- a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.scss
+++ b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.scss
@@ -132,6 +132,45 @@
  align-items: center;
  gap: 0.15rem;
  width: 100%;
+  position: relative;
+
+  // Hover-reveal : les boutons d'action de creation n'apparaissent qu'au
+  // survol de la ligne. Pattern Notion/VS Code.
+  &:hover .node-actions { opacity: 1; pointer-events: auto; }
+}
+
+.node-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.1rem;
+  margin-left: auto;
+  flex-shrink: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  // Superpose les boutons d'action sur le .tree-item-meta eventuel
+  // (compteur de pages) : au hover on affiche les actions, au repos le meta.
+  position: absolute;
+  right: 0.25rem;
+  background: linear-gradient(to right, transparent, #1f2937 30%);
+  padding-left: 1rem;
+}
+
+.node-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #9ca3af;
+  padding: 0;
+  transition: background 0.12s, color 0.12s;
+
+  &:hover { background: #2a2a3d; color: #c7d2fe; }
 }

 .chevron-btn {
--- a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.ts
+++ b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
-import { LucideAngularModule, ChevronRight, ChevronDown, PanelLeftClose, PanelLeftOpen, LucideIconData } from 'lucide-angular';
-import { TreeItem, SidebarAction, BottomPanel, BottomPanelItem, LayoutService } from '../../services/layout.service';
+import { LucideAngularModule, ChevronRight, ChevronDown, PanelLeftClose, PanelLeftOpen, Plus, FolderPlus, FilePlus, LucideIconData } from 'lucide-angular';
+import { TreeItem, TreeCreateAction, SidebarAction, BottomPanel, BottomPanelItem, LayoutService } from '../../services/layout.service';
 import { resolveIcon } from '../../lore/lore-icons';

@Component({
@@ -25,6 +25,9 @@ export class SecondarySidebarComponent {
  readonly ChevronRight = ChevronRight;
  readonly PanelLeftClose = PanelLeftClose;
  readonly PanelLeftOpen = PanelLeftOpen;
+  readonly Plus = Plus;
+  readonly FolderPlus = FolderPlus;
+  readonly FilePlus = FilePlus;

  isCollapsed = false;

@@ -82,6 +85,37 @@ export class SecondarySidebarComponent {
    return item.iconKey ? resolveIcon(item.iconKey) : null;
  }

+  /** Resolution d'icone pour un TreeCreateAction (hover + empty-state). */
+  iconForAction(action: TreeCreateAction): LucideIconData {
+    switch (action.actionIcon) {
+      case 'folder-plus': return FolderPlus;
+      case 'file-plus':   return FilePlus;
+      default:            return Plus;
+    }
+  }
+
+  /**
+   * Declenche une action de creation contextuelle. stopPropagation pour eviter
+   * que le clic ne remonte au bouton parent (qui navigue ou toggle).
+   */
+  runCreateAction(event: Event, action: TreeCreateAction): void {
+    event.stopPropagation();
+    this.router.navigate([action.route]);
+  }
+
+  /** True si le noeud a au moins un vrai enfant (utile pour le chevron). */
+  hasChildren(item: TreeItem): boolean {
+    return !!item.children && item.children.length > 0;
+  }
+
+  /**
+   * True si le chevron doit s'afficher : soit il y a des enfants, soit le
+   * noeud a des createActions (dans ce cas deplier revele l'empty-state).
+   */
+  isExpandable(item: TreeItem): boolean {
+    return this.hasChildren(item) || (item.createActions?.length ?? 0) > 0;
+  }
+
  /**
   * Auto-déplie la chaîne d'ancêtres du item dont `route` matche l'URL active.
   * Nécessaire car la sidebar est détruite/recréée à chaque navigation (ngIf