Misc fixes, new instance & project cards (#3040)

* Fix some TS errors, and misc settings fixes

* New instance + project cards

* bug fixes + lint

* Quick instance switcher

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>

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

@@ -394,13 +394,13 @@ await refreshSearch()
       <InstanceIndicator :instance="instance" />
       <h1 class="m-0 mb-1 text-xl">Install content to instance</h1>
     </template>
-    <h1 v-else class="m-0 mb-1 text-2xl">Discover content</h1>
+    <h1 v-else class="m-0 text-2xl">Discover content</h1>
     <NavTabs :links="selectableProjectTypes" />
     <div class="iconified-input">
       <SearchIcon aria-hidden="true" class="text-lg" />
       <input
         v-model="query"
-        class="h-12"
+        class="h-12 card-shadow"
         autocomplete="off"
         spellcheck="false"
         type="text"

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

@@ -31,19 +31,21 @@ window.addEventListener('online', () => {
 const getInstances = async () => {
   const profiles = await list().catch(handleError)
 
-  recentInstances.value = profiles.sort((a, b) => {
-    const dateA = dayjs(a.last_played ?? 0)
-    const dateB = dayjs(b.last_played ?? 0)
+  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)
-    }
+      if (dateA.isSame(dateB)) {
+        return a.name.localeCompare(b.name)
+      }
 
-    return dateB - dateA
-  })
+      return dateB - dateA
+    })
 
   const filters = []
