feat(dashboard): resize souris, DnD live, panel widgets, icônes corrigées

- Resize widget via drag sur le coin bas-droit (mousedown → mousemove →
  snap à taille 1 ou 2 colonnes selon distance)
- DnD live : les autres widgets se déplacent pendant le drag (onDragEnter
  réordonne le tableau + onDragEnd restaure si annulé)
- Mode édition : panel latéral avec tous les widgets (œil toggle visible/masqué),
  survol d'une entrée met en avant (outline) le widget correspondant dans la grille
- Bouton mode édition : icône seule (lnid-pencil-1)
- Correction noms d'icônes LineIcons (lnid-pencil-1, lnid-eye, lnid-eye-closed,
  lnid-cross → supprimé en faveur de toggles dans le panel)
- Suppression des classes CSS obsolètes (edit-mode-banner, widget-add-btn, etc.)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/css/pages.css

@@ -552,53 +552,91 @@
 .widget-size-2 { grid-column: span 2; }
 @media (max-width: 720px) { .widget-size-2 { grid-column: span 1; } }
 
+.widget { position: relative; }
 .widget.is-dragging { opacity: 0.35; transform: scale(.97); }
-.widget.drag-over   { outline: 2px dashed var(--neu-primary); transform: scale(1.02); }
+.widget-highlighted { outline: 2px solid var(--neu-primary) !important; outline-offset: 2px; }
 
-.widget-edit-bar {
+/* Edit mode layout : grid + panel côte à côte */
+.edit-mode-layout {
   display: flex;
-  align-items: center;
+  gap: 1.25rem;
-  gap: .375rem;
+  align-items: flex-start;
-  padding: .25rem 0 .75rem;
+}
-  border-bottom: 1px solid var(--neu-border);
+.edit-mode-layout .widgets-grid {
-  margin-bottom: .75rem;
+  flex: 1;
+  min-width: 0;
 }
-.widget-edit-bar-title { flex: 1; font-size: .75rem; font-weight: 600; color: var(--neu-text-muted); text-transform: uppercase; }
 
-.edit-mode-banner {
+/* Widget panel (liste de tous les widgets en mode édition) */
-  display: flex;
+.widget-panel {
-  align-items: center;
+  width: 200px;
-  gap: .75rem;
+  flex-shrink: 0;
-  padding: .625rem 1rem;
+  position: sticky;
-  border-radius: var(--neu-radius-sm);
+  top: 1rem;
-  background: rgba(108, 142, 244, 0.1);
+  padding: 1rem;
-  border: 1px solid var(--neu-primary);
-  margin-bottom: 1.25rem;
-  font-size: .875rem;
-  color: var(--neu-primary);
 }
-.edit-mode-banner i { font-size: 1.1rem; }
+.widget-panel-title {
-
-.widget-add-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .75rem;
-  margin-top: 1.5rem;
-}
-.widget-add-btn {
   display: flex;
   align-items: center;
   gap: .5rem;
-  padding: .5rem 1rem;
-  border-radius: var(--neu-radius-sm);
-  border: 1px dashed var(--neu-border);
-  background: transparent;
-  color: var(--neu-text-muted);
-  cursor: pointer;
   font-size: .875rem;
-  transition: all .15s;
+  font-weight: 700;
+  margin: 0 0 .75rem 0;
+  padding-bottom: .5rem;
+  border-bottom: 1px solid var(--neu-border);
+}
+.widget-panel-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: .2rem;
+}
+.widget-panel-item {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .4rem .375rem;
+  border-radius: var(--neu-radius-sm);
+  cursor: default;
+  transition: background .15s;
+}
+.widget-panel-item:hover { background: rgba(108, 142, 244, 0.08); }
+.widget-panel-label {
+  flex: 1;
+  font-size: .85rem;
+  color: var(--neu-text-muted);
+  transition: color .15s;
+}
+.widget-panel-item.is-visible .widget-panel-label { color: var(--neu-text); }
+.widget-panel-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--neu-text-muted);
+  padding: .2rem;
+  border-radius: .2rem;
+  line-height: 1;
+  transition: color .15s;
+}
+.widget-panel-toggle:hover { color: var(--neu-primary); }
+
+/* Resize handle (coin bas-droit de la tuile, edit mode) */
+.widget-resize-handle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 22px;
+  height: 22px;
+  cursor: ew-resize;
+  border-radius: 0 0 var(--neu-radius-sm) 0;
+  background: linear-gradient(135deg, transparent 50%, var(--neu-border) 50%);
+  transition: background .15s;
+}
+.widget-resize-handle:hover {
+  background: linear-gradient(135deg, transparent 50%, var(--neu-primary) 50%);
 }
