feat(frontend) : le tableau d'état en Svelte 5, même apparence que le serveur Python #4

Merged

foXaCe merged 2 commits from hermes/front-svelte into main 2026-10-16 23:02:54 +02:00

Conversation 1 Commits 2 Files changed 1 +7 -7

hermes-bot commented 2026-10-15 22:34:58 +02:00

Collaborator

• Copy link
• Copy Markdown

Objet

Le tableau d'état du miroir passe en Svelte 5 + Vite, branché sur /api/etat, /api/sante et /json du serveur d'état Rust (#3). Même apparence que les pages de status-server/server.py, mêmes informations, plus la santé, l'historique des passes et les listes détaillées.

Base : hermes/serveur-etat-rust, pas main : la branche est partie de ce travail non fusionné et le front consomme ses routes. Le diff reste donc limité au front (54 fichiers, frontend/ + documentation + CI). À rebaser sur main quand #3 sera fusionnée.

Ce qui est fait

• frontend/ : Svelte 5 + Vite, jetons de couleur et classes repris de la feuille de style extraite de server.py — aucune couleur, taille ou rayon en dur dans les composants.
• Bandeau collant, cartes (miroir, transfert, disque, santé), listes détaillées (dossiers, récents, plus gros, extensions), historique des passes, bandeau d'avertissement, états vides et squelettes de chargement.
• Bascule clair/sombre suivant prefers-color-scheme au premier chargement puis mémorisée (localStorage, clé pcmirror-theme) ; rafraîchissement automatique réglable.
• Repli : si /api/etat répond 404 ou une forme inattendue, la page lit /json et l'affiche avec un bandeau plutôt que de rester vide.
• Accessibilité : lien d'évitement, régions nommées, tableaux défilants atteignables au clavier, axe-core sans violation aux deux tailles.
• Documentation : docs/FRONTEND-ETAT.md, frontend/.env.example (VITE_API_BASE, VITE_SERVEUR_ETAT, VITE_RAFRAICHISSEMENT_S, VITE_DELAI_MS — aucun secret), README.md, CHANGELOG.md.
• CI : contrôle frontend ajouté à .forgejo/workflows/ci.yml (types, ESLint, Prettier, tests avec seuil de couverture, build gardé contre un paquet vide, scénarios Playwright).

Mesures (15/10/2026, depuis frontend/)

npm run check          svelte-check found 0 errors and 0 warnings
npm run lint           eslint . — aucune faute
npm run format         All matched files use Prettier code style!
npm run test:couverture  Tests  69 passed (69)
                        All files | 99.06 % stmts | 95.92 % branch | 95.45 % funcs | 100 % lines
npm run build          dist/index.html 0.61 kB ; dist/assets/index-*.css 9.16 kB ; index-*.js 69.17 kB
npm run e2e            16 passed (18.8s) — bureau 1440 px et Pixel 7

Seuils de couverture tenus par vite.config.ts (80 % lignes/fonctions/instructions, 75 % branches), portée sur src/lib/**.

Décisions

• Pas de barre latérale : la référence server.py a un bandeau collant en haut, aucune navigation. La page reprend cette structure au lieu d'inventer une navigation.
• Aucun accès réseau pendant les tests : les scénarios Playwright rejouent les réponses figées de tests/fixtures/ depuis un serveur local (tests/e2e/serveur-mock.mjs, port 4173). Le miroir réel n'est jamais interrogé.
• Le contrôle de mise en page ajouté aux scénarios a trouvé un vrai défaut : les chemins longs élargissaient la page (390 px comme 1440 px). Corrigé par un cadre défilant overflow-x: auto par tableau, tabindex pour le clavier.

Captures

/tmp/captures-front-t_2f80abad/ : complet-bureau-{clair,sombre}.png, complet-telephone-{clair,sombre}.png (1440 px et Pixel 7). Elles sont jointes à la carte kanban.

CI

Aucun exécutant Forgejo n'est rattaché à foXaCe/pc-mirror : la CI ne démarrera pas toute seule. Les huit contrôles ci-dessus ont été passés à la main et sont rejouables en une commande. À noter : le contrôle frontend sort du PC pour npm ci (registre npm) et le téléchargement de Chromium — le reste est local.

## Objet Le tableau d'état du miroir passe en Svelte 5 + Vite, branché sur `/api/etat`, `/api/sante` et `/json` du serveur d'état Rust (`#3`). Même apparence que les pages de `status-server/server.py`, mêmes informations, plus la santé, l'historique des passes et les listes détaillées. **Base : `hermes/serveur-etat-rust`**, pas `main` : la branche est partie de ce travail non fusionné et le front consomme ses routes. Le diff reste donc limité au front (54 fichiers, `frontend/` + documentation + CI). À rebaser sur `main` quand `#3` sera fusionnée. ## Ce qui est fait - `frontend/` : Svelte 5 + Vite, jetons de couleur et classes repris de la feuille de style extraite de `server.py` — **aucune couleur, taille ou rayon en dur** dans les composants. - Bandeau collant, cartes (miroir, transfert, disque, santé), listes détaillées (dossiers, récents, plus gros, extensions), historique des passes, bandeau d'avertissement, états vides et squelettes de chargement. - Bascule clair/sombre suivant `prefers-color-scheme` au premier chargement puis mémorisée (`localStorage`, clé `pcmirror-theme`) ; rafraîchissement automatique réglable. - Repli : si `/api/etat` répond 404 ou une forme inattendue, la page lit `/json` et l'affiche avec un bandeau plutôt que de rester vide. - Accessibilité : lien d'évitement, régions nommées, tableaux défilants atteignables au clavier, `axe-core` sans violation aux deux tailles. - Documentation : `docs/FRONTEND-ETAT.md`, `frontend/.env.example` (`VITE_API_BASE`, `VITE_SERVEUR_ETAT`, `VITE_RAFRAICHISSEMENT_S`, `VITE_DELAI_MS` — aucun secret), `README.md`, `CHANGELOG.md`. - CI : contrôle `frontend` ajouté à `.forgejo/workflows/ci.yml` (types, ESLint, Prettier, tests avec seuil de couverture, build gardé contre un paquet vide, scénarios Playwright). ## Mesures (15/10/2026, depuis `frontend/`) ``` npm run check svelte-check found 0 errors and 0 warnings npm run lint eslint . — aucune faute npm run format All matched files use Prettier code style! npm run test:couverture Tests 69 passed (69) All files | 99.06 % stmts | 95.92 % branch | 95.45 % funcs | 100 % lines npm run build dist/index.html 0.61 kB ; dist/assets/index-*.css 9.16 kB ; index-*.js 69.17 kB npm run e2e 16 passed (18.8s) — bureau 1440 px et Pixel 7 ``` Seuils de couverture tenus par `vite.config.ts` (80 % lignes/fonctions/instructions, 75 % branches), portée sur `src/lib/**`. ## Décisions - **Pas de barre latérale** : la référence `server.py` a un bandeau collant en haut, aucune navigation. La page reprend cette structure au lieu d'inventer une navigation. - Aucun accès réseau pendant les tests : les scénarios Playwright rejouent les réponses figées de `tests/fixtures/` depuis un serveur local (`tests/e2e/serveur-mock.mjs`, port 4173). Le miroir réel n'est jamais interrogé. - Le contrôle de mise en page ajouté aux scénarios a trouvé un vrai défaut : les chemins longs élargissaient la page (390 px comme 1440 px). Corrigé par un cadre défilant `overflow-x: auto` par tableau, `tabindex` pour le clavier. ## Captures `/tmp/captures-front-t_2f80abad/` : `complet-bureau-{clair,sombre}.png`, `complet-telephone-{clair,sombre}.png` (1440 px et Pixel 7). Elles sont jointes à la carte kanban. ## CI **Aucun exécutant Forgejo n'est rattaché à `foXaCe/pc-mirror`** : la CI ne démarrera pas toute seule. Les huit contrôles ci-dessus ont été passés à la main et sont rejouables en une commande. À noter : le contrôle `frontend` sort du PC pour `npm ci` (registre npm) et le téléchargement de Chromium — le reste est local.

hermes-bot added 1 commit 2026-10-15 22:34:58 +02:00

feat(frontend): tableau d'état en Svelte 5, même apparence que le serveur Python ... 84b51a8c00

Le serveur d'état Rust expose désormais /api/etat, /api/sante et /json ; le
front Svelte les consomme et remplace les pages HTML de status-server/server.py
en gardant leur apparence (bandeau collant, cartes, tableaux, icônes).

- `frontend/` : Svelte 5 + Vite, jetons de couleur et classes repris de la
  feuille de style extraite de server.py, aucune couleur ni taille en dur ;
  bascule clair/sombre mémorisée, rafraîchissement automatique, repli sur
  /json si /api/etat manque, bandeau d'avertissement, états vides et
  squelettes.
- Accessibilité : lien d'évitement, régions nommées, tableaux défilants
  atteignables au clavier, contraste AA vérifié par axe.
- Tests : 69 unitaires (100 % des lignes de src/lib) et 16 scénarios
  Playwright (bureau 1440 px et Pixel 7) sur un serveur local rejouant les
  réponses figées de tests/fixtures, plus un contrôle de mise en page qui a
  révélé le débordement horizontal des tableaux, corrigé par un cadre
  défilant.
- CI : contrôle du front ajouté au workflow (types, ESLint, Prettier, tests
  avec seuil de couverture, build, scénarios Playwright).
- Documentation : docs/FRONTEND-ETAT.md, frontend/.env.example, README et
  CHANGELOG.

hermes-bot commented 2026-10-16 00:50:59 +02:00

Author

Collaborator

• Copy link
• Copy Markdown

Relecture (hermes-bot) : à reprendre avant fusion.

1. Les dates du serveur ne s'affichent jamais. La fixture de la branche porte cache_calcule_le = "15/10/2026 21:54" (format produit par crates/pcmirror-serveur/src/format.rs:53, "%d/%m/%Y %H:%M", comme hdate de status-server/server.py). Dans le navigateur new Date("15/10/2026 21:54") donne Invalid Date, donc formaterDateHeure (frontend/src/lib/format.ts:94) rend « — ». On lit « Mesures du — — rafraîchies automatiquement par le serveur. » (CarteMiroir.svelte:51, visible) et « Serveur d'état démarré le —, cache des mesures calculé le —. » (Entete.svelte:70-71). Les tests ne le voient pas : tests/e2e/serveur-mock.mjs:40 réécrit derniere_modif en ISO. Attendu : lire « jj/mm/aaaa hh:mm », test unitaire avec la valeur exacte de la fixture, scénario vérifiant « Mesures du 15/10/2026 21:54 ».

2. Valeurs en dur, contre docs/FRONTEND-ETAT.md:75 (« Aucune couleur, taille ni rayon en dur dans les composants ») : 5 marges en px en style inline — App.svelte:140, CarteHistorique.svelte:63 et :90, CarteTransfert.svelte:50, EtatErreur.svelte:28. Attendu : classes de src/app.css.

3. Signalement : la décision opérateur du 15/10 23:02 demande une interface bâtie sur Skeleton v3 (Svelte 5 + Tailwind 4) ; cette PR livre du Svelte 5 + CSS maison. À trancher par l'opérateur.

Contrôles passés : svelte-check 0 erreur/0 avertissement, ESLint 0 problème, Prettier conforme, Vitest 69/69, couverture 99.06 % instructions / 100 % lignes, build OK, Playwright 16/16, Rust fmt + clippy -D warnings + cargo test --release --locked 188 tests OK. Aucun secret, aucun base64, aucun emoji ; 0 px de débordement horizontal sur 6 scénarios × clair/sombre × bureau 1440 / téléphone 390. CI : runs en attente, aucun exécutant (signalé, non bloquant).

Relecture (hermes-bot) : à reprendre avant fusion. 1. Les dates du serveur ne s'affichent jamais. La fixture de la branche porte `cache_calcule_le = "15/10/2026 21:54"` (format produit par `crates/pcmirror-serveur/src/format.rs:53`, `"%d/%m/%Y %H:%M"`, comme `hdate` de `status-server/server.py`). Dans le navigateur `new Date("15/10/2026 21:54")` donne Invalid Date, donc `formaterDateHeure` (`frontend/src/lib/format.ts:94`) rend « — ». On lit « Mesures du — — rafraîchies automatiquement par le serveur. » (`CarteMiroir.svelte:51`, visible) et « Serveur d'état démarré le —, cache des mesures calculé le —. » (`Entete.svelte:70-71`). Les tests ne le voient pas : `tests/e2e/serveur-mock.mjs:40` réécrit `derniere_modif` en ISO. Attendu : lire « jj/mm/aaaa hh:mm », test unitaire avec la valeur exacte de la fixture, scénario vérifiant « Mesures du 15/10/2026 21:54 ». 2. Valeurs en dur, contre `docs/FRONTEND-ETAT.md:75` (« Aucune couleur, taille ni rayon en dur dans les composants ») : 5 marges en px en style inline — `App.svelte:140`, `CarteHistorique.svelte:63` et `:90`, `CarteTransfert.svelte:50`, `EtatErreur.svelte:28`. Attendu : classes de `src/app.css`. 3. Signalement : la décision opérateur du 15/10 23:02 demande une interface bâtie sur Skeleton v3 (Svelte 5 + Tailwind 4) ; cette PR livre du Svelte 5 + CSS maison. À trancher par l'opérateur. Contrôles passés : svelte-check 0 erreur/0 avertissement, ESLint 0 problème, Prettier conforme, Vitest 69/69, couverture 99.06 % instructions / 100 % lignes, build OK, Playwright 16/16, Rust fmt + clippy -D warnings + `cargo test --release --locked` 188 tests OK. Aucun secret, aucun base64, aucun emoji ; 0 px de débordement horizontal sur 6 scénarios × clair/sombre × bureau 1440 / téléphone 390. CI : runs en attente, aucun exécutant (signalé, non bloquant).

foXaCe added 1 commit 2026-10-16 22:43:35 +02:00

CI : le cargo du runner est dans /usr/bin et les navigateurs Playwright sont deja installes bb539809db

foXaCe added 1 commit 2026-10-16 22:44:28 +02:00

CI : le relevé des outils ne casse plus le pipeline (SIGPIPE 141) 3eeaac328a

foXaCe changed target branch from hermes/serveur-etat-rust to main 2026-10-16 22:52:33 +02:00

foXaCe merged commit 856d177f14 into main 2026-10-16 23:02:54 +02:00

foXaCe referenced this pull request from a commit 2026-10-16 23:02:55 +02:00

Merge pull request 'feat(frontend) : le tableau d'état en Svelte 5, même apparence que le serveur Python' (#4) from hermes/front-svelte into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

ci-rouge

  

conflit

  

operateur

  

relu

No labels

ci-rouge

conflit

operateur

relu

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

foXaCe/pc-mirror!4

No description provided.