Initial commit - LoreMind project

web/src/app/shared/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,12 @@
+<nav class="breadcrumb" aria-label="Fil d'Ariane" *ngIf="items.length">
+  <ol>
+    <li *ngFor="let item of items; let last = last; trackBy: trackByIndex"
+        class="breadcrumb-item"
+        [class.current]="last">
+      <a *ngIf="item.route && !last"
+         [routerLink]="item.route"
+         class="breadcrumb-link">{{ item.label }}</a>
+      <span *ngIf="!item.route || last" class="breadcrumb-text">{{ item.label }}</span>
+    </li>
+  </ol>
+</nav>

web/src/app/shared/breadcrumb/breadcrumb.component.scss

@@ -0,0 +1,50 @@
+.breadcrumb {
+  font-size: 0.82rem;
+  color: #6b7280;
+  margin-bottom: 1rem;
+
+  ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+
+  &::before {
+    content: '›';
+    color: #4b5563;
+  }
+
+  &:first-child::before {
+    content: none;
+  }
+
+  &.current .breadcrumb-text {
+    color: #e5e7eb;
+    font-weight: 500;
+  }
+}
+
+.breadcrumb-link {
+  color: #9ca3af;
+  text-decoration: none;
+  transition: color 0.15s;
+
+  &:hover {
+    color: #a5b4fc;
+    text-decoration: underline;
+  }
+}
+
+.breadcrumb-text {
+  color: inherit;
+}

web/src/app/shared/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+/**
+ * Un niveau dans le fil d'Ariane.
+ * Si `route` est défini, l'item est cliquable (navigation).
+ * Sinon, c'est la position courante (dernier niveau, non-cliquable).
+ */
+export interface BreadcrumbItem {
+  label: string;
+  route?: string | any[];
+}
+
+/**
+ * Composant réutilisable de fil d'Ariane.
+ * Utilisation type :
+ *   <app-breadcrumb [items]="[
+ *     { label: 'Mon Univers', route: ['/lore', loreId] },
+ *     { label: 'PNJ',         route: ['/lore', loreId, 'folders', nodeId, 'edit'] },
+ *     { label: 'Aldric' }
+ *   ]"></app-breadcrumb>
+ */
+@Component({
+  selector: 'app-breadcrumb',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.scss']
+})
+export class BreadcrumbComponent {
+  @Input() items: BreadcrumbItem[] = [];
+
+  trackByIndex = (i: number) => i;
+}