From 6ea556967f479d35b1ba03b1a76313fe518a7836 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Mon, 1 Jun 2026 16:07:53 +0200
Subject: [PATCH] feat(ui): add entity icons to dialog titles

Prepend each dialog title with an icon representing the entity it concerns
(projects, system users/roles/nodes/config, plugins, API tokens), matching
the convention introduced in the host and plugin-id.

Ref ligoj/plugin-id#51
---
 ui/src/views/ApiTokenView.vue            | 16 ++++++++++++----
 ui/src/views/ProjectDetailView.vue       | 15 ++++++++++++---
 ui/src/views/ProjectListView.vue         | 10 ++++++++--
 ui/src/views/SystemConfigurationView.vue | 10 ++++++++--
 ui/src/views/SystemNodeView.vue          | 11 +++++++++--
 ui/src/views/SystemPluginView.vue        | 10 ++++++++--
 ui/src/views/SystemRoleView.vue          | 10 ++++++++--
 ui/src/views/SystemUserView.vue          | 10 ++++++++--
 8 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/ui/src/views/ApiTokenView.vue b/ui/src/views/ApiTokenView.vue
index 577e8ea..52b5acc 100644
--- a/ui/src/views/ApiTokenView.vue
+++ b/ui/src/views/ApiTokenView.vue
@@ -39,7 +39,10 @@
     <!-- Create token dialog -->
     <v-dialog v-model="createDialog" max-width="480">
       <v-card>
