refactor: add category display component and update relevant views for category handling

Author: Lasim

services/frontend/src/components/mcp-server/CategoryDisplay.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { DynamicIcon } from '@/components/ui/dynamic-icon'
+import { McpCatalogService } from '@/services/mcpCatalogService'
+import type { McpCategory } from '@/services/mcpCategoriesService'
+
+const { t } = useI18n()
+
+interface Props {
+  categoryId?: string | null
+  category?: McpCategory | null
+  showNotProvided?: boolean
+  iconClass?: string
+  textClass?: string
+  containerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  categoryId: null,
+  category: null,
+  showNotProvided: true,
+  iconClass: 'h-4 w-4 text-muted-foreground',
+  textClass: '',
+  containerClass: 'flex items-center gap-2'
+})
+
+const category = ref<McpCategory | null>(props.category)
+const isLoading = ref(false)
+const error = ref<string | null>(null)
+
+// Fetch category by ID if not provided as prop
+async function fetchCategory(categoryId: string): Promise<McpCategory | null> {
+  try {
+    isLoading.value = true
+    const categories = await McpCatalogService.getCategories()
+    return categories.find(cat => cat.id === categoryId) || null
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to fetch category'
+    console.error('Failed to fetch category:', err)
+    return null
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Load category on mount if categoryId is provided but category is not
+onMounted(async () => {
+  if (props.categoryId && !props.category) {
+    category.value = await fetchCategory(props.categoryId)
+  }
+})
+
+// Computed property to determine what to display
+const displayCategory = computed(() => {
+  return props.category || category.value
+})
+
+const shouldShowNotProvided = computed(() => {
+  return props.showNotProvided && !displayCategory.value && !isLoading.value
+})
+</script>
+
+<template>
+  <div v-if="displayCategory" :class="containerClass">
+    <DynamicIcon 
+      :name="displayCategory.icon" 
+      :class="iconClass"
+    />
+    <span :class="textClass">{{ displayCategory.name }}</span>
+  </div>
+  
+  <div v-else-if="isLoading" :class="containerClass">
+    <div class="h-4 w-4 bg-gray-200 rounded animate-pulse"></div>
+    <div class="h-4 w-16 bg-gray-200 rounded animate-pulse"></div>
+  </div>
+  
+  <div v-else-if="shouldShowNotProvided" class="text-muted-foreground italic">
+    {{ t('mcpCatalog.edit.values.notProvided') }}
+  </div>
+</template>

services/frontend/src/components/mcp-server/wizard/McpServerSelectionStep.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 import { Loader2, Info, Download, ChevronDown, PackagePlus, AlertTriangle } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Alert, AlertDescription } from '@/components/ui/alert'
+import CategoryDisplay from '@/components/mcp-server/CategoryDisplay.vue'
 import { McpCatalogService } from '@/services/mcpCatalogService'
 import { McpCategoriesService } from '@/services/mcpCategoriesService'
 import type { McpServerSearchParams, McpServerSearchResponse } from '@/types/mcp-catalog'
@@ -292,8 +293,15 @@ onMounted(() => {
             <dd class="md:mt-1">{{ server.author_name || t('mcpInstallations.wizard.server.unknownAuthor') }}</dd>
           </div>
           <div class="max-md:flex max-md:justify-between max-md:py-4 max-md:first:pt-0 max-md:last:pb-0">
-            <dt class="font-medium text-gray-900">{{ t('mcpInstallations.wizard.server.language') }}</dt>
-            <dd class="md:mt-1">{{ server.language || t('mcpInstallations.wizard.server.unknownLanguage') }}</dd>
+            <dt class="font-medium text-gray-900">{{ t('mcpInstallations.wizard.server.category') }}</dt>
+            <dd class="md:mt-1">
+              <CategoryDisplay
+                :category-id="server.category_id"
+                :show-not-provided="true"
+                text-class="text-sm"
+                icon-class="h-4 w-4 text-gray-600"
+              />
+            </dd>
           </div>
         </dl>
 

services/frontend/src/i18n/locales/en/mcp-catalog.ts

@@ -435,6 +435,7 @@ export default {
       name: 'Server Name',
       description: 'Description',
       longDescription: 'Detailed Description',
+      category: 'Category',
       author: 'Author Information',
       technical: 'Technical Specifications',
       links: 'Repository Links',

services/frontend/src/i18n/locales/en/mcp-installations.ts

@@ -92,6 +92,7 @@ export default {
       install: 'Install',
       name: 'Server Name',
       author: 'Author',
+      category: 'Category',
       language: 'Language',
       unknownAuthor: 'Unknown Author',
       unknownLanguage: 'Not Specified'
@@ -192,6 +193,7 @@ export default {
       name: 'Name',
       description: 'Description',
       longDescription: 'Long Description',
+      category: 'Category',
       author: 'Author Information',
       technical: 'Technical Specifications',
       links: 'Repository Links',

services/frontend/src/views/admin/mcp-server-catalog/view/[id].vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { DsAlert } from '@/components/ui/ds-alert'
+import CategoryDisplay from '@/components/mcp-server/CategoryDisplay.vue'
 import { ArrowLeft, Github, ExternalLink, Star, Package, Code, Settings, Calendar, Tag, Trash2, AlertTriangle, Edit } from 'lucide-vue-next'
 import DashboardLayout from '@/components/DashboardLayout.vue'
 import EnvironmentVariablesDisplay from '@/components/admin/mcp-catalog/EnvironmentVariablesDisplay.vue'
@@ -341,6 +342,14 @@ const closeSuccessAlert = () => {
               </dd>
             </div>
 
+            <!-- Category -->
+            <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm/6 font-medium text-gray-900">{{ t('mcpCatalog.edit.fields.category') }}</dt>
+              <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                <CategoryDisplay :category-id="server.category_id" />
+              </dd>
+            </div>
+
             <!-- Author Information -->
             <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
               <dt class="text-sm/6 font-medium text-gray-900">{{ t('mcpCatalog.edit.fields.author') }}</dt>

services/frontend/src/views/mcp-server/view/[id].vue

@@ -7,6 +7,7 @@ import { Badge } from '@/components/ui/badge'
 import { ArrowLeft, Github, ExternalLink, Star, Package, Code, Settings, Calendar, Tag, Download } from 'lucide-vue-next'
 import DashboardLayout from '@/components/DashboardLayout.vue'
 import EnvironmentVariablesDisplay from '@/components/admin/mcp-catalog/EnvironmentVariablesDisplay.vue'
+import CategoryDisplay from '@/components/mcp-server/CategoryDisplay.vue'
 import { McpCatalogService } from '@/services/mcpCatalogService'
 import type { McpServer } from '@/views/admin/mcp-server-catalog/types'
 
@@ -272,6 +273,18 @@ const installServer = () => {
               </dd>
             </div>
 
+            <!-- Category -->
+            <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm/6 font-medium text-gray-900">{{ t('mcpInstallations.view.fields.category') }}</dt>
+              <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                <CategoryDisplay
+                  :category-id="server.category_id"
+                  :show-not-provided="true"
+                  text-class="text-sm/6"
+                />
+              </dd>
+            </div>
+
             <!-- Author Information -->
             <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
               <dt class="text-sm/6 font-medium text-gray-900">{{ t('mcpInstallations.view.fields.author') }}</dt>