web: start: simple form component

Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>

web/pages/dashboard/dashboard.js

@@ -1,8 +1,46 @@
-// Dashboard page — called by the router each time this route is activated.
-// Export init(main) to run logic after the HTML fragment is injected.
-//
-// `main` is the <main> DOM element containing the injected HTML.
+import { SidePanel } from '../../components/side-panel/side-panel.js'
 
 export function init(main) {
-  // Page is ready — add event listeners, fetch data, etc.
+  main.querySelectorAll('[data-panel-title]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      SidePanel.open({
+        title: btn.dataset.panelTitle,
+        width: btn.dataset.panelWidth ?? '480px',
+        content: `<p style="color:#a6adc8;font-size:14px;line-height:1.6">
+          Contenu du panneau <strong style="color:#cdd6f4">${btn.dataset.panelTitle}</strong>.<br>
+          Largeur : ${btn.dataset.panelWidth}.<br><br>
+          Tu peux ouvrir plusieurs panneaux — ils s'empilent vers la gauche.
+          Ferme avec ✕, Échap, ou en cliquant le fond.
+        </p>`,
+      })
+    })
+  })
+
+  main.querySelectorAll('[data-action="create-vm"]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      SidePanel.open({
+        title: 'Nouvelle VM',
+        width: '520px',
+        content: `<form-vm></form-vm>`,
+      })
+      // form-vm gère son propre submit et dispatche vm-saved — pas besoin de querySelector
+    })
+  })
+
+  main.querySelectorAll('[data-action="edit-vm-i-test1"]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      SidePanel.open({
+        title: 'Modifier i-test1',
+        width: '520px',
+        content: `<form-vm vm-name="i-test1"></form-vm>`
+      })
+      // form-vm gère son propre submit et dispatche vm-saved — pas besoin de querySelector
+    })
+  })
+
+  // vm-saved est attaché sur main (pas document) → nettoyé automatiquement
+  // quand le router remplace le contenu de <main>
+  main.addEventListener('vm-saved', e => {
+    console.log('vm-saved', e.detail)
+  })
 }