feat(front) : la page d'état au niveau de pve-control

foXaCe commented

2026-10-17 20:09:20 +02:00

Owner

Hisser le front d'état au niveau de celui de pve-control. Audit préalable, puis traitement écart par écart — tout reste dans frontend/, le service Rust n'est pas touché.

Ce qui change

Composants Skeleton réels : Progress (tuiles, volume, transfert, historique), Toast + createToaster (rafraîchissement, refus de lecture, exclusion réussie ou refusée), SegmentedControl (choix de la liste), Switch (thème, dans les deux vues), Dialog conservé.
Densité : trois colonnes (asides + centre), en-tête collant, tuiles KPI, sections titrées.
Icônes : lib/icons.ts (dossiers, types, services, monogrammes de repli) + un panneau Raccourcis.
Carte « Volume du miroir » (l'ancien « Disque » qui affichait des chiffres incohérents) : le point de montage est nommé, et une seule base de calcul — occupé utilise/total, réservé (total−utilise−libre)/total, libre libre/total, somme à 100 %, le réservé d'ext4 nommé et expliqué.

Défauts trouvés en regardant les captures

Switch de Skeleton sans HiddenInput : peint mais ni focalisable ni annoncé.
SegmentedControl sans CSS consommant --left/--top/--width/--height : indicateur de taille nulle, libellé choisi blanc sur fond clair.
Sélection en primary-500 + texte blanc = 1,96:1 — échec WCAG AA. Remplacée par un jeton apparié.
hover:text-surface-100 sur fond clair : texte invisible au survol.
Aucune paire « couleur + dark:couleur » ne subsiste sur un élément transitionné (jetons appariés partout).

Vérifications

check, lint, format propres · 118 tests front, couverture lignes 98,63 % · build OK · 28/28 parcours e2e (bureau + téléphone) · axe WCAG AA : zéro violation (16 audits) · cargo test --locked avec et sans frontend/dist (178 tests, code 0).

Hisser le front d'état au niveau de celui de `pve-control`. Audit préalable, puis traitement écart par écart — **tout reste dans `frontend/`**, le service Rust n'est pas touché. ## Ce qui change - **Composants Skeleton réels** : `Progress` (tuiles, volume, transfert, historique), `Toast` + `createToaster` (rafraîchissement, refus de lecture, exclusion réussie ou refusée), `SegmentedControl` (choix de la liste), `Switch` (thème, dans **les deux vues**), `Dialog` conservé. - **Densité** : trois colonnes (`asides` + centre), en-tête collant, tuiles KPI, sections titrées. - **Icônes** : `lib/icons.ts` (dossiers, types, services, monogrammes de repli) + un panneau Raccourcis. - **Carte « Volume du miroir »** (l'ancien « Disque » qui affichait des chiffres incohérents) : le point de montage est nommé, et **une seule base de calcul** — occupé `utilise/total`, réservé `(total−utilise−libre)/total`, libre `libre/total`, somme à 100 %, le réservé d'ext4 nommé et expliqué. ## Défauts trouvés en regardant les captures - `Switch` de Skeleton sans `HiddenInput` : peint mais **ni focalisable ni annoncé**. - `SegmentedControl` sans CSS consommant `--left/--top/--width/--height` : indicateur de **taille nulle**, libellé choisi **blanc sur fond clair**. - Sélection en `primary-500` + texte blanc = **1,96:1** — échec WCAG AA. Remplacée par un jeton apparié. - `hover:text-surface-100` sur fond clair : texte invisible au survol. - Aucune paire « couleur + `dark:couleur` » ne subsiste sur un élément transitionné (jetons appariés partout). ## Vérifications `check`, `lint`, `format` propres · **118 tests** front, couverture lignes **98,63 %** · build OK · **28/28 parcours e2e** (bureau + téléphone) · **axe WCAG AA : zéro violation** (16 audits) · `cargo test --locked` **avec et sans** `frontend/dist` (178 tests, code 0).

foXaCe added 3 commits

2026-10-17 20:09:20 +02:00

feat(frontend) : le volume du miroir dit ce qui est mesuré, réservé compris 935ac36e1c

Le front reçoit les fondations du niveau de PVE Control, et la carte « Disque »
est corrigée.

Fondations :
- `lib/icons.ts` : carte d'icônes officielles (dossiers du miroir, types de
  fichier, services du homelab), teintes stables et monogrammes de repli dont
  le contraste AA est mesuré par les tests ;
- `lib/toast.ts` et `composants/Toaster.svelte` : guichet de notifications
  Skeleton, partagé par le tableau de bord et l'explorateur ;
- `composants/Panneau.svelte`, `Tuile.svelte`, `Icone.svelte` : briques
  partagées — en-tête titré, tuile à jauge `Progress`, icône à repli.

Carte du volume (`PanneauVolume.svelte` remplace `CarteDisque.svelte`) :
- le titre nomme le volume du miroir et le point de montage `etat.racine` est
  affiché ; « Disque » ne désignait plus rien de vérifiable ;
- les pourcentages et les octets parlent d'une seule chose : `utilise`, `libre`
  et `réservé = total - utilise - libre` sont calculés sur le même total, donc
  occupé + réservé + libre font 100 %. Auparavant « 41,7 % occupé » valait
  `100 - libre/total` (occupé **et** réservé) en face de `utilise/total` ;
