Update footer settings

Author: johnsamuelwrites

CONTRIBUTING.md

@@ -46,6 +46,7 @@ Quand vous ajoutez ou modifiez une fractale, mettez à jour tous les points conc
    - chargement des exports WASM
    - source map
    - listes de coloration syntaxique si nécessaire
+   - puis mettez à jour le module UI concerné dans `public/js/` si le changement touche l'export, les signets, le panneau source/benchmark ou un autre helper navigateur extrait
 6. Mettez à jour `README.md` si les capacités documentées changent.
 
 ## Règles de rendu
@@ -69,6 +70,9 @@ Exécutez ces commandes après toute modification significative :
 
 ```powershell
 node --check public\js\renderer.js
+node --check public\js\renderer-source-panel.js
+node --check public\js\renderer-bookmarks.js
+node --check public\js\renderer-export.js
 python scripts\compile_wasm.py
 python scripts\integration_checks.py
 python scripts\ui_smoke_checks.py
@@ -82,7 +86,7 @@ Ordre important : `compile_wasm.py` régénère des artefacts dans `public/`. Re
 - Décrivez le comportement modifié et les zones du dépôt touchées.
 - Indiquez les commandes de validation exécutées localement.
 - Ajoutez des captures d'écran ou une courte vidéo si l'interface ou le rendu changent visiblement.
-- Si vous ajoutez une fractale, vérifiez sa présence dans `src/main.ml`, `scripts/compile_wasm.ml`, `scripts/integration_checks.py` et `public/js/renderer.js`.
+- Si vous ajoutez une fractale, vérifiez sa présence dans `src/main.ml`, `scripts/compile_wasm.ml`, `scripts/integration_checks.py` et dans les registres conservés dans `public/js/renderer.js` (`VIEW_PRESETS`, `FRACTAL_FAMILIES`, `FRACTAL_SOURCE_MAP`, `wasmFunctions`, `POINT_FRACTALS`/`LINE_FRACTALS` selon le cas).
 
 ## Documentation
 

public/css/style.css

@@ -639,12 +639,13 @@ pre {
 /* ---- Barre de contrôles ---- */
 #controls {
   grid-area: controls;
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
-  padding: 8px 20px;
+  gap: 12px;
+  padding: 8px 16px;
   background: rgba(8, 12, 22, 0.98);
   border-top: 1px solid var(--border);
   -webkit-backdrop-filter: blur(10px);
@@ -653,6 +654,13 @@ pre {
   z-index: 10;
 }
 
+.controls-minimize-btn {
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  z-index: 2;
+}
+
 .controls-summary {
   width: 100%;
   display: flex;
@@ -697,6 +705,10 @@ pre {
   display: flex;
 }
 
+#controls.collapsed .controls-minimize-btn {
+  display: none;
+}
+
 #controls:not(.collapsed) .controls-summary {
   display: none;
 }
@@ -711,6 +723,9 @@ pre {
   align-items: flex-start;
   gap: 16px;
   min-width: 0;
+  width: 100%;
+  padding-right: 44px;
+  box-sizing: border-box;
   flex: 1 1 auto;
   flex-wrap: nowrap;
   overflow: visible;
@@ -741,7 +756,7 @@ pre {
   align-items: center;
   gap: 10px 12px;
   min-width: 0;
-  padding: 12px 14px;
+  padding: 10px 12px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--radius-lg);
   background:
@@ -962,6 +977,25 @@ pre {
   padding: 4px 10px;
 }
 
+#btn-close-custom-palette {
+  display: none;
+}
+
+.icon-btn {
+  justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 999px;
+  font-size: 15px;
+  line-height: 1;
+}
+
+.palette-control-stack .icon-btn {
+  margin-left: auto;
+}
+
 .custom-palette-preview {
   height: 20px;
   border: 1px solid var(--border);

public/index.html

@@ -219,6 +219,10 @@ <h2>Source &amp; Performances</h2>
        BARRE DE CONTRÔLES
        ============================================================ -->
       <footer id="controls" role="toolbar" aria-label="Contrôles de rendu">
+        <button id="btn-minimize-controls" class="btn btn-secondary icon-btn controls-minimize-btn" type="button"
+          aria-expanded="true" aria-controls="controls-main" aria-label="Réduire les contrôles" title="Réduire les contrôles">
+          <span aria-hidden="true">▾</span>
+        </button>
         <div id="controls-summary" class="controls-summary hidden">
           <div class="controls-summary-main">
             <span id="controls-summary-fractal" class="controls-summary-fractal">mandelbrot</span>

public/js/renderer.js

@@ -166,6 +166,7 @@ const controlsSummary = document.getElementById("controls-summary");
 const controlsSummaryFractal = document.getElementById("controls-summary-fractal");
 const controlsSummaryDetails = document.getElementById("controls-summary-details");
 const btnToggleControls = document.getElementById("btn-toggle-controls");
+const btnMinimizeControls = document.getElementById("btn-minimize-controls");
 const familySelect = document.getElementById("family-select");
 const fractalSelect = document.getElementById("fractal-select");
 const multibrotPower = document.getElementById("multibrot-power");
@@ -617,7 +618,9 @@ function definirVisibiliteEditeurPalette(forceOuverture) {
   customPaletteControls.classList.toggle("hidden", !afficher);
   toggleCustomPaletteButton.classList.toggle("hidden", !palettePersonnalisee);
   toggleCustomPaletteButton.setAttribute("aria-expanded", afficher ? "true" : "false");
-  toggleCustomPaletteButton.textContent = afficher ? "Reduire" : "Editer";
+  toggleCustomPaletteButton.innerHTML = `<span aria-hidden="true">${afficher ? "▴" : "▾"}</span>`;
+  toggleCustomPaletteButton.setAttribute("aria-label", afficher ? "Réduire la palette personnalisée" : "Afficher la palette personnalisée");
+  toggleCustomPaletteButton.title = afficher ? "Réduire la palette personnalisée" : "Afficher la palette personnalisée";
   if (afficher) rendreEditeurPalette();
 }
 
@@ -651,8 +654,19 @@ function mettreAJourResumeControles() {
 
 function appliquerEtatControles() {
   if (controlsFooter) controlsFooter.classList.toggle("collapsed", controlsCollapsed);
-  if (btnToggleControls) btnToggleControls.setAttribute("aria-expanded", controlsCollapsed ? "false" : "true");
-  if (btnToggleControls) btnToggleControls.textContent = controlsCollapsed ? "Afficher" : "Réduire";
+  if (btnToggleControls) {
+    btnToggleControls.setAttribute("aria-expanded", controlsCollapsed ? "false" : "true");
+    btnToggleControls.textContent = controlsCollapsed ? "Afficher" : "Réduire";
+    btnToggleControls.innerHTML = `<span aria-hidden="true">${controlsCollapsed ? "▴" : "▾"}</span>`;
+    btnToggleControls.setAttribute("aria-label", controlsCollapsed ? "Afficher les contrôles" : "Réduire les contrôles");
+    btnToggleControls.title = controlsCollapsed ? "Afficher les contrôles" : "Réduire les contrôles";
+  }
+  if (btnMinimizeControls) {
+    btnMinimizeControls.setAttribute("aria-expanded", controlsCollapsed ? "false" : "true");
+    btnMinimizeControls.innerHTML = `<span aria-hidden="true">${controlsCollapsed ? "▴" : "▾"}</span>`;
+    btnMinimizeControls.setAttribute("aria-label", controlsCollapsed ? "Afficher les contrôles" : "Réduire les contrôles");
+    btnMinimizeControls.title = controlsCollapsed ? "Afficher les contrôles" : "Réduire les contrôles";
+  }
   if (controlsSummary) controlsSummary.classList.toggle("hidden", false);
   mettreAJourResumeControles();
 }
@@ -2597,6 +2611,13 @@ if (btnToggleControls) {
   btnToggleControls.addEventListener("click", () => {
     definirEtatControles(!controlsCollapsed);
   });
+  btnToggleControls.classList.add("icon-btn");
+}
+
+if (btnMinimizeControls) {
+  btnMinimizeControls.addEventListener("click", () => {
+    definirEtatControles(true);
+  });
 }
 
 multibrotPower.addEventListener("change", () => {
@@ -2623,14 +2644,18 @@ paletteSelect.addEventListener("change", () => {
   render();
 });
 
+toggleCustomPaletteButton.classList.add("icon-btn");
 toggleCustomPaletteButton.addEventListener("click", () => {
   if (params.palette !== "personnalisee") return;
   definirVisibiliteEditeurPalette(!customPaletteEditorOpen);
 });
 
-closeCustomPaletteButton.addEventListener("click", () => {
-  definirVisibiliteEditeurPalette(false);
-});
+if (closeCustomPaletteButton) {
+  closeCustomPaletteButton.classList.add("hidden");
+  closeCustomPaletteButton.addEventListener("click", () => {
+    definirVisibiliteEditeurPalette(false);
+  });
+}
 
 paletteBackgroundInput.addEventListener("input", () => {
   params.palette = "personnalisee";