Add icons to all pipeline tabs

web/src/components/atomic/Icon.vue

@@ -51,6 +51,10 @@
   <SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="24" />
   <SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="24" />
   <SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="24" />
+  <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 === 'magnify-scan'" :path="mdiMagnifyScan" size="24" />
+  <SvgIcon v-else-if="name === 'file-alert-outline'" :path="mdiFileAlertOutline" size="24" />
 
   <SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="32" />
   <SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" />
@@ -96,12 +100,16 @@ import {
   mdiDownload,
   mdiDownloadCircle,
   mdiDownloadOff,
+  mdiFileAlertOutline,
+  mdiFileCogOutline,
   mdiFormatListBulleted,
   mdiGestureTap,
   mdiGit,
   mdiGithub,
   mdiGitlab,
   mdiHelpCircleOutline,
+  mdiMagnifyScan,
+  mdiMinusCircle,
   mdiMinusCircleOutline,
   mdiPackageVariant,
   mdiPause,
@@ -120,6 +128,7 @@ import {
   mdiTagOutline,
   mdiTimelapse,
   mdiTrashCanOutline,
+  mdiTrayFull,
 } from '@mdi/js';
 import { siForgejo, siGitea } from 'simple-icons';
 
@@ -176,7 +185,11 @@ export type IconNames =
   | 'attention'
   | 'spinner'
   | 'error'
-  | 'remove';
+  | 'remove'
+  | 'tray-full'
+  | 'file-cog-outlined'
+  | 'magnify-scan'
+  | 'file-alert-outline';
 
 defineProps<{
   name: IconNames;

web/src/components/layout/scaffold/Tabs.vue

@@ -5,14 +5,14 @@
       :key="tab.title"
       v-slot="{ isActive, isExactActive }"
       :to="tab.to"
-      class="border-transparent w-full py-1 md:py-2 md:w-auto md:px-6 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
+      class="border-transparent w-full py-1 md:py-2 md:w-auto md:px-4 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
       :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
       :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
     >
       <Icon v-if="isExactActive || (isActive && tab.matchChildren)" name="chevron-right" class="md:hidden" />
       <Icon v-else name="blank" class="md:hidden" />
       <span class="flex gap-2 items-center flex-row">
-        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
+        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" size="20" />
         <span>{{ tab.title }}</span>
         <CountBadge v-if="tab.count" :value="tab.count" />
       </span>

web/src/views/repo/pipeline/PipelineWrapper.vue

@@ -73,16 +73,15 @@
       </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' }"
-      icon="attention"
+      icon="file-alert-outline"
       :title="pipeline.errors.some((e) => !e.is_warning) ? $t('repo.pipeline.errors') : $t('repo.pipeline.warnings')"
       :count="pipeline.errors?.length"
-      :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-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 +90,7 @@
     />
     <Tab
       v-if="repoPermissions && repoPermissions.push"
+      icon="magnify-scan"
       :to="{ name: 'repo-pipeline-debug' }"
       :title="$t('repo.pipeline.debug.title')"
     />