fix: header package manager

Author: Kumzy

app/components/AppHeader.vue

@@ -84,11 +84,14 @@ const latestVersion = computed(() => {
         :search-input="false"
         color="neutral"
         variant="ghost"
-        class="hidden sm:block w-16"
+        class="hidden sm:block w-24"
       >
         <template #leading>
           <UIcon :name="selectedPackageManager.icon" class="size-4" />
         </template>
+        <template #trailing>
+          <UIcon name="i-lucide-chevron-down" class="size-4" />
+        </template>
       </USelectMenu>
 
       <UColorModeButton />

app/components/TemplateCard.vue

@@ -19,7 +19,7 @@ const dynamicCommand = computed(() => {
   if (!template.template) return ''
   
   if (selectedPackageManager.value.label === 'pip') {
-    return `pip install litestar && litestar create -t ${template.template}`
+    return `pipx litestar create -t ${template.template}`
   } else {
     return `uvx litestar@latest create -t ${template.template}`
   }
@@ -68,7 +68,7 @@ function copyCommand() {
           <UButton
             icon="i-lucide-github"
             color="neutral"
-            size="xs"
+            size="sm"
             variant="outline"
             :to="template.path"
             external
@@ -83,7 +83,7 @@ function copyCommand() {
           <UButton
             icon="i-lucide-terminal"
             color="neutral"
-            size="xs"
+            size="sm"
             variant="outline"
             @click.stop="copyCommand()"
           >

app/pages/templates.vue

@@ -143,7 +143,6 @@ const starterTemplates = [
     description: 'Starter with ORM, database migration and services for a Rest API',
     path: 'https://github.com/litestar-org/litestar-templates/tree/main/sqlalchemy-template',
     logoIcon: 'i-lucide-database',
-    featured: true,
     template: 'advanced-alchemy'
   },
   {