feat: add breadcrumb navigation

script.js

@@ -165,9 +165,49 @@ function showLoading(show = true) {
 
 function updateCurrentPathDisplay() {
   const pathDisplay = document.getElementById("current-path");
-  if (pathDisplay) {
+  if (!pathDisplay) return;
-    pathDisplay.textContent = "/" + config.currentPath;
+
+  // Créer la structure de navigation breadcrumb
+  let breadcrumbHTML = '';
+  
+  // Toujours commencer par la racine
+  if (config.currentPath) {
+    // Si on n'est pas à la racine, rendre "/" cliquable
+    breadcrumbHTML += '<a href="#" class="path-segment" data-path="">/ </a>';
+  } else {
+    // Si on est à la racine, afficher "/" sans lien
+    breadcrumbHTML += '/';
   }
+
+  // Si on a un chemin, découper et créer les segments
+  if (config.currentPath) {
+    const segments = config.currentPath.split('/').filter(segment => segment.length > 0);
+    
+    for (let i = 0; i < segments.length; i++) {
+      const segment = segments[i];
+      const segmentPath = segments.slice(0, i + 1).join('/');
+      
+      // Le dernier segment (actuel) n'est pas cliquable
+      if (i === segments.length - 1) {
+        breadcrumbHTML += segment;
+      } else {
+        // Les segments précédents sont cliquables
+        breadcrumbHTML += `<a href="#" class="path-segment" data-path="${segmentPath}">${segment}</a> / `;
+      }
+    }
+  }
+
+  pathDisplay.innerHTML = breadcrumbHTML;
+
+  // Ajouter les event listeners aux liens de navigation
+  const pathLinks = pathDisplay.querySelectorAll('.path-segment');
+  pathLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const targetPath = link.getAttribute('data-path');
+      loadBucketContents(targetPath, true);
+    });
+  });
 }
 
 async function loadBucketContents(path = "", pushToHistory = true) {

style.css

@@ -34,6 +34,23 @@ h1 {
   margin-bottom: 20px;
 }
 
+/* Styles pour la navigation breadcrumb dans le titre */
+.path-segment {
+  color: #0066cc;
+  text-decoration: none;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+.path-segment:hover {
+  text-decoration: underline;
+  color: #004499;
+}
+
+.path-segment:active {
+  color: #002266;
+}
+
 /* Section développement */
 .dev-section {
   background-color: #f0f0f0;