From ab5eeb60f59c2a632331466571fa2a4eafc8eebd Mon Sep 17 00:00:00 2001
From: r-zakarya <82443831+r-zakarya@users.noreply.github.com>
Date: Fri, 28 Aug 2026 14:42:54 +0100
Subject: [PATCH] fix(android): l'accueil se lit de haut en bas, et ses blocs
 respirent

L'espace de 8 px vit A L'INTERIEUR de chaque pile. "Create vault" et
"Download vault" etaient dans deux piles voisines et se touchaient donc,
tandis que "Download vault" et "Settings", dans la meme pile,
respiraient. Un margin entre piles adjacentes suffit.

L'ordre suit maintenant les frequences et non l'ordre du code : aller
chercher le coffre, regler, creer en dernier. La creation etait en tete
parce que son bloc etait ecrit en premier dans la page.

L'accent suit le geste attendu - il va a "Download vault" des qu'un depot
est configure, et ne reste sur la creation que lorsqu'il n'y a rien a
aller chercher.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 android-client/web/app.html | 61 +++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/android-client/web/app.html b/android-client/web/app.html
index d26a325..52c55f7 100644
--- a/android-client/web/app.html
+++ b/android-client/web/app.html
@@ -271,6 +271,11 @@
   /* --- deverrouillage ----------------------------------------------------- */
   .status { color: var(--muted); margin: 22px 4px 14px; min-height: 20px; }
   .stack { display: flex; flex-direction: column; gap: 8px; }
+  /* L'espace de 8 px vit A L'INTERIEUR de chaque pile. Deux piles voisines se
+     touchaient donc, et "Create vault" collait a "Download vault" alors que
+     "Download vault" et "Settings" respiraient - les premiers etant dans deux
+     piles, les seconds dans une seule. */
+  .stack + .stack { margin-top: 8px; }
   .pair { display: flex; gap: 8px; }
   .pair .btn { flex: 1; }
   .field-in {
@@ -352,6 +357,24 @@
 <div class="screen" id="unlock">
   <div class="scroll">
     <div class="status" id="status"></div>
+
+    <div class="stack">
+      <button class="btn wide main" id="btnOpen">&#10140;&nbsp; Open vault</button>
+      <button class="btn wide" id="btnSync">&#8635;&nbsp; Sync</button>
+      <!-- UN SEUL BOUTON, ET IL NE MENT PAS SUR SA DESTINATION.
+           Il y en avait deux, "Settings" et "Log", et le second a fini par
+           ouvrir le premier - le journal ayant demenage dans les reglages. Un
+           bouton nomme "Log" qui ouvre "Settings" se ment sur son etiquette.
+
+           TOUJOURS VISIBLE, contrairement a ce qu'on avait essaye. Le cacher
+           des qu'un coffre existe laissait l'accueil sans aucune porte vers les
+           reglages - et c'est precisement quand le coffre REFUSE de s'ouvrir
+           (code faux, adresse fausse) qu'on en a besoin, avec le journal.
+           Ce n'est pas un doublon de la roue dentee : celle-ci est DANS le
+           coffre, celui-ci est sur l'accueil. Jamais cote a cote. -->
+      <button class="btn wide" id="btnCfg">&#9881;&nbsp; Settings</button>
+    </div>
+
     <!-- SE CONNECTER, comme sur le poste. Le mot de passe maitre ouvre le
          conteneur local - c'est le dechiffrement lui-meme qui verifie, aucun
          secret n'est compare - et le nom dit a qui appartient ce coffre.
@@ -373,23 +396,6 @@
       <button class="btn wide main" id="btnAuth">Sign in</button>
     </div>
 
-    <div class="stack">
-      <button class="btn wide main" id="btnOpen">&#10140;&nbsp; Open vault</button>
-      <button class="btn wide" id="btnSync">&#8635;&nbsp; Sync</button>
-      <!-- UN SEUL BOUTON, ET IL NE MENT PAS SUR SA DESTINATION.
-           Il y en avait deux, "Settings" et "Log", et le second a fini par
-           ouvrir le premier - le journal ayant demenage dans les reglages. Un
-           bouton nomme "Log" qui ouvre "Settings" se ment sur son etiquette.
-
-           TOUJOURS VISIBLE, contrairement a ce qu'on avait essaye. Le cacher
-           des qu'un coffre existe laissait l'accueil sans aucune porte vers les
-           reglages - et c'est precisement quand le coffre REFUSE de s'ouvrir
-           (code faux, adresse fausse) qu'on en a besoin, avec le journal.
-           Ce n'est pas un doublon de la roue dentee : celle-ci est DANS le
-           coffre, celui-ci est sur l'accueil. Jamais cote a cote. -->
-      <button class="btn wide" id="btnCfg">&#9881;&nbsp; Settings</button>
-    </div>
-
     <!-- LE CODE EST ICI, PAS DANS LES REGLAGES DU SERVEUR. Il ne concerne que
          cet appareil - il scelle le cache local - alors que les trois autres
          champs decrivent le depot distant, partage entre les appareils. Range
@@ -637,6 +643,20 @@ var authMode = 'open';
 // dernier ecrasait le premier. Chacun met a jour sa variable, la fonction
 // tranche.
 var pinNeeded = false;
+// L'ACCUEIL SE LIT DE HAUT EN BAS : aller chercher le coffre, regler, et creer
+// en dernier - c'est l'ordre des frequences, pas celui du code. La creation
+// etait en tete parce que son bloc etait ecrit en premier dans la page.
+function syncAuthbox() {
+  document.getElementById('authbox').hidden = (authMode === 'open');
+  // L'ACCENT SUIT LE GESTE ATTENDU. Creer un coffre neuf le portait alors qu'un
+  // depot est configure - c'est-a-dire exactement le mauvais geste. Il revient
+  // a celui qui vient chercher le coffre, et ne reste sur la creation que
+  // lorsqu'il n'y a rien a chercher.
+  var repo = elUrl.value.trim() !== '';
+  document.getElementById('btnSync').classList.toggle('main', repo);
+  document.getElementById('btnAuth').classList.toggle('main', !repo);
+}
+
 function syncPinbox() {
   document.getElementById('pinbox').hidden = !pinNeeded || (authMode !== 'open');
 }
@@ -1583,6 +1603,10 @@ var PM = {
   setConfig: function (url, tok, pwd, show) {
     // elPin volontairement absent : rien ne le restaure, jamais.
     elUrl.value = url; elTok.value = tok; elPwd.value = pwd;
+    // L'adresse decide de la mise en page ci-dessus, et elle peut arriver apres
+    // setAuthMode : sans ce rappel, l'accueil garderait la forme qu'il avait
+    // avant de savoir qu'un depot est configure.
+    syncAuthbox();
     // Rien a deplier : c'est le voile des reglages qui les montre desormais.
     // Un depot pas encore configure s'annonce donc autrement - le bouton
     // d'accueil dit "Download vault" et l'ecran, "No vault on this device".
@@ -1624,8 +1648,7 @@ var PM = {
   /// un conteneur sans cache, ou un cache pret a s'ouvrir.
   setAuthMode: function (mode) {
     authMode = mode;
-    var box = document.getElementById('authbox');
-    box.hidden = (mode === 'open');
+    syncAuthbox();
     syncPinbox();
     document.getElementById('btnAuth').textContent =
       (mode === 'register') ? 'Create vault' : 'Sign in';