-        <v-card-title>{{ t('system.apiToken.newTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-key</v-icon>
+          <span>{{ t('system.apiToken.newTitle') }}</span>
+        </v-card-title>
         <v-card-text>
           <v-form ref="createFormRef" @submit.prevent="doCreate">
             <v-text-field prepend-inner-icon="mdi-key-outline" v-model="createName" :label="t('system.apiToken.fieldName')" :rules="[rules.required]" variant="outlined" autofocus maxlength="250" />
@@ -56,7 +59,8 @@
     <!-- Show / regenerate token dialog -->
     <v-dialog v-model="tokenDialog" max-width="520">
       <v-card>
-        <v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-key</v-icon>
           {{ t('system.apiToken.tokenLabel') }}&nbsp;<code>{{ tokenTarget }}</code>
         </v-card-title>
         <v-card-text>
@@ -76,7 +80,8 @@
     <!-- Created token dialog (shows the freshly-minted value) -->
     <v-dialog v-model="createdDialog" max-width="520">
       <v-card>
-        <v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-key</v-icon>
           {{ t('system.apiToken.newTokenLabel') }}&nbsp;<code>{{ createdName }}</code>
         </v-card-title>
         <v-card-text>
@@ -95,7 +100,10 @@
     <!-- Delete confirmation -->
     <v-dialog v-model="deleteDialog" max-width="420">
       <v-card>
-        <v-card-title>{{ t('system.apiToken.deleteTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-key</v-icon>
+          <span>{{ t('system.apiToken.deleteTitle') }}</span>
+        </v-card-title>
         <v-card-text>{{ t('system.apiToken.deleteConfirm', { name: deleteTarget }) }}</v-card-text>
         <v-card-actions>
           <v-spacer />
diff --git a/ui/src/views/ProjectDetailView.vue b/ui/src/views/ProjectDetailView.vue
index aaf22f0..28292d9 100644
--- a/ui/src/views/ProjectDetailView.vue
+++ b/ui/src/views/ProjectDetailView.vue
@@ -101,7 +101,10 @@
     <!-- Edit dialog (same shape as ProjectListView) -->
     <v-dialog v-model="editDialog" max-width="600">
       <v-card>
-        <v-card-title>{{ t('project.detail.editTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-folder-outline</v-icon>
+          <span>{{ t('project.detail.editTitle') }}</span>
+        </v-card-title>
         <v-card-text>
           <v-form ref="formRef" @submit.prevent="save">
             <v-text-field v-model="editForm.name" :label="t('project.detail.fieldName')" :rules="[rules.required]" prepend-inner-icon="mdi-form-textbox" variant="outlined" class="mb-2" />
@@ -125,7 +128,10 @@
          so the wizard doesn't have to read the host's route. -->
     <v-dialog v-model="subscribeDialog" max-width="900" scrollable>
       <v-card>
-        <v-card-title>{{ t('wizard.title') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-folder-outline</v-icon>
+          <span>{{ t('wizard.title') }}</span>
+        </v-card-title>
         <v-card-text class="pa-4">
           <SubscribeWizardView v-if="subscribeDialog && project" mode="subscribe" :project-id="project.id" @saved="onSubscribed" @cancel="subscribeDialog = false" />
         </v-card-text>
@@ -135,7 +141,10 @@
     <!-- Unsubscribe confirmation -->
     <v-dialog v-model="unsubDialog" max-width="480">
       <v-card>
-        <v-card-title>{{ t('project.detail.unsubscribe') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-folder-outline</v-icon>
+          <span>{{ t('project.detail.unsubscribe') }}</span>
+        </v-card-title>
         <v-card-text>
           <p class="mb-3">
             {{ unsubConfirmParts[0] }}<strong>{{ unsubTarget?.node?.name }}</strong>{{ unsubConfirmParts[1] }}
diff --git a/ui/src/views/ProjectListView.vue b/ui/src/views/ProjectListView.vue
index fd5875f..dbca63d 100644
--- a/ui/src/views/ProjectListView.vue
+++ b/ui/src/views/ProjectListView.vue
@@ -49,7 +49,10 @@
     <!-- Create / edit dialog -->
     <v-dialog v-model="editDialog" max-width="600">
       <v-card>
-        <v-card-title>{{ editTarget?.id ? 'Edit project' : 'New project' }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-folder-outline</v-icon>
+          <span>{{ editTarget?.id ? 'Edit project' : 'New project' }}</span>
+        </v-card-title>
         <v-card-text>
           <v-form ref="formRef" @submit.prevent="save">
             <v-text-field v-model="editForm.name" label="Name" :rules="[rules.required]" variant="outlined" class="mb-2" autofocus @update:model-value="onNameChanged" />
@@ -71,7 +74,10 @@
     <!-- Delete confirmation -->
     <v-dialog v-model="deleteDialog" max-width="500">
       <v-card>
-        <v-card-title>Delete project</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-folder-outline</v-icon>
+          <span>Delete project</span>
+        </v-card-title>
         <v-card-text>
           <p class="mb-4">
             Are you sure you want to delete <strong>{{ deleteTarget?.name }}</strong>?
diff --git a/ui/src/views/SystemConfigurationView.vue b/ui/src/views/SystemConfigurationView.vue
index 945eda1..b8032d8 100644
--- a/ui/src/views/SystemConfigurationView.vue
+++ b/ui/src/views/SystemConfigurationView.vue
@@ -65,7 +65,10 @@
     <!-- Create / edit dialog -->
     <v-dialog v-model="editDialog" max-width="600">
       <v-card>
-        <v-card-title>{{ editTarget ? t('system.config.editTitle') : t('system.config.newTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-cog</v-icon>
+          <span>{{ editTarget ? t('system.config.editTitle') : t('system.config.newTitle') }}</span>
+        </v-card-title>
         <v-card-text>
           <v-form ref="formRef" @submit.prevent="save">
             <v-text-field v-model="editForm.name" :label="t('system.config.fieldName')" prepend-inner-icon="mdi-cog-outline" :rules="[rules.required]" variant="outlined" density="compact" class="mb-2" autofocus />
@@ -86,7 +89,10 @@
     <!-- Delete confirmation -->
     <v-dialog v-model="deleteDialog" max-width="440">
       <v-card>
-        <v-card-title>{{ t('system.config.deleteTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-cog</v-icon>
+          <span>{{ t('system.config.deleteTitle') }}</span>
+        </v-card-title>
         <v-card-text>
           {{ t('system.config.deleteConfirm', { name: deleteTarget?.name || '' }) }}
         </v-card-text>
diff --git a/ui/src/views/SystemNodeView.vue b/ui/src/views/SystemNodeView.vue
index 50b64ad..a2194e7 100644
--- a/ui/src/views/SystemNodeView.vue
+++ b/ui/src/views/SystemNodeView.vue
@@ -50,6 +50,7 @@
     <v-dialog v-model="editDialog" max-width="900" scrollable>
       <v-card>
         <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-server-network</v-icon>
           <span>{{ t('system.node.editTitle') }}</span>
           <code v-if="editTarget" class="text-body-2">{{ editTarget.id }}</code>
         </v-card-title>
@@ -61,7 +62,10 @@
 
     <v-dialog v-model="createDialog" max-width="900" scrollable>
       <v-card>
-        <v-card-title>{{ t('system.node.createTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-server-network</v-icon>
+          <span>{{ t('system.node.createTitle') }}</span>
+        </v-card-title>
         <v-card-text class="pa-4">
           <SubscribeWizardView v-if="createDialog" mode="create-node" @saved="onCreateSaved" @cancel="createDialog = false" />
         </v-card-text>
@@ -70,7 +74,10 @@
 
     <v-dialog v-model="deleteDialog" max-width="460">
       <v-card>
-        <v-card-title>{{ t('system.node.deleteTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-server-network</v-icon>
+          <span>{{ t('system.node.deleteTitle') }}</span>
+        </v-card-title>
         <v-card-text>
           {{ t('system.node.deleteConfirm', { name: deleteTarget?.name || '', id: deleteTarget?.id || '' }) }}
         </v-card-text>
diff --git a/ui/src/views/SystemPluginView.vue b/ui/src/views/SystemPluginView.vue
index 1ac1cdd..496a2bf 100644
--- a/ui/src/views/SystemPluginView.vue
+++ b/ui/src/views/SystemPluginView.vue
@@ -55,7 +55,10 @@
     <!-- Install dialog: search-driven autocomplete -->
     <v-dialog v-model="installDialog" max-width="640">
       <v-card>
-        <v-card-title>{{ t('system.plugin.installTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-puzzle</v-icon>
+          <span>{{ t('system.plugin.installTitle') }}</span>
+        </v-card-title>
         <v-card-text>
           <v-autocomplete prepend-inner-icon="mdi-puzzle-plus-outline" v-model="installSelection" v-model:search="installSearch" :items="searchResults" item-value="artifact" :label="t('system.plugin.searchArtifacts')"
             :hint="t('system.plugin.searchHint', { repository })" persistent-hint multiple chips closable-chips clearable variant="outlined" :loading="searching" no-filter return-object
@@ -102,7 +105,10 @@
     <!-- Confirm dialog (restart / check-versions / delete) -->
     <v-dialog v-model="confirm.open" max-width="440">
       <v-card>
-        <v-card-title>{{ confirm.title }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-puzzle</v-icon>
+          <span>{{ confirm.title }}</span>
+        </v-card-title>
         <v-card-text>{{ confirm.text }}</v-card-text>
         <v-card-actions>
           <v-spacer />
diff --git a/ui/src/views/SystemRoleView.vue b/ui/src/views/SystemRoleView.vue
index ad1e384..8c3ba68 100644
--- a/ui/src/views/SystemRoleView.vue
+++ b/ui/src/views/SystemRoleView.vue
@@ -28,7 +28,10 @@
 
     <v-dialog v-model="editDialog" max-width="640">
       <v-card>
-        <v-card-title>{{ editTarget ? t('system.role.editTitle') : t('system.role.newTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-shield-account-outline</v-icon>
+          <span>{{ editTarget ? t('system.role.editTitle') : t('system.role.newTitle') }}</span>
+        </v-card-title>
         <v-card-text>
           <v-form ref="formRef" @submit.prevent="save">
             <v-text-field v-model="editForm.name" :label="t('system.role.fieldName')" prepend-inner-icon="mdi-shield-outline" :rules="[rules.required]" variant="outlined" class="mb-4" autofocus />
@@ -50,7 +53,10 @@
 
     <v-dialog v-model="deleteDialog" max-width="420">
       <v-card>
-        <v-card-title>{{ t('system.role.deleteTitle') }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-shield-account-outline</v-icon>
+          <span>{{ t('system.role.deleteTitle') }}</span>
+        </v-card-title>
         <v-card-text>{{ t('system.role.deleteConfirm', { name: deleteTarget?.name || '' }) }}</v-card-text>
         <v-card-actions>
           <v-spacer />
diff --git a/ui/src/views/SystemUserView.vue b/ui/src/views/SystemUserView.vue
index bee2e66..f909775 100644
--- a/ui/src/views/SystemUserView.vue
+++ b/ui/src/views/SystemUserView.vue
@@ -27,7 +27,10 @@
 
     <v-dialog v-model="editDialog" max-width="520">
       <v-card>
-        <v-card-title>{{ editTarget ? 'Edit system user' : 'New system user' }}</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-account</v-icon>
+          <span>{{ editTarget ? 'Edit system user' : 'New system user' }}</span>
+        </v-card-title>
         <v-card-text>
           <v-form ref="formRef" @submit.prevent="save">
             <v-text-field v-model="editForm.login" label="Login" prepend-inner-icon="mdi-account" :rules="[rules.required]" :disabled="!!editTarget" variant="outlined" class="mb-2" autofocus />
@@ -45,7 +48,10 @@
 
     <v-dialog v-model="deleteDialog" max-width="420">
       <v-card>
-        <v-card-title>Delete system user</v-card-title>
+        <v-card-title class="d-flex align-center ga-2">
+          <v-icon color="primary">mdi-account</v-icon>
+          <span>Delete system user</span>
+        </v-card-title>
         <v-card-text>Remove <strong>{{ deleteTarget?.login }}</strong> from system accounts?</v-card-text>
         <v-card-actions>
           <v-spacer />