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.

Author: 43081j

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/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 }
+}