fix(ui): add fallback tool icon

Author: rwv

shared/ui/src/components/tool/grid/ToolThing.dom.test.ts

@@ -29,7 +29,16 @@ vi.mock('naive-ui', async () => {
   return {
     NThing,
     NAvatar: base('NAvatar', 'span'),
-    NIcon: base('NIcon', 'span'),
+    NIcon: defineComponent({
+      name: 'NIcon',
+      props: {
+        component: {
+          type: Object,
+          default: undefined,
+        },
+      },
+      template: '<span class="n-icon" :data-has-component="String(!!component)" />',
+    }),
     NTag: base('NTag', 'span'),
     useThemeVars: () => ({
       cubicBezierEaseInOut: 'ease',
@@ -125,4 +134,18 @@ describe('ToolThing', () => {
     expect(wrapper.find('a.tool-link').exists()).toBe(true)
     expect(wrapper.findComponent({ name: 'NAvatar' }).exists()).toBe(true)
   })
+
+  it('falls back to the default icon when a tool does not provide one', () => {
+    const tool = createTool({ icon: undefined })
+    const wrapper = mount(ToolThing, {
+      props: { tool, showIcon: true },
+      global: {
+        stubs: {
+          CustomRouterLink: RouterLinkStub,
+        },
+      },
+    })
+
+    expect(wrapper.find('.n-icon').attributes('data-has-component')).toBe('true')
+  })
 })

shared/ui/src/components/tool/grid/ToolThing.vue

@@ -4,7 +4,7 @@
     <n-thing>
       <template v-if="showIcon" #avatar>
         <n-avatar>
-          <n-icon :component="props.tool.icon" />
+          <n-icon :component="iconComponent" />
         </n-avatar>
       </template>
       <template #header>
@@ -19,7 +19,7 @@
     <n-thing>
       <template v-if="showIcon" #avatar>
         <n-avatar>
-          <n-icon :component="props.tool.icon" />
+          <n-icon :component="iconComponent" />
         </n-avatar>
       </template>
       <template v-if="props.tool.thirdParty" #header-extra>
@@ -40,6 +40,7 @@
 </template>
 
 <script setup lang="ts">
+import AppGeneric20Regular from '@vicons/fluent/AppGeneric20Regular'
 import { NThing, NAvatar, NIcon, useThemeVars, NTag } from 'naive-ui'
 import type { ToolInfo } from '@shared/tools'
 import { computed } from 'vue'
@@ -52,6 +53,7 @@ const props = defineProps<{
 }>()
 
 const path = computed(() => props.tool.path)
+const iconComponent = computed(() => props.tool.icon ?? AppGeneric20Regular)
 const themeVars = useThemeVars()
 
 const { t } = useI18n({