From 85ccb643fe6fe89505364da4025ec86025eb7bf3 Mon Sep 17 00:00:00 2001
From: DarlanPrado <darlandoprado2014@gmail.com>
Date: Fri, 24 Jul 2026 17:25:08 -0300
Subject: [PATCH 1/3] feat(module): enhance ModuleItem component with sortKey
 prop and update date handling; refactor module loading logic in index page

---
 app/components/module/ModuleItem.vue | 13 +++++----
 app/composables/useModuleHealth.ts   |  6 +++-
 app/pages/modules/index.vue          | 41 ++++++++++++++--------------
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/app/components/module/ModuleItem.vue b/app/components/module/ModuleItem.vue
index d2535b59e..618fffa86 100644
--- a/app/components/module/ModuleItem.vue
+++ b/app/components/module/ModuleItem.vue
@@ -12,26 +12,27 @@ const props = withDefaults(
     showBadge?: boolean
     isAdded: boolean
     showAddButton?: boolean
+    sortKey?: string
   }>(),
   {
     showBadge: true,
-    showAddButton: true
+    showAddButton: true,
+    sortKey: 'downloads'
   }
 )
 
 const { copy } = useClipboard()
-const { selectedSort } = useModules()
 const { track } = useAnalytics()
 
 const publishedAgo = useTimeAgo(() => props.module.stats.publishedAt)
 const createdAgo = useTimeAgo(() => props.module.stats.createdAt)
 
 const relativeDate = computed(() =>
-  selectedSort.value.key === 'publishedAt' ? publishedAgo.value : createdAgo.value
+  props.sortKey === 'publishedAt' ? publishedAgo.value : createdAgo.value
 )
 
 const staticModuleDate = computed(() =>
-  selectedSort.value.key === 'publishedAt'
+  props.sortKey === 'publishedAt'
     ? formatDateByLocale('en', props.module.stats.publishedAt)
     : formatDateByLocale('en', props.module.stats.createdAt)
 )
