refactor(frontend): simplify McpInstallationsCard component structure

Author: Lasim

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

@@ -1,27 +1,20 @@
 <script setup lang="ts">
 import type { McpInstallation } from '@/types/mcp-installations'
 import McpInstallationsList from './McpInstallationsList.vue'
-import McpInstallationsEmptyState from './McpInstallationsEmptyState.vue'
 
 interface Props {
   installations: McpInstallation[]
-  hasInstallations: boolean
   showWalkthrough?: boolean
 }
 
 defineProps<Props>()
 
 const emit = defineEmits<{
-  installServer: []
   viewInstallation: [serverId: string]
   manageInstallation: [installationId: string]
   removeInstallation: [installationId: string]
 }>()
 
-const handleInstallServer = () => {
-  emit('installServer')
-}
-
 const handleViewInstallation = (serverId: string) => {
   emit('viewInstallation', serverId)
 }
@@ -36,21 +29,11 @@ const handleRemoveInstallation = (installationId: string) => {
 </script>
 
 <template>
-  <!-- Empty State -->
-  <McpInstallationsEmptyState
-    v-if="!hasInstallations"
-    @install-server="handleInstallServer"
+  <McpInstallationsList
+    :installations="installations"
+    :show-walkthrough="showWalkthrough"
+    @view-installation="handleViewInstallation"
+    @manage-installation="handleManageInstallation"
+    @remove-installation="handleRemoveInstallation"
   />
-
-  <!-- Installations List -->
-   <div v-else>
-      <McpInstallationsList
-        :installations="installations"
-        :show-walkthrough="showWalkthrough"
-        @view-installation="handleViewInstallation"
-        @manage-installation="handleManageInstallation"
-        @remove-installation="handleRemoveInstallation"
-      />
-   </div>
-
 </template>

services/frontend/src/views/mcp-server/index.vue

@@ -8,6 +8,7 @@ import { Plus } from 'lucide-vue-next'
 import { toast } from 'vue-sonner'
 import { useEventBus } from '@/composables/useEventBus'
 import McpInstallationsCard from '@/components/mcp-server/McpInstallationsCard.vue'
+import McpInstallationsEmptyState from '@/components/mcp-server/McpInstallationsEmptyState.vue'
 import McpClientConnectionsCard from '@/components/mcp-server/McpClientConnectionsCard.vue'
 import McpStats from '@/components/mcp-server/McpStats.vue'
 import ClientConfigurationModal from '@/components/gateway-config/ClientConfigurationModal.vue'
@@ -450,17 +451,21 @@ onUnmounted(() => {
         {{ t('common.messages.error') }}: {{ error }}
       </div>
 
-      <!-- Main Content -->
+      <!-- Empty State - No installations -->
+      <McpInstallationsEmptyState
+        v-else-if="!hasInstallations"
+        @install-server="handleInstallServer"
+      />
+
+      <!-- Main Content - Has installations -->
       <div v-else>
         <McpStats />
 
         <div class="flex gap-6 mt-18">
           <div class="flex-[0.7]">
             <McpInstallationsCard
               :installations="installations"
-              :has-installations="hasInstallations"
               :show-walkthrough="showUserWalkthrough"
-              @install-server="handleInstallServer"
               @view-installation="handleViewInstallation"
               @manage-installation="handleManageInstallation"
               @remove-installation="handleRemoveInstallation"