From e186fe21022ecec1fbbe0f82b9f0b68b4c4cecee Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Tue, 9 Jun 2026 15:47:52 +0200
Subject: [PATCH] feat(ui): apply LjStatus on identity status icons

Replaces the ad-hoc lock icons, status chip and `.bdot` dots across the
identity tables and the company edit panel with the unified <LjStatus>
component from the host:

- UserListView / GroupListView / CompanyListView: locked = error, else ok
- ContainerScopeView: locked = warn (keeps the existing warning colour)
- CompanyEditPanel: replaces the status v-chip
- DelegateListView: canAdmin / canWrite as binary active dots

Standardises the non-locked rows to a green dot instead of a dash so
every table reads the same. Removes the now-dead scoped CSS (.bdot,
unused .dash).

Refs #110 #111.
---
 ui/src/components/CompanyEditPanel.vue |  7 +++----
 ui/src/views/CompanyListView.vue       |  8 +++-----
 ui/src/views/ContainerScopeView.vue    |  9 +++------
 ui/src/views/DelegateListView.vue      | 27 +++++---------------------
 ui/src/views/GroupListView.vue         |  8 +++-----
 ui/src/views/UserListView.vue          |  9 +++------
 6 files changed, 20 insertions(+), 48 deletions(-)

diff --git a/ui/src/components/CompanyEditPanel.vue b/ui/src/components/CompanyEditPanel.vue
index 03c79bb..bda3557 100644
--- a/ui/src/components/CompanyEditPanel.vue
+++ b/ui/src/components/CompanyEditPanel.vue
@@ -66,9 +66,8 @@
               {{ form.locked ? 'mdi-lock' : 'mdi-lock-open-variant-outline' }}
             </v-icon>
             <div class="text-body-2 text-medium-emphasis">{{ t('group.locked') }}</div>
-            <v-chip size="small" :color="form.locked ? 'error' : 'success'" variant="tonal">
-              {{ form.locked ? t('user.statusLocked') : t('user.statusActive') }}
-            </v-chip>
+            <LjStatus :status="form.locked ? 'error' : 'ok'"
+                      :tooltip="form.locked ? t('user.statusLocked') : t('user.statusActive')" />
           </div>
 
           <div v-if="form.count != null" class="d-flex align-center ga-3">