-.widget-add-btn:hover { border-color: var(--neu-primary); color: var(--neu-primary); }
 
 /* ── Profil / préférences ────────────────────────────────────────────────────── */
 .settings-section {

frontend/dashboard.html

@@ -59,32 +59,12 @@
 
     <div class="page-header">
       <h2 class="page-title" x-text="t('dashboard.welcome').replace('{name}', $store.auth.user?.username || '')"></h2>
-      <button class="neu-btn neu-btn--sm" :class="{ 'neu-btn--primary': editMode }" @click="toggleEdit()">
+      <button class="neu-btn neu-btn--sm" :class="{ 'neu-btn--primary': editMode }"
-        <i class="lnid-pen-1"></i>
+              @click="toggleEdit()" title="Mode édition">
-        <span x-text="editMode ? '✓ Terminer' : t('dashboard.addWidget')"></span>
+        <i class="lnid-pencil-1"></i>
       </button>
     </div>
 
-    <!-- Mode édition — bannière + widgets masqués -->
-    <div x-show="editMode" x-transition>
-      <div class="edit-mode-banner">
-        <i class="lnid-pen-1"></i>
-        <span>Mode édition — glissez les widgets pour les réordonner, redimensionnez ou masquez-les.</span>
-      </div>
-
-      <!-- Widgets masqués (à ajouter) -->
-      <div x-show="hiddenWidgets.length > 0">
-        <div class="widget-add-grid">
-          <template x-for="w in hiddenWidgets" :key="w.id">
-            <button class="widget-add-btn" @click="showWidget(w.id)">
-              <i class="lnid-add-circle"></i>
-              <span x-text="w.label"></span>
-            </button>
-          </template>
-        </div>
-      </div>
-    </div>
-
     <!-- WS status -->
     <div class="ws-status" :class="wsStatus" x-show="wsStatus !== 'connected'" x-transition>
       <span x-show="wsStatus === 'connecting'">⌛ Connexion…</span>
@@ -92,107 +72,125 @@
       <span x-show="wsStatus === 'error'">✗ Erreur WebSocket</span>
     </div>
 
-    <!-- Widgets grid -->
+    <!-- Layout : grid (+ panel en mode édition) -->
-    <div class="widgets-grid">
+    <div :class="editMode ? 'edit-mode-layout' : ''">
-      <template x-for="(w, idx) in visibleWidgets" :key="w.id">
-        <div class="neu-card widget"
-             :class="{
-               'widget-size-2': w.size === 2,
-               'is-dragging':   editMode && dragSrcIdx === widgets.indexOf(w),
-               'drag-over':     editMode && dragOverIdx === widgets.indexOf(w),
-             }"
-             :draggable="editMode"
-             @dragstart="editMode && onDragStart(widgets.indexOf(w))"
-             @dragenter.prevent="editMode && onDragEnter(widgets.indexOf(w))"
-             @dragleave="editMode && onDragLeave(widgets.indexOf(w))"
-             @dragover.prevent
-             @dragend="onDragEnd()"
-             @drop.prevent="editMode && onDrop(widgets.indexOf(w))">
 
-          <!-- Barre d'édition (visible en mode édition) -->
+      <!-- Widgets grid -->
-          <div class="widget-edit-bar" x-show="editMode">
+      <div class="widgets-grid">
-            <i class="lnid-menu-hamburger-1 drag-handle"></i>
+        <template x-for="w in visibleWidgets" :key="w.id">
-            <span class="widget-edit-bar-title" x-text="w.label"></span>
+          <div class="neu-card widget"
-            <button class="neu-btn neu-btn--sm" @click.stop="toggleSize(w)"
+               :class="{
-                    :title="w.size === 2 ? 'Réduire' : 'Agrandir'">
+                 'widget-size-2':      w.size === 2,
-              <i :class="w.size === 2 ? 'lnid-compress-arrows' : 'lnid-expand-arrows'"></i>
+                 'is-dragging':        dragSrcIdx === widgets.indexOf(w),
-            </button>
+                 'widget-highlighted': hoveredWidgetId === w.id,
-            <button class="neu-btn neu-btn--sm" @click.stop="hideWidget(w)" title="Masquer">
+               }"
-              <i class="lnid-close"></i>
+               :draggable="editMode ? 'true' : 'false'"
-            </button>
+               @dragstart="editMode && onDragStart(widgets.indexOf(w))"
-          </div>
+               @dragenter="editMode && onDragEnter(widgets.indexOf(w))"
+               @dragover.prevent
+               @dragend="onDragEnd()"
+               @drop.prevent="onDrop()">
 