@@ -181,7 +182,7 @@ const items = computed(() => [
               </UTooltip>
             </template>
 
-            <UTooltip v-if="selectedSort.key === 'publishedAt'" :text="`Updated ${formatDateByLocale('en', module.stats.publishedAt)}`">
+            <UTooltip v-if="sortKey === 'publishedAt'" :text="`Updated ${formatDateByLocale('en', module.stats.publishedAt)}`">
               <NuxtLink
                 class="flex items-center gap-1 hover:text-highlighted"
                 :to="`https://github.com/${module.repo}`"
@@ -199,7 +200,7 @@ const items = computed(() => [
               </NuxtLink>
             </UTooltip>
 
-            <UTooltip v-if="selectedSort.key === 'createdAt'" :text="`Created ${formatDateByLocale('en', module.stats.createdAt)}`">
+            <UTooltip v-if="sortKey === 'createdAt'" :text="`Created ${formatDateByLocale('en', module.stats.createdAt)}`">
               <NuxtLink
                 class="flex items-center gap-1 hover:text-highlighted"
                 :to="`https://github.com/${module.repo}`"
diff --git a/app/composables/useModuleHealth.ts b/app/composables/useModuleHealth.ts
index 18319f0bd..3b35227fe 100644
--- a/app/composables/useModuleHealth.ts
+++ b/app/composables/useModuleHealth.ts
@@ -7,7 +7,11 @@ export const useModuleHealth = () => {
     key: 'modules-health',
     server: false,
     lazy: true,
-    default: () => ({})
+    dedupe: 'defer',
+    default: () => ({}),
+    getCachedData(key, nuxtApp) {
+      return nuxtApp.payload.data[key] ?? nuxtApp.static.data[key]
+    }
   })
 
   return { health }
diff --git a/app/pages/modules/index.vue b/app/pages/modules/index.vue
index c31fcaabf..b78adc2a7 100644
--- a/app/pages/modules/index.vue
+++ b/app/pages/modules/index.vue
@@ -56,35 +56,30 @@ defineShortcuts({
 })
 
 const ITEMS_PER_PAGE = 9
+const INITIAL_VISIBLE = ITEMS_PER_PAGE * 2
 const SCROLL_THRESHOLD = 450
-const displayedModules = ref<Module[]>([])
+const visibleCount = ref(INITIAL_VISIBLE)
 const isLoading = ref(false)
 
+const displayedModules = computed(() =>
+  filteredModules.value.slice(0, visibleCount.value)
+)
+
 const { y: scrollY } = useWindowScroll()
 const { copy } = useClipboard()
 
 const loadMoreModules = () => {
   if (isLoading.value) return
-
-  const currentLength = displayedModules.value.length
-  if (currentLength >= filteredModules.value.length) return
+  if (visibleCount.value >= filteredModules.value.length) return
 
   isLoading.value = true
 
   setTimeout(() => {
-    const nextItems = filteredModules.value.slice(
-      currentLength,
-      currentLength + ITEMS_PER_PAGE
-    )
-    displayedModules.value.push(...nextItems)
+    visibleCount.value += ITEMS_PER_PAGE
     isLoading.value = false
   }, 300)
 }
 
-const initializeModules = () => {
-  displayedModules.value = filteredModules.value.slice(0, ITEMS_PER_PAGE * 2)
-}
-
 const debouncedLoadMore = useDebounceFn(loadMoreModules, 50)
 
 watch(scrollY, (y) => {
@@ -93,11 +88,18 @@ watch(scrollY, (y) => {
   }
 })
 
-watch(filteredModules, () => {
-  isLoading.value = false
-  displayedModules.value = []
-  initializeModules()
-})
+watch(
+  () => [
+    q.value,
+    selectedCategory.value?.key,
+    selectedSort.value?.key,
+    selectedOrder.value?.key
+  ],
+  () => {
+    isLoading.value = false
+    visibleCount.value = INITIAL_VISIBLE
+  }
+)
 
 const copyAllInstallCommands = () => {
   const moduleNames = modulesToAdd.value.map(module => module.name).join(' ')
@@ -137,8 +139,6 @@ Steps:
 const clearAllModules = () => {
   modulesToAdd.value = []
 }
-
-initializeModules()
 </script>
 
 <template>
@@ -286,6 +286,7 @@ initializeModules()
             v-for="module in displayedModules"
             :key="module.name"
             :module="module"
+            :sort-key="selectedSort.key"
             :is-added="modulesToAdd.some(m => m.name === module.name)"
             @add="modulesToAdd.push(module)"
             @remove="modulesToAdd = modulesToAdd.filter(m => m.name !== module.name)"

From 025a617585f51cf607bf2b4d4accea37cc757aa6 Mon Sep 17 00:00:00 2001
From: DarlanPrado <darlandoprado2014@gmail.com>
Date: Fri, 24 Jul 2026 17:26:14 -0300
Subject: [PATCH 2/3] refactor(modules): simplify module health integration in
 computed properties

---
 app/composables/useModules.ts |  8 +-------
 app/pages/modules/index.vue   | 12 +++++++++++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/composables/useModules.ts b/app/composables/useModules.ts
index c9efd16d9..e462ee81b 100644
--- a/app/composables/useModules.ts
+++ b/app/composables/useModules.ts
@@ -55,13 +55,7 @@ export const useModules = () => {
   })
 
   const stats = computed(() => data.value.stats)
-
-  // Merge via computed, not mutation: useFetch `data` is a shallowRef (Nuxt 4
-  // default), so writing module.health in place would not trigger a re-render.
-  const { health } = useModuleHealth()
-  const modules = computed<Module[]>(() =>
-    (data.value.modules || []).map(m => ({ ...m, health: health.value[m.name] ?? m.health ?? null }))
-  )
+  const modules = computed<Module[]>(() => data.value.modules || [])
 
   const module = useState<Module>('module', () => ({} as Module))
 
diff --git a/app/pages/modules/index.vue b/app/pages/modules/index.vue
index b78adc2a7..eb53c4b95 100644
--- a/app/pages/modules/index.vue
+++ b/app/pages/modules/index.vue
@@ -13,8 +13,18 @@ const el = useTemplateRef<HTMLElement>('el')
 
 const { replaceRoute } = useFilters('modules')
 const { fetchList, filteredModules, q, categories, modules, stats, selectedSort, selectedOrder, selectedCategory, sorts } = useModules()
+const { health } = useModuleHealth()
 const { track } = useAnalytics()
 
+// Merge via computed, not mutation: useFetch `data` is a shallowRef (Nuxt 4
+// default), so writing module.health in place would not trigger a re-render.
+const filteredModulesWithHealth = computed(() =>
+  filteredModules.value.map(m => ({
+    ...m,
+    health: health.value[m.name] ?? m.health ?? null
+  }))
+)
+
 const cacheControl = useResponseHeader('Cache-Control')
 const cdnCacheControl = useResponseHeader('CDN-Cache-Control')
 
@@ -62,7 +72,7 @@ const visibleCount = ref(INITIAL_VISIBLE)
 const isLoading = ref(false)
 
 const displayedModules = computed(() =>
-  filteredModules.value.slice(0, visibleCount.value)
+  filteredModulesWithHealth.value.slice(0, visibleCount.value)
 )
 
 const { y: scrollY } = useWindowScroll()

From fc4cca3221acb3586174e119fd060d5190368200 Mon Sep 17 00:00:00 2001
From: DarlanPrado <darlandoprado2014@gmail.com>
Date: Fri, 24 Jul 2026 18:02:20 -0300
Subject: [PATCH 3/3] fix(modules): improve load more functionality by managing
 timeout and ensuring proper cleanup

---
 app/pages/modules/index.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/pages/modules/index.vue b/app/pages/modules/index.vue
index eb53c4b95..3a5b6a415 100644
--- a/app/pages/modules/index.vue
+++ b/app/pages/modules/index.vue
@@ -70,6 +70,7 @@ const INITIAL_VISIBLE = ITEMS_PER_PAGE * 2
 const SCROLL_THRESHOLD = 450
 const visibleCount = ref(INITIAL_VISIBLE)
 const isLoading = ref(false)
+let loadMoreTimer: ReturnType<typeof setTimeout> | null = null
 
 const displayedModules = computed(() =>
   filteredModulesWithHealth.value.slice(0, visibleCount.value)
@@ -78,13 +79,21 @@ const displayedModules = computed(() =>
 const { y: scrollY } = useWindowScroll()
 const { copy } = useClipboard()
 
+const clearLoadMoreTimer = () => {
+  if (loadMoreTimer === null) return
+  clearTimeout(loadMoreTimer)
+  loadMoreTimer = null
+}
+
 const loadMoreModules = () => {
   if (isLoading.value) return
   if (visibleCount.value >= filteredModules.value.length) return
 
   isLoading.value = true
+  clearLoadMoreTimer()
 
-  setTimeout(() => {
+  loadMoreTimer = setTimeout(() => {
+    loadMoreTimer = null
     visibleCount.value += ITEMS_PER_PAGE
     isLoading.value = false
   }, 300)
@@ -106,6 +115,7 @@ watch(
     selectedOrder.value?.key
   ],
   () => {
+    clearLoadMoreTimer()
     isLoading.value = false
     visibleCount.value = INITIAL_VISIBLE
   }
@@ -296,7 +306,7 @@ const clearAllModules = () => {
             v-for="module in displayedModules"
             :key="module.name"
             :module="module"
-            :sort-key="selectedSort.key"
+            :sort-key="String(selectedSort.key)"
             :is-added="modulesToAdd.some(m => m.name === module.name)"
             @add="modulesToAdd.push(module)"
             @remove="modulesToAdd = modulesToAdd.filter(m => m.name !== module.name)"