0.9.0 release (app) (#3056)

* Debug app

* Bump version, final fixes

apps/app-frontend/src/components/RowDisplay.vue

@@ -25,6 +25,7 @@ import { showProfileInFolder } from '@/helpers/utils.js'
 import { trackEvent } from '@/helpers/analytics'
 import { handleSevereError } from '@/store/error.js'
 import { install as installVersion } from '@/store/install.js'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 const router = useRouter()
 
@@ -165,13 +166,7 @@ const handleOptionsClick = async (args) => {
       break
     }
     case 'open_link':
-      window.__TAURI_INVOKE__('tauri', {
-        __tauriModule: 'Shell',
-        message: {
-          cmd: 'open',
-          path: `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
-        },
-      })
+      openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
       break
     case 'copy_link':
       await navigator.clipboard.writeText(

apps/app-frontend/src/components/ui/Instance.vue

@@ -189,11 +189,12 @@ onUnmounted(() => unlisten())
             v-else-if="modLoading || installing"
             v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
             class="animate-spin w-8 h-8"
+            tabindex="-1"
           />
           <ButtonStyled v-else size="large" color="brand" circular>
             <button
               v-tooltip="'Play'"
-              class="transition-all scale-75 group-hover:scale-100 origin-bottom opacity-0 group-hover:opacity-100 card-shadow"
+              class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
               @click="(e) => play(e, 'InstanceCard')"
               @mousehover="checkProcess"
             >

apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue

@@ -16,10 +16,10 @@ const getInstances = async () => {
   recentInstances.value = profiles
     .sort((a, b) => {
       const dateACreated = dayjs(a.created)
-      const dateAPlayed = dayjs(a.last_played)
+      const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
 
       const dateBCreated = dayjs(b.created)
-      const dateBPlayed = dayjs(b.last_played)
+      const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)
 
       const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
       const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed
@@ -35,8 +35,10 @@ const getInstances = async () => {
 
 await getInstances()
 
-const unlistenProfile = await profile_listener(async () => {
-  await getInstances()
+const unlistenProfile = await profile_listener(async (event) => {
+  if (event.event !== 'synced') {
+    await getInstances()
+  }
 })
 
 onUnmounted(() => {
@@ -50,6 +52,7 @@ onUnmounted(() => {
     :key="instance.id"
     v-tooltip.right="instance.name"
     :to="`/instance/${encodeURIComponent(instance.path)}`"
+    class="relative"
   >
     <Avatar
       :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
@@ -59,7 +62,7 @@ onUnmounted(() => {
     />
     <div
       v-if="instance.install_stage !== 'installed'"
-      class="absolute inset-0 flex items-center justify-center"
+      class="absolute inset-0 flex items-center justify-center z-10"
     >
       <SpinnerIcon class="animate-spin w-4 h-4" />
     </div>

apps/app-frontend/src/components/ui/RunningAppBar.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="action-groups">
-    <Button
-      v-if="currentLoadingBars.length > 0"
-      ref="infoButton"
-      icon-only
-      class="icon-button show-card-icon"
-      @click="toggleCard()"
-    >
-      <DownloadIcon />
-    </Button>
+    <ButtonStyled v-if="currentLoadingBars.length > 0" color="brand" type="transparent" circular>
+      <button ref="infoButton" @click="toggleCard()">
+        <DownloadIcon />
+      </button>
+    </ButtonStyled>
     <div v-if="offline" class="status">
       <UnplugIcon />
       <div class="running-text">
@@ -41,15 +37,6 @@
       <Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
         <TerminalSquareIcon />
       </Button>
-      <Button
-        v-if="currentLoadingBars.length > 0"
-        ref="infoButton"
-        icon-only
-        class="icon-button show-card-icon"
-        @click="toggleCard()"
-      >
-        <DownloadIcon />
-      </Button>
     </div>
     <div v-else class="status">
       <span class="circle stopped" />
@@ -111,7 +98,7 @@ import {
   DropdownIcon,
   UnplugIcon,
 } from '@modrinth/assets'
-import { Button, Card } from '@modrinth/ui'
+import { Button, ButtonStyled, Card } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
 import { loading_listener, process_listener } from '@/helpers/events'
@@ -409,10 +396,6 @@ onBeforeUnmount(() => {
   }
 }
 
-.show-card-icon {
-  color: var(--color-brand);
-}
-
 .download-enter-active,
 .download-leave-active {
   transition: opacity 0.3s ease;

apps/app-frontend/src/components/ui/SearchCard.vue

@@ -157,13 +157,13 @@ const installing = ref(false)
 async function install() {
   installing.value = true
   await installVersion(
-    props.project.project_id,
+    props.project.project_id ?? props.project.id,
     null,
     props.instance ? props.instance.path : null,
     'SearchCard',
     () => {
       installing.value = false
-      emit('install', props.project.project_id)
+      emit('install', props.project.project_id ?? props.project.id)
     },
   )
 }