From b851dc61afcd41e1c32ae44cf670ccf77449387d Mon Sep 17 00:00:00 2001
From: enzo <enzo@geronzi.fr>
Date: Sat, 21 Mar 2026 19:50:58 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20couleurs=20ic=C3=B4nes,=20boutons=20carr?=
 =?UTF-8?q?=C3=A9s,=20sidebar=20collaps=C3=A9e,=20langue,=20SW=20scope,=20?=
 =?UTF-8?q?LXC=20arr=C3=AAt=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icônes :
- Sidebar navItems : couleur distincte par section (iconStyle via data-binding)
- Sidebar footer user : couleur primary
- Navbar : logout → danger, soleil → amber, lune → blue
- Panel widgets : œil visible → success, caché → muted

Boutons :
- `.neu-btn--sm:has(> i:only-child)` → carré 2rem×2rem automatiquement
  (theme, logout, mode édition) sans modifier le HTML

Sidebar :
- --sidebar-width-collapsed : 64px → 52px
- Sidebar réduite : icônes centrées (justify-content center)

Langue :
- Setter vide sur `lang` dans navbar() pour corriger x-model avec getter
  (le @change gère la vraie mise à jour du store)

Service Worker :
- Enregistrement depuis /ws.sw.js (scope /) au lieu de /js/ws.sw.js (scope /js/)
- build.mjs : copie ws.sw.js vers dist/ root en plus de dist/js/

LXC arrêté :
- checkTarget() : skip si target.status !== 'running' → évite les 502 SSH

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/build.mjs      |  4 ++++
 frontend/css/neu.css    | 26 +++++++++++++++++++++++++-
 frontend/css/pages.css  |  1 +
 frontend/dashboard.html |  2 +-
 frontend/js/app.js      | 23 ++++++++++++++++-------
 frontend/modules.html   |  2 +-
 frontend/profile.html   |  2 +-
 frontend/proxmox.html   |  2 +-
 frontend/settings.html  |  2 +-
 frontend/terminal.html  |  2 +-
 frontend/updates.html   |  2 +-
 11 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/frontend/build.mjs b/frontend/build.mjs
index 75a21d6..86504a8 100644
--- a/frontend/build.mjs
+++ b/frontend/build.mjs
@@ -71,6 +71,10 @@ for (const f of fs.readdirSync('js')) {
     fs.copyFileSync(`js/${f}`, `${dist}/js/${f}`)
   }
 }
+// Service Worker doit être servi depuis la racine pour avoir le bon scope
+if (fs.existsSync('js/ws.sw.js')) {
+  fs.copyFileSync('js/ws.sw.js', `${dist}/ws.sw.js`)
+}
 
 // 5. Copy CSS
 for (const f of fs.readdirSync('css')) {
diff --git a/frontend/css/neu.css b/frontend/css/neu.css
index c4e950a..620d7e3 100644
--- a/frontend/css/neu.css
+++ b/frontend/css/neu.css
@@ -78,7 +78,7 @@ input, select, textarea { font-family: inherit; font-size: inherit; }
 
   /* Sidebar */
   --sidebar-width:         240px;
-  --sidebar-width-collapsed: 64px;
+  --sidebar-width-collapsed: 52px;
 
   /* Z-index */
   --z-sidebar:  100;
@@ -215,6 +215,14 @@ input, select, textarea { font-family: inherit; font-size: inherit; }
   border-radius: var(--neu-radius-md);
 }
 
