refactor: use useVisibleItems in vulnerability tree (#2405)

Author: 43081j

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', {