From 510959340d64587533857b248407e19dc54ef759 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Mon, 8 Sep 2025 22:11:16 +0200
Subject: [PATCH] feat: uiux improvements. no scroll, direct link

---
 script.js | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 style.css | 42 ++++++++++++++++++++++++++++++++++--------
 2 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/script.js b/script.js
index 1e9c4c1..eedb201 100644
--- a/script.js
+++ b/script.js
@@ -367,6 +367,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 +378,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 +398,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 +409,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 +429,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 +441,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 +461,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 +520,10 @@ async function copyToClipboard(text) {
   }
 }
 
+function openInNewTab(fileUrl) {
+  window.open(fileUrl, '_blank', 'noopener,noreferrer');
+}
+
 // Variables globales pour la prévisualisation
 let currentPreviewFile = {
   url: "",
diff --git a/style.css b/style.css
index c15eb59..56aa171 100644
--- a/style.css
+++ b/style.css
@@ -133,6 +133,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 +166,41 @@ tr:hover {
   font-weight: bold;
 }
 
-/* Bouton copier lien */
-.copy-btn {
+/* Boutons d'actions */
+.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 +270,8 @@ tr:hover {
   }
 
   #content-section {
-    flex: 0 0 25%; /* Tableau prend seulement 25% de la hauteur */
-    overflow-y: auto;
+    flex: none; /* Tableau prend l'espace nécessaire */
+    overflow-y: visible;
   }
 
   #files-table {
@@ -271,8 +297,8 @@ tr:hover {
   }
 
   #content-section {
-    flex: 0 0 20%; /* Encore moins d'espace pour le tableau sur mobile */
-    overflow-y: auto;
+    flex: none; /* Tableau prend l'espace nécessaire */
+    overflow-y: visible;
   }
 
   #files-table {