Evolutions :

- Ajout d'icônes dans la scène, chapitre et arc
- Possibilité de bouger les cases dans la partie graphe et les textes associés si ces derniers ne sont pas visibles
- Changement sur le thème du graphe : mode sombre et plus blanc
- Barre d'action en haut, même pour la partie scène
- Mode sticky corrigé : plus de trou entre le haut du navigateur web et de la barre d'action

Passage version 0.6.5

web/src/app/shared/icon-picker/icon-picker.component.scss

@@ -0,0 +1,31 @@
+.icon-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover { background: #374151; color: white; }
+
+  &.selected {
+    background: #1e1b4b;
+    border-color: #6c63ff;
+    color: #a5b4fc;
+  }
+}

web/src/app/shared/icon-picker/icon-picker.component.ts

@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LucideAngularModule, LucideIconData } from 'lucide-angular';
+
+export interface IconPickerOption {
+  key: string;
+  icon: LucideIconData;
+}
+
+/**
+ * Petit composant reutilisable : grille d'icones cliquables avec selection unique.
+ * Utilise par les formulaires de creation / edition d'arcs, chapitres et scenes
+ * (ainsi que potentiellement les dossiers du Lore plus tard).
+ *
+ * Usage :
+ *   <app-icon-picker [options]="iconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+ *
+ * Le composant est purement presentationnel : il n'interroge pas le registre
+ * d'icones lui-meme — l'appelant lui passe la banque a afficher.
+ */
+@Component({
+  selector: 'app-icon-picker',
+  standalone: true,
+  imports: [CommonModule, LucideAngularModule],
+  template: `
+    <div class="icon-grid">
+      <button
+        type="button"
+        class="icon-btn"
+        *ngFor="let option of options"
+        [class.selected]="selected === option.key"
+        [attr.aria-pressed]="selected === option.key"
+        [title]="option.key"
+        (click)="pick(option.key)">
+        <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
+      </button>
+    </div>
+  `,
+  styleUrls: ['./icon-picker.component.scss']
+})
+export class IconPickerComponent {
+  @Input() options: IconPickerOption[] = [];
+  @Input() selected: string | null = null;
+  /** Permet le binding two-way `[(selected)]`. */
+  @Output() selectedChange = new EventEmitter<string | null>();
+  /** Si true, recliquer sur l'icone actuellement selectionnee la deselectionne. */
+  @Input() allowDeselect = true;
+
+  pick(key: string): void {
+    const next = this.allowDeselect && this.selected === key ? null : key;
+    this.selected = next;
+    this.selectedChange.emit(next);
+  }
+}