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) {
@@ -367,6 +407,7 @@ function displayContents(contents) {
 
 function createParentRow(parentPath) {
   const row = document.createElement("tr");
+  row.className = "clickable-row";
   row.innerHTML = `
         <td>
             <span class="icon-parent"></span>
@@ -377,6 +418,15 @@ function createParentRow(parentPath) {
         <td>-</td>
     `;
 
+  // Rendre toute la ligne cliquable
+  row.addEventListener("click", (e) => {
+    // Éviter le double clic si on clique sur le lien
+    if (e.target.tagName !== 'A') {
+      e.preventDefault();
+      loadBucketContents(parentPath, true);
+    }
+  });
+
   const link = row.querySelector(".folder-link");
   link.addEventListener("click", (e) => {
     e.preventDefault();
@@ -388,6 +438,7 @@ function createParentRow(parentPath) {
 
 function createFolderRow(folder) {
   const row = document.createElement("tr");
+  row.className = "clickable-row";
   row.innerHTML = `
         <td>
             <span class="icon-folder"></span>
@@ -398,6 +449,15 @@ function createFolderRow(folder) {
         <td>-</td>
     `;
 
+  // Rendre toute la ligne cliquable
+  row.addEventListener("click", (e) => {
+    // Éviter le double clic si on clique sur le lien
+    if (e.target.tagName !== 'A') {
+      e.preventDefault();
+      loadBucketContents(folder.path, true);
+    }
+  });
+
   const link = row.querySelector(".folder-link");
   link.addEventListener("click", (e) => {
     e.preventDefault();
@@ -409,6 +469,7 @@ function createFolderRow(folder) {
 
 function createFileRow(file) {
   const row = document.createElement("tr");
+  row.className = "clickable-row";
   const fileUrl = `${config.baseUrl}/${file.fullKey}`;
 
   row.innerHTML = `
@@ -420,9 +481,19 @@ function createFileRow(file) {
         <td class="file-date">${formatDate(file.modified)}</td>
         <td>
             <button class="copy-btn" data-url="${fileUrl}">Copier lien</button>
+            <button class="open-btn" data-url="${fileUrl}">Ouvrir</button>
         </td>
     `;
 
+  // Rendre toute la ligne cliquable
+  row.addEventListener("click", (e) => {
+    // Éviter le clic sur les boutons d'action et les liens
+    if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'A') {
+      e.preventDefault();
+      showPreview(fileUrl, file.name);
+    }
+  });
+
   const fileLink = row.querySelector(".file-link");
   fileLink.addEventListener("click", (e) => {
     e.preventDefault();
@@ -430,7 +501,16 @@ function createFileRow(file) {
   });
 
   const copyBtn = row.querySelector(".copy-btn");
-  copyBtn.addEventListener("click", () => copyToClipboard(fileUrl));
+  copyBtn.addEventListener("click", (e) => {
+    e.stopPropagation(); // Empêcher la propagation vers le clic sur la ligne
+    copyToClipboard(fileUrl);
+  });
+
+  const openBtn = row.querySelector(".open-btn");
+  openBtn.addEventListener("click", (e) => {
+    e.stopPropagation(); // Empêcher la propagation vers le clic sur la ligne
+    openInNewTab(fileUrl);
+  });
 
   return row;
 }
@@ -480,6 +560,10 @@ async function copyToClipboard(text) {
   }
 }
 
+function openInNewTab(fileUrl) {
+  window.open(fileUrl, '_blank', 'noopener,noreferrer');
+}
+
 // Variables globales pour la prévisualisation
 let currentPreviewFile = {
   url: "",

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;
@@ -133,6 +150,15 @@ tr:hover {
   background-color: #e6f3ff;
 }
 
+/* Lignes cliquables */
+.clickable-row {
+  cursor: pointer;
+}
+
+.clickable-row:hover {
+  background-color: #e6f3ff !important;
+}
+
 /* Liens et dossiers */
 .folder-link {
   color: #0066cc;
@@ -157,24 +183,41 @@ tr:hover {
   font-weight: bold;
 }
 
-/* Bouton copier lien */
+/* Boutons d'actions */
-.copy-btn {
+.copy-btn,
+.open-btn {
   background-color: #f0f0f0;
   border: 1px solid #ccc;
   padding: 2px 6px;
   font-size: 11px;
   cursor: pointer;
   border-radius: 2px;
+  margin-left: 2px;
 }
 
-.copy-btn:hover {
+.copy-btn:hover,
+.open-btn:hover {
   background-color: #e0e0e0;
 }
 
-.copy-btn:active {
+.copy-btn:active,
+.open-btn:active {
   background-color: #d0d0d0;
 }
 
+.open-btn {
+  background-color: #007acc;
+  color: white;
+}
+
+.open-btn:hover {
+  background-color: #005999;
+}
+
+.open-btn:active {
+  background-color: #004d80;
+}
+
 /* Tailles de fichiers */
 .file-size {
   text-align: right;
@@ -244,8 +287,8 @@ tr:hover {
   }
 
   #content-section {
-    flex: 0 0 25%; /* Tableau prend seulement 25% de la hauteur */
+    flex: none; /* Tableau prend l'espace nécessaire */
-    overflow-y: auto;
+    overflow-y: visible;
   }
 
   #files-table {
@@ -271,8 +314,8 @@ tr:hover {
   }
 
   #content-section {
-    flex: 0 0 20%; /* Encore moins d'espace pour le tableau sur mobile */
+    flex: none; /* Tableau prend l'espace nécessaire */
-    overflow-y: auto;
+    overflow-y: visible;
   }
 
   #files-table {