+/* Bouton icône carré taille sm — se déclenche automatiquement si le bouton
+   ne contient qu'un <i> (ex: theme, logout, edit mode) */
+.neu-btn--sm:has(> i:only-child) {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+
 .neu-btn--ghost {
   background: transparent;
   box-shadow: none;
@@ -423,6 +431,12 @@ input, select, textarea { font-family: inherit; font-size: inherit; }
   width: var(--sidebar-width-collapsed);
 }
 
+.sidebar.collapsed .sidebar-link {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .sidebar-header {
   display: flex;
   align-items: center;
@@ -619,3 +633,13 @@ html.is-animating .transition-fade {
     margin-right: var(--sidebar-width-collapsed);
   }
 }
+
+/* ── Couleurs icônes contextuelles ─────────────────────────────────────────── */
+
+/* Navbar : logout, thème, édition */
+.navbar .lnid-power-button    { color: var(--neu-danger);  }
+.navbar .lnid-sun-1            { color: #f59e0b;            }
+.navbar .lnid-moon-half-left-1 { color: #60a5fa;            }
+
+/* Sidebar footer : utilisateur */
+.sidebar-footer .sidebar-icon { color: var(--neu-primary); }
diff --git a/frontend/css/pages.css b/frontend/css/pages.css
index 424d76a..1fb9cde 100644
--- a/frontend/css/pages.css
+++ b/frontend/css/pages.css
@@ -621,6 +621,7 @@
   transition: color .15s;
 }
 .widget-panel-toggle:hover { color: var(--neu-primary); }
+.widget-panel-item.is-visible .widget-panel-toggle { color: var(--neu-success); }
 
 /* Resize handle (coin bas-droit de la tuile, edit mode) */
 .widget-resize-handle {
diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index 7d98c9b..76b29b7 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 45dfe22..946d7ec 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -13,7 +13,7 @@ const WsProxy = {
 
   init() {
     if (!('serviceWorker' in navigator)) return
-    navigator.serviceWorker.register('/js/ws.sw.js')
+    navigator.serviceWorker.register('/ws.sw.js')
       .catch(e => console.warn('[WsProxy] SW registration failed:', e))
     navigator.serviceWorker.addEventListener('message', event => {
       const { channel, type, data, status } = event.data || {}
@@ -253,14 +253,18 @@ document.addEventListener('alpine:init', () => {
     get currentPage() { return Alpine.store('ui').currentPage },
 
     navItems: [
-      { id: 'dashboard', iconClass: 'lnid-dashboard-square-1', labelKey: 'nav.dashboard', href: '/dashboard.html' },
-      { id: 'proxmox',   iconClass: 'lnid-server-1',           labelKey: 'nav.proxmox',   href: '/proxmox.html'   },
-      { id: 'updates',   iconClass: 'lnid-arrow-upward',        labelKey: 'nav.updates',   href: '/updates.html'   },
-      { id: 'terminal',  iconClass: 'lnid-terminal',            labelKey: 'nav.terminal',  href: '/terminal.html'  },
-      { id: 'settings',  iconClass: 'lnid-gear-1',              labelKey: 'nav.settings',  href: '/settings.html'  },
-      { id: 'modules',   iconClass: 'lnid-puzzle',              labelKey: 'nav.modules',   href: '/modules.html'   },
+      { id: 'dashboard', iconClass: 'lnid-dashboard-square-1', iconColor: '#6c8ef4', labelKey: 'nav.dashboard', href: '/dashboard.html' },
+      { id: 'proxmox',   iconClass: 'lnid-server-1',           iconColor: '#22c55e', labelKey: 'nav.proxmox',   href: '/proxmox.html'   },
+      { id: 'updates',   iconClass: 'lnid-arrow-upward',        iconColor: '#f59e0b', labelKey: 'nav.updates',   href: '/updates.html'   },
+      { id: 'terminal',  iconClass: 'lnid-terminal',            iconColor: '#a78bfa', labelKey: 'nav.terminal',  href: '/terminal.html'  },
+      { id: 'settings',  iconClass: 'lnid-gear-1',              iconColor: '#94a3b8', labelKey: 'nav.settings',  href: '/settings.html'  },
+      { id: 'modules',   iconClass: 'lnid-puzzle',              iconColor: '#f472b6', labelKey: 'nav.modules',   href: '/modules.html'   },
     ],
 
+    iconStyle(item) {
+      return this.isActive(item.id) ? '' : `color: ${item.iconColor}`
+    },
+
     isActive(id) {
       return this.currentPage === id
     },
@@ -282,6 +286,7 @@ document.addEventListener('alpine:init', () => {
     get theme() { return Alpine.store('ui').theme },
     get user() { return Alpine.store('auth').user },
     get lang() { return Alpine.store('i18n').lang },
+    set lang(v) { /* x-model a besoin d'un setter ; @change gère la vraie MAJ */ },
 
     toggleTheme() { Alpine.store('ui').toggleTheme() },
     logout() { Alpine.store('auth').logout() },
@@ -657,15 +662,19 @@ document.addEventListener('alpine:init', () => {
     },
 
     async checkTarget(target) {
+      if (target.status !== 'running') return  // container arrêté → pas de SSH possible
       target.checking = true
       target.packages = null
       try {
         const res = await apiFetch(`/api/updates/packages?target=${encodeURIComponent(target.id)}`)
         if (res.ok) {
           target.packages = await res.json()
+        } else {
+          target.packages = []
         }
       } catch(e) {
         console.error('checkTarget', e)
+        target.packages = []
       } finally {
         target.checking = false
       }
diff --git a/frontend/modules.html b/frontend/modules.html
index 863640f..73e123c 100644
--- a/frontend/modules.html
+++ b/frontend/modules.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/profile.html b/frontend/profile.html
index 3da7a3d..3668292 100644
--- a/frontend/profile.html
+++ b/frontend/profile.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/proxmox.html b/frontend/proxmox.html
index da704e6..0127eb6 100644
--- a/frontend/proxmox.html
+++ b/frontend/proxmox.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/settings.html b/frontend/settings.html
index 58b9896..2cd4797 100644
--- a/frontend/settings.html
+++ b/frontend/settings.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/terminal.html b/frontend/terminal.html
index 6756c0e..7ca6385 100644
--- a/frontend/terminal.html
+++ b/frontend/terminal.html
@@ -28,7 +28,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/updates.html b/frontend/updates.html
index 5a75dcc..cf87ce3 100644
--- a/frontend/updates.html
+++ b/frontend/updates.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>