-  for (const instance of recentInstances.value) {
+  for (const instance of profiles) {
     if (instance.linked_data && instance.linked_data.project_id) {
       filters.push(`NOT"project_id"="${instance.linked_data.project_id}"`)
     }
@@ -100,25 +102,27 @@ onUnmounted(() => {
 
 <template>
   <div class="p-6 flex flex-col gap-2">
-    <h1 class="m-0 text-2xl">Welcome back!</h1>
+    <h1 v-if="recentInstances" class="m-0 text-2xl">Welcome back!</h1>
+    <h1 v-else class="m-0 text-2xl">Welcome to Modrinth App!</h1>
     <RowDisplay
       v-if="total > 0"
       :instances="[
         {
-          label: 'Jump back in',
+          label: 'Recently played',
           route: '/library',
           instances: recentInstances,
           instance: true,
           downloaded: true,
+          compact: true,
         },
         {
-          label: 'Popular packs',
+          label: 'Discover a modpack',
           route: '/browse/modpack',
           instances: featuredModpacks,
           downloaded: false,
         },
         {
-          label: 'Popular mods',
+          label: 'Discover mods',
           route: '/browse/mod',
           instances: featuredMods,
           downloaded: false,

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

@@ -4,10 +4,10 @@
     @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
   >
     <ExportModal ref="exportModal" :instance="instance" />
-    <InstanceSettingsModal ref="settingsModal" :instance="instance" />
+    <InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
     <ContentPageHeader>
       <template #icon>
-        <Avatar :src="icon" :alt="instance.name" size="96px" />
+        <Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
       </template>
       <template #title>
         {{ instance.name }}
@@ -89,9 +89,13 @@
     <NavTabs :links="tabs" />
   </div>
   <div class="p-6 pt-4">
-    <RouterView v-slot="{ Component }">
+    <RouterView v-slot="{ Component }" :key="instance.path">
       <template v-if="Component">
-        <Suspense @pending="loadingBar.startLoading()" @resolve="loadingBar.stopLoading()">
+        <Suspense
+          :key="instance.path"
+          @pending="loadingBar.startLoading()"
+          @resolve="loadingBar.stopLoading()"
+        >
           <component
             :is="Component"
             :instance="instance"
@@ -164,7 +168,7 @@ import { get, get_full_path, kill, run } from '@/helpers/profile'
 import { get_by_profile_path } from '@/helpers/process'
 import { process_listener, profile_listener } from '@/helpers/events'
 import { useRoute, useRouter } from 'vue-router'
-import { ref, onUnmounted, computed } from 'vue'
+import { ref, onUnmounted, computed, watch } from 'vue'
 import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
 import { showProfileInFolder } from '@/helpers/utils.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
@@ -187,7 +191,52 @@ const route = useRoute()
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 
-const instance = ref(await get(route.params.id).catch(handleError))
+const offline = ref(!navigator.onLine)
+window.addEventListener('offline', () => {
+  offline.value = true
+})
+window.addEventListener('online', () => {
+  offline.value = false
+})
+
+const instance = ref()
+const modrinthVersions = ref([])
+const playing = ref(false)
+const loading = ref(false)
+
+async function fetchInstance() {
+  instance.value = await get(route.params.id).catch(handleError)
+
+  if (!offline.value && instance.value.linked_data && instance.value.linked_data.project_id) {
+    get_project(instance.value.linked_data.project_id, 'must_revalidate')
+      .catch(handleError)
+      .then((project) => {
+        if (project && project.versions) {
+          get_version_many(project.versions, 'must_revalidate')
+            .catch(handleError)
+            .then((versions) => {
+              modrinthVersions.value = versions.sort(
+                (a, b) => dayjs(b.date_published) - dayjs(a.date_published),
+              )
+            })
+        }
+      })
+  }
+
+  const runningProcesses = await get_by_profile_path(route.params.id).catch(handleError)
+
+  playing.value = runningProcesses.length > 0
+}
+
+await fetchInstance()
+watch(
+  () => route.params.id,
+  async () => {
+    if (route.params.id && route.path.startsWith('/instance')) {
+      await fetchInstance()
+    }
+  },
+)
 
 const tabs = computed(() => [
   {
@@ -213,18 +262,8 @@ breadcrumbs.setContext({
   query: route.query,
 })
 
-const offline = ref(!navigator.onLine)
-window.addEventListener('offline', () => {
-  offline.value = true
-})
-window.addEventListener('online', () => {
-  offline.value = false
-})
-
 const loadingBar = useLoading()
 
-const playing = ref(false)
-const loading = ref(false)
 const options = ref(null)
 
 const startInstance = async (context) => {
@@ -244,32 +283,6 @@ const startInstance = async (context) => {
   })
 }
 
-const checkProcess = async () => {
-  const runningProcesses = await get_by_profile_path(route.params.id).catch(handleError)
-
-  playing.value = runningProcesses.length > 0
-}
-
-// Get information on associated modrinth versions, if any
-const modrinthVersions = ref([])
-if (!offline.value && instance.value.linked_data && instance.value.linked_data.project_id) {
-  get_project(instance.value.linked_data.project_id, 'must_revalidate')
-    .catch(handleError)
-    .then((project) => {
-      if (project && project.versions) {
-        get_version_many(project.versions, 'must_revalidate')
-          .catch(handleError)
-          .then((versions) => {
-            modrinthVersions.value = versions.sort(
-              (a, b) => dayjs(b.date_published) - dayjs(a.date_published),
-            )
-          })
-      }
-    })
-}
-
-await checkProcess()
-
 const stopInstance = async (context) => {
   playing.value = false
   await kill(route.params.id).catch(handleError)
@@ -354,7 +367,9 @@ const unlistenProfiles = await profile_listener(async (event) => {
 })
 
 const unlistenProcesses = await process_listener((e) => {
-  if (e.event === 'finished' && e.profile_path_id === route.params.id) playing.value = false
+  if (e.event === 'finished' && e.profile_path_id === route.params.id) {
+    playing.value = false
+  }
 })
 
 const icon = computed(() =>

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

@@ -91,7 +91,10 @@
             },
             {
               label: 'Versions',
-              href: `/project/${$route.params.id}/versions`,
+              href: {
+                path: `/project/${$route.params.id}/versions`,
+                query: { l: instance?.loader, g: instance?.game_version },
+              },
               subpages: ['version'],
             },
             {
@@ -212,13 +215,11 @@ async function fetchProjectData() {
 
 await fetchProjectData()
 
-const promo = ref(null)
 watch(
   () => route.params.id,
   async () => {
     if (route.params.id && route.path.startsWith('/project')) {
       await fetchProjectData()
-      promo.value.scroll()
     }
   },
 )

apps/app-frontend/src/pages/project/Versions.vue

@@ -67,12 +67,12 @@
 <script setup>
 import { ProjectPageVersions, ButtonStyled, OverflowMenu } from '@modrinth/ui'
 import { CheckIcon, DownloadIcon, ExternalIcon, MoreVerticalIcon } from '@modrinth/assets'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { SwapIcon } from '@/assets/icons/index.js'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
 import { handleError } from '@/store/notifications.js'
 
-const props = defineProps({
+defineProps({
   project: {
     type: Object,
     default: () => {},
@@ -107,17 +107,6 @@ const [loaders, gameVersions] = await Promise.all([
   get_loaders().catch(handleError).then(ref),
   get_game_versions().catch(handleError).then(ref),
 ])
-
-const filterVersions = ref([])
-const filterLoader = ref(props.instance ? [props.instance?.loader] : [])
-const filterGameVersions = ref(props.instance ? [props.instance?.game_version] : [])
-
-const currentPage = ref(1)
-
-//watch all the filters and if a value changes, reset to page 1
-watch([filterVersions, filterLoader, filterGameVersions], () => {
-  currentPage.value = 1
-})
 </script>
 
 <style scoped lang="scss">