feat: added tab icons

src/components/TabIcon.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+
+const icon = defineAsyncComponent(
+  () => import(`@/assets/icons/${props.name}.svg`)
+);
+</script>
+
+<template>
+  <component :is="icon" class="w-[14px] min-w-[14px] content-center" />
+</template>

src/components/TabOrchestrator.vue

@@ -4,6 +4,7 @@ import {
   TabProviderCloseTabKey,
 } from "@/providers/TabProvider";
 import { injectStrict } from "@/lib/utils";
+import TabIcon from "@/components/TabIcon.vue";
 import Expand from "@/assets/icons/expand.svg";
 import Close from "@/assets/icons/close.svg";
 import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
@@ -99,6 +100,7 @@ const closeAndSetActiveTab = (id: string) => {
           @click="setActiveTab(tab.id)"
           :title="tab.title"
         >
+          <tab-icon :name="tab.icon" class="mr-1" />
           <span class="truncate">{{ tab.title }}</span>
           <div
             @click="closeAndSetActiveTab(tab.id)"

src/providers/TabProvider.ts

@@ -11,13 +11,20 @@ import {
 export const TabProviderStateKey: InjectionKey<ToRefs<TabProviderState>> =
   Symbol("TabProviderState");
 export const TabProviderAddTabKey: InjectionKey<
-  (id: string, title: string, component: any, props?: any) => void
+  (
+    id: string,
+    title: string,
+    component: any,
+    props?: any,
+    icon?: string
+  ) => void
 > = Symbol("TabProviderAddTab");
 export const TabProviderCloseTabKey: InjectionKey<(id: string) => void> =
   Symbol("TabProviderCloseTab");
 
 export interface Tab {
   id: string;
+  icon: string;
   title: string;
   component: any;
   props?: any;
@@ -37,14 +44,21 @@ export default {
 
     provide(TabProviderStateKey, toRefs(state));
 
-    const addTab = (id: string, title: string, component: any, props?: any) => {
+    const addTab = (
+      id: string,
+      title: string,
+      component: any,
+      props?: any,
+      icon: string = "tab"
+    ) => {
       if (state.tabs.find((tab) => tab.id === id)) {
         state.activeTabId = id;
         return;
       }
 
       state.tabs.push({
         id,
+        icon,
         title,
         component: shallowRef(component),
         props,

src/views/Pods.vue

@@ -28,13 +28,14 @@ const rowActions: RowAction<V1Pod>[] = [
     handler: (row) => {
       addTab(
         `edit_${row.metadata?.name}`,
-        `Edit ${row.metadata?.name}`,
+        `${row.metadata?.name}`,
         defineAsyncComponent(() => import("@/views/ObjectEditor.vue")),
         {
           context: context.value,
           namespace: namespace.value,
           object: `pods/${row.metadata?.name}`,
-        }
+        },
+        "edit"
       );
     },
   },
@@ -43,13 +44,14 @@ const rowActions: RowAction<V1Pod>[] = [
     handler: (row) => {
       addTab(
         `describe_${row.metadata?.name}`,
-        `Describe ${row.metadata?.name}`,
+        `${row.metadata?.name}`,
         defineAsyncComponent(() => import("@/views/Describe.vue")),
         {
           context: context.value,
           namespace: namespace.value,
           object: `pods/${row.metadata?.name}`,
-        }
+        },
+        "describe"
       );
     },
   },
@@ -61,14 +63,15 @@ const rowActions: RowAction<V1Pod>[] = [
         handler: () => {
           addTab(
             `shell_${row.metadata?.name}_${container.name}`,
-            `>_ ${row.metadata?.name}/${container.name}`,
+            `${row.metadata?.name}/${container.name}`,
             defineAsyncComponent(() => import("@/views/Shell.vue")),
             {
               context: context.value,
               namespace: namespace.value,
               pod: row,
               container: container,
-            }
+            },
+            "shell"
           );
         },
       }));
@@ -79,13 +82,14 @@ const rowActions: RowAction<V1Pod>[] = [
     handler: (row) => {
       addTab(
         `logs_${row.metadata?.name}`,
-        `Logs for ${row.metadata?.name}`,
+        `${row.metadata?.name}`,
         defineAsyncComponent(() => import("@/views/LogViewer.vue")),
         {
           context: context.value,
           namespace: namespace.value,
           pod: row.metadata?.name,
-        }
+        },
+        "logs"
       );
     },
   },