feat: show more maintainers

Author: vinnymac

app/components/PackageMaintainers.vue

@@ -18,10 +18,25 @@ const {
 const showAddOwner = shallowRef(false)
 const newOwnerUsername = shallowRef('')
 const isAdding = shallowRef(false)
+const showAllMaintainers = shallowRef(false)
+
+const DEFAULT_VISIBLE_MAINTAINERS = 5
 
 // Show admin controls when connected (let npm CLI handle permission errors)
 const canManageOwners = computed(() => isConnected.value)
 
+// Computed for visible maintainers with show more/less support
+const visibleMaintainers = computed(() => {
+  if (canManageOwners.value || showAllMaintainers.value) {
+    return maintainerAccess.value
+  }
+  return maintainerAccess.value.slice(0, DEFAULT_VISIBLE_MAINTAINERS)
+})
+
+const hiddenMaintainersCount = computed(() =>
+  Math.max(0, maintainerAccess.value.length - DEFAULT_VISIBLE_MAINTAINERS),
+)
+
 // Extract org name from scoped package
 const orgName = computed(() => {
   if (!props.packageName.startsWith('@')) return null
@@ -173,7 +188,7 @@ watch(
     </h2>
     <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
       <li
-        v-for="maintainer in maintainerAccess.slice(0, canManageOwners ? undefined : 5)"
+        v-for="maintainer in visibleMaintainers"
         :key="maintainer.name ?? maintainer.email"
         class="flex items-center justify-between gap-2"
       >
@@ -214,6 +229,20 @@ watch(
       </li>
     </ul>
 
+    <!-- Show more/less toggle (only when not managing and there are hidden maintainers) -->
+    <button
+      v-if="!canManageOwners && hiddenMaintainersCount > 0"
+      type="button"
+      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+      @click="showAllMaintainers = !showAllMaintainers"
+    >
+      {{
+        showAllMaintainers
+          ? $t('package.maintainers.show_less')
+          : $t('package.maintainers.show_more', { count: hiddenMaintainersCount })
+      }}
+    </button>
+
     <!-- Add owner form (only when can manage) -->
     <div v-if="canManageOwners" class="mt-3">
       <div v-if="showAddOwner">

i18n/locales/en.json

@@ -206,7 +206,9 @@
       "username_placeholder": "username...",
       "add_button": "add",
       "cancel_add": "Cancel adding owner",
-      "add_owner": "+ Add owner"
+      "add_owner": "+ Add owner",
+      "show_more": "(show {count} more)",
+      "show_less": "(show less)"
     },
     "downloads": {
       "title": "Weekly Downloads",