From 72c10ced4013997a9844216f2cedb7143b6a16aa Mon Sep 17 00:00:00 2001
From: r-dev <matthieu@yuno.malio.fr>
Date: Sat, 4 Apr 2026 17:08:17 +0200
Subject: [PATCH] feat(ui) : add contextual breadcrumb navigation

---
 frontend/app/app.vue                          |   1 +
 .../app/components/layout/AppBreadcrumb.vue   | 123 ++++++++++++++++++
 2 files changed, 124 insertions(+)
 create mode 100644 frontend/app/components/layout/AppBreadcrumb.vue

diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index d93bf6e..599a771 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -7,6 +7,7 @@
       @open-settings="displaySettingsOpen = true"
       @logout="handleLogout"
     />
+    <AppBreadcrumb />
 
     <main class="flex-1">
       <NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
diff --git a/frontend/app/components/layout/AppBreadcrumb.vue b/frontend/app/components/layout/AppBreadcrumb.vue
new file mode 100644
index 0000000..a9a1a06
--- /dev/null
+++ b/frontend/app/components/layout/AppBreadcrumb.vue
@@ -0,0 +1,123 @@
+<template>
+  <nav v-if="crumbs.length > 1" class="container mx-auto px-6 pt-4" aria-label="Fil d'Ariane">
+    <div class="text-sm breadcrumbs py-0">
+      <ul>
+        <li v-for="(crumb, i) in crumbs" :key="i">
+          <NuxtLink
+            v-if="i < crumbs.length - 1"
+            :to="crumb.path"
+            class="text-base-content/60 hover:text-primary transition-colors"
+          >
+            {{ crumb.label }}
+          </NuxtLink>
+          <span v-else class="text-base-content font-medium">{{ crumb.label }}</span>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+interface Crumb {
+  label: string
+  path: string
+}
+
+const route = useRoute()
+
+const crumbs = computed<Crumb[]>(() => {
+  const result: Crumb[] = [{ label: 'Accueil', path: '/' }]
+  const path = route.path
+
+  // Home page — no breadcrumb
+  if (path === '/') return []
+
+  // Machine context from query param (when navigating from a machine detail page)
+  if (route.query.from === 'machine' && route.query.machineId) {
+    result.push({ label: 'Parc machines', path: '/machines' })
+    result.push({ label: 'Machine', path: `/machine/${route.query.machineId}` })
+  }
+
+  // Machines
+  if (path === '/machines') {
+    result.push({ label: 'Parc machines', path: '/machines' })
+  } else if (path.startsWith('/machine/') && !route.query.from) {
+    result.push({ label: 'Parc machines', path: '/machines' })
+    result.push({ label: 'Machine', path })
+  }
+
+  // Catalogs
+  else if (path.startsWith('/catalogues/composants') || path === '/component-catalog') {
+    result.push({ label: 'Composants', path: '/catalogues/composants' })
+  } else if (path.startsWith('/catalogues/pieces') || path === '/pieces-catalog') {
+    result.push({ label: 'Pièces', path: '/catalogues/pieces' })
+  } else if (path.startsWith('/catalogues/produits') || path === '/product-catalog') {
+    result.push({ label: 'Produits', path: '/catalogues/produits' })
+  }
+
+  // Entity detail pages (when NOT from machine context)
+  else if (path.startsWith('/component/') && !route.query.from) {
+    result.push({ label: 'Composants', path: '/catalogues/composants' })
+    result.push({ label: 'Composant', path })
+  } else if (path.startsWith('/piece/') && !route.query.from) {
+    result.push({ label: 'Pièces', path: '/catalogues/pieces' })
+    result.push({ label: 'Pièce', path })
+  } else if (path.startsWith('/product/') && !route.query.from) {
+    result.push({ label: 'Produits', path: '/catalogues/produits' })
+    result.push({ label: 'Produit', path })
+  }
+
+  // Entity detail pages WITH machine context — add entity as last crumb
+  else if (path.startsWith('/component/') && route.query.from === 'machine') {
+    result.push({ label: 'Composant', path })
+  } else if (path.startsWith('/piece/') && route.query.from === 'machine') {
+    result.push({ label: 'Pièce', path })
+  } else if (path.startsWith('/product/') && route.query.from === 'machine') {
+    result.push({ label: 'Produit', path })
+  }
+
+  // Admin pages
+  else if (path.startsWith('/sites')) {
+    result.push({ label: 'Sites', path: '/sites' })
+  } else if (path.startsWith('/constructeurs')) {
+    result.push({ label: 'Fournisseurs', path: '/constructeurs' })
+  } else if (path.startsWith('/activity-log')) {
+    result.push({ label: 'Journal d\'activité', path: '/activity-log' })
+  } else if (path.startsWith('/admin')) {
+    result.push({ label: 'Administration', path: '/admin' })
+  } else if (path.startsWith('/documents')) {
+    result.push({ label: 'Documents', path: '/documents' })
+  } else if (path.startsWith('/comments')) {
+    result.push({ label: 'Commentaires', path: '/comments' })
+  }
+
+  // Category pages
+  else if (path.startsWith('/component-category')) {
+    result.push({ label: 'Composants', path: '/catalogues/composants' })
+    result.push({ label: 'Catégorie', path })
+  } else if (path.startsWith('/piece-category')) {
+    result.push({ label: 'Pièces', path: '/catalogues/pieces' })
+    result.push({ label: 'Catégorie', path })
+  } else if (path.startsWith('/product-category')) {
+    result.push({ label: 'Produits', path: '/catalogues/produits' })
+    result.push({ label: 'Catégorie', path })
+  }
+
+  // Create pages
+  else if (path.startsWith('/pieces/create')) {
+    result.push({ label: 'Pièces', path: '/catalogues/pieces' })
+    result.push({ label: 'Nouvelle pièce', path })
+  } else if (path.startsWith('/component/create')) {
+    result.push({ label: 'Composants', path: '/catalogues/composants' })
+    result.push({ label: 'Nouveau composant', path })
+  } else if (path.startsWith('/product/create')) {
+    result.push({ label: 'Produits', path: '/catalogues/produits' })
+    result.push({ label: 'Nouveau produit', path })
+  } else if (path === '/machines/new') {
+    result.push({ label: 'Parc machines', path: '/machines' })
+    result.push({ label: 'Nouvelle machine', path })
+  }
+
+  return result
+})
+</script>