Merge commit '74cf3f076eff43755bb4bef62f1c1bb3fc0e6c2a' into feature-clean

apps/app-frontend/src/pages/Index.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onUnmounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
@@ -8,19 +8,32 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { handleError } from '@/store/notifications.js'
 import dayjs from 'dayjs'
 import { get_search_results } from '@/helpers/cache.js'
-
-const featuredModpacks = ref({})
-const featuredMods = ref({})
-const filter = ref('')
+import type { SearchResult } from '@modrinth/utils'
+import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 
 breadcrumbs.setRootContext({ name: 'Home', link: route.path })
 
-const recentInstances = ref([])
+const instances = ref<GameInstance[]>([])
 
-const offline = ref(!navigator.onLine)
+const featuredModpacks = ref<SearchResult[]>([])
+const featuredMods = ref<SearchResult[]>([])
+const installedModpacksFilter = ref('')
+
+const recentInstances = computed(() =>
+  instances.value
+    .filter((x) => x.last_played)
+    .slice()
+    .sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played))),
+)
+
+const hasFeaturedProjects = computed(
+  () => (featuredModpacks.value?.length ?? 0) + (featuredMods.value?.length ?? 0) > 0,
+)
+
+const offline = ref<boolean>(!navigator.onLine)
 window.addEventListener('offline', () => {
   offline.value = true
 })
@@ -28,34 +41,21 @@ window.addEventListener('online', () => {
   offline.value = false
 })
 
-const getInstances = async () => {
-  const profiles = await list().catch(handleError)
-
-  recentInstances.value = profiles
-    .filter((x) => x.last_played)
-    .sort((a, b) => {
-      const dateA = dayjs(a.last_played)
-      const dateB = dayjs(b.last_played)
-
-      if (dateA.isSame(dateB)) {
-        return a.name.localeCompare(b.name)
-      }
-
-      return dateB - dateA
-    })
+async function fetchInstances() {
+  instances.value = await list().catch(handleError)
 
   const filters = []
-  for (const instance of profiles) {
+  for (const instance of instances.value) {
     if (instance.linked_data && instance.linked_data.project_id) {
       filters.push(`NOT"project_id"="${instance.linked_data.project_id}"`)
     }
   }
-  filter.value = filters.join(' AND ')
+  installedModpacksFilter.value = filters.join(' AND ')
 }
 
-const getFeaturedModpacks = async () => {
+async function fetchFeaturedModpacks() {
   const response = await get_search_results(
-    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`,
+    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${installedModpacksFilter.value}`,
   )
 
   if (response) {
@@ -64,7 +64,8 @@ const getFeaturedModpacks = async () => {
     featuredModpacks.value = []
   }
 }
-const getFeaturedMods = async () => {
+
+async function fetchFeaturedMods() {
   const response = await get_search_results('?facets=[["project_type:mod"]]&limit=10&index=follows')
 
   if (response) {
@@ -74,27 +75,21 @@ const getFeaturedMods = async () => {
   }
 }
 
-await getInstances()
+async function refreshFeaturedProjects() {
+  await Promise.all([fetchFeaturedModpacks(), fetchFeaturedMods()])
+}
 
-await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+await fetchInstances()
+await refreshFeaturedProjects()
 
 const unlistenProfile = await profile_listener(async (e) => {
-  await getInstances()
+  await fetchInstances()
 
   if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
-    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+    await refreshFeaturedProjects()
   }
 })
 
-// computed sums of recentInstances, featuredModpacks, featuredMods, treating them as arrays if they are not
-const total = computed(() => {
-  return (
-    (recentInstances.value?.length ?? 0) +
-    (featuredModpacks.value?.length ?? 0) +
-    (featuredMods.value?.length ?? 0)
-  )
-})
-
 onUnmounted(() => {
   unlistenProfile()
 })
@@ -104,17 +99,10 @@ onUnmounted(() => {
   <div class="p-6 flex flex-col gap-2">
     <h1 v-if="recentInstances" class="m-0 text-2xl">Welcome back!</h1>
     <h1 v-else class="m-0 text-2xl">Welcome to AstralRinth App!</h1>
+    <RecentWorldsList :recent-instances="recentInstances" />
     <RowDisplay
-      v-if="total > 0"
+      v-if="hasFeaturedProjects"
       :instances="[
-        {
-          label: 'Recently played',
-          route: '/library',
-          instances: recentInstances,
-          instance: true,
-          downloaded: true,
-          compact: true,
-        },
         {
           label: 'Discover a modpack',
           route: '/browse/modpack',