From 3422227bea253ea80aa2ee5c3874741e17b90e2e Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Tue, 9 Jun 2026 15:57:26 +0200
Subject: [PATCH] feat(ui): apply LjStatus on system node and plugin status

Replaces the dot+text status cell in SystemNodeView and the tri-state
status chip in SystemPluginView with the unified <LjStatus> component
from the host:

- SystemNodeView: enabled = binary active dot (ok / idle)
- SystemPluginView: lifecycle status mapped to ok / warn / idle

Removes the now-dead scoped CSS (.status, .sdot, .chip variants).

Refs #110 #111.
---
 ui/src/views/SystemNodeView.vue   | 39 +++----------------------------
 ui/src/views/SystemPluginView.vue | 13 ++++-------
 2 files changed, 8 insertions(+), 44 deletions(-)

diff --git a/ui/src/views/SystemNodeView.vue b/ui/src/views/SystemNodeView.vue
index b68361e..91f0139 100644
--- a/ui/src/views/SystemNodeView.vue
+++ b/ui/src/views/SystemNodeView.vue
@@ -59,7 +59,8 @@
         <NodeModeChip :mode="item.mode || 'all'" size="small" />
       </template>
       <template #cell.enabled="{ item }">
-        <span class="status"><span class="sdot" :class="item.enabled ? 'ok' : 'err'" />{{ item.enabled ? t('system.node.statusEnabled') : t('system.node.statusDisabled') }}</span>
+        <LjStatus :active="item.enabled"
+                  :tooltip="item.enabled ? t('system.node.statusEnabled') : t('system.node.statusDisabled')" />
       </template>
       <template #actions="{ item }">
         <!-- Only instances can be edited/deleted; service/tool/feature nodes
@@ -89,7 +90,7 @@
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useApi, useAppStore, useI18nStore, NodeIcon, NodeModeChip, isInstance, nodeType } from '@ligoj/host'
-import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton } from '@ligoj/host'
+import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjStatus } from '@ligoj/host'
 import NodeEditDialog from './NodeEditDialog.vue'
 
 const api = useApi()
@@ -454,38 +455,4 @@ onBeforeUnmount(() => document.removeEventListener('click', onDocClick))
   background: rgba(139, 92, 246, .14);
 }
 
-.status {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 600;
-  font-size: 13px;
-  color: var(--ink-2);
-}
-
-.sdot {
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  position: relative;
-}
-
-.sdot::after {
-  content: "";
-  position: absolute;
-  inset: -4px;
-  border-radius: 50%;
-  background: currentColor;
-  opacity: .2;
-}
-
-.sdot.ok {
-  background: #1d9d63;
-  color: #1d9d63;
-}
-
-.sdot.err {
-  background: #df4d42;
-  color: #df4d42;
-}
 </style>
diff --git a/ui/src/views/SystemPluginView.vue b/ui/src/views/SystemPluginView.vue
index 4b5bf7e..25e7f39 100644
--- a/ui/src/views/SystemPluginView.vue
+++ b/ui/src/views/SystemPluginView.vue
@@ -84,7 +84,10 @@
         </span>
         <span v-else class="muted">—</span>
       </template>
-      <template #cell.statut="{ item }"><span class="chip" :class="item.status">{{ statusLabel(item.status) }}</span></template>
+      <template #cell.statut="{ item }">
+        <LjStatus :status="item.status === 'ok' ? 'ok' : item.status === 'warn' ? 'warn' : 'idle'"
+                  :tooltip="statusLabel(item.status)" />
+      </template>
       <template #cell.enabled="{ item }">
         <span v-if="item.node" class="switch" :class="{ on: item.enabled, busy: togglingKey === item.key }" role="switch" :aria-checked="item.enabled" :title="t('system.plugin.toggleHint')" @click.stop="toggleEnabled(item)" />
         <span v-else class="muted">—</span>
@@ -162,7 +165,7 @@
 <script setup>
 import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import { useApi, useAppStore, useErrorStore, useI18nStore, NodeIcon } from '@ligoj/host'
-import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjDialog } from '@ligoj/host'
+import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjDialog, LjStatus } from '@ligoj/host'
 
 const api = useApi()
 const app = useAppStore()
@@ -503,7 +506,6 @@ onMounted(() => {
 .logo-tile { width: 36px; height: 36px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 var(--border-w) var(--border-c), 0 2px 6px -3px rgba(0, 0, 0, .3); }
 .logo-tile :deep(img.tool-icon) { width: 22px; height: 22px; object-fit: contain; }
 .logo-tile :deep(i) { font-size: 20px; color: #475569; }
-/* Status chip (mockup .chip). */
 /* Restart progress dialog. */
 .restart-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 14px 8px 6px; }
 .restart-msg { font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0; }
@@ -518,11 +520,6 @@ onMounted(() => {
 .sig.invalid { color: #df4d42; }
 .sig.unsigned { color: var(--ink-3); }
 
-.chip { display: inline-flex; align-items: center; font-family: var(--font); font-weight: 700; font-size: 11.5px; padding: 3px 11px; border-radius: 999px; }
-.chip.ok { color: #1d9d63; background: rgba(29, 157, 99, .14); }
-.chip.warn { color: #d98a16; background: rgba(217, 138, 22, .16); }
-.chip.err { color: #df4d42; background: rgba(223, 77, 66, .14); }
-.chip.idle { color: var(--ink-3); background: var(--pill); }
 /* Toggle switch (mockup .switch). */
 .switch { display: inline-block; width: 44px; height: 25px; border-radius: 20px; background: var(--border-2); position: relative; cursor: pointer; transition: background .2s, opacity .2s; vertical-align: middle; }
 .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: left .2s; }