From 2a8bd44a06fac332064d0b6b3c057d5ff0905406 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Fri, 19 Jun 2026 22:46:12 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20clean=20base=20+=20IDs=20only=20?=
 =?UTF-8?q?=E2=80=94=20no=20section=20moves,=20all=2013=20links=20function?=
 =?UTF-8?q?al?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Restored from 8db9f44 (pristine original)
- Added IDs only (cfg-recent, cfg-backend-settings, cfg-hidden-files, cfg-webhooks, cfg-partages-publics, cfg-tags, cfg-performance)
- TOC order matches original section order
- No section reordering (avoids DOM breakage)
---
 frontend/index.html | 432 +++++++++++++++++++++-----------------------
 1 file changed, 203 insertions(+), 229 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 2c571d6..b3073a5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1369,46 +1369,20 @@
                             </button>
                         </div>
                         <ul class="help-nav-list">
-                                <li>
-                                    <a href="#cfg-search" class="help-nav-link" data-i18n="help.nav_search"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-recent" class="help-nav-link" data-i18n="config.section_recent"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-backend-settings" class="help-nav-link" data-i18n="config.section_backend"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-tags" class="help-nav-link" data-i18n="config.section_tags"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-sync" class="help-nav-link" data-i18n="settings.sync"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-hidden-files" class="help-nav-link" data-i18n="config.section_hidden"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-webhooks" class="help-nav-link" data-i18n="config.section_webhooks"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-partages-publics" class="help-nav-link" data-i18n="config.section_shares"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-diags" class="help-nav-link" data-i18n="settings.diagnostics"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-ai" class="help-nav-link" data-i18n="settings.ai"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-themes" class="help-nav-link" data-i18n="settings.themes"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-profile" class="help-nav-link" data-i18n="settings.profile"></a>
-                                </li>
-                                <li>
-                                    <a href="#cfg-about" class="help-nav-link" data-i18n="settings.about"></a>
-                                </li>
-                            </ul>
+<li><a href="#cfg-search" class="help-nav-link" data-i18n="help.nav_search"></a></li>
+<li><a href="#cfg-recent" class="help-nav-link" data-i18n="config.section_recent"></a></li>
+<li><a href="#cfg-backend-settings" class="help-nav-link" data-i18n="config.section_backend"></a></li>
+<li><a href="#cfg-tags" class="help-nav-link" data-i18n="config.section_tags"></a></li>
+<li><a href="#cfg-sync" class="help-nav-link" data-i18n="settings.sync"></a></li>
+<li><a href="#cfg-hidden-files" class="help-nav-link" data-i18n="config.section_hidden"></a></li>
+<li><a href="#cfg-diags" class="help-nav-link" data-i18n="settings.diagnostics"></a></li>
+<li><a href="#cfg-ai" class="help-nav-link" data-i18n="settings.ai"></a></li>
+<li><a href="#cfg-themes" class="help-nav-link" data-i18n="settings.themes"></a></li>
+<li><a href="#cfg-profile" class="help-nav-link" data-i18n="settings.profile"></a></li>
+<li><a href="#cfg-about" class="help-nav-link" data-i18n="settings.about"></a></li>
+<li><a href="#cfg-webhooks" class="help-nav-link" data-i18n="config.section_webhooks"></a></li>
+<li><a href="#cfg-partages-publics" class="help-nav-link" data-i18n="config.section_shares"></a></li>
+</ul>
                     </nav>
                     <div class="help-content" id="config-scroll">
                         <div class="config-content">
@@ -1824,8 +1798,8 @@
                             </section>
 
                             <!-- Hidden Files/Folders Configuration -->
-                            <section class="config-section help-section">
-                                <h2 id="cfg-hidden-files" data-i18n="auto.f8ba6127">🗂️ Fichiers cachés</h2>
+                            <section id="cfg-hidden-files" class="config-section help-section">
+                                <h2 data-i18n="auto.f8ba6127">🗂️ Fichiers cachés</h2>
                                 <p class="config-description">
                                     Contrôlez l'affichage des fichiers/dossiers
                                     cachés (commençant par <code>.</code>) par
@@ -1863,6 +1837,190 @@
                                 </div>
                             </section>
 
