From 602a673ca19e54d379e34547ae49b313fb415193 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Fri, 19 Jun 2026 22:11:49 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20rebuild=20settings=20area=20=E2=80=94=20?=
 =?UTF-8?q?Webhooks+Shares=20after=20Hidden,=20all=20sections=20visible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Python section extraction/reorder by HTML comment markers
- Order: Search, Recent, Backend, Tags, Sync, Hidden, Webhooks, Shares, Diags, AI, Themes, Profile, About
- All 13 IDs present, TOC rebuilt
---
 frontend/index.html | 378 ++++++++++++++++++++++----------------------
 1 file changed, 189 insertions(+), 189 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 94adb63..b350a4f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1825,7 +1825,7 @@
 
                             <!-- Hidden Files/Folders Configuration -->
                             <section class="config-section help-section">
-                                <h2 id="cfg-hidden-files" data-i18n="auto.f8ba6127">🗂️ Fichiers cachés</h2>
+                                <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,8 +1863,9 @@
                                 </div>
                             </section>
 
-                            <!-- Diagnostics -->
-                            <section
+                            <!-- Webhooks -->
+                            <section id="cfg-webhooks" class="config-section help-section">
+                                <h2>🔔 Webhooks</h2>
                                 <p class="config-description">
                                     Notifications HTTP vers des services
                                     externes lors des changements de fichiers.
@@ -1910,191 +1911,6 @@
         <!-- Graph View Modal -->
         <div class="editor-modal" id="graph-modal">
             <div
-                                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>
                 class="editor-container"
                 style="
                     max-width: 95vw;
@@ -4569,7 +4385,191 @@ 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>
+                        </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>
+
+                            
 
                         <div class="help-footer">
                             <p>