From 8d8cfb6fadbfab96cb840c09f16ada0def26a595 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslef53@gmail.com>
Date: Thu, 10 Sep 2026 19:40:49 +0200
Subject: [PATCH] =?UTF-8?q?UI=20:=20liste=20scrollable,=20alignement=20aut?=
 =?UTF-8?q?h,=20zones=20de=20d=C3=A9p=C3=B4t=20retir=C3=A9es=20du=20DOM=20?=
 =?UTF-8?q?hors=20session?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `#list` plafonné à 55vh avec défilement interne (au lieu d'allonger la page).
- En-tête d'auth : suppression du <span> qui cassait l'alignement ; « Connecté : … »
  et le bouton « Se déconnecter » sont alignés (flex, space-between).
- Les zones de dépôt (`#dropzone` + `#dirRow`, regroupées dans `#dropArea`) sont
  retirées du DOM tant que l'on n'est pas connecté, réinsérées à la connexion.
- Ajout de `[hidden] { display: none !important }` : des règles `display` d'auteur
  (`.btn`, `#queueRow`) neutralisaient l'attribut `hidden` — bouton de déconnexion
  et barre « Tout annuler » restaient visibles hors contexte.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/index.html | 66 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3f563a7..290a2a0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -31,6 +31,9 @@
       * {
         box-sizing: border-box;
       }
+      [hidden] {
+        display: none !important;
+      }
       body {
         margin: 0;
         padding: 2rem 1rem;
@@ -85,8 +88,12 @@
         background: transparent;
         color: var(--accent);
       }
-      form.inline {
+      .authrow form {
         margin: 0;
+        display: flex;
+      }
+      .authrow .btn {
+        white-space: nowrap;
       }
       label {
         display: block;
@@ -119,13 +126,19 @@
         background: color-mix(in srgb, var(--accent) 8%, transparent);
         color: var(--text);
       }
-      #dropzone.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+      #dropArea {
+        display: grid;
+        gap: 1.25rem;
       }
       #list {
         display: grid;
         gap: 0.6rem;
+        max-height: 55vh;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+      }
+      #list:not(:empty) {
+        padding-right: 0.25rem;
       }
       .item {
         border: 1px solid var(--border);
@@ -210,12 +223,10 @@
       <div class="card">
         <div class="authrow">
           <span id="authState" class="muted">Chargement…</span>
-          <span>
-            <a id="loginLink" class="btn" href="/auth/login" hidden>Se connecter</a>
-            <form id="logoutForm" class="inline" method="post" action="/auth/logout" hidden>
-              <button class="btn secondary" type="submit">Se déconnecter</button>
-            </form>
-          </span>
+          <a id="loginLink" class="btn" href="/auth/login" hidden>Se connecter</a>
+          <form id="logoutForm" method="post" action="/auth/logout" hidden>
+            <button class="btn secondary" type="submit">Se déconnecter</button>
+          </form>
         </div>
         <div id="banner" hidden></div>
       </div>
@@ -225,16 +236,18 @@
         <select id="targetSelect"></select>
       </div>
 
-      <div id="dropzone" class="card disabled">
-        <strong>Déposez fichiers ou dossiers ici</strong><br />
-        <span class="muted">ou cliquez pour parcourir</span>
-        <input id="picker" type="file" multiple hidden />
-      </div>
+      <div id="dropArea">
+        <div id="dropzone" class="card">
+          <strong>Déposez fichiers ou dossiers ici</strong><br />
+          <span class="muted">ou cliquez pour parcourir</span>
+          <input id="picker" type="file" multiple hidden />
+        </div>
 
-      <div id="dirRow" class="card" hidden>
-        <button id="dirBtn" type="button" class="btn secondary">Parcourir un dossier…</button>
-        <span class="muted"> — ou glissez un dossier dans la zone ci-dessus</span>
-        <input id="dirPicker" type="file" webkitdirectory multiple hidden />
+        <div id="dirRow" class="card" hidden>
+          <button id="dirBtn" type="button" class="btn secondary">Parcourir un dossier…</button>
+          <span class="muted"> — ou glissez un dossier dans la zone ci-dessus</span>
+          <input id="dirPicker" type="file" webkitdirectory multiple hidden />
+        </div>
       </div>
 
       <div id="queueRow" class="card" hidden>
@@ -252,6 +265,7 @@
       const logoutForm = document.getElementById('logoutForm');
       const targetCard = document.getElementById('targetCard');
       const targetSelect = document.getElementById('targetSelect');
+      const dropArea = document.getElementById('dropArea');
       const dropzone = document.getElementById('dropzone');
       const picker = document.getElementById('picker');
       const dirRow = document.getElementById('dirRow');
@@ -272,6 +286,17 @@
       let currentTarget = null;
       let currentTargetAllowsDirs = false;
 
+      // Les zones de dépôt ne sont présentes dans le DOM que si l'on est connecté.
+      const dropAreaAnchor = queueRow;
+      dropArea.remove();
+      function setDropAreaPresent(present) {
+        if (present) {
+          if (!dropArea.isConnected) dropAreaAnchor.before(dropArea);
+        } else if (dropArea.isConnected) {
+          dropArea.remove();
+        }
+      }
+
       function showBanner(message) {
         banner.textContent = message;
         banner.hidden = false;
@@ -286,13 +311,12 @@
         authenticated = Boolean(me && me.authenticated);
         loginLink.hidden = authenticated;
         logoutForm.hidden = !authenticated;
-        dropzone.classList.toggle('disabled', !authenticated);
+        setDropAreaPresent(authenticated);
         authState.textContent = authenticated ? 'Connecté : ' + me.name : 'Non connecté';
         if (authenticated) {
           loadTargets();
         } else {
           targetCard.hidden = true;
-          dirRow.hidden = true;
         }
       }