From 26f7bbb658c7efd2ac70df2360b8356f6d77fcfe Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Sun, 5 Apr 2026 21:53:53 +0100
Subject: [PATCH 1/5] feat: add new useVisibleItems composable

This adds a new `useVisibleItems` composable and initially adopts it in
the dependencies view of a package.

In follow ups, we can adopt it in more pages to reduce duplicated logic.
---
 app/components/Package/Dependencies.vue | 44 +++++++++++++++----------
 app/composables/useVisibleItems.ts      | 25 ++++++++++++++
 2 files changed, 52 insertions(+), 17 deletions(-)
 create mode 100644 app/composables/useVisibleItems.ts

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 7f3836214f..2bddda193a 100644
--- a/app/components/Package/Dependencies.vue
+++ b/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(
diff --git a/app/composables/useVisibleItems.ts b/app/composables/useVisibleItems.ts
new file mode 100644
index 0000000000..cbbaa31a06
--- /dev/null
+++ b/app/composables/useVisibleItems.ts
@@ -0,0 +1,25 @@
+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(() =>
+    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 }
+}

From 65fc79f9347cdfadcdf6406435d96b52eac61a74 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 5 Apr 2026 20:57:54 +0000
Subject: [PATCH 2/5] [autofix.ci] apply automated fixes

---
 app/composables/useVisibleItems.ts | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/app/composables/useVisibleItems.ts b/app/composables/useVisibleItems.ts
index cbbaa31a06..2c206911f0 100644
--- a/app/composables/useVisibleItems.ts
+++ b/app/composables/useVisibleItems.ts
@@ -1,7 +1,4 @@
-export function useVisibleItems<T>(
-  items: MaybeRefOrGetter<T[]>,
-  limit: number,
-) {
+export function useVisibleItems<T>(items: MaybeRefOrGetter<T[]>, limit: number) {
   const showAll = shallowRef(false)
 
   const visibleItems = computed(() => {
@@ -9,17 +6,19 @@ export function useVisibleItems<T>(
     return showAll.value ? list : list.slice(0, limit)
   })
 
-  const hiddenCount = computed(() =>
-    Math.max(0, toValue(items).length - limit),
-  )
+  const hiddenCount = computed(() => Math.max(0, toValue(items).length - limit))
 
-  const hasMore = computed(
-    () => !showAll.value && 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 }
+  const expand = () => {
+    showAll.value = true
+  }
+  const collapse = () => {
+    showAll.value = false
+  }
+  const toggle = () => {
+    showAll.value = !showAll.value
+  }
 
   return { visibleItems, hiddenCount, hasMore, showAll, expand, collapse, toggle }
 }

From 29a9f75506f8d8909e1c8188cf199168671b7d9a Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Sun, 5 Apr 2026 22:01:13 +0100
Subject: [PATCH 3/5] test: add useVisibleItems tests

---
 app/composables/useVisibleItems.ts            |   8 +-
 .../app/composables/use-visible-items.spec.ts | 143 ++++++++++++++++++
 2 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 test/unit/app/composables/use-visible-items.spec.ts

diff --git a/app/composables/useVisibleItems.ts b/app/composables/useVisibleItems.ts
index 2c206911f0..1470086027 100644
--- a/app/composables/useVisibleItems.ts
+++ b/app/composables/useVisibleItems.ts
@@ -1,4 +1,10 @@
-export function useVisibleItems<T>(items: MaybeRefOrGetter<T[]>, limit: number) {
+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(() => {
diff --git a/test/unit/app/composables/use-visible-items.spec.ts b/test/unit/app/composables/use-visible-items.spec.ts
new file mode 100644
index 0000000000..45addd1ae0
--- /dev/null
+++ b/test/unit/app/composables/use-visible-items.spec.ts
@@ -0,0 +1,143 @@
+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, 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)
+    })
+  })
+
+  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])
+    })
+  })
+})

From 0bcb610430899712a943a45def68070bf4d4c371 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Sun, 5 Apr 2026 22:03:27 +0100
Subject: [PATCH 4/5] chore: satisify some AI

---
 app/composables/useVisibleItems.ts                  | 4 +++-
 test/unit/app/composables/use-visible-items.spec.ts | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/composables/useVisibleItems.ts b/app/composables/useVisibleItems.ts
index 1470086027..03259aefc7 100644
--- a/app/composables/useVisibleItems.ts
+++ b/app/composables/useVisibleItems.ts
@@ -12,7 +12,9 @@ export function useVisibleItems<T>(
     return showAll.value ? list : list.slice(0, limit)
   })
 
-  const hiddenCount = computed(() => Math.max(0, toValue(items).length - limit))
+  const hiddenCount = computed(() =>
+    showAll.value ? 0 : Math.max(0, toValue(items).length - limit),
+  )
 
   const hasMore = computed(() => !showAll.value && toValue(items).length > limit)
 
diff --git a/test/unit/app/composables/use-visible-items.spec.ts b/test/unit/app/composables/use-visible-items.spec.ts
index 45addd1ae0..32e59a8634 100644
--- a/test/unit/app/composables/use-visible-items.spec.ts
+++ b/test/unit/app/composables/use-visible-items.spec.ts
@@ -42,7 +42,7 @@ describe('useVisibleItems', () => {
   describe('expand()', () => {
     it('shows all items after expand', () => {
       const items = [1, 2, 3, 4, 5, 6]
-      const { visibleItems, hasMore, expand } = useVisibleItems(items, 3)
+      const { visibleItems, hasMore, hiddenCount, expand } = useVisibleItems(items, 3)
 
       expect(visibleItems.value).toEqual([1, 2, 3])
 
@@ -50,6 +50,7 @@ describe('useVisibleItems', () => {
 
       expect(visibleItems.value).toEqual([1, 2, 3, 4, 5, 6])
       expect(hasMore.value).toBe(false)
+      expect(hiddenCount.value).toBe(0)
     })
   })
 

From bfbf554c9aeeaacc50eb2e3a3172ce16cebac147 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Sun, 5 Apr 2026 22:05:00 +0100
Subject: [PATCH 5/5] chore: run format

---
 app/composables/useVisibleItems.ts                  | 5 +----
 test/unit/app/composables/use-visible-items.spec.ts | 5 ++++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/composables/useVisibleItems.ts b/app/composables/useVisibleItems.ts
index 03259aefc7..8aa0be3d0f 100644
--- a/app/composables/useVisibleItems.ts
+++ b/app/composables/useVisibleItems.ts
@@ -1,10 +1,7 @@
 import { computed, shallowRef, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 
-export function useVisibleItems<T>(
-  items: MaybeRefOrGetter<T[]>,
-  limit: number,
-) {
+export function useVisibleItems<T>(items: MaybeRefOrGetter<T[]>, limit: number) {
   const showAll = shallowRef(false)
 
   const visibleItems = computed(() => {
diff --git a/test/unit/app/composables/use-visible-items.spec.ts b/test/unit/app/composables/use-visible-items.spec.ts
index 32e59a8634..9d836869f5 100644
--- a/test/unit/app/composables/use-visible-items.spec.ts
+++ b/test/unit/app/composables/use-visible-items.spec.ts
@@ -132,7 +132,10 @@ describe('useVisibleItems', () => {
 
     it('reacts to getter function source changes', () => {
       const count = ref(2)
-      const { visibleItems } = useVisibleItems(() => Array.from({ length: count.value }, (_, i) => i), 3)
+      const { visibleItems } = useVisibleItems(
+        () => Array.from({ length: count.value }, (_, i) => i),
+        3,
+      )
 
       expect(visibleItems.value).toEqual([0, 1])