-          <!-- Widget: status -->
+            <!-- Widget: status -->
-          <template x-if="w.id === 'status'">
+            <template x-if="w.id === 'status'">
-            <div class="widget-status">
+              <div class="widget-status">
-              <h4 class="widget-title" x-text="t('dashboard.lxcStatus')"></h4>
+                <h4 class="widget-title" x-text="t('dashboard.lxcStatus')"></h4>
-              <div class="stat-rows">
+                <div class="stat-rows">
-                <div class="stat-row">
+                  <div class="stat-row">
-                  <i class="lnid-play stat-icon" style="color:var(--neu-success)"></i>
+                    <i class="lnid-play stat-icon" style="color:var(--neu-success)"></i>
-                  <span class="stat-num" x-text="running.length"></span>
+                    <span class="stat-num" x-text="running.length"></span>
-                  <span class="stat-label" x-text="t('dashboard.running')"></span>
+                    <span class="stat-label" x-text="t('dashboard.running')"></span>
-                </div>
-                <div class="stat-row">
-                  <i class="lnid-stop stat-icon" style="color:var(--neu-danger)"></i>
-                  <span class="stat-num" x-text="stopped.length"></span>
-                  <span class="stat-label">Arrêtés</span>
-                </div>
-                <div class="stat-row">
-                  <i class="lnid-server-1 stat-icon" style="color:var(--neu-info)"></i>
-                  <span class="stat-num" x-text="lxc.length"></span>
-                  <span class="stat-label" x-text="t('dashboard.lxcCount')"></span>
-                </div>
-              </div>
-            </div>
-          </template>
-
-          <!-- Widget: lxc-list -->
-          <template x-if="w.id === 'lxc-list'">
-            <div class="widget-lxc">
-              <h4 class="widget-title" x-text="t('dashboard.lxcStatus')"></h4>
-              <div class="loading-state" x-show="wsStatus === 'connecting'">
-                <div class="spinner-lg"></div>
-              </div>
-              <div x-show="wsStatus !== 'connecting'">
-                <template x-for="item in lxc" :key="item.vmid">
-                  <div class="lxc-row">
-                    <i :class="item.status === 'running' ? 'lnid-play' : 'lnid-stop'"
-                       :style="'color:' + (item.status === 'running' ? 'var(--neu-success)' : 'var(--neu-danger)')"></i>
-                    <span class="lxc-name" x-text="item.name || 'CT' + item.vmid"></span>
-                    <span class="lxc-cpu" x-text="Math.round((item.cpu || 0) * 100) + '%'"></span>
-                    <span class="lxc-ram" x-text="Math.round((item.mem || 0) / 1048576) + 'M'"></span>
                   </div>
-                </template>
+                  <div class="stat-row">
-                <p class="empty-state" x-show="lxc.length === 0" x-text="t('dashboard.noData')"></p>
+                    <i class="lnid-stop stat-icon" style="color:var(--neu-danger)"></i>
+                    <span class="stat-num" x-text="stopped.length"></span>
+                    <span class="stat-label">Arrêtés</span>
+                  </div>
+                  <div class="stat-row">
+                    <i class="lnid-server-1 stat-icon" style="color:var(--neu-info)"></i>
+                    <span class="stat-num" x-text="lxc.length"></span>
+                    <span class="stat-label" x-text="t('dashboard.lxcCount')"></span>
+                  </div>
+                </div>
               </div>
-            </div>
+            </template>
-          </template>
 
