From 296bd5b437e2f426f3a57b5843e9c9121c0abf8b Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 24 Mar 2025 13:01:53 +0100
Subject: [PATCH] Add icons to all tabs (#4421)

---
 web/src/assets/locales/en.json                |  4 +-
 web/src/components/atomic/Icon.vue            | 46 +++++++++++++++++--
 .../components/repo/pipeline/PipelineItem.vue |  4 +-
 .../repo/pipeline/PipelineStepList.vue        |  2 +-
 web/src/views/admin/AdminSettingsWrapper.vue  | 16 +++----
 .../views/org/settings/OrgSettingsWrapper.vue |  5 +-
 web/src/views/repo/RepoWrapper.vue            |  5 +-
 .../views/repo/pipeline/PipelineWrapper.vue   |  5 +-
 web/src/views/repo/settings/RepoSettings.vue  | 12 ++---
 web/src/views/user/UserWrapper.vue            |  9 ++--
 10 files changed, 76 insertions(+), 32 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 7bc557d2f..d8cb2119e 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -95,7 +95,7 @@
     "settings": {
       "not_allowed": "You are not allowed to access the settings of this repository",
       "general": {
-        "general": "General",
+        "general": "Project",
         "project": "Project settings",
         "save": "Save settings",
         "success": "Project settings updated",
@@ -418,7 +418,7 @@
     "settings": {
       "settings": "User Settings",
       "general": {
-        "general": "General",
+        "general": "Account",
         "language": "Language",
         "theme": {
           "theme": "Theme",
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index a1883fd98..a98c7abb3 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -2,7 +2,7 @@
 <template>
   <SvgIcon v-if="name === 'duration'" :path="mdiTimerOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="1.3rem" />
-  <SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'branch'" :path="mdiSourceBranch" size="1.3rem" />
   <SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="1.3rem" />
   <SvgIcon v-else-if="name === 'pull-request-closed'" :path="mdiSourceMerge" size="1.3rem" />
   <SvgIcon v-else-if="name === 'manual-pipeline'" :path="mdiGestureTap" size="1.3rem" />
@@ -17,6 +17,15 @@
   <SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircle" size="1.3rem" />
   <SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircle" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'list-group'" :path="mdiFormatListGroup" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'secret'" :path="mdiShieldKeyOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'console'" :path="mdiConsole" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'agent'" :path="mdiPlayNetworkOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'info'" :path="mdiInformationSlabCircleOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'user'" :path="mdiAccountOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'org'" :path="mdiAccountGroupOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'cron'" :path="mdiCalendarClockOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'toolbox'" :path="mdiToolboxOutline" size="1.3rem" />
   <SvgIcon
     v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'"
     type="mdi"
@@ -49,6 +58,10 @@
   <SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="1.3rem" />
   <SvgIcon v-else-if="name === 'play-outline'" :path="mdiPlayOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'dots'" :path="mdiDotsVertical" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'tray-full'" :path="mdiTrayFull" size="24" />
+  <SvgIcon v-else-if="name === 'file-cog-outlined'" :path="mdiFileCogOutline" size="24" />
+  <SvgIcon v-else-if="name === 'bug-outline'" :path="mdiBugOutline" size="24" />
+  <SvgIcon v-else-if="name === 'docker'" :path="mdiDocker" size="1.3rem" />
 
   <SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="1.3rem" />
@@ -83,10 +96,14 @@
 
 <script lang="ts" setup>
 import {
+  mdiAccountGroupOutline,
+  mdiAccountOutline,
   mdiAlarm,
   mdiAlertCircle,
   mdiArrowLeft,
   mdiBitbucket,
+  mdiBugOutline,
+  mdiCalendarClockOutline,
   mdiCheckCircle,
   mdiChevronRight,
   mdiClockTimeEightOutline,
@@ -94,16 +111,21 @@ import {
   mdiCloseCircle,
   mdiCog,
   mdiCogOutline,
+  mdiConsole,
+  mdiDocker,
   mdiDotsVertical,
   mdiDownloadOutline,
   mdiEyeOffOutline,
   mdiEyeOutline,
+  mdiFileCogOutline,
   mdiFormatListBulleted,
+  mdiFormatListGroup,
   mdiGestureTap,
   mdiGit,
   mdiGithub,
   mdiGitlab,
   mdiHelpCircle,
+  mdiInformationSlabCircleOutline,
   mdiLockOpenOutline,
   mdiLockOutline,
   mdiMinusCircle,
@@ -112,11 +134,13 @@ import {
   mdiPencilOutline,
   mdiPlay,
   mdiPlayCircle,
+  mdiPlayNetworkOutline,
   mdiPlayOutline,
   mdiPlus,
   mdiPower,
   mdiRadioboxBlank,
   mdiRadioboxIndeterminateVariant,
+  mdiShieldKeyOutline,
   mdiSourceBranch,
   mdiSourceCommit,
   mdiSourceMerge,
@@ -124,7 +148,9 @@ import {
   mdiStopCircle,
   mdiTagOutline,
   mdiTimerOutline,
+  mdiToolboxOutline,
   mdiTrashCanOutline,
+  mdiTrayFull,
   mdiWrenchCogOutline,
 } from '@mdi/js';
 import { siForgejo, siGitea } from 'simple-icons';
@@ -134,7 +160,7 @@ import SvgIcon from './SvgIcon.vue';
 export type IconNames =
   | 'duration'
   | 'since'
-  | 'push'
+  | 'branch'
   | 'pull-request'
   | 'pull-request-closed'
   | 'manual-pipeline'
@@ -183,7 +209,21 @@ export type IconNames =
   | 'spinner'
   | 'visibility-private'
   | 'visibility-internal'
-  | 'dots';
+  | 'dots'
+  | 'tray-full'
+  | 'file-cog-outlined'
+  | 'bug-outline'
+  | 'list-group'
+  | 'secret'
+  | 'docker'
+  | 'console'
+  | 'agent'
+  | 'info'
+  | 'repo'
+  | 'user'
+  | 'org'
+  | 'cron'
+  | 'toolbox';
 
 defineProps<{
   name: IconNames;
diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index a74b3cf64..2f4014118 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -45,9 +45,9 @@
             <Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" />
             <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
             <Icon v-else-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
-            <Icon v-else-if="pipeline.event === 'cron'" name="push" />
+            <Icon v-else-if="pipeline.event === 'cron'" name="branch" />
             <Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" />
-            <Icon v-else name="push" />
+            <Icon v-else name="branch" />
           </span>
           <span class="truncate">{{ prettyRef }}</span>
         </div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 89b98105b..f19c34415 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -24,7 +24,7 @@
         :to="{ name: 'repo-branch', params: { branch: prettyRef } }"
       >
         <Icon v-if="pipeline.event === 'manual'" name="manual-pipeline" />
-        <Icon v-else-if="pipeline.event === 'push'" name="push" />
+        <Icon v-else-if="pipeline.event === 'push'" name="branch" />
         <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
         <span class="truncate">{{ prettyRef }}</span>
       </router-link>
diff --git a/web/src/views/admin/AdminSettingsWrapper.vue b/web/src/views/admin/AdminSettingsWrapper.vue
index da9a0c44b..6e6036718 100644
--- a/web/src/views/admin/AdminSettingsWrapper.vue
+++ b/web/src/views/admin/AdminSettingsWrapper.vue
@@ -3,14 +3,14 @@
     <template #title>
       {{ $t('settings') }}
     </template>
-    <Tab :to="{ name: 'admin-settings' }" :title="$t('info')" />
-    <Tab :to="{ name: 'admin-settings-secrets' }" :title="$t('secrets.secrets')" />
-    <Tab :to="{ name: 'admin-settings-registries' }" :title="$t('registries.registries')" />
-    <Tab :to="{ name: 'admin-settings-repos' }" :title="$t('admin.settings.repos.repos')" />
-    <Tab :to="{ name: 'admin-settings-users' }" :title="$t('admin.settings.users.users')" />
-    <Tab :to="{ name: 'admin-settings-orgs' }" :title="$t('admin.settings.orgs.orgs')" />
-    <Tab :to="{ name: 'admin-settings-agents' }" :title="$t('admin.settings.agents.agents')" />
-    <Tab :to="{ name: 'admin-settings-queue' }" :title="$t('admin.settings.queue.queue')" />
+    <Tab icon="info" :to="{ name: 'admin-settings' }" :title="$t('info')" />
+    <Tab icon="secret" :to="{ name: 'admin-settings-secrets' }" :title="$t('secrets.secrets')" />
+    <Tab icon="docker" :to="{ name: 'admin-settings-registries' }" :title="$t('registries.registries')" />
+    <Tab icon="repo" :to="{ name: 'admin-settings-repos' }" :title="$t('admin.settings.repos.repos')" />
+    <Tab icon="user" :to="{ name: 'admin-settings-users' }" :title="$t('admin.settings.users.users')" />
+    <Tab icon="org" :to="{ name: 'admin-settings-orgs' }" :title="$t('admin.settings.orgs.orgs')" />
+    <Tab icon="agent" :to="{ name: 'admin-settings-agents' }" :title="$t('admin.settings.agents.agents')" />
+    <Tab icon="tray-full" :to="{ name: 'admin-settings-queue' }" :title="$t('admin.settings.queue.queue')" />
 
     <router-view />
   </Scaffold>
diff --git a/web/src/views/org/settings/OrgSettingsWrapper.vue b/web/src/views/org/settings/OrgSettingsWrapper.vue
index 1aafffb93..f699b2e4e 100644
--- a/web/src/views/org/settings/OrgSettingsWrapper.vue
+++ b/web/src/views/org/settings/OrgSettingsWrapper.vue
@@ -11,10 +11,11 @@
       </span>
     </template>
 
-    <Tab :to="{ name: 'org-settings-secrets' }" :title="$t('secrets.secrets')" />
-    <Tab :to="{ name: 'org-settings-registries' }" :title="$t('registries.registries')" />
+    <Tab icon="secret" :to="{ name: 'org-settings-secrets' }" :title="$t('secrets.secrets')" />
+    <Tab icon="docker" :to="{ name: 'org-settings-registries' }" :title="$t('registries.registries')" />
     <Tab
       v-if="useConfig().userRegisteredAgents"
+      icon="agent"
       :to="{ name: 'org-settings-agents' }"
       :title="$t('admin.settings.agents.agents')"
     />
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index e08fbe2a9..0082af451 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -38,10 +38,11 @@
       />
     </template>
 
-    <Tab :to="{ name: 'repo' }" :title="$t('repo.activity')" />
-    <Tab :to="{ name: 'repo-branches' }" match-children :title="$t('repo.branches')" />
+    <Tab icon="list-group" :to="{ name: 'repo' }" :title="$t('repo.activity')" />
+    <Tab icon="branch" :to="{ name: 'repo-branches' }" match-children :title="$t('repo.branches')" />
     <Tab
       v-if="repo.pr_enabled && repo.allow_pr"
+      icon="pull-request"
       :to="{ name: 'repo-pull-requests' }"
       match-children
       :title="$t('repo.pull_requests')"
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 7ea8c75b9..f650af5a4 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -73,7 +73,7 @@
       </div>
     </template>
 
-    <Tab :to="{ name: 'repo-pipeline' }" :title="$t('repo.pipeline.tasks')" />
+    <Tab icon="tray-full" :to="{ name: 'repo-pipeline' }" :title="$t('repo.pipeline.tasks')" />
     <Tab
       v-if="pipeline.errors && pipeline.errors.length > 0"
       :to="{ name: 'repo-pipeline-errors' }"
@@ -82,7 +82,7 @@
       :count="pipeline.errors?.length"
       :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-error-100' : 'text-wp-state-warn-100'"
     />
-    <Tab :to="{ name: 'repo-pipeline-config' }" :title="$t('repo.pipeline.config')" />
+    <Tab icon="file-cog-outlined" :to="{ name: 'repo-pipeline-config' }" :title="$t('repo.pipeline.config')" />
     <Tab
       v-if="pipeline.changed_files && pipeline.changed_files.length > 0"
       :to="{ name: 'repo-pipeline-changed-files' }"
@@ -91,6 +91,7 @@
     />
     <Tab
       v-if="repoPermissions && repoPermissions.push"
+      icon="bug-outline"
       :to="{ name: 'repo-pipeline-debug' }"
       :title="$t('repo.pipeline.debug.title')"
     />
diff --git a/web/src/views/repo/settings/RepoSettings.vue b/web/src/views/repo/settings/RepoSettings.vue
index 66162e3e6..b7e9dc0a7 100644
--- a/web/src/views/repo/settings/RepoSettings.vue
+++ b/web/src/views/repo/settings/RepoSettings.vue
@@ -16,12 +16,12 @@
       </span>
     </template>
 
-    <Tab :to="{ name: 'repo-settings' }" :title="$t('repo.settings.general.general')" />
-    <Tab :to="{ name: 'repo-settings-secrets' }" :title="$t('secrets.secrets')" />
-    <Tab :to="{ name: 'repo-settings-registries' }" :title="$t('registries.registries')" />
-    <Tab :to="{ name: 'repo-settings-crons' }" :title="$t('repo.settings.crons.crons')" />
-    <Tab :to="{ name: 'repo-settings-badge' }" :title="$t('repo.settings.badge.badge')" />
-    <Tab :to="{ name: 'repo-settings-actions' }" :title="$t('repo.settings.actions.actions')" />
+    <Tab icon="settings-outline" :to="{ name: 'repo-settings' }" :title="$t('repo.settings.general.general')" />
+    <Tab icon="secret" :to="{ name: 'repo-settings-secrets' }" :title="$t('secrets.secrets')" />
+    <Tab icon="docker" :to="{ name: 'repo-settings-registries' }" :title="$t('registries.registries')" />
+    <Tab icon="cron" :to="{ name: 'repo-settings-crons' }" :title="$t('repo.settings.crons.crons')" />
+    <Tab icon="tag" :to="{ name: 'repo-settings-badge' }" :title="$t('repo.settings.badge.badge')" />
+    <Tab icon="toolbox" :to="{ name: 'repo-settings-actions' }" :title="$t('repo.settings.actions.actions')" />
 
     <router-view />
   </Scaffold>
diff --git a/web/src/views/user/UserWrapper.vue b/web/src/views/user/UserWrapper.vue
index 43cf4afd2..4c3c564a4 100644
--- a/web/src/views/user/UserWrapper.vue
+++ b/web/src/views/user/UserWrapper.vue
@@ -3,12 +3,13 @@
     <template #title>{{ $t('user.settings.settings') }}</template>
     <template #headerActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
 
-    <Tab :to="{ name: 'user' }" :title="$t('user.settings.general.general')" />
-    <Tab :to="{ name: 'user-secrets' }" :title="$t('secrets.secrets')" />
-    <Tab :to="{ name: 'user-registries' }" :title="$t('registries.registries')" />
-    <Tab :to="{ name: 'user-cli-and-api' }" :title="$t('user.settings.cli_and_api.cli_and_api')" />
+    <Tab icon="settings-outline" :to="{ name: 'user' }" :title="$t('user.settings.general.general')" />
+    <Tab icon="secret" :to="{ name: 'user-secrets' }" :title="$t('secrets.secrets')" />
+    <Tab icon="docker" :to="{ name: 'user-registries' }" :title="$t('registries.registries')" />
+    <Tab icon="console" :to="{ name: 'user-cli-and-api' }" :title="$t('user.settings.cli_and_api.cli_and_api')" />
     <Tab
       v-if="useConfig().userRegisteredAgents"
+      icon="agent"
       :to="{ name: 'user-agents' }"
       :title="$t('admin.settings.agents.agents')"
     />