- l'espace réservé d'ext4 (ce que le système de fichiers garde pour root) est
  nommé et expliqué au lieu d'être noyé dans « occupé ».

refonte(frontend) : le tableau de bord prend la densité de PVE Control 307d2c845b

- trois colonnes au lieu d'une pile de cartes sur 2300 px : volume, contenu et
  raccourcis à gauche ; indicateurs, alertes, historique et listes au centre ;
  santé et transfert à droite ;
- en-tête collant : identité, état du serveur, lien vers les fichiers,
  rafraîchissement et interrupteur de thème (`Switch` de Skeleton) ;
- quatre tuiles d'indicateurs à jauge `Progress` : fichiers, taille du miroir,
  dernier sync, alertes ;
- sections titrées (`TitreSection`) et panneaux communs (`Panneau`) ;
- les listes passent d'un empilement de quatre tableaux à un
  `SegmentedControl` qui choisit celle qui est affichée ;
- `Toaster` Skeleton : confirmation après un rafraîchissement explicite, refus
  de lecture, exclusion réussie ou refusée dans l'explorateur ;
- icônes officielles (dossiers, types de fichier, services) dans les listes,
  l'explorateur et les raccourcis.

Corrigé en regardant les captures, en clair et en sombre :
- un composant zag-js ne devine pas son anatomie : sans `Switch.HiddenInput`,
  l'interrupteur n'était ni focalisable ni annoncé ; sans les règles CSS qui
  consomment `--left/--width`, la pastille du contrôle segmenté restait à taille
  nulle et son libellé s'écrivait en blanc sur un fond clair ;
- l'option choisie n'est plus peinte en `primary-500` (blanc sur violet, 1,96:1)
  mais en jeton apparié, lisible dans les deux modes et validé par axe ;
- plus aucune paire « X + dark:X » sur un élément transitionné (tuiles, boutons
  d'en-tête) : les jetons appariés se rafraîchissent au changement de mode ;
- les tableaux prennent une largeur minimale : au téléphone, les colonnes
  défilent dans leur cadre au lieu de s'écraser sur deux lignes.

docs(frontend) : le front d'état décrit ce qu'il est devenu

Contrôles des références / Références du comportement (pull_request) Successful in 1s

Details

Contrôles des références / Crate pcmirror (formatage, Clippy, tests) (pull_request) Failing after 2s

Details

Contrôles des références / Livraison (style des scripts, essai à blanc) (pull_request) Successful in 4s

Details

Contrôles des références / Front d'état (types, lint, format, tests, build, bout en bout) (pull_request) Has been cancelled

Details

111b8ebf5c

- `docs/FRONTEND-ETAT.md` : les routes réellement appelées (y compris
  `/api/fichiers`, `/dl` et l'exclusion), les composants Skeleton employés, la
  carte du volume, la structure en trois colonnes, les règles du mode
  clair/sombre et les compléments d'anatomie zag-js (entrée cachée, indicateur) ;
- `CHANGELOG.md` : entrées du front (densité, composants, carte du volume,
  icônes) et corrections.
- Le bouton de fermeture d'une notification n'oppose plus « text-surface-700 »
  et « dark:text-surface-300 » sur une transition : jeton apparié.

hermes-fusion added the

ci-rouge

label

2026-10-17 20:10:01 +02:00

hermes-fusion commented

2026-10-17 20:10:01 +02:00

Collaborator

fusion-auto : pas de fusion, la CI est rouge (Crate pcmirror). Le chef de l'atelier renvoie la carte à l'agent ; l'étiquette tombera d'elle-même une fois corrigé.

`fusion-auto` : pas de fusion, la CI est rouge (Crate pcmirror). Le chef de l'atelier renvoie la carte à l'agent ; l'étiquette tombera d'elle-même une fois corrigé.

foXaCe referenced this pull request

2026-10-17 20:10:16 +02:00

Front d'état : le hisser au niveau de pve-control, et dire quel disque on mesure #16

hermes-bot force-pushed ui/pc-mirror-niveau-pve-control from 111b8ebf5c

Contrôles des références / Références du comportement (pull_request) Successful in 1s

Details

Contrôles des références / Crate pcmirror (formatage, Clippy, tests) (pull_request) Failing after 2s

Details

Contrôles des références / Livraison (style des scripts, essai à blanc) (pull_request) Successful in 4s

Details

Contrôles des références / Front d'état (types, lint, format, tests, build, bout en bout) (pull_request) Has been cancelled

Details

to b6a936d1ff

Contrôles des références / Références du comportement (pull_request) Successful in 1s

Details

Contrôles des références / Crate pcmirror (formatage, Clippy, tests) (pull_request) Failing after 2s

Details

Contrôles des références / Livraison (style des scripts, essai à blanc) (pull_request) Successful in 3s

Details

Contrôles des références / Front d'état (types, lint, format, tests, build, bout en bout) (pull_request) Failing after 28s

Details

2026-10-17 20:10:35 +02:00

Compare

foXaCe merged commit 5e4507ea61 into main

2026-10-17 20:12:52 +02:00

foXaCe referenced this pull request from a commit

2026-10-17 20:12:52 +02:00

Merge pull request 'feat(front) : la page d'état au niveau de pve-control' (#23) from ui/pc-mirror-niveau-pve-control into main

Rows
Columns

feat(front) : la page d'état au niveau de pve-control #23

Ce qui change

Défauts trouvés en regardant les captures

Vérifications