-          <!-- Widget: links -->
+            <!-- Widget: lxc-list -->
-          <template x-if="w.id === 'links'">
+            <template x-if="w.id === 'lxc-list'">
-            <div class="widget-links">
+              <div class="widget-lxc">
-              <h4 class="widget-title" x-text="t('dashboard.widgetShortcut')"></h4>
+                <h4 class="widget-title" x-text="t('dashboard.lxcStatus')"></h4>
-              <div class="links-grid">
+                <div class="loading-state" x-show="wsStatus === 'connecting'">
-                <a class="neu-btn link-btn" href="/proxmox.html" @click.prevent="navigate('/proxmox.html')">
+                  <div class="spinner-lg"></div>
-                  <i class="lnid-server-1"></i> Proxmox
+                </div>
-                </a>
+                <div x-show="wsStatus !== 'connecting'">
-                <a class="neu-btn link-btn" href="/terminal.html" @click.prevent="navigate('/terminal.html')">
+                  <template x-for="item in lxc" :key="item.vmid">
-                  <i class="lnid-terminal"></i> Terminal
+                    <div class="lxc-row">
-                </a>
+                      <i :class="item.status === 'running' ? 'lnid-play' : 'lnid-stop'"
-                <a class="neu-btn link-btn" href="/updates.html" @click.prevent="navigate('/updates.html')">
+                         :style="'color:' + (item.status === 'running' ? 'var(--neu-success)' : 'var(--neu-danger)')"></i>
-                  <i class="lnid-arrow-upward"></i> Updates
+                      <span class="lxc-name" x-text="item.name || 'CT' + item.vmid"></span>
-                </a>
+                      <span class="lxc-cpu" x-text="Math.round((item.cpu || 0) * 100) + '%'"></span>
+                      <span class="lxc-ram" x-text="Math.round((item.mem || 0) / 1048576) + 'M'"></span>
+                    </div>
+                  </template>
+                  <p class="empty-state" x-show="lxc.length === 0" x-text="t('dashboard.noData')"></p>
+                </div>
               </div>
-            </div>
+            </template>
+
+            <!-- Widget: links -->
+            <template x-if="w.id === 'links'">
+              <div class="widget-links">
+                <h4 class="widget-title" x-text="t('dashboard.widgetShortcut')"></h4>
+                <div class="links-grid">
+                  <a class="neu-btn link-btn" href="/proxmox.html" @click.prevent="navigate('/proxmox.html')">
+                    <i class="lnid-server-1"></i> Proxmox
+                  </a>
+                  <a class="neu-btn link-btn" href="/terminal.html" @click.prevent="navigate('/terminal.html')">
+                    <i class="lnid-terminal"></i> Terminal
+                  </a>
+                  <a class="neu-btn link-btn" href="/updates.html" @click.prevent="navigate('/updates.html')">
+                    <i class="lnid-arrow-upward"></i> Updates
+                  </a>
+                </div>
+              </div>
+            </template>
+
+            <!-- Handle de redimensionnement (coin bas-droit, mode édition) -->
+            <div class="widget-resize-handle"
+                 x-show="editMode"
+                 @mousedown.prevent.stop="startResize($event, w)"></div>
+
+          </div>
+        </template>
+
+        <p class="empty-state" x-show="visibleWidgets.length === 0 && !editMode">
+          Aucun widget actif — activez le mode édition pour en ajouter.
+        </p>
+      </div>
+
+      <!-- Panel widgets (mode édition uniquement) -->
+      <div class="widget-panel neu-card" x-show="editMode" x-transition>
+        <h4 class="widget-panel-title">
+          <i class="lnid-layout-1"></i> Widgets
+        </h4>
+        <ul class="widget-panel-list">
+          <template x-for="w in widgets" :key="w.id">
+            <li class="widget-panel-item"
+                :class="{ 'is-visible': w.visible }"
+                @mouseenter="hoveredWidgetId = w.id"
+                @mouseleave="hoveredWidgetId = null">
+              <span class="widget-panel-label" x-text="w.label"></span>
+              <button class="widget-panel-toggle"
+                      @click="w.visible ? hideWidget(w) : showWidget(w.id)"
+                      :title="w.visible ? 'Masquer' : 'Afficher'">
+                <i :class="w.visible ? 'lnid-eye' : 'lnid-eye-closed'"></i>
+              </button>
+            </li>
           </template>
+        </ul>
+      </div>
 
-        </div>
+    </div><!-- /edit-mode-layout -->
-      </template>
-
-      <p class="empty-state" x-show="visibleWidgets.length === 0 && !editMode">
-        Aucun widget actif — activez le mode édition pour en ajouter.
-      </p>
-    </div>
   </main>
 </div>
 

frontend/js/app.js

