feat: ordre naturel des sections Configurations et avatar utilisateur #113

docs/GUIDES/API_REST.md

@@ -221,6 +221,10 @@ Gestion :
 | `/api/auth/admin/users/{u}` | Modifier / supprimer | PATCH/DELETE | Admin |
 | `/api/admin/stats` · `/audit` · `/backup-stats` · `/stream` | Monitoring admin | GET | Admin |
 
+> `PATCH /api/auth/me` accepte `{"avatar": "<data-url>"}` (PNG/JPEG/WebP, 400 000
+> caractères max, octets magiques contrôlés) ; `{"avatar": ""}` supprime la photo.
+> La valeur est renvoyée par `GET /api/auth/me` et par le payload `user` du login.
+
 ### 3.10 Partage, webhooks, conflits, plugins, push
 
 | Endpoint | Description | Méthode |

docs/GUIDES/AUTHENTIFICATION_SECURITE.md

@@ -67,6 +67,11 @@ CHANGE THIS PASSWORD on first login!
 
 Changez-le immédiatement (menu profil → *Changer le mot de passe*).
 
+Vous pouvez aussi ajouter une **photo de profil** : *Configurations → Profil →
+Choisir une image* (PNG, JPG ou WEBP, 8 Mo maximum — recadrée en carré 256 px).
+Elle remplace les initiales dans le cercle du compte en bas de la sidebar et peut
+être supprimée à tout moment depuis la même section.
+
 ---
 
 ## 3. Gestion des utilisateurs

docs/GUIDES/PRISE_EN_MAIN.md

@@ -142,6 +142,12 @@ Elle regroupe les vues principales via des icônes :
 Un champ **« Filtrer fichiers… »** restreint l'arborescence en temps réel, et le
 bouton **Aa** ajuste l'affichage des libellés.
 