+                            <!-- Diagnostics -->
+                            <section
+                                class="config-section help-section"
+                                id="cfg-diags"
+                            >
+                                <h2 data-i18n="config.diagnostics">Diagnostics</h2>
+                                <p class="config-description">
+                                    Statistiques de l'index et du moteur de
+                                    recherche.
+                                </p>
+                                <div
+                                    id="config-diagnostics"
+                                    class="config-diagnostics"
+                                >
+                                    <div class="config-diag-loading" data-i18n="common.loading">
+                                        Chargement...
+                                    </div>
+                                </div>
+                                <button class="config-btn-secondary"
+                                    id="cfg-refresh-diag"
+                                    style="margin-top: 8px" data-i18n="header.refresh">
+                                    Rafraîchir
+                                </button>
+                            </section>
+
+                            <!-- Cles API AI -->
+                            <section
+                                class="config-section help-section"
+                                id="cfg-ai"
+                            >
+                                <h2>🤖 Cles API Intelligence Artificielle</h2>
+                                <p class="config-description">
+                                    Configurez vos cles API. Cliquez sur
+                                    <strong data-i18n="config.test">Tester</strong> pour charger les
+                                    modeles.
+                                </p>
+                                <div class="config-row">
+                                    <label
+                                        class="config-label"
+                                        for="cfg-deepseek-key"
+                                        >DeepSeek API Key</label
+                                    >
+                                    <input
+                                        type="password"
+                                        id="cfg-deepseek-key"
+                                        class="config-input"
+                                        placeholder="sk-..."
+                                        autocomplete="off"
+                                    />
+                                    <select
+                                        id="cfg-deepseek-model"
+                                        class="config-select"
+                                        style="width: 200px"
+                                    >
+                                        <option value="">-- Modele --</option>
+                                    </select>
+                                </div>
+                                <div class="config-row">
+                                    <label
+                                        class="config-label"
+                                        for="cfg-openrouter-key"
+                                        >OpenRouter API Key</label
+                                    >
+                                    <input
+                                        type="password"
+                                        id="cfg-openrouter-key"
+                                        class="config-input"
+                                        placeholder="sk-or-..."
+                                        autocomplete="off"
+                                    />
+                                    <select
+                                        id="cfg-openrouter-model"
+                                        class="config-select"
+                                        style="width: 200px"
+                                    >
+                                        <option value="">-- Modele --</option>
+                                    </select>
+                                </div>
+                                <div class="config-row">
+                                    <label
+                                        class="config-label"
+                                        for="cfg-gemini-key"
+                                        >Gemini API Key</label
+                                    >
+                                    <input
+                                        type="password"
+                                        id="cfg-gemini-key"
+                                        class="config-input"
+                                        placeholder="AIza..."
+                                        autocomplete="off"
+                                    />
+                                    <select
+                                        id="cfg-gemini-model"
+                                        class="config-select"
+                                        style="width: 200px"
+                                    >
+                                        <option value="">-- Modele --</option>
+                                    </select>
+                                </div>
+                                <div
+                                    class="config-actions-row"
+                                    style="margin-top: 16px"
+                                >
+                                    <button class="config-btn-save"
+                                        id="cfg-save-ai-keys" data-i18n="help.shortcut_save">
+                                        Sauvegarder
+                                    </button>
+                                    <button class="config-btn-secondary"
+                                        id="cfg-test-ai-keys" data-i18n="config.test">
+                                        Tester
+                                    </button>
+                                    <span
+                                        id="cfg-ai-status"
+                                        style="
+                                            font-size: 12px;
+                                            color: var(--text-muted);
+                                            margin-left: 12px;
+                                        "
+                                    ></span>
+                                </div>
+                            </section>
+
+                            <!-- Themes -->
+                            <section
+                                class="config-section help-section"
+                                id="cfg-themes"
+                            >
+                                <h2 data-i18n="auto.c14b5603">🎨 Thèmes</h2>
+                                <p class="config-description" data-i18n="auto.caac40b9">
+                                    Choisissez un thème visuel. Chaque thème
+                                    offre un mode sombre et clair.
+                                </p>
+                                <div class="theme-grid" id="theme-grid">
+                                    <div class="config-diag-loading" data-i18n="common.loading">Chargement...</div>
+                                </div>
+                            </section>
+
+                            <!-- Profil -->
+                            <section
+                                class="config-section help-section"
+                                id="cfg-profile"
+                            >
+                                <h2 data-i18n="config.profile">👤 Profil utilisateur</h2>
+                                <p class="config-description" data-i18n="config.profile_desc">
+                                    Préférences personnelles pour personnaliser
+                                    l'expérience ObsiGate.
+                                </p>
+                                <div class="profile-form" id="profile-form">
+                                    <div class="profile-field">
+                                        <label for="profile-lang" data-i18n="config.lang_label">Langue préférée</label>
+                                        <select id="profile-lang" class="config-select">
+                                            <option value="fr">Francais</option>
+                                            <option value="en">English</option>
+                                            <option value="es">Espanol</option>
+                                            <option value="de">Deutsch</option>
+                                        </select>
+                                        <span class="profile-hint" data-i18n="config.lang_hint">Utilisée par l'autocomplétion et le ghost text.</span>
+                                    </div>
+                                    <div class="profile-field">
+                                        <label for="profile-name" data-i18n="config.display_name">Nom d'affichage</label>
+                                        <input type="text" id="profile-name" class="config-input" placeholder="Votre nom" maxlength="60">
+                                    </div>
+                                    <button class="config-save-btn" id="profile-save" data-i18n="config.save">Enregistrer</button>
+                                    <button class="config-save-btn" id="profile-logout" style="background:var(--danger-bg);color:var(--danger);border-color:var(--danger);margin-left:8px" data-i18n="config.logout">Déconnexion</button>
+                                    <span class="profile-saved" id="profile-saved" style="display:none" data-i18n="config.saved">✓ Sauvegardé</span>
+                                </div>
+                            </section>
+
+                            <!-- À propos -->
+                            <section
+                                class="config-section help-section"
+                                id="cfg-about"
+                            >
+                                <h2 data-i18n="auto.a3319169">📦 À propos</h2>
+                                <div
+                                    id="config-about"
+                                    class="config-diagnostics"
+                                >
+                                    <div class="config-diag-loading" data-i18n="common.loading">
+                                        Chargement...
+                                    </div>
+                                </div>
+                            </section>
+
                             <!-- Webhooks -->
                             <section id="cfg-webhooks" class="config-section help-section">
                                 <h2>🔔 Webhooks</h2>
