From 929903cfbdc09edf4eb52a5214717e45f6c63a43 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Sun, 5 Apr 2026 22:38:26 +0100
Subject: [PATCH] feat: use useVisibleItems in `DeprecatedTree`

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

diff --git a/app/components/Package/DeprecatedTree.vue b/app/components/Package/DeprecatedTree.vue
index bd44e4a8fe..178e5bf1a3 100644
--- a/app/components/Package/DeprecatedTree.vue
+++ b/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 })