+En bas de la sidebar (si l'authentification est activée), la **section compte**
+affiche votre avatar (ou vos initiales), votre nom et votre rôle ; un clic ouvre
+le profil. La photo se choisit dans **Configurations → Profil** (*Choisir une
+image* : PNG, JPG ou WEBP — recadrée en carré 256 px, affichée dans le cercle de
+la sidebar) ; le bouton *Se déconnecter* est juste à côté.
+
 ### 5.3 La zone de contenu
 
 Elle affiche l'onglet actif : tableau de bord **Statistiques**, **Bookmarks**,

docs/ROADMAP.md

@@ -1,6 +1,6 @@
 # ObsiGate — Roadmap
 
-> **Version :** 2.21.0 | **Dernière mise à jour :** 2026-09-23
+> **Version :** 2.22.0 | **Dernière mise à jour :** 2026-09-23
 > **Ce fichier ne contient que le travail à venir** (🔵 En cours + ⚪ Backlog) et un index compact
 > vers les fonctionnalités livrées.
 > - **Méthode de livraison à appliquer pour toute tâche : [DELIVERY_WORKFLOW.md](./DELIVERY_WORKFLOW.md)**
@@ -185,6 +185,7 @@
 | 110 | Lecteur média persistant « Now Playing » — élément partagé téléporté (inline ⇄ dock), Media Session, mini-vidéo PiP, mobile, reprise | 2.19.0 | [features/media-viewers-109.md](./features/media-viewers-109.md) |
 | 111 | Visionneuse d'images — navigation fluide : image ajustée au cadre, navigation en place (cache annuaire + préchargement), pellicule persistante, flèches latérales au survol | 2.20.0 | [features/image-navigation-111.md](./features/image-navigation-111.md) |
 | 112 | En-tête allégé & compte en sidebar — version dans le menu Options, retrait utilisateur/déconnexion du header, section compte en bas de la sidebar, pellicule d'images défilable (molette + flèches) | 2.21.0 | [features/header-user-sidebar-112.md](./features/header-user-sidebar-112.md) |
+| 113 | Configuration — ordre naturel des sections (Profil 1er, À propos dernier, TOC = page) & avatar utilisateur (import PNG/JPG/WEBP, persistance serveur, cercle sidebar) | 2.22.0 | [features/settings-order-avatar-113.md](./features/settings-order-avatar-113.md) |
 
 ---
 
@@ -192,7 +193,7 @@
 
 | Priorité | Items | Effort total estimé |
 |---|---|---|
-| ✅ Complété | #1 → #59, #61–72, #74–76, #78–84, #86, #88–93, #94–100, #102–112, #92 | ~130 jours réalisés |
+| ✅ Complété | #1 → #59, #61–72, #74–76, #78–84, #86, #88–93, #94–100, #102–113, #92 | ~131 jours réalisés |
 | 🔵 P2 restant | #77 Desktop : signature de code (non retenue), 6 tests E2E **manuels** ([protocole](./DESKTOP_E2E_CHECKLIST.md)) | ~0,5-1 jour |
 | ⚪ P4 restant | #73 Sync (6-8j) | 6-8 jours |
 | ⚪ P0/P1 restant | #85, #87 Refonte architecturale, CI/CD (BUG-035 → BUG-040 corrigés, #86 livré) | ~11-17 jours |

docs/features/settings-order-avatar-113.md

@@ -0,0 +1,94 @@
+# #113 — Ordre naturel des sections Configurations & avatar utilisateur
+
+> **Version livrée :** 2.22.0 · **Statut :** 🟢 · **Impact :** 🟡
+> **Zone :** frontend (`index.html`, `frontend/js/config.js`, `frontend/js/auth.js`,
+> `frontend/style.css`, i18n FR/EN) + backend (`backend/auth/router.py`,
+> `backend/auth/user_store.py`) + CI (`.gitea/workflows/ci.yml`).
+
+## Contexte
+
+Deux irritants sur la page **Configurations** :
+
+- l'ordre des sections était historique et peu naturel (Recherche en tête, Profil
+  noyé en position 11, À propos au milieu) ;
+- la section **Profil** ne permettait pas de personnaliser l'image affichée dans le
+  cercle du compte en bas de la sidebar (initiales uniquement).
+
+## Ce qui a été livré
+
+### A. Ordre naturel des sections (TOC = page)
+
+Nouvel ordre, appliqué **à la liste `<ul class="help-nav-list">` (TOC) et aux
+`<section>` de la page**, dans le même ordre :
+
+1. **Profil** (`#cfg-profile`) — en premier
+2. Sécurité du compte (`#cfg-security`)
+3. Thèmes (`#cfg-themes`)
+4. Paramètres de recherche (`#cfg-search`)
+5. Historique récent (`#cfg-recent`)
+6. Filtrage de tags (`#cfg-tags`)
+7. Fichiers cachés (`#cfg-hidden-files`)
+8. Synchronisation (`#cfg-sync`)
+9. Paramètres backend (`#cfg-backend-settings`)
+10. Diagnostics (`#cfg-diags`)
+11. Clés API IA (`#cfg-ai`)
+12. Sources connectées (`#cfg-sources`)
+13. Clés API & MCP (`#cfg-tokens`)
+14. Notifications push (`#cfg-push`)
+15. Webhooks (`#cfg-webhooks`)
+16. Partages publics (`#cfg-partages-publics`)
+17. Plugins (`#cfg-plugins`)
+18. **À propos** (`#cfg-about`) — en dernier
+
+Regroupement retenu : **Compte & apparence → Navigation & contenu → Système →
+Intégrations & notifications → À propos**.
+
+Les ancres `cfg-tags` et `cfg-partages-publics` étaient posées sur un `<h2>` à
+l'intérieur d'une `<section>` sans id : elles sont désormais portées par la
+`<section>` elle-même, pour que le scroll vise le haut de la section (comme toutes
+les autres).
+
+### B. Avatar utilisateur ( Profil )
+
+- **Import d'image** : bouton « Choisir une image » + overlay caméra au survol de
+  l'aperçu circulaire (88 px) → `<input type="file" accept="image/png,image/jpeg,image/webp">`.
+- **Traitement client** (`config.js`) : garde type (PNG/JPEG/WEBP) et taille brute
+  (8 Mo), **recadrage carré central** et redimensionnement à **256 px** via canvas,
+  export JPEG qualitée 0,85 (fond blanc pour les PNG transparents).
+- **Persistance serveur** : `PATCH /api/auth/me` avec `{"avatar": "<data-url>"}` ;
+  `""` supprime. Validation stricte dans `backend/auth/router.py`
+  (`_validate_avatar`) : data-URL PNG/JPEG/WebP uniquement (**SVG refusé** — surface
+  XSS), plafond 400 000 caractères, base64 valide et **octets magiques** contrôlés.
+  Champ `avatar` ajouté à `data/users.json` (`create_user`), renvoyé par
+  `GET/PATCH /api/auth/me` et par le payload `user` de login.
+- **Affichage sidebar** (`auth.js`) : `renderUserSection()` insère un
+  `<img class="sidebar-user-avatar-img">` dans `#sidebar-user-avatar` quand
+  `user.avatar` est défini, sinon les initiales (repli inchangé). Helpers
+  `AuthManager.updateCachedUser()` et `AuthManager.isAuthEnabled()`.
+- **Suppression** : bouton « Supprimer la photo » (stylisté danger), revenu aux
+  initiales.
+- **Auth désactivée** : le bloc avatar est masqué (pas de compte, sidebar masquée).
+- Feedback : toasts `config.avatar_updated` / `config.avatar_removed`, erreurs en
+  ligne (`config.avatar_invalid_type`, `config.avatar_too_large`,
+  `config.avatar_upload_failed`).
+
+## Tests
+
+- `tests/test_auth_api.py` — classe `TestAvatar` (+8) : GET/PATCH exposent
+  l'avatar, data-URL PNG acceptée, `""` efface, SVG refusé, payload non-image refusé,
+  trop grand refusé, base64 invalide refusé, avatar présent dans le payload de login.
+- `tests/frontend/settings-order-avatar.test.mjs` (nouveau, ajouté au job `lint`) —
+  9 tests : ordre TOC (Profil 1er, À propos dernier), ordre de page strictement
+  identique à la TOC, aucune ancre morte / section orpheline, présence de l'UI avatar
+  dans `#cfg-profile`, flux `config.js` (types, taille, resize, PATCH, rafraîchissement
+  sidebar), rendu `auth.js`, règles CSS, clés i18n FR/EN, validation backend.
+- Vérifications locales : pytest 1302 passed, ruff/mypy 0 erreur, tests frontend
+  statiques + JSDOM verts.
+
+## Limitations connues
+
+- L'avatar est stocké en data-URL dans `data/users.json` (adéquat pour un usage
+  personnel ; un stockage fichier dédié restera possible si les comptes se multiplient).
+- La conversion GIF/animé n'est pas prise en charge (types PNG/JPEG/WEBP uniquement).
+- Le nom d'affichage du profil reste local (`localStorage`) et n'est pas poussé au
+  serveur (comportement antérieur conservé).