feat: add package manager tabs to local connector install command

Author: jonathanyeong

app/components/ConnectorModal.vue

@@ -124,6 +124,14 @@ watch(open, isOpen => {
                 {{ $t('connector.modal.run_hint') }}
               </p>
 
+              <div
+                class="inline-flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md"
+                role="tablist"
+                :aria-label="$t('package.install.pm_label')"
+              >
+                <PackageManagerTabs v-model="selectedPM" />
+              </div>
+
               <div
                 class="flex items-center p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm"
               >

app/components/PackageManagerTabs.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const selectedPM = defineModel<PackageManagerId>({ required: true })
+</script>
+
+<template>
+  <ClientOnly>
+    <button
+      v-for="pm in packageManagers"
+      :key="pm.id"
+      type="button"
+      role="tab"
+      :aria-selected="selectedPM === pm.id"
+      class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      :class="
+        selectedPM === pm.id
+          ? 'bg-bg shadow text-fg border-border'
+          : 'text-fg-subtle hover:text-fg border-transparent'
+      "
+      @click="selectedPM = pm.id"
+    >
+      {{ pm.label }}
+    </button>
+    <template #fallback>
+      <span
+        v-for="pm in packageManagers"
+        :key="pm.id"
+        class="px-2 py-1 font-mono text-xs rounded"
+        :class="pm.id === 'npm' ? 'bg-bg-elevated text-fg' : 'text-fg-subtle'"
+      >
+        {{ pm.label }}
+      </span>
+    </template>
+  </ClientOnly>
+</template>

app/pages/[...package].vue

@@ -785,33 +785,7 @@ defineOgImageComponent('Package', {
             role="tablist"
             :aria-label="$t('package.install.pm_label')"
           >
-            <ClientOnly>
-              <button
-                v-for="pm in packageManagers"
-                :key="pm.id"
-                role="tab"
-                :aria-selected="selectedPM === pm.id"
-                class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                :class="
-                  selectedPM === pm.id
-                    ? 'bg-bg shadow text-fg border-border'
-                    : 'text-fg-subtle hover:text-fg  border-transparent'
-                "
-                @click="selectedPM = pm.id"
-              >
-                {{ pm.label }}
-              </button>
-              <template #fallback>
-                <span
-                  v-for="pm in packageManagers"
-                  :key="pm.id"
-                  class="px-2 py-1 font-mono text-xs rounded"
-                  :class="pm.id === 'npm' ? 'bg-bg-elevated text-fg' : 'text-fg-subtle'"
-                >
-                  {{ pm.label }}
-                </span>
-              </template>
-            </ClientOnly>
+            <PackageManagerTabs v-model="selectedPM" />
           </div>
         </div>
         <div class="relative group">