test pr

app/components/Package/Dependencies.vue

@@ -37,11 +37,6 @@ function getDeprecatedDepInfo(depName: string) {
   return vulnTree.value.deprecatedPackages.find(p => p.name === depName && p.depth === 'direct')
 }
 
-// Expanded state for each section
-const depsExpanded = shallowRef(false)
-const peerDepsExpanded = shallowRef(false)
-const optionalDepsExpanded = shallowRef(false)
-
 // Sort dependencies alphabetically
 const sortedDependencies = computed(() => {
   if (!props.dependencies) return []
@@ -89,6 +84,24 @@ function getDepVersionClass(dep: string) {
   return getVersionClass(undefined)
 }
 
+const {
+  visibleItems: visibleDeps,
+  hasMore: hasMoreDeps,
+  expand: expandDeps,
+} = useVisibleItems(sortedDependencies, 10)
+
+const {
+  visibleItems: visiblePeerDeps,
+  hasMore: hasMorePeerDeps,
+  expand: expandPeerDeps,
+} = useVisibleItems(sortedPeerDependencies, 10)
+
+const {
+  visibleItems: visibleOptionalDeps,
+  hasMore: hasMoreOptionalDeps,
+  expand: expandOptionalDeps,
+} = useVisibleItems(sortedOptionalDependencies, 10)
+
 const numberFormatter = useNumberFormatter()
 </script>
 
@@ -110,7 +123,7 @@ const numberFormatter = useNumberFormatter()
     >
       <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
-          v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
+          v-for="[dep, version] in visibleDeps"
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
@@ -190,10 +203,10 @@ const numberFormatter = useNumberFormatter()
         </li>
       </ul>
       <button
-        v-if="sortedDependencies.length > 10 && !depsExpanded"
+        v-if="hasMoreDeps"
         type="button"
         class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
-        @click="depsExpanded = true"
+        @click="expandDeps"
       >
         {{
           $t(
@@ -222,7 +235,7 @@ const numberFormatter = useNumberFormatter()
         :aria-label="$t('package.peer_dependencies.list_label')"
       >
         <li
-          v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
+          v-for="peer in visiblePeerDeps"
           :key="peer.name"
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
@@ -245,10 +258,10 @@ const numberFormatter = useNumberFormatter()
         </li>
       </ul>
       <button
-        v-if="sortedPeerDependencies.length > 10 && !peerDepsExpanded"
+        v-if="hasMorePeerDeps"
         type="button"
         class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
-        @click="peerDepsExpanded = true"
+        @click="expandPeerDeps"
       >
         {{
           $t(
@@ -281,10 +294,7 @@ const numberFormatter = useNumberFormatter()
         :aria-label="$t('package.optional_dependencies.list_label')"
       >
         <li
-          v-for="[dep, version] in sortedOptionalDependencies.slice(
-            0,
-            optionalDepsExpanded ? undefined : 10,
-          )"
+          v-for="[dep, version] in visibleOptionalDeps"
           :key="dep"
           class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
@@ -302,10 +312,10 @@ const numberFormatter = useNumberFormatter()
         </li>
       </ul>
       <button
-        v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
+        v-if="hasMoreOptionalDeps"
         type="button"
         class="mt-2 truncate"
-        @click="optionalDepsExpanded = true"
+        @click="expandOptionalDeps"
       >
         {{
           $t(

app/components/Package/DeprecatedTree.vue

@@ -10,7 +10,12 @@ const { data: analysisData, status } = useDependencyAnalysis(
 )
 
 const isExpanded = shallowRef(false)
-const showAll = shallowRef(false)
+
+const {
+  visibleItems: visiblePackages,
+  hasMore: hasMorePackages,
+  expand: expandPackages,
+} = useVisibleItems(() => analysisData.value?.deprecatedPackages ?? [], 5)
 
 const hasDeprecated = computed(
   () => analysisData.value?.deprecatedPackages && analysisData.value.deprecatedPackages.length > 0,
@@ -72,7 +77,7 @@ function getDepthStyle(depth: DependencyDepth) {
       >
         <ul class="divide-y divide-border list-none m-0 p-0">
           <li
-            v-for="pkg in analysisData!.deprecatedPackages.slice(0, showAll ? undefined : 5)"
+            v-for="pkg in visiblePackages"
             :key="`${pkg.name}@${pkg.version}`"
             class="px-4 py-3"
             :class="getDepthStyle(pkg.depth).bg"
@@ -96,10 +101,10 @@ function getDepthStyle(depth: DependencyDepth) {
         </ul>
 
         <button
-          v-if="analysisData!.deprecatedPackages.length > 5 && !showAll"
+          v-if="hasMorePackages"
           type="button"
           class="w-full px-4 py-2 text-xs font-mono text-fg-muted hover:text-fg border-t border-border transition-colors duration-200"
-          @click="showAll = true"
+          @click="expandPackages"
         >
           {{
             $t('package.deprecated.show_all', { count: analysisData!.deprecatedPackages.length })

app/components/Package/Maintainers.vue

@@ -18,23 +18,20 @@ 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/fewer support
-const visibleMaintainers = computed(() => {
-  if (canManageOwners.value || showAllMaintainers.value) {
-    return maintainerAccess.value
-  }
-  return maintainerAccess.value.slice(0, DEFAULT_VISIBLE_MAINTAINERS)
-})
+const {
+  visibleItems,
+  hiddenCount: hiddenMaintainersCount,
+  toggle: toggleMaintainers,
+  showAll: showAllMaintainers,
+} = useVisibleItems(maintainerAccess, 5)
 
-const hiddenMaintainersCount = computed(() =>
-  Math.max(0, maintainerAccess.value.length - DEFAULT_VISIBLE_MAINTAINERS),
+// When managing owners, bypass the limit and show all
+const visibleMaintainers = computed(() =>
+  canManageOwners.value ? maintainerAccess.value : visibleItems.value,
 )
 
 // Extract org name from scoped package
@@ -240,7 +237,7 @@ watch(
     <ButtonBase
       class="mt-2"
       v-if="!canManageOwners && hiddenMaintainersCount > 0"
-      @click="showAllMaintainers = !showAllMaintainers"
+      @click="toggleMaintainers"
     >
       {{
         showAllMaintainers

app/components/Package/VulnerabilityTree.vue

@@ -10,9 +10,14 @@ const { data: vulnTree, status } = useDependencyAnalysis(
 )
 
 const isExpanded = shallowRef(false)
-const showAllPackages = shallowRef(false)
 const showAllVulnerabilities = shallowRef(false)
 
+const {
+  visibleItems: visiblePackages,
+  hasMore: hasMorePackages,
+  expand: expandPackages,
+} = useVisibleItems(() => vulnTree.value?.vulnerablePackages ?? [], 5)
+
 const hasVulnerabilities = computed(
   () => vulnTree.value && vulnTree.value.vulnerablePackages.length > 0,
 )
@@ -110,7 +115,7 @@ function getDepthStyle(depth: string | undefined) {
       <div v-show="isExpanded" id="vuln-tree-details" class="border-t border-border bg-bg-subtle">
         <ul class="divide-y divide-border list-none m-0 p-0">
           <li
-            v-for="pkg in vulnTree!.vulnerablePackages.slice(0, showAllPackages ? undefined : 5)"
+            v-for="pkg in visiblePackages"
             :key="`${pkg.name}@${pkg.version}`"
             class="px-4 py-3"
             :class="getDepthStyle(pkg.depth).bg"
@@ -179,10 +184,10 @@ function getDepthStyle(depth: string | undefined) {
         </ul>
 
         <button
-          v-if="vulnTree!.vulnerablePackages.length > 5 && !showAllPackages"
+          v-if="hasMorePackages"
           type="button"
           class="w-full px-4 py-2 text-xs font-mono text-fg-muted hover:text-fg border-t border-border transition-colors duration-200"
-          @click="showAllPackages = true"
+          @click="expandPackages"
         >
           {{
             $t('package.vulnerabilities.show_all_packages', {

app/composables/useVisibleItems.ts

@@ -0,0 +1,29 @@
+import { computed, shallowRef, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+export function useVisibleItems<T>(items: MaybeRefOrGetter<T[]>, limit: number) {
+  const showAll = shallowRef(false)
+
+  const visibleItems = computed(() => {
+    const list = toValue(items)
+    return showAll.value ? list : list.slice(0, limit)
+  })
+
+  const hiddenCount = computed(() =>
+    showAll.value ? 0 : Math.max(0, toValue(items).length - limit),
+  )
+
+  const hasMore = computed(() => !showAll.value && toValue(items).length > limit)
+
+  const expand = () => {
+    showAll.value = true
+  }
+  const collapse = () => {
+    showAll.value = false
+  }
+  const toggle = () => {
+    showAll.value = !showAll.value
+  }
+
+  return { visibleItems, hiddenCount, hasMore, showAll, expand, collapse, toggle }
+}

test/unit/app/composables/use-visible-items.spec.ts

@@ -0,0 +1,147 @@
+import { describe, expect, it } from 'vitest'
+import { computed, ref } from 'vue'
+import { useVisibleItems } from '~/composables/useVisibleItems'
+
+describe('useVisibleItems', () => {
+  describe('initial state', () => {
+    it('returns all items when list is within limit', () => {
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems(['a', 'b', 'c'], 5)
+
+      expect(visibleItems.value).toEqual(['a', 'b', 'c'])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+
+    it('returns exactly limit items when list exceeds limit', () => {
+      const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems(items, 5)
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5])
+      expect(hasMore.value).toBe(true)
+      expect(hiddenCount.value).toBe(5)
+    })
+
+    it('returns all items when list length equals limit exactly', () => {
+      const items = [1, 2, 3]
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+
+    it('handles empty list', () => {
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems([], 5)
+
+      expect(visibleItems.value).toEqual([])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+  })
+
+  describe('expand()', () => {
+    it('shows all items after expand', () => {
+      const items = [1, 2, 3, 4, 5, 6]
+      const { visibleItems, hasMore, hiddenCount, expand } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+
+      expand()
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5, 6])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+  })
+
+  describe('collapse()', () => {
+    it('hides items again after collapse', () => {
+      const items = [1, 2, 3, 4, 5, 6]
+      const { visibleItems, hasMore, expand, collapse } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+
+      expand()
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5, 6])
+
+      collapse()
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+      expect(hasMore.value).toBe(true)
+    })
+  })
+
+  describe('toggle()', () => {
+    it('expands on first toggle', () => {
+      const items = [1, 2, 3, 4, 5]
+      const { visibleItems, toggle } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+
+      toggle()
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5])
+    })
+
+    it('collapses on second toggle', () => {
+      const items = [1, 2, 3, 4, 5]
+      const { visibleItems, toggle } = useVisibleItems(items, 3)
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+
+      toggle()
+
+      expect(visibleItems.value).toEqual([1, 2, 3, 4, 5])
+
+      toggle()
+
+      expect(visibleItems.value).toEqual([1, 2, 3])
+    })
+  })
+
+  describe('reactivity', () => {
+    it('reacts to ref source changes', () => {
+      const items = ref([1, 2, 3])
+      const { visibleItems, hasMore, hiddenCount } = useVisibleItems(items, 2)
+
+      expect(visibleItems.value).toEqual([1, 2])
+      expect(hasMore.value).toBe(true)
+      expect(hiddenCount.value).toBe(1)
+
+      items.value = [1, 2]
+
+      expect(visibleItems.value).toEqual([1, 2])
+      expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
+    })
+
+    it('reacts to computed source changes', () => {
+      const source = ref([1, 2, 3, 4, 5])
+      const filtered = computed(() => source.value.filter(n => n % 2 === 0))
+      const { visibleItems, hasMore } = useVisibleItems(filtered, 3)
+
+      expect(visibleItems.value).toEqual([2, 4])
+      expect(hasMore.value).toBe(false)
+
+      source.value = [1, 2, 3, 4, 5, 6, 7, 8]
+
+      expect(visibleItems.value).toEqual([2, 4, 6])
+      expect(hasMore.value).toBe(true)
+    })
+
+    it('reacts to getter function source changes', () => {
+      const count = ref(2)
+      const { visibleItems } = useVisibleItems(
+        () => Array.from({ length: count.value }, (_, i) => i),
+        3,
+      )
+
+      expect(visibleItems.value).toEqual([0, 1])
+
+      count.value = 5
+
+      expect(visibleItems.value).toEqual([0, 1, 2])
+    })
+  })
+})