@@ -1894,8 +2052,8 @@
                             </section>
 
                             <!-- Partages publics -->
-                            <section id="cfg-partages-publics" class="config-section help-section">
-                                <h2>📤 Partages publics</h2>
+                            <section class="config-section help-section">
+                                <h2 id="cfg-partages-publics">📤 Partages publics</h2>
                                 <p class="config-description">
                                     Liens de partage publics pour des documents
                                     (lecture seule, sans authentification).
@@ -4385,191 +4543,7 @@ curl -X POST https://votre-serveur.com/webhook \
                                     <strong data-i18n="auto.79f6e1dd">Multi-fenêtres</strong><span data-i18n="help.desc_9cb5974c"> : Ouvrez
                                     plusieurs notes dans des onglets séparés</span></li>
                             </ul>
-                        </section><!-- Diagnostics -->
-                            <section
-                                class="config-section help-section"
-                                id="cfg-diags"
-                            >
-                                <h2 data-i18n="config.diagnostics">Diagnostics</h2>
-                                <p class="config-description">
-                                    Statistiques de l'index et du moteur de
-                                    recherche.
-                                </p>
-                                <div
-                                    id="config-diagnostics"
-                                    class="config-diagnostics"
-                                >
-                                    <div class="config-diag-loading" data-i18n="common.loading">
-                                        Chargement...
-                                    </div>
-                                </div>
-                                <button class="config-btn-secondary"
-                                    id="cfg-refresh-diag"
-                                    style="margin-top: 8px" data-i18n="header.refresh">
-                                    Rafraîchir
-                                </button>
-                            </section>
-
-                            <!-- Cles API AI -->
-                            <section
-                                class="config-section help-section"
-                                id="cfg-ai"
-                            >
-                                <h2>🤖 Cles API Intelligence Artificielle</h2>
-                                <p class="config-description">
-                                    Configurez vos cles API. Cliquez sur
-                                    <strong data-i18n="config.test">Tester</strong> pour charger les
-                                    modeles.
-                                </p>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-deepseek-key"
-                                        >DeepSeek API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-deepseek-key"
-                                        class="config-input"
-                                        placeholder="sk-..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-deepseek-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-openrouter-key"
-                                        >OpenRouter API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-openrouter-key"
-                                        class="config-input"
-                                        placeholder="sk-or-..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-openrouter-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-gemini-key"
-                                        >Gemini API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-gemini-key"
-                                        class="config-input"
-                                        placeholder="AIza..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-gemini-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div
-                                    class="config-actions-row"
-                                    style="margin-top: 16px"
-                                >
-                                    <button class="config-btn-save"
-                                        id="cfg-save-ai-keys" data-i18n="help.shortcut_save">
-                                        Sauvegarder
-                                    </button>
-                                    <button class="config-btn-secondary"
-                                        id="cfg-test-ai-keys" data-i18n="config.test">
-                                        Tester
-                                    </button>
-                                    <span
-                                        id="cfg-ai-status"
-                                        style="
-                                            font-size: 12px;
-                                            color: var(--text-muted);
-                                            margin-left: 12px;
-                                        "
-                                    ></span>
-                                </div>
-                            </section>
-
-                            <!-- Themes -->
-                            <section
-                                class="config-section help-section"
-                                id="cfg-themes"
-                            >
-                                <h2 data-i18n="auto.c14b5603">🎨 Thèmes</h2>
-                                <p class="config-description" data-i18n="auto.caac40b9">
-                                    Choisissez un thème visuel. Chaque thème
-                                    offre un mode sombre et clair.
-                                </p>
-                                <div class="theme-grid" id="theme-grid">
-                                    <div class="config-diag-loading" data-i18n="common.loading">Chargement...</div>
-                                </div>
-                            </section>
-
-                            <!-- Profil -->
-                            <section
-                                class="config-section help-section"
-                                id="cfg-profile"
-                            >
-                                <h2 data-i18n="config.profile">👤 Profil utilisateur</h2>
-                                <p class="config-description" data-i18n="config.profile_desc">
-                                    Préférences personnelles pour personnaliser
-                                    l'expérience ObsiGate.
-                                </p>
-                                <div class="profile-form" id="profile-form">
-                                    <div class="profile-field">
-                                        <label for="profile-lang" data-i18n="config.lang_label">Langue préférée</label>
-                                        <select id="profile-lang" class="config-select">
-                                            <option value="fr">Francais</option>
-                                            <option value="en">English</option>
-                                            <option value="es">Espanol</option>
-                                            <option value="de">Deutsch</option>
-                                        </select>
-                                        <span class="profile-hint" data-i18n="config.lang_hint">Utilisée par l'autocomplétion et le ghost text.</span>
-                                    </div>
-                                    <div class="profile-field">
-                                        <label for="profile-name" data-i18n="config.display_name">Nom d'affichage</label>
-                                        <input type="text" id="profile-name" class="config-input" placeholder="Votre nom" maxlength="60">
-                                    </div>
-                                    <button class="config-save-btn" id="profile-save" data-i18n="config.save">Enregistrer</button>
-                                    <button class="config-save-btn" id="profile-logout" style="background:var(--danger-bg);color:var(--danger);border-color:var(--danger);margin-left:8px" data-i18n="config.logout">Déconnexion</button>
-                                    <span class="profile-saved" id="profile-saved" style="display:none" data-i18n="config.saved">✓ Sauvegardé</span>
-                                </div>
-                            </section>
-
-                            <!-- À propos -->
-                            <section
-                                class="config-section help-section"
-                                id="cfg-about"
-                            >
-                                <h2 data-i18n="auto.a3319169">📦 À propos</h2>
-                                <div
-                                    id="config-about"
-                                    class="config-diagnostics"
-                                >
-                                    <div class="config-diag-loading" data-i18n="common.loading">
-                                        Chargement...
-                                    </div>
-                                </div>
-                            </section>
-
-                            
+                        </section>
 
                         <div class="help-footer">
                             <p>