feat(gui): show custom table icon in expanded row title

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/general/TableIcon.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { Icon as IcIcon } from '@iconify/vue'
+import type { TableType } from 'nocodb-sdk'
+
+const { meta: tableMeta } = defineProps<{
+  meta: TableType
+}>()
+</script>
+
+<template>
+  <IcIcon
+    v-if="tableMeta.meta?.icon"
+    :data-testid="`nc-icon-${tableMeta.meta?.icon}`"
+    class="text-xl"
+    :icon="tableMeta.meta?.icon"
+  ></IcIcon>
+
+  <MdiEyeCircleOutline v-else-if="tableMeta.meta?.type === 'view'" class="w-5" />
+  <MdiTableLarge v-else class="w-5" />
+</template>
+
+<style scoped></style>

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -77,7 +77,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 <template>
   <div class="flex p-2 items-center gap-2 p-4 nc-expanded-form-header">
     <h5 class="text-lg font-weight-medium flex items-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate">
-      <mdi-table-arrow-right :style="{ color: iconColor }" />
+      <GeneralTableIcon :style="{ color: iconColor }" :meta="meta" class="mx-2"></GeneralTableIcon>
 
       <template v-if="meta">
         {{ meta.title }}