feat(ui): config machine (sonde+proxy), mode Listing, défaut apt-cacher-ng

- popup Profil sur la tuile : sonde machine → propositions os_family/ machine_kind/virtualization avec Appliquer ; proxy APT (mode + url) + appliquer persistant - mode d'affichage Tuiles/Liste : toggle + bouton Ajouter déplacés dans le header de page ; vue Liste = liste compacte + panneau détail « Machine view » (sections Docker/Post-install dépliées ; pliées en mode tuile) - Popup rendu via portail document.body (position fixed, z-index 1000) : passe au premier plan, échappe au backdrop-filter des tuiles - Paramètres : onglet Proxy APT (défaut apt-cacher-ng + appliquer à toutes les machines) ; AddMachineModal pré-remplit le proxy par défaut - api client : settings, updateMachine, probe ; icônes network/grid/list Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-06 07:53:57 +02:00
parent 2b684da9cd
commit faa654c95a
8 changed files with 588 additions and 25 deletions
@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from "react";
+import { createPortal } from "react-dom";
 /* ============================================================
   ui-kit.jsx
   Composants haute-fid Gruvbox Seventies.
@@ -433,9 +434,11 @@ function BigRadialGauge({ value = 87, label = 'score santé · stable' }) {
   ============================================================ */
 function Popup({ open, onClose, title, children, footer, width = 460 }) {
  if (!open) return null;
-  return (
+  // Portail vers <body> : échappe aux contextes d'empilement des tuiles (backdrop-filter
+  // glass piège même position:fixed) pour rester au premier plan global.
+  return createPortal((
    <div style={{
-      position: 'absolute', inset: 0, zIndex: 100,
+      position: 'fixed', inset: 0, zIndex: 1000,
      background: 'rgba(0,0,0,0.45)',
      backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -472,7 +475,7 @@ function Popup({ open, onClose, title, children, footer, width = 460 }) {
        )}
      </div>
    </div>
-  );
+  ), document.body);
 }

 /* ============================================================