@@ -105,7 +104,7 @@
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useApi, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
-import { VibrantConfirmDialog as LigojConfirmDialog, LjButton, LjAvailabilityField } from '@ligoj/host'
+import { VibrantConfirmDialog as LigojConfirmDialog, LjButton, LjAvailabilityField, LjStatus } from '@ligoj/host'
 
 const props = defineProps({
   /**
diff --git a/ui/src/views/CompanyListView.vue b/ui/src/views/CompanyListView.vue
index 1a4cb02..9b13e07 100644
--- a/ui/src/views/CompanyListView.vue
+++ b/ui/src/views/CompanyListView.vue
@@ -37,10 +37,8 @@
       </template>
       <template #cell.count="{ item }"><span class="mono">{{ item.count ?? '—' }}</span></template>
       <template #cell.locked="{ item }">
-        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-          <template #activator="{ props: tt }"><v-icon v-bind="tt" color="error" size="19">mdi-lock</v-icon></template>
-        </v-tooltip>
-        <span v-else class="dash">—</span>
+        <LjStatus :status="item.locked ? 'error' : 'ok'"
+                  :tooltip="item.locked ? t('user.statusLocked') : t('user.statusActive')" />
       </template>
       <template #actions="{ item }">
         <v-menu location="bottom end">
@@ -79,7 +77,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
-import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch, LjDialog } from '@ligoj/host'
+import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch, LjDialog, LjStatus } from '@ligoj/host'
 import CompanyEditPanel from '../components/CompanyEditPanel.vue'
 
 const route = useRoute()
diff --git a/ui/src/views/ContainerScopeView.vue b/ui/src/views/ContainerScopeView.vue
index 0cfcf08..876cb24 100644
--- a/ui/src/views/ContainerScopeView.vue
+++ b/ui/src/views/ContainerScopeView.vue
@@ -29,10 +29,8 @@
       </template>
       <template #cell.dn="{ item }"><code class="dn">{{ item.dn || '—' }}</code></template>
       <template #cell.locked="{ item }">
-        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-          <template #activator="{ props: tt }"><v-icon v-bind="tt" color="warning" size="19">mdi-lock</v-icon></template>
-        </v-tooltip>
-        <span v-else class="dash">—</span>
+        <LjStatus :status="item.locked ? 'warn' : 'ok'"
+                  :tooltip="item.locked ? t('user.statusLocked') : t('user.statusActive')" />
       </template>
       <template #actions="{ item }">
         <v-menu location="bottom end">
@@ -74,7 +72,7 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { useApi, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
-import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch, LjSegmented, LjDialog, LjAvailabilityField } from '@ligoj/host'
+import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch, LjSegmented, LjDialog, LjAvailabilityField, LjStatus } from '@ligoj/host'
 
 const api = useApi()
 const appStore = useAppStore()
@@ -214,5 +212,4 @@ onMounted(() => {
 .locked-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0 8px; font-size: 12px; color: var(--ink-3); }
 .locked-note .v-icon { color: rgb(var(--v-theme-warning)); }
 .dn { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
-.dash { color: var(--ink-3); }
 </style>
diff --git a/ui/src/views/DelegateListView.vue b/ui/src/views/DelegateListView.vue
index 65cbc14..f695a91 100644
--- a/ui/src/views/DelegateListView.vue
+++ b/ui/src/views/DelegateListView.vue
@@ -39,14 +39,12 @@
         </span>
       </template>
       <template #cell.canAdmin="{ item }">
-        <span class="bdot" :class="{ on: item.canAdmin }">
-          <v-tooltip activator="parent" :text="item.canAdmin ? t('delegate.adminGranted') : t('delegate.adminNotGranted')" location="top" />
-        </span>
+        <LjStatus :active="item.canAdmin"
+                  :tooltip="item.canAdmin ? t('delegate.adminGranted') : t('delegate.adminNotGranted')" />
       </template>
       <template #cell.canWrite="{ item }">
-        <span class="bdot" :class="{ on: item.canWrite }">
-          <v-tooltip activator="parent" :text="item.canWrite ? t('delegate.writeGranted') : t('delegate.writeNotGranted')" location="top" />
-        </span>
+        <LjStatus :active="item.canWrite"
+                  :tooltip="item.canWrite ? t('delegate.writeGranted') : t('delegate.writeNotGranted')" />
       </template>
       <template #actions="{ item }">
         <v-menu location="bottom end">
@@ -79,7 +77,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useDataTable, useApi, useAppStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
-import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch } from '@ligoj/host'
+import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch, LjStatus } from '@ligoj/host'
 import DelegateEditDialog from './DelegateEditDialog.vue'
 
 const appStore = useAppStore()
@@ -171,19 +169,4 @@ onMounted(() => {
 .rcv-name {
   font-weight: 600;
 }
-
-/* Status dot: muted when off, vivid green with a glow when on. */
-.bdot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: rgba(var(--v-theme-on-surface), .2);
-  transition: background .15s, box-shadow .15s;
-}
-
-.bdot.on {
-  background: #1d9d63;
-  box-shadow: 0 0 0 3px rgba(29, 157, 99, .18), 0 0 10px 1px rgba(29, 157, 99, .6);
-}
 </style>
\ No newline at end of file
diff --git a/ui/src/views/GroupListView.vue b/ui/src/views/GroupListView.vue
index 54a10f5..fdd9a0c 100644
--- a/ui/src/views/GroupListView.vue
+++ b/ui/src/views/GroupListView.vue
@@ -39,10 +39,8 @@
       </template>
       <template #cell.count="{ item }"><span class="mono">{{ item.count ?? '—' }}</span></template>
       <template #cell.locked="{ item }">
-        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-          <template #activator="{ props: tt }"><v-icon v-bind="tt" color="error" size="19">mdi-lock</v-icon></template>
-        </v-tooltip>
-        <span v-else class="dash">—</span>
+        <LjStatus :status="item.locked ? 'error' : 'ok'"
+                  :tooltip="item.locked ? t('user.statusLocked') : t('user.statusActive')" />
       </template>
       <template #actions="{ item }">
         <v-menu location="bottom end">
@@ -85,7 +83,7 @@ import { useRoute } from 'vue-router'
 import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore } from '@ligoj/host'
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
 import { useGroupMembersDialog } from '../composables/useGroupMembersDialog.js'
-import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch, LjDialog } from '@ligoj/host'
+import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch, LjDialog, LjStatus } from '@ligoj/host'
 import GroupEditPanel from '../components/GroupEditPanel.vue'
 
 const route = useRoute()
diff --git a/ui/src/views/UserListView.vue b/ui/src/views/UserListView.vue
index 5d66124..dadeefa 100644
--- a/ui/src/views/UserListView.vue
+++ b/ui/src/views/UserListView.vue
@@ -56,11 +56,8 @@
         </span>
       </template>
       <template #cell.locked="{ item }">
-        <v-tooltip :text="item.locked ? t('user.statusLocked') : t('user.statusActive')" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" :color="item.locked ? 'error' : 'success'" size="19">{{ item.locked ? 'mdi-lock' : 'mdi-lock-open-variant' }}</v-icon>
-          </template>
-        </v-tooltip>
+        <LjStatus :status="item.locked ? 'error' : 'ok'"
+                  :tooltip="item.locked ? t('user.statusLocked') : t('user.statusActive')" />
       </template>
       <template #actions="{ item }">
         <v-menu location="bottom end">
@@ -106,7 +103,7 @@ import { useDataTable, useApi, useAppStore, useErrorStore, useI18nStore } from '
 import { TYPE_ICONS } from '../composables/delegateTypes.js'
 // Shared 2026 chrome: table, confirm dialog (aliased so <LigojConfirmDialog>
 // tags need no change), page header, buttons, search — all from the host.
-import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch } from '@ligoj/host'
+import { VibrantDataTable, VibrantConfirmDialog as LigojConfirmDialog, LjPageHeader, LjButton, LjSearch, LjStatus } from '@ligoj/host'
 import UserEditDialog from './UserEditDialog.vue'
 
 const appStore = useAppStore()