From fef1f6b9287c60118392d94dee629ee6b6f90df7 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Sun, 5 Apr 2026 22:41:44 +0100
Subject: [PATCH] feat: use useVisibleItems in vulnerability tree

Switches the vulnerability tree to use the new `useVisibleItems`
composable.
---
 app/components/Package/VulnerabilityTree.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index 81e636e72a..bca8eb312d 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/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', {