v0.9.1 fixes

apps/app-frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@modrinth/app-frontend",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

apps/app-frontend/src/App.vue

@@ -16,6 +16,7 @@ import {
   RestoreIcon,
   LogOutIcon,
   RightArrowIcon,
+  LeftArrowIcon,
 } from '@modrinth/assets'
 import { Avatar, Button, ButtonStyled, Notifications, OverflowMenu } from '@modrinth/ui'
 import { useLoading, useTheming } from '@/store/state'
@@ -256,25 +257,19 @@ themeStore.$subscribe(() => {
   sidebarToggled.value = !themeStore.toggleSidebar
 })
 
-const forceSidebar = ref(false)
+const forceSidebar = computed(
+  () => route.path.startsWith('/browse') || route.path.startsWith('/project'),
+)
 const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
 const showAd = computed(() => !(!sidebarVisible.value || hasPlus.value))
 
-router.afterEach((to) => {
-  forceSidebar.value = to.path.startsWith('/browse') || to.path.startsWith('/project')
-})
-
-const currentTimeout = ref(null)
 watch(
   showAd,
   () => {
     if (!showAd.value) {
-      if (currentTimeout.value) clearTimeout(currentTimeout.value)
       hide_ads_window(true)
     } else {
-      currentTimeout.value = setTimeout(() => {
-        init_ads_window(true)
-      }, 400)
+      init_ads_window(true)
     }
   },
   { immediate: true },
@@ -443,6 +438,20 @@ function handleAuxClick(e) {
     <div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
       <div data-tauri-drag-region class="flex p-3">
         <ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" />
+        <div class="flex items-center gap-1 ml-3">
+          <button
+            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            @click="router.back()"
+          >
+            <LeftArrowIcon />
+          </button>
+          <button
+            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            @click="router.forward()"
+          >
+            <RightArrowIcon />
+          </button>
+        </div>
         <Breadcrumbs class="pt-[2px]" />
       </div>
       <section class="flex ml-auto items-center">
@@ -704,7 +713,7 @@ function handleAuxClick(e) {
 
   display: grid;
   grid-template-columns: 1fr 0px;
-  transition: grid-template-columns 0.4s ease-in-out;
+  // transition: grid-template-columns 0.4s ease-in-out;
 
   &.sidebar-enabled {
     grid-template-columns: 1fr 300px;

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

@@ -35,10 +35,12 @@ const props = defineProps({
 })
 
 const playing = ref(false)
-
+const loading = ref(false)
 const modLoading = computed(
   () =>
-    currentEvent.value === 'installing' || (currentEvent.value === 'launched' && !playing.value),
+    loading.value ||
+    currentEvent.value === 'installing' ||
+    (currentEvent.value === 'launched' && !playing.value),
 )
 const installing = computed(() => props.instance.install_stage !== 'installed')
 
@@ -56,6 +58,7 @@ const checkProcess = async () => {
 
 const play = async (e, context) => {
   e?.stopPropagation()
+  loading.value = true
   await run(props.instance.path)
     .catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
     .finally(() => {
@@ -65,6 +68,7 @@ const play = async (e, context) => {
         source: context,
       })
     })
+  loading.value = false
 }
 
 const stop = async (e, context) => {
@@ -118,7 +122,7 @@ onUnmounted(() => unlisten())
 <template>
   <template v-if="compact">
     <div
-      class="button-base card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer active:scale-[0.98] transition-transform"
+      class="card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer hover:brightness-90 transition-all"
       @click="seeInstance"
       @mouseenter="checkProcess"
     >

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

@@ -60,7 +60,7 @@ const toTransparent = computed(() => {
 
 <template>
   <div
-    class="card-shadow button-base bg-bg-raised rounded-xl overflow-clip cursor-pointer active:scale-[0.98] transition-transform"
+    class="card-shadow bg-bg-raised rounded-xl overflow-clip cursor-pointer hover:brightness-90 transition-all"
     @click="router.push(`/project/${project.slug}`)"
   >
     <div

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

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ChevronRightIcon } from '@modrinth/assets'
-import { init_ads_window, open_ads_link, record_ads_click } from '@/helpers/ads.js'
+import { init_ads_window } from '@/helpers/ads.js'
 
 const adsWrapper = ref(null)
 
@@ -29,27 +28,12 @@ function updateAdPosition() {
     initDevicePixelRatioWatcher()
   }
 }
-
-async function openPlusLink() {
-  await record_ads_click()
-  await open_ads_link('https://modrinth.com/plus', 'https://modrinth.com')
-}
 </script>
 
 <template>
   <div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
     <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
       <p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
-      <button
-        class="mt-auto items-center gap-1 text-purple hover:underline bg-transparent border-none text-left cursor-pointer outline-none"
-        @click="openPlusLink"
-      >
-        <span>
-          Support creators and Modrinth ad-free with
-          <span class="font-bold">Modrinth+</span>
-        </span>
-        <ChevronRightIcon class="relative top-[3px] h-5 w-5" />
-      </button>
     </div>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="card-shadow button-base p-4 bg-bg-raised rounded-xl flex gap-3 group"
+    class="card-shadow p-4 bg-bg-raised rounded-xl flex gap-3 group cursor-pointer hover:brightness-90 transition-all"
     @click="
       () => {
         emit('open')
@@ -12,21 +12,7 @@
     "
   >
     <div class="icon w-[96px] h-[96px] relative">
-      <Avatar
-        :src="project.icon_url"
-        size="96px"
-        class="search-icon origin-top transition-all"
-        :class="{ 'scale-[0.85]': installed, 'brightness-50': installing }"
-      />
-      <div v-if="installing" class="rounded-2xl absolute inset-0 flex items-center justify-center">
-        <SpinnerIcon class="h-8 w-8 animate-spin" />
-      </div>
-      <div
-        v-if="installed"
-        class="absolute shadow-sm font-semibold bottom-0 w-full p-1 bg-button-bg rounded-full text-xs justify-center items-center flex gap-1 text-brand border-[1px] border-solid border-[--color-button-border]"
-      >
-        <CheckIcon class="shrink-0 stroke-[3px]" /> Installed
-      </div>
+      <Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" />
     </div>
     <div class="flex flex-col gap-2 overflow-hidden">
       <div class="gap-2 overflow-hidden no-wrap text-ellipsis">
@@ -40,6 +26,42 @@
       </div>
       <div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
         <TagsIcon class="h-4 w-4 shrink-0" />
+        <div
+          v-if="project.project_type === 'mod' || project.project_type === 'modpack'"
+          class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
+        >
+          <template v-if="project.client_side === 'optional' && project.server_side === 'optional'">
+            Client or server
+          </template>
+          <template
+            v-else-if="
+              (project.client_side === 'optional' || project.client_side === 'required') &&
+              (project.server_side === 'optional' || project.server_side === 'unsupported')
+            "
+          >
+            Client
+          </template>
+          <template
+            v-else-if="
+              (project.server_side === 'optional' || project.server_side === 'required') &&
+              (project.client_side === 'optional' || project.client_side === 'unsupported')
+            "
+          >
+            Server
+          </template>
+          <template
+            v-else-if="
+              project.client_side === 'unsupported' && project.server_side === 'unsupported'
+            "
+          >
+            Unsupported
+          </template>
+          <template
+            v-else-if="project.client_side === 'required' && project.server_side === 'required'"
+          >
+            Client and server
+          </template>
+        </div>
         <div
           v-for="tag in categories"
           :key="tag"
@@ -65,19 +87,8 @@
         </span>
       </div>
       <div class="mt-auto relative">
-        <div
-          class="flex items-center gap-2 group-hover:-translate-y-3 group-hover:opacity-0 group-focus-within:opacity-0 group-hover:scale-95 group-focus-within:scale-95 transition-all"
-        >
-          <HistoryIcon class="shrink-0" />
-          <span>
-            <span class="text-secondary">Updated</span>
-            {{ dayjs(project.date_modified ?? project.updated).fromNow() }}
-          </span>
-        </div>
-        <div
-          class="opacity-0 scale-95 translate-y-3 group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 group-focus-within:opacity-100 group-focus-within:scale-100 absolute bottom-0 right-0 transition-all w-fit"
-        >
-          <ButtonStyled color="brand">
+        <div class="absolute bottom-0 right-0 w-fit">
+          <ButtonStyled color="brand" type="outlined">
             <button
               :disabled="installed || installing"
               class="shrink-0 no-wrap"
@@ -106,15 +117,7 @@
 </template>
 
 <script setup>
-import {
-  SpinnerIcon,
-  TagsIcon,
-  DownloadIcon,
-  HeartIcon,
-  PlusIcon,
-  CheckIcon,
-  HistoryIcon,
-} from '@modrinth/assets'
+import { TagsIcon, DownloadIcon, HeartIcon, PlusIcon, CheckIcon } from '@modrinth/assets'
 import { ButtonStyled, Avatar } from '@modrinth/ui'
 import { formatNumber, formatCategory } from '@modrinth/utils'
 import dayjs from 'dayjs'

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

@@ -356,12 +356,6 @@ const messages = defineMessages({
 const options = ref(null)
 const handleRightClick = (event, result) => {
   options.value.showMenu(event, result, [
-    {
-      name: 'install',
-    },
-    {
-      type: 'divider',
-    },
     {
       name: 'open_link',
     },