@@ -392,7 +392,8 @@ document.addEventListener('alpine:init', () => {
     wsStatus: 'connecting',
     editMode: false,
     dragSrcIdx: null,
-    dragOverIdx: null,
+    _dragOriginal: null,
+    hoveredWidgetId: null,
 
     widgets: (function() {
       const defaults = [
@@ -403,7 +404,6 @@ document.addEventListener('alpine:init', () => {
       try {
         const saved = JSON.parse(localStorage.getItem('pxp_widgets') || 'null')
         if (!saved) return defaults
-        // Fusionner pour ajouter d'éventuels nouveaux widgets par défaut
         const ids = saved.map(w => w.id)
         return [...saved, ...defaults.filter(d => !ids.includes(d.id))]
       } catch(e) { return defaults }
@@ -414,11 +414,6 @@ document.addEventListener('alpine:init', () => {
     // ── Edition
     toggleEdit() { this.editMode = !this.editMode },
 
-    toggleSize(w) {
-      w.size = (w.size || 1) === 1 ? 2 : 1
-      this.saveWidgets()
-    },
-
     showWidget(id) {
       const w = this.widgets.find(w => w.id === id)
       if (w) { w.visible = true; this.saveWidgets() }
@@ -429,27 +424,54 @@ document.addEventListener('alpine:init', () => {
       this.saveWidgets()
     },
 
-    // ── DnD avec preview
+    // ── Resize via souris (bords de la tuile)
-    onDragStart(idx) {
+    startResize(event, w) {
-      this.dragSrcIdx = idx
+      event.stopPropagation()
-    },
+      event.preventDefault()
-    onDragEnter(idx) {
+      const startX  = event.clientX
-      if (this.dragSrcIdx !== null && this.dragSrcIdx !== idx) this.dragOverIdx = idx
+      const origSize = w.size || 1
-    },
+      const onMove = (e) => {
-    onDragLeave(idx) {
+        const grid = this.$el.querySelector('.widgets-grid')
-      if (this.dragOverIdx === idx) this.dragOverIdx = null
+        const col  = grid ? (grid.offsetWidth / 2) : 400
-    },
+        const dx   = e.clientX - startX
-    onDragEnd() {
+        if      (origSize === 1 && dx >  col * 0.3) w.size = 2
-      this.dragSrcIdx = null
+        else if (origSize === 2 && dx < -col * 0.3) w.size = 1
-      this.dragOverIdx = null
+        else                                         w.size = origSize
-    },
-    onDrop(idx) {
-      if (this.dragSrcIdx === null || this.dragSrcIdx === idx) {
-        this.onDragEnd(); return
       }
+      const onUp = () => {
+        this.saveWidgets()
+        document.removeEventListener('mousemove', onMove)
+        document.removeEventListener('mouseup',   onUp)
+      }
+      document.addEventListener('mousemove', onMove)
+      document.addEventListener('mouseup',   onUp)
+    },
+
+    // ── DnD — réorganisation live (les autres widgets se déplacent pendant le drag)
+    onDragStart(idx) {
+      this.dragSrcIdx   = idx
+      this._dragOriginal = JSON.parse(JSON.stringify(this.widgets))
+    },
+
+    onDragEnter(idx) {
+      if (this.dragSrcIdx === null || this.dragSrcIdx === idx) return
       const moved = this.widgets.splice(this.dragSrcIdx, 1)[0]
       this.widgets.splice(idx, 0, moved)
-      this.onDragEnd()
+      this.dragSrcIdx = idx
+    },
+
+    onDragEnd() {
+      // Annulation (pas de drop) → restaurer l'ordre original
+      if (this._dragOriginal) {
+        this.widgets = JSON.parse(JSON.stringify(this._dragOriginal))
+        this._dragOriginal = null
+      }
+      this.dragSrcIdx = null
+    },
+
+    onDrop() {
+      this._dragOriginal = null  // commit — ne pas restaurer dans onDragEnd
+      this.dragSrcIdx    = null
       this.saveWidgets()
     },
 
@@ -485,7 +507,6 @@ document.addEventListener('alpine:init', () => {
     },
 
     get visibleWidgets() { return this.widgets.filter(w => w.visible) },
-    get hiddenWidgets()  { return this.widgets.filter(w => !w.visible) },
     get lxc()            { return this.resources.filter(r => r.type === 'lxc') },
     get running()        { return this.lxc.filter(r => r.status === 'running') },
     get stopped()        { return this.lxc.filter(r => r.status !== 'running') },