More app fixes 0.9.0 (#3054)

* initial set of fixes (toggle sidebar, profile pagination) * more fixes, bump version * fix lint: * fix quick switcher ordering
2024-12-22 20:03:58 -07:00
parent ef08d8e538
commit cae6f12ea0
52 changed files with 502 additions and 1501 deletions
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@modrinth/app-frontend",
  "private": true,
-  "version": "0.9.0-1",
+  "version": "0.9.0-2",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -15,6 +15,7 @@ import {
  MaximizeIcon,
  RestoreIcon,
  LogOutIcon,
+  RightArrowIcon,
 } from '@modrinth/assets'
 import { Avatar, Button, ButtonStyled, Notifications, OverflowMenu } from '@modrinth/ui'
 import { useLoading, useTheming } from '@/store/state'
@@ -54,40 +55,14 @@ import { get_user } from '@/helpers/cache.js'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import dayjs from 'dayjs'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'

 const themeStore = useTheming()

-const news = ref([
-  {
-    title: 'Introducing Modrinth Servers',
-    summary: 'Host your next Minecraft server with Modrinth.',
-    thumbnail:
-      'https://media.beehiiv.com/cdn-cgi/image/format=auto,width=800,height=421,fit=scale-down,onerror=redirect/uploads/asset/file/eefddc59-b4c4-4e7d-92e8-c26bdef42984/Modrinth-Servers-Thumb.png',
-    date: '2024-11-02T00:00:00Z',
-    link: 'https://blog.modrinth.com/p/modrinth-servers-beta',
-  },
-  {
-    title: 'Becoming Sustainable',
-    summary: 'Announcing 5x creator revenue and updates to the monetization program.',
-    thumbnail:
-      'https://media.beehiiv.com/cdn-cgi/image/format=auto,width=800,height=421,fit=scale-down,onerror=redirect/uploads/asset/file/c99b9885-8248-4d7a-b19a-3ae2c902fdd5/revenue.png',
-    date: '2024-09-13T00:00:00Z',
-    link: 'https://blog.modrinth.com/p/creator-revenue-update',
-  },
-  {
-    title: 'Modrinth+ and New Ads',
-    summary:
-      'Introducing a new advertising system, a subscription to remove ads, and a redesign of the website!\n',
-    thumbnail:
-      'https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/38ce85e4-5d93-43eb-b61b-b6296f6b9e66/things.png?t=1724260059',
-    date: '2024-08-21T00:00:00Z',
-    link: 'https://blog.modrinth.com/p/introducing-modrinth-refreshed-site-look-new-advertising-system',
-  },
-])
+const news = ref([])

 const urlModal = ref(null)

@@ -132,6 +107,9 @@ async function setupApp() {
    advanced_rendering,
    onboarded,
    default_page,
+    toggle_sidebar,
+    developer_mode,
+    feature_flags,
  } = await get()

  if (default_page === 'Library') {
@@ -149,6 +127,9 @@ async function setupApp() {
  themeStore.setThemeState(theme)
  themeStore.collapsedNavigation = collapsed_navigation
  themeStore.advancedRendering = advanced_rendering
+  themeStore.toggleSidebar = toggle_sidebar
+  themeStore.devMode = developer_mode
+  themeStore.featureFlags = feature_flags

  isMaximized.value = await getCurrentWindow().isMaximized()

@@ -190,6 +171,12 @@ async function setupApp() {
    }
  })

+  useFetch(`https://modrinth.com/blog/news.json`, 'news', true).then((res) => {
+    if (res && res.articles) {
+      news.value = res.articles
+    }
+  })
+
  get_opening_command().then(handleCommand)
  checkUpdates()
  fetchCredentials()
@@ -263,13 +250,29 @@ const hasPlus = computed(
    (credentials.value.user.badges & MIDAS_BITFLAG) === MIDAS_BITFLAG,
 )

+const sidebarToggled = ref(true)
+
+themeStore.$subscribe(() => {
+  sidebarToggled.value = !themeStore.toggleSidebar
+})
+
+const forceSidebar = ref(false)
+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')
+})
+
 watch(
-  hasPlus,
+  showAd,
  () => {
-    if (hasPlus.value) {
+    if (!showAd.value) {
      hide_ads_window(true)
    } else {
-      show_ads_window()
+      setTimeout(() => {
+        init_ads_window(true)
+      }, 400)
    }
  },
  { immediate: true },
@@ -367,21 +370,21 @@ function handleAuxClick(e) {
      <InstanceCreationModal ref="installationModal" />
    </Suspense>
    <div
-      class="app-grid-navbar bg-bg-raised flex flex-col p-[1rem] pt-0 gap-[0.5rem] z-10 w-[--left-bar-width]"
+      class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
    >
-      <NavButton to="/">
+      <NavButton v-tooltip.right="'Home'" to="/">
        <HomeIcon />
-        <template #label>Home</template>
      </NavButton>
      <NavButton
+        v-tooltip.right="'Discover content'"
        to="/browse/modpack"
        :is-primary="() => route.path.startsWith('/browse') && !route.query.i"
        :is-subpage="(route) => route.path.startsWith('/project') && !route.query.i"
      >
        <CompassIcon />
-        <template #label>Discover content</template>
      </NavButton>
      <NavButton
+        v-tooltip.right="'Library'"
        to="/library"
        :is-subpage="
          () =>
@@ -391,24 +394,24 @@ function handleAuxClick(e) {
        "
      >
        <LibraryIcon />
-        <template #label>Library</template>
      </NavButton>
      <div class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
      <suspense>
        <QuickInstanceSwitcher />
      </suspense>
-      <NavButton :to="() => $refs.installationModal.show()" :disabled="offline">
+      <NavButton
+        v-tooltip.right="'Create new instance'"
+        :to="() => $refs.installationModal.show()"
+        :disabled="offline"
+      >
        <PlusIcon />
-        <template #label>Create new instance</template>
      </NavButton>
      <div class="flex flex-grow"></div>
-      <NavButton v-if="updateAvailable" :to="() => restartApp()">
+      <NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
        <DownloadIcon />
-        <template #label>Install update</template>
      </NavButton>
-      <NavButton :to="() => $refs.settingsModal.show()">
+      <NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
        <SettingsIcon />
-        <template #label>Settings</template>
      </NavButton>
      <ButtonStyled v-if="credentials" type="transparent" circular>
        <OverflowMenu
@@ -430,17 +433,30 @@ function handleAuxClick(e) {
          <template #sign-out> <LogOutIcon /> Sign out </template>
        </OverflowMenu>
      </ButtonStyled>
-      <NavButton v-else :to="() => signIn()">
+      <NavButton v-else v-tooltip.right="'Sign in'" :to="() => signIn()">
        <LogInIcon />
        <template #label>Sign in</template>
      </NavButton>
    </div>
    <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-4">
+      <div data-tauri-drag-region class="flex p-3">
        <ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" />
        <Breadcrumbs />
      </div>
-      <section class="flex ml-auto">
+      <section class="flex ml-auto items-center">
+        <ButtonStyled
+          v-if="!forceSidebar && themeStore.toggleSidebar"
+          :type="sidebarToggled ? 'standard' : 'transparent'"
+          circular
+        >
+          <button
+            class="mr-3 transition-transform"
+            :class="{ 'rotate-180': !sidebarToggled }"
+            @click="sidebarToggled = !sidebarToggled"
+          >
+            <RightArrowIcon />
+          </button>
+        </ButtonStyled>
        <div class="flex mr-3">
          <Suspense>
            <RunningAppBar />
@@ -465,7 +481,11 @@ function handleAuxClick(e) {
      </section>
    </div>
  </div>
-  <div v-if="stateInitialized" class="app-contents experimental-styles-within">
+  <div
+    v-if="stateInitialized"
+    class="app-contents experimental-styles-within"
+    :class="{ 'sidebar-enabled': sidebarVisible }"
+  >
    <div class="app-viewport flex-grow router-view">
      <div
        class="loading-indicator-container h-8 fixed z-50"
@@ -478,7 +498,7 @@ function handleAuxClick(e) {
        <ModrinthLoadingIndicator />
      </div>
      <div
-        v-if="themeStore.featureFlag_pagePath"
+        v-if="themeStore.featureFlags.page_path"
        class="absolute bottom-0 left-0 m-2 bg-tooltip-bg text-tooltip-text font-semibold rounded-full px-2 py-1 text-xs z-50"
      >
        {{ route.fullPath }}
@@ -507,7 +527,7 @@ function handleAuxClick(e) {
        :class="{ 'pb-12': !hasPlus }"
      >
        <div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
-        <div class="sidebar-default-content">
+        <div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
          <div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
            <h3 class="text-lg m-0">Playing as</h3>
            <suspense>
@@ -519,7 +539,7 @@ function handleAuxClick(e) {
              <FriendsList :credentials="credentials" :sign-in="() => signIn()" />
            </suspense>
          </div>
-          <div class="pt-4 flex flex-col">
+          <div v-if="news && news.length > 0" class="pt-4 flex flex-col">
            <h3 class="px-4 text-lg m-0">News</h3>
            <template v-for="(item, index) in news" :key="`news-${index}`">
              <a
@@ -550,7 +570,7 @@ function handleAuxClick(e) {
          </div>
        </div>
      </div>
-      <template v-if="!hasPlus">
+      <template v-if="showAd">
        <a
          href="https://modrinth.plus?app"
          class="absolute bottom-[250px] w-full flex justify-center items-center gap-1 px-4 py-3 text-purple font-medium hover:underline z-10"
@@ -577,21 +597,6 @@ function handleAuxClick(e) {
 </template>

 <style lang="scss" scoped>
-.sleek-primary {
-  background-color: var(--color-brand-highlight);
-  transition: all ease-in-out 0.1s;
-}
-
-.navigation-controls {
-  flex-grow: 1;
-  width: min-content;
-}
-
-.appbar-row {
-  display: flex;
-  flex-direction: row;
-}
-
 .window-controls {
  z-index: 20;
  display: none;
@@ -658,139 +663,10 @@ function handleAuxClick(e) {
  }
 }

-.app-container {
-  height: 100vh;
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-
-  .view {
-    width: calc(100% - var(--sidebar-width));
-    background-color: var(--color-raised-bg);
-
-    .critical-error-banner {
-      margin-top: -1.25rem;
-      padding: 1rem;
-      background-color: rgba(203, 34, 69, 0.1);
-      border-left: 2px solid var(--color-red);
-      border-bottom: 2px solid var(--color-red);
-      border-right: 2px solid var(--color-red);
-      border-radius: 1rem;
-    }
-
-    .appbar {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      background: var(--color-raised-bg);
-      text-align: center;
-      padding: var(--gap-md);
-      height: 3.25rem;
-      gap: var(--gap-sm);
-      //no select
-      user-select: none;
-      -webkit-user-select: none;
-    }
-
-    .router-view {
-      width: 100%;
-      height: calc(100% - 3.125rem);
-      overflow: auto;
-      overflow-x: hidden;
-      background-color: var(--color-bg);
-      border-top-left-radius: var(--radius-xl);
-    }
-  }
-}
-
-.nav-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-  background-color: var(--color-raised-bg);
-  box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
-  padding: var(--gap-md);
-}
-
-.pages-list {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  gap: 0.5rem;
-
-  a {
-    display: flex;
-    align-items: center;
-    word-spacing: 3px;
-    background: inherit;
-    transition: all ease-in-out 0.1s;
-    color: var(--color-base);
-    box-shadow: none;
-
-    &.router-link-active {
-      color: var(--color-contrast);
-      background: var(--color-button-bg);
-      box-shadow: var(--shadow-floating);
-    }
-
-    &:hover {
-      background-color: var(--color-button-bg);
-      color: var(--color-contrast);
-      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-      text-decoration: none;
-    }
-  }
-
-  &.primary {
-    color: var(--color-accent-contrast);
-    background-color: var(--color-brand);
-  }
-}
-
-.collapsed-button {
-  height: 3rem !important;
-  width: 3rem !important;
-  padding: 0.75rem;
-  border-radius: var(--radius-md);
-  box-shadow: none;
-
-  svg {
-    width: 1.5rem !important;
-    height: 1.5rem !important;
-    max-width: 1.5rem !important;
-    max-height: 1.5rem !important;
-  }
-}
-
-.nav-section {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  gap: 1rem;
-}
-
-.button-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: var(--gap-md);
-
-  .transparent {
-    padding: var(--gap-sm) 0;
-  }
-}
-
 .app-grid-layout,
 .app-contents {
-  --top-bar-height: 3.75rem;
-  --left-bar-width: 5rem;
+  --top-bar-height: 3rem;
+  --left-bar-width: 4rem;
  --right-bar-width: 300px;
 }

@@ -816,18 +692,21 @@ function handleAuxClick(e) {
 .app-contents {
  position: absolute;
  z-index: 1;
-  left: 5rem;
-  top: 3.75rem;
+  left: var(--left-bar-width);
+  top: var(--top-bar-height);
  right: 0;
  bottom: 0;
-  height: calc(100vh - 3.75rem);
+  height: calc(100vh - var(--top-bar-height));
  background-color: var(--color-bg);
  border-top-left-radius: var(--radius-xl);

  display: grid;
-  grid-template-columns: 1fr 300px;
-  //grid-template-columns: 1fr 0px;
+  grid-template-columns: 1fr 0px;
  transition: grid-template-columns 0.4s ease-in-out;
+
+  &.sidebar-enabled {
+    grid-template-columns: 1fr 300px;
+  }
 }

 .loading-indicator-container {
@@ -839,7 +718,7 @@ function handleAuxClick(e) {
  overflow: visible;
  width: 300px;
  position: relative;
-  height: calc(100vh - 3.75rem);
+  height: calc(100vh - var(--top-bar-height));
  background: var(--brand-gradient-bg);

  --color-button-bg: var(--brand-gradient-button);
@@ -881,22 +760,15 @@ function handleAuxClick(e) {
  overflow-x: hidden;
 }

-//::-webkit-scrollbar-track {
-//  background-color: transparent; /* Make it transparent if needed */
-//  margin-block: 5px;
-//  margin-right: 5px;
-//}
-
 .app-contents::before {
  z-index: 1;
  content: '';
  position: fixed;
-  left: 5rem;
-  top: 3.75rem;
-  right: -5rem;
-  bottom: -5rem;
+  left: var(--left-bar-width);
+  top: var(--top-bar-height);
+  right: calc(-1 * var(--left-bar-width));
+  bottom: calc(-1 * var(--left-bar-width));
  border-radius: var(--radius-xl);
-  //box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2) inset;
  box-shadow:
    1px 1px 15px rgba(0, 0, 0, 0.2) inset,
    inset 1px 1px 1px rgba(255, 255, 255, 0.23);
@@ -911,7 +783,7 @@ function handleAuxClick(e) {
  display: none;
 }

-.sidebar-teleport-content:empty + .sidebar-default-content {
+.sidebar-teleport-content:empty + .sidebar-default-content.sidebar-enabled {
  display: contents;
 }
 </style>
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -218,14 +218,14 @@ const filteredResults = computed(() => {
 })
 </script>
 <template>
-  <div class="iconified-input">
-    <SearchIcon />
-    <input v-model="search" type="text" class="h-12" placeholder="Search" />
-    <Button class="r-btn" @click="() => (search = '')">
-      <XIcon />
-    </Button>
-  </div>
  <div class="flex gap-2">
+    <div class="iconified-input flex-1">
+      <SearchIcon />
+      <input v-model="search" type="text" placeholder="Search" />
+      <Button class="r-btn" @click="() => (search = '')">
+        <XIcon />
+      </Button>
+    </div>
    <DropdownSelect
      v-slot="{ selected }"
      v-model="sortBy"
@@ -363,7 +363,7 @@ const filteredResults = computed(() => {

 .instances {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  width: 100%;
  gap: 0.75rem;
  margin-right: auto;
--- a/apps/app-frontend/src/components/RowDisplay.vue
+++ b/apps/app-frontend/src/components/RowDisplay.vue
@@ -207,13 +207,18 @@ const calculateCardsPerRow = () => {
  }
 }

+const rowContainer = ref(null)
+const resizeObserver = ref(null)
 onMounted(() => {
  calculateCardsPerRow()
+  resizeObserver.value = new ResizeObserver(calculateCardsPerRow)
+  resizeObserver.value.observe(rowContainer.value)
  window.addEventListener('resize', calculateCardsPerRow)
 })

 onUnmounted(() => {
  window.removeEventListener('resize', calculateCardsPerRow)
+  resizeObserver.value.unobserve(rowContainer.value)
 })
 </script>

@@ -226,7 +231,7 @@ onUnmounted(() => {
    proceed-label="Delete"
    @proceed="deleteProfile"
  />
-  <div class="flex flex-col gap-4">
+  <div ref="rowContainer" class="flex flex-col gap-4">
    <div v-for="(row, rowIndex) in actualInstances" ref="rows" :key="row.label" class="row">
      <router-link
        class="flex mb-3 leading-none items-center gap-1 text-primary text-lg font-bold hover:underline group"
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -12,11 +12,9 @@ import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 import { trackEvent } from '@/helpers/analytics'
 import dayjs from 'dayjs'
-import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { formatCategory } from '@modrinth/utils'

-dayjs.extend(duration)
 dayjs.extend(relativeTime)

 const props = defineProps({
@@ -169,7 +167,7 @@ onUnmounted(() => unlisten())
    >
      <div class="relative flex items-center justify-center">
        <Avatar
-          size="96px"
+          size="48px"
          :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
          :tint-by="instance.path"
          alt="Mod card"
@@ -205,7 +203,7 @@ onUnmounted(() => unlisten())
        </div>
      </div>
      <div class="flex flex-col gap-1">
-        <p class="m-0 text-lg font-bold text-contrast leading-tight line-clamp-2">
+        <p class="m-0 text-md font-bold text-contrast leading-tight line-clamp-1">
          {{ instance.name }}
        </p>
        <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
@@ -214,17 +212,6 @@ onUnmounted(() => unlisten())
            {{ formatCategory(instance.loader) }} {{ instance.game_version }}
          </span>
        </div>
-        <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
-          <TimerIcon class="shrink-0" />
-          <span class="text-sm line-clamp-1">
-            Played for
-            {{
-              dayjs
-                .duration(instance.recent_time_played + instance.submitted_time_played, 'seconds')
-                .humanize()
-            }}
-          </span>
-        </div>
      </div>
    </div>
  </div>
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -1,29 +1,24 @@
 <template>
-  <div class="tooltip-parent flex items-center justify-center">
-    <RouterLink
-      v-if="typeof to === 'string'"
-      :to="to"
-      v-bind="$attrs"
-      :class="{
-        'router-link-active': isPrimary && isPrimary(route),
-        'subpage-active': isSubpage && isSubpage(route),
-      }"
-      class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
-    >
-      <slot />
-    </RouterLink>
-    <button
-      v-else
-      v-bind="$attrs"
-      class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
-      @click="to"
-    >
-      <slot />
-    </button>
-    <div class="tooltip-label">
-      <slot name="label" />
-    </div>
-  </div>
+  <RouterLink
+    v-if="typeof to === 'string'"
+    :to="to"
+    v-bind="$attrs"
+    :class="{
+      'router-link-active': isPrimary && isPrimary(route),
+      'subpage-active': isSubpage && isSubpage(route),
+    }"
+    class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+  >
+    <slot />
+  </RouterLink>
+  <button
+    v-else
+    v-bind="$attrs"
+    class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+    @click="to"
+  >
+    <slot />
+  </button>
 </template>

 <script setup lang="ts">
@@ -61,50 +56,4 @@ defineOptions({
 .subpage-active {
  @apply text-contrast bg-button-bg;
 }
-
-.tooltip-parent {
-  position: relative;
-  border-radius: var(--radius-max);
-}
-
-.tooltip-parent:hover .tooltip-label {
-  opacity: 1;
-  translate: 0 0;
-  scale: 1;
-}
-
-.tooltip-label:not(:empty) {
-  --_tooltip-bg: black;
-  --_tooltip-color: var(--dark-color-contrast);
-
-  position: absolute;
-  background-color: var(--_tooltip-bg);
-  color: var(--_tooltip-color);
-  text-wrap: nowrap;
-  padding: 0.5rem 0.5rem;
-  border-radius: var(--radius-sm);
-  left: calc(100% + 0.5rem);
-  font-size: 1rem;
-  line-height: 1;
-  font-weight: bold;
-  filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
-  pointer-events: none;
-  user-select: none;
-
-  opacity: 0;
-  translate: -0.5rem 0;
-  scale: 0.9;
-  transition: all ease-in-out 0.1s;
-}
-
-.tooltip-label:not(:empty)::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 100%; /* To the left of the tooltip */
-  margin-top: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent var(--_tooltip-bg) transparent transparent;
-}
 </style>
--- a/apps/app-frontend/src/components/ui/PromotionWrapper.vue
+++ b/apps/app-frontend/src/components/ui/PromotionWrapper.vue
@@ -25,7 +25,7 @@ onMounted(() => {

 function updateAdPosition() {
  if (adsWrapper.value) {
-    init_ads_window(true)
+    init_ads_window()
    initDevicePixelRatioWatcher()
  }
 }
--- a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
+++ b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
@@ -15,8 +15,14 @@ const getInstances = async () => {

  recentInstances.value = profiles
    .sort((a, b) => {
-      const dateA = dayjs(a.created > a.last_played ? a.last_played : a.created)
-      const dateB = dayjs(b.created > b.last_played ? b.last_played : b.created)
+      const dateACreated = dayjs(a.created)
+      const dateAPlayed = dayjs(a.last_played)
+
+      const dateBCreated = dayjs(b.created)
+      const dateBPlayed = dayjs(b.last_played)
+
+      const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
+      const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed

      if (dateA.isSame(dateB)) {
        return a.name.localeCompare(b.name)
@@ -42,6 +48,7 @@ onUnmounted(() => {
  <NavButton
    v-for="instance in recentInstances"
    :key="instance.id"
+    v-tooltip.right="instance.name"
    :to="`/instance/${encodeURIComponent(instance.path)}`"
  >
    <Avatar
@@ -56,8 +63,8 @@ onUnmounted(() => {
    >
      <SpinnerIcon class="animate-spin w-4 h-4" />
    </div>
-    <template #label>{{ instance.name }}</template>
  </NavButton>
+  <div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
 </template>

 <style scoped lang="scss"></style>
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -1,9 +1,5 @@
 <template>
  <div class="action-groups">
-    <a href="https://support.modrinth.com" class="link">
-      <ChatIcon />
-      <span> Get support </span>
-    </a>
    <Button
      v-if="currentLoadingBars.length > 0"
      ref="infoButton"
@@ -123,7 +119,6 @@ import { useRouter } from 'vue-router'
 import { progress_bars_list } from '@/helpers/state.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { handleError } from '@/store/notifications.js'
-import { ChatIcon } from '@/assets/icons'
 import { get_many } from '@/helpers/profile.js'
 import { trackEvent } from '@/helpers/analytics'

--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -38,7 +38,7 @@
      <div class="m-0 line-clamp-2">
        {{ project.description }}
      </div>
-      <div class="mt-auto flex items-center gap-1 no-wrap">
+      <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-for="tag in categories"
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -190,6 +190,7 @@ const messages = defineMessages({
    description="If you proceed, all data for your instance will be permanently erased, including your worlds. You will not be able to recover it."
    :has-to-type="false"
    proceed-label="Delete"
+    :show-ad-on-close="false"
    @proceed="removeProfile"
  />
  <div class="block">
--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -457,6 +457,7 @@ const messages = defineMessages({
    :proceed-icon="HammerIcon"
    :proceed-label="formatMessage(messages.repairButton)"
    :danger="false"
+    :show-ad-on-close="false"
    @proceed="() => repairProfile(true)"
  />
  <ModpackVersionModal
@@ -480,6 +481,7 @@ const messages = defineMessages({
    :description="formatMessage(messages.unlinkInstanceConfirmDescription)"
    :proceed-icon="UnlinkIcon"
    :proceed-label="formatMessage(messages.unlinkInstanceButton)"
+    :show-ad-on-close="false"
    @proceed="() => unpairProfile()"
  />
  <ConfirmModalWrapper
@@ -488,6 +490,7 @@ const messages = defineMessages({
    :description="formatMessage(messages.reinstallModpackConfirmDescription)"
    :proceed-icon="DownloadIcon"
    :proceed-label="formatMessage(messages.reinstallModpackButton)"
+    :show-ad-on-close="false"
    @proceed="() => repairModpack()"
  />
  <div>
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -10,7 +10,7 @@ import {
  CoffeeIcon,
 } from '@modrinth/assets'
 import { TabbedModal } from '@modrinth/ui'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useVIntl, defineMessage } from '@vintl/vintl'
 import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
 import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
@@ -22,6 +22,7 @@ import { version as getOsVersion, platform as getOsPlatform } from '@tauri-apps/
 import { useTheming } from '@/store/state'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get, set } from '@/helpers/settings'

 const themeStore = useTheming()

@@ -99,6 +100,28 @@ defineExpose({ show, isOpen })
 const version = await getVersion()
 const osPlatform = getOsPlatform()
 const osVersion = getOsVersion()
+const settings = ref(await get())
+
+watch(
+  settings,
+  async () => {
+    await set(settings.value)
+  },
+  { deep: true },
+)
+
+function devModeCount() {
+  devModeCounter.value++
+  if (devModeCounter.value > 5) {
+    themeStore.devMode = !themeStore.devMode
+    settings.value.developer_mode = !!themeStore.devMode
+    devModeCounter.value = 0
+
+    if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
+      modal.value.setTab(0)
+    }
+  }
+}
 </script>
 <template>
  <ModalWrapper ref="modal">
@@ -118,19 +141,7 @@ const osVersion = getOsVersion()
            <button
              class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
              :class="{ 'text-brand': themeStore.devMode, 'text-secondary': !themeStore.devMode }"
-              @click="
-                () => {
-                  devModeCounter++
-                  if (devModeCounter > 5) {
-                    themeStore.devMode = !themeStore.devMode
-                    devModeCounter = 0
-
-                    if (!themeStore.devMode && tabs[modal.selectedTab].developerOnly) {
-                      modal.setTab(0)
-                    }
-                  }
-                }
-              "
+              @click="devModeCount"
            >
              <ModrinthIcon class="w-6 h-6" />
            </button>
--- a/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
@@ -6,7 +6,7 @@ import { useTheming } from '@/store/theme.js'

 const themeStore = useTheming()

-defineProps({
+const props = defineProps({
  confirmationText: {
    type: String,
    default: '',
@@ -37,6 +37,10 @@ defineProps({
    type: Boolean,
    default: true,
  },
+  showAdOnClose: {
+    type: Boolean,
+    default: true,
+  },
 })

 const emit = defineEmits(['proceed'])
@@ -54,7 +58,9 @@ defineExpose({
 })

 function onModalHide() {
-  show_ads_window()
+  if (props.showAdOnClose) {
+    show_ads_window()
+  }
 }

 function proceed() {
--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -23,8 +23,13 @@ watch(
  <p class="m-0 mt-1">Select your preferred color theme for Modrinth App.</p>

  <ThemeSelector
-    :update-color-theme="themeStore.setThemeState"
-    :current-theme="themeStore.selectedTheme"
+    :update-color-theme="
+      (theme) => {
+        themeStore.setThemeState(theme)
+        settings.theme = theme
+      }
+    "
+    :current-theme="settings.theme"
    :theme-options="themeStore.themeOptions"
    system-theme-color="system"
  />
@@ -97,4 +102,22 @@ watch(
      :options="['Home', 'Library']"
    />
  </div>
+
+  <div class="mt-4 flex items-center justify-between">
+    <div>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Toggle sidebar</h2>
+      <p class="m-0 mt-1">Enables the ability to toggle the sidebar.</p>
+    </div>
+    <Toggle
+      id="toggle-sidebar"
+      :model-value="settings.toggle_sidebar"
+      :checked="settings.toggle_sidebar"
+      @update:model-value="
+        (e) => {
+          settings.toggle_sidebar = e
+          themeStore.toggleSidebar = settings.toggle_sidebar
+        }
+      "
+    />
+  </div>
 </template>
--- a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
@@ -1,34 +1,36 @@
 <script setup lang="ts">
 import { Toggle } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
-import { computed } from 'vue'
-import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
+import { get, set } from '@/helpers/settings'

 const themeStore = useTheming()

-type ThemeStoreKeys = keyof typeof themeStore
+const settings = ref(await get())
+const options = ref(['project_background', 'page_path'])

-const options: Ref<ThemeStoreKeys[]> = computed(() => {
-  return Object.keys(themeStore).filter((key) => key.startsWith('featureFlag_')) as ThemeStoreKeys[]
-})
-
-function getStoreValue<K extends ThemeStoreKeys>(key: K): (typeof themeStore)[K] {
-  return themeStore[key]
+function getStoreValue(key: string) {
+  return themeStore.featureFlags[key] ?? false
 }

-function setStoreValue<K extends ThemeStoreKeys>(key: K, value: (typeof themeStore)[K]) {
-  themeStore[key] = value
+function setStoreValue(key: string, value: boolean) {
+  themeStore.featureFlags[key] = value
+  settings.value.feature_flags[key] = value
 }

-function formatFlagName(name: string) {
-  return name.replace('featureFlag_', '')
-}
+watch(
+  settings,
+  async () => {
+    await set(settings.value)
+  },
+  { deep: true },
+)
 </script>
 <template>
  <div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
    <div>
      <h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
-        {{ formatFlagName(option) }}
+        {{ option }}
      </h2>
    </div>

@@ -36,7 +38,7 @@ function formatFlagName(name: string) {
      id="advanced-rendering"
      :model-value="getStoreValue(option)"
      :checked="getStoreValue(option)"
-      @update:model-value="() => setStoreValue(option, !themeStore[option])"
+      @update:model-value="() => setStoreValue(option, !themeStore.featureFlags[option])"
    />
  </div>
 </template>
--- a/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
@@ -80,6 +80,7 @@ async function findLauncherDir() {
      description="If you proceed, your entire cache will be purged. This may slow down the app temporarily."
      :has-to-type="false"
      proceed-label="Purge cache"
+      :show-ad-on-close="false"
      @proceed="purgeCache"
    />

--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -169,10 +169,14 @@ window.addEventListener('online', () => {
 const breadcrumbs = useBreadcrumbs()
 breadcrumbs.setContext({ name: 'Discover content', link: route.path, query: route.query })

-const loading = ref(false)
+const loading = ref(true)

 const projectType = ref(route.params.projectType)

+watch(projectType, () => {
+  loading.value = true
+})
+
 type SearchResult = {
  project_id: string
 }
@@ -240,6 +244,7 @@ async function refreshSearch() {
    query: params,
  })
  await router.replace({ path: route.path, query: params })
+  loading.value = false
 }

 async function setPage(newPageNumber: number) {
@@ -375,10 +380,12 @@ await refreshSearch()
      button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
      content-class="mb-3"
      inner-panel-class="ml-2 mr-3"
-      :open-by-default="filter.id.startsWith('category') || filter.id === 'environment'"
+      :open-by-default="
+        filter.id.startsWith('category') || filter.id === 'environment' || filter.id === 'license'
+      "
    >
      <template #header>
-        <h3 class="text-lg m-0">{{ filter.formatted_name }}</h3>
+        <h3 class="text-base m-0">{{ filter.formatted_name }}</h3>
      </template>
      <template #locked-game_version>
        {{ formatMessage(messages.gameVersionProvidedByInstance) }}
@@ -394,7 +401,6 @@ 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 text-2xl">Discover content</h1>
    <NavTabs :links="selectableProjectTypes" />
    <div class="iconified-input">
      <SearchIcon aria-hidden="true" class="text-lg" />
@@ -465,11 +471,10 @@ await refreshSearch()
                loader.supported_project_types?.includes(projectType),
            ),
          ]"
-          :installed="result.installed"
+          :installed="result.installed || newlyInstalled.includes(result.project_id)"
          @install="
            (id) => {
              newlyInstalled.push(id)
-              refreshSearch()
            }
          "
        />
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -16,17 +16,27 @@
      </div>
      <AddContentButton :instance="instance" />
    </div>
-    <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
-      <FilterIcon class="text-secondary h-5 w-5 mr-1" />
-      <button
-        v-for="filter in filterOptions"
-        :key="filter"
-        :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
-        @click="toggleArray(selectedFilters, filter.id)"
-      >
-        {{ filter.formattedName }}
-      </button>
+    <div class="flex items-center justify-between">
+      <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
+        <FilterIcon class="text-secondary h-5 w-5 mr-1" />
+        <button
+          v-for="filter in filterOptions"
+          :key="filter"
+          :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
+          @click="toggleArray(selectedFilters, filter.id)"
+        >
+          {{ filter.formattedName }}
+        </button>
+      </div>
+      <Pagination
+        v-if="search.length > 0"
+        :page="currentPage"
+        :count="Math.ceil(search.length / 20)"
+        :link-function="(page) => `?page=${page}`"
+        @switch-page="(page) => (currentPage = page)"
+      />
    </div>
+
    <ContentListPanel
      v-model="selectedFiles"
      :locked="isPackLocked"
@@ -70,6 +80,7 @@
      :sort-column="sortColumn"
      :sort-ascending="ascending"
      :update-sort="sortProjects"
+      :current-page="currentPage"
    >
      <template v-if="selectedProjects.length > 0" #headers>
        <div class="flex gap-2">
@@ -238,28 +249,28 @@
 </template>
 <script setup lang="ts">
 import {
-  ExternalIcon,
-  LinkIcon,
+  CheckCircleIcon,
  ClipboardCopyIcon,
-  TrashIcon,
-  SearchIcon,
-  UpdatedIcon,
-  XIcon,
-  ShareIcon,
-  DropdownIcon,
-  FileIcon,
  CodeIcon,
  DownloadIcon,
+  DropdownIcon,
+  ExternalIcon,
+  FileIcon,
  FilterIcon,
+  LinkIcon,
  MoreVerticalIcon,
-  CheckCircleIcon,
+  SearchIcon,
+  ShareIcon,
  SlashIcon,
+  TrashIcon,
+  UpdatedIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, ContentListPanel, OverflowMenu } from '@modrinth/ui'
+import { Button, ButtonStyled, ContentListPanel, OverflowMenu, Pagination } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 import type { ComputedRef } from 'vue'
 import { computed, onUnmounted, ref, watch } from 'vue'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import {
  add_project_from_path,
  get_projects,
@@ -405,7 +416,7 @@ const initProjects = async (cacheBehaviour?) => {
      icon: null,
      disabled: file.file_name.endsWith('.disabled'),
      outdated: false,
-      project_type: file.project_type,
+      project_type: file.project_type === 'shaderpack' ? 'shader' : file.project_type,
    })
  }

@@ -484,6 +495,15 @@ const filteredProjects = computed(() => {
  })
 })

+watch(filterOptions, () => {
+  for (let i = 0; i < selectedFilters.value.length; i++) {
+    const option = selectedFilters.value[i]
+    if (!filterOptions.value.some((x) => x.id === option)) {
+      selectedFilters.value.splice(i, 1)
+    }
+  }
+})
+
 function toggleArray(array, value) {
  if (array.includes(value)) {
    array.splice(array.indexOf(value), 1)
@@ -494,11 +514,10 @@ function toggleArray(array, value) {

 const searchFilter = ref('')
 const selectAll = ref(false)
-const selectedProjectType = ref('All')
-const hideNonSelected = ref(false)
 const shareModal = ref(null)
 const ascending = ref(true)
 const sortColumn = ref('Name')
+const currentPage = ref(1)

 const selected = computed(() =>
  Array.from(selectionMap.value)
@@ -514,32 +533,10 @@ const functionValues = computed(() =>
  selectedProjects.value.length > 0 ? selectedProjects.value : Array.from(projects.value.values()),
 )

-const selectableProjectTypes = computed(() => {
-  const obj = { All: 'all' }
-
-  for (const project of projects.value) {
-    obj[project.project_type ? formatProjectType(project.project_type) + 's' : 'Other'] =
-      project.project_type
-  }
-
-  return obj
-})
-
 const search = computed(() => {
-  const projectType = selectableProjectTypes.value[selectedProjectType.value]
-  const filtered = filteredProjects.value
-    .filter((mod) => {
-      return (
-        mod.name.toLowerCase().includes(searchFilter.value.toLowerCase()) &&
-        (projectType === 'all' || mod.project_type === projectType)
-      )
-    })
-    .filter((mod) => {
-      if (hideNonSelected.value) {
-        return !mod.disabled
-      }
-      return true
-    })
+  const filtered = filteredProjects.value.filter((mod) => {
+    return mod.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+  })

  switch (sortColumn.value) {
    case 'Updated':
@@ -553,18 +550,12 @@ const search = computed(() => {
        return 0
      })
    default:
-      return filtered.slice().sort((a, b) => {
-        if (a.name < b.name) {
-          return ascending.value ? -1 : 1
-        }
-        if (a.name > b.name) {
-          return ascending.value ? 1 : -1
-        }
-        return 0
-      })
+      return filtered.slice().sort((a, b) => a.name.localeCompare(b.name))
  }
 })

+watch(search, () => (currentPage.value = 1))
+
 const sortProjects = (filter) => {
  if (sortColumn.value === filter) {
    ascending.value = !ascending.value
@@ -630,35 +621,33 @@ const locks = {}

 const toggleDisableMod = async (mod) => {
  // Use mod's id as the key for the lock. If mod doesn't have a unique id, replace `mod.id` with some unique property.
-  if (!locks[mod.id]) {
-    locks[mod.id] = ref(null)
+  const lock = locks[mod.file_name]
+
+  while (lock) {
+    await new Promise((resolve) => {
+      setTimeout((_) => resolve(), 100)
+    })
  }

-  const lock = locks[mod.id]
+  locks[mod.file_name] = 'lock'

-  while (lock.value) {
-    await lock.value
+  try {
+    mod.path = await toggle_disable_project(props.instance.path, mod.path)
+    mod.disabled = !mod.disabled
+
+    trackEvent('InstanceProjectDisable', {
+      loader: props.instance.loader,
+      game_version: props.instance.game_version,
+      id: mod.id,
+      name: mod.name,
+      project_type: mod.project_type,
+      disabled: mod.disabled,
+    })
+  } catch (err) {
+    handleError(err)
  }

-  lock.value = toggle_disable_project(props.instance.path, mod.path)
-    .then((newPath) => {
-      mod.path = newPath
-      mod.disabled = !mod.disabled
-      trackEvent('InstanceProjectDisable', {
-        loader: props.instance.loader,
-        game_version: props.instance.game_version,
-        id: mod.id,
-        name: mod.name,
-        project_type: mod.project_type,
-        disabled: mod.disabled,
-      })
-    })
-    .catch(handleError)
-    .finally(() => {
-      lock.value = null
-    })
-
-  await lock.value
+  locks[mod.file_name] = null
 }

 const removeMod = async (mod) => {
--- a/apps/app-frontend/src/pages/instance/Options.vue
+++ b/apps/app-frontend/src/pages/instance/Options.vue
@@ -1,973 +0,0 @@
-<template>
-  <ConfirmModalWrapper
-    ref="modal_confirm"
-    title="Are you sure you want to delete this instance?"
-    description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
-    :has-to-type="false"
-    proceed-label="Delete"
-    @proceed="removeProfile"
-  />
-  <ModalWrapper ref="modalConfirmUnlock" header="Are you sure you want to unlock this instance?">
-    <div class="modal-delete">
-      <div
-        class="markdown-body"
-        v-html="
-          'If you proceed, you will not be able to re-lock it without using the `Reinstall modpack` button.'
-        "
-      />
-      <div class="input-group push-right">
-        <button class="btn" @click="$refs.modalConfirmUnlock.hide()">
-          <XIcon />
-          Cancel
-        </button>
-        <button class="btn btn-danger" @click="unlockProfile">
-          <LockIcon />
-          Unlock
-        </button>
-      </div>
-    </div>
-  </ModalWrapper>
-
-  <ModalWrapper ref="modalConfirmUnpair" header="Are you sure you want to unpair this instance?">
-    <div class="modal-delete">
-      <div
-        class="markdown-body"
-        v-html="
-          'If you proceed, you will not be able to re-pair it without creating an entirely new instance.'
-        "
-      />
-      <div class="input-group push-right">
-        <button class="btn" @click="$refs.modalConfirmUnpair.hide()">
-          <XIcon />
-          Cancel
-        </button>
-        <button class="btn btn-danger" @click="unpairProfile">
-          <XIcon />
-          Unpair
-        </button>
-      </div>
-    </div>
-  </ModalWrapper>
-
-  <ModalWrapper ref="changeVersionsModal" header="Change instance versions">
-    <div class="change-versions-modal universal-body">
-      <div class="input-row">
-        <p class="input-label">Loader</p>
-        <Chips v-model="loader" :items="loaders" :never-empty="false" />
-      </div>
-      <div class="input-row">
-        <p class="input-label">Game Version</p>
-        <div class="versions">
-          <DropdownSelect
-            v-model="gameVersion"
-            :options="selectableGameVersions"
-            name="Game Version Dropdown"
-            render-up
-          />
-          <Checkbox v-model="showSnapshots" class="filter-checkbox" label="Include snapshots" />
-        </div>
-      </div>
-      <div v-if="loader !== 'vanilla'" class="input-row">
-        <p class="input-label">Loader Version</p>
-        <DropdownSelect
-          :model-value="selectableLoaderVersions[loaderVersionIndex]"
-          :options="selectableLoaderVersions"
-          :display-name="(option) => option?.id"
-          name="Version selector"
-          render-up
-          @change="(value) => (loaderVersionIndex = value.index)"
-        />
-      </div>
-      <div class="push-right input-group">
-        <button class="btn" @click="$refs.changeVersionsModal.hide()">
-          <XIcon />
-          Cancel
-        </button>
-        <button
-          class="btn btn-primary"
-          :disabled="!isValid || !isChanged || editing"
-          @click="saveGvLoaderEdits()"
-        >
-          <SaveIcon />
-          {{ editing ? 'Saving...' : 'Save changes' }}
-        </button>
-      </div>
-    </div>
-  </ModalWrapper>
-  <section class="card">
-    <div class="label">
-      <h3>
-        <span class="label__title size-card-header">Instance</span>
-      </h3>
-    </div>
-    <label for="instance-icon">
-      <span class="label__title">Icon</span>
-    </label>
-    <div class="input-group">
-      <Avatar :src="icon ? convertFileSrc(icon) : icon" size="md" class="project__icon" />
-      <div class="input-stack">
-        <button id="instance-icon" class="btn" @click="setIcon">
-          <UploadIcon />
-          Select icon
-        </button>
-        <button :disabled="!icon" class="btn" @click="resetIcon">
-          <TrashIcon />
-          Remove icon
-        </button>
-      </div>
-    </div>
-
-    <label for="project-name">
-      <span class="label__title">Name</span>
-    </label>
-    <input
-      id="profile-name"
-      v-model="title"
-      autocomplete="off"
-      maxlength="80"
-      type="text"
-      :disabled="instance.linked_data"
-    />
-
-    <div class="adjacent-input">
-      <label for="edit-versions">
-        <span class="label__title">Edit mod loader/game versions</span>
-        <span class="label__description">
-          Allows you to change the mod loader, loader version, or game version of the instance.
-        </span>
-      </label>
-      <button
-        id="edit-versions"
-        class="btn"
-        :disabled="offline"
-        @click="$refs.changeVersionsModal.show()"
-      >
-        <EditIcon />
-        Edit versions
-      </button>
-    </div>
-
-    <div class="adjacent-input">
-      <label>
-        <span class="label__title">Categories</span>
-        <span class="label__description">
-          Set the categories of this instance, for display in the library page. This is purely
-          cosmetic.
-        </span>
-      </label>
-      <multiselect
-        v-model="groups"
-        :options="availableGroups"
-        :multiple="true"
-        :searchable="true"
-        :show-no-results="false"
-        :close-on-select="false"
-        :clear-search-on-select="false"
-        :show-labels="false"
-        :taggable="true"
-        tag-placeholder="Add new category"
-        placeholder="Select categories..."
-        @tag="
-          (newTag) => {
-            groups.push(newTag.trim().substring(0, 32))
-            availableGroups.push(newTag.trim().substring(0, 32))
-          }
-        "
-      />
-    </div>
-  </section>
-  <Card>
-    <div class="label">
-      <h3>
-        <span class="label__title size-card-header">Java</span>
-      </h3>
-    </div>
-    <div class="settings-group">
-      <h3>Installation</h3>
-      <Checkbox v-model="overrideJavaInstall" label="Override global java installations" />
-      <JavaSelector v-model="javaInstall" :disabled="!overrideJavaInstall" />
-    </div>
-    <hr class="card-divider" />
-    <div class="settings-group">
-      <h3>Java arguments</h3>
-      <Checkbox v-model="overrideJavaArgs" label="Override global java arguments" />
-      <input
-        id="java-args"
-        v-model="javaArgs"
-        autocomplete="off"
-        :disabled="!overrideJavaArgs"
-        type="text"
-        class="installation-input"
-        placeholder="Enter java arguments..."
-      />
-    </div>
-    <div class="settings-group">
-      <h3>Environment variables</h3>
-      <Checkbox v-model="overrideEnvVars" label="Override global environment variables" />
-      <input
-        v-model="envVars"
-        autocomplete="off"
-        :disabled="!overrideEnvVars"
-        type="text"
-        class="installation-input"
-        placeholder="Enter environment variables..."
-      />
-    </div>
-    <hr class="card-divider" />
-    <div class="settings-group">
-      <h3>Java memory</h3>
-      <Checkbox v-model="overrideMemorySettings" label="Override global memory settings" />
-      <Slider
-        v-model="memory.maximum"
-        :disabled="!overrideMemorySettings"
-        :min="512"
-        :max="maxMemory"
-        :step="64"
-        unit="mb"
-      />
-    </div>
-  </Card>
-  <Card>
-    <div class="label">
-      <h3>
-        <span class="label__title size-card-header">Window</span>
-      </h3>
-    </div>
-    <div class="adjacent-input">
-      <Checkbox v-model="overrideWindowSettings" label="Override global window settings" />
-    </div>
-    <div class="adjacent-input">
-      <label for="fullscreen">
-        <span class="label__title">Fullscreen</span>
-        <span class="label__description">
-          Make the game start in full screen when launched (using options.txt).
-        </span>
-      </label>
-      <Toggle
-        id="fullscreen"
-        :model-value="fullscreenSetting"
-        :checked="fullscreenSetting"
-        :disabled="!overrideWindowSettings"
-        @update:model-value="
-          (e) => {
-            fullscreenSetting = e
-          }
-        "
-      />
-    </div>
-    <div class="adjacent-input">
-      <label for="width">
-        <span class="label__title">Width</span>
-        <span class="label__description"> The width of the game window when launched. </span>
-      </label>
-      <input
-        id="width"
-        v-model="resolution[0]"
-        autocomplete="off"
-        :disabled="!overrideWindowSettings || fullscreenSetting"
-        type="number"
-        placeholder="Enter width..."
-      />
-    </div>
-    <div class="adjacent-input">
-      <label for="height">
-        <span class="label__title">Height</span>
-        <span class="label__description"> The height of the game window when launched. </span>
-      </label>
-      <input
-        id="height"
-        v-model="resolution[1]"
-        autocomplete="off"
-        :disabled="!overrideWindowSettings || fullscreenSetting"
-        type="number"
-        class="input"
-        placeholder="Enter height..."
-      />
-    </div>
-  </Card>
-  <Card>
-    <div class="label">
-      <h3>
-        <span class="label__title size-card-header">Hooks</span>
-      </h3>
-    </div>
-    <div class="adjacent-input">
-      <Checkbox v-model="overrideHooks" label="Override global hooks" />
-    </div>
-    <div class="adjacent-input">
-      <label for="pre-launch">
-        <span class="label__title">Pre launch</span>
-        <span class="label__description"> Ran before the instance is launched. </span>
-      </label>
-      <input
-        id="pre-launch"
-        v-model="hooks.pre_launch"
-        autocomplete="off"
-        :disabled="!overrideHooks"
-        type="text"
-        placeholder="Enter pre-launch command..."
-      />
-    </div>
-    <div class="adjacent-input">
-      <label for="wrapper">
-        <span class="label__title">Wrapper</span>
-        <span class="label__description"> Wrapper command for launching Minecraft. </span>
-      </label>
-      <input
-        id="wrapper"
-        v-model="hooks.wrapper"
-        autocomplete="off"
-        :disabled="!overrideHooks"
-        type="text"
-        placeholder="Enter wrapper command..."
-      />
-    </div>
-    <div class="adjacent-input">
-      <label for="post-exit">
-        <span class="label__title">Post exit</span>
-        <span class="label__description"> Ran after the game closes. </span>
-      </label>
-      <input
-        id="post-exit"
-        v-model="hooks.post_exit"
-        autocomplete="off"
-        :disabled="!overrideHooks"
-        type="text"
-        placeholder="Enter post-exit command..."
-      />
-    </div>
-  </Card>
-  <Card v-if="instance.linked_data">
-    <div class="label">
-      <h3>
-        <span class="label__title size-card-header">Modpack</span>
-      </h3>
-    </div>
-    <div class="adjacent-input">
-      <label for="general-modpack-info">
-        <span class="label__description"> <strong>Modpack: </strong> {{ instance.name }} </span>
-        <span class="label__description">
-          <strong>Version: </strong>
-          {{
-            installedVersionData?.name != null
-              ? installedVersionData.name.charAt(0).toUpperCase() +
-                installedVersionData.name.slice(1)
-              : getLocalVersion(props.instance.path)
-          }}
-        </span>
-      </label>
-    </div>
-    <div v-if="!isPackLocked" class="adjacent-input">
-      <Card class="unlocked-instance">
-        This is an unlocked instance. There may be unexpected behaviour unintended by the modpack
-        creator.
-      </Card>
-    </div>
-    <div v-else class="adjacent-input">
-      <label for="unlock-profile">
-        <span class="label__title">Unlock instance</span>
-        <span class="label__description">
-          Allows modifications to the instance, which allows you to add projects to the modpack. The
-          pack will remain linked, and you can still change versions. Only mods listed in the
-          modpack will be modified on version changes.
-        </span>
-      </label>
-      <Button id="unlock-profile" @click="$refs.modalConfirmUnlock.show()">
-        <LockIcon /> Unlock
-      </Button>
-    </div>
-
-    <div class="adjacent-input">
-      <label for="unpair-profile">
-        <span class="label__title">Unpair instance</span>
-        <span class="label__description">
-          Removes the link to an external Modrinth modpack on the instance. This allows you to edit
-          modpacks you download through the browse page but you will not be able to update the
-          instance from a new version of a modpack if you do this.
-        </span>
-      </label>
-      <Button id="unpair-profile" @click="$refs.modalConfirmUnpair.show()">
-        <XIcon /> Unpair
-      </Button>
-    </div>
-
-    <div v-if="instance.linked_data.project_id" class="adjacent-input">
-      <label for="change-modpack-version">
-        <span class="label__title">Change modpack version</span>
-        <span class="label__description">
-          Changes to another version of the modpack, allowing upgrading or downgrading. This will
-          replace all files marked as relevant to the modpack.
-        </span>
-      </label>
-
-      <Button
-        id="change-modpack-version"
-        :disabled="inProgress || installing"
-        @click="modpackVersionModal.show()"
-      >
-        <SwapIcon />
-        Change modpack version
-      </Button>
-    </div>
-    <div class="adjacent-input">
-      <label for="repair-modpack">
-        <span class="label__title">Reinstall modpack</span>
-        <span class="label__description">
-          Removes all projects and reinstalls Modrinth modpack. Use this to fix unexpected behaviour
-          if your instance is diverging from the Modrinth modpack. This also re-locks the instance.
-        </span>
-      </label>
-      <Button id="repair-modpack" color="highlight" :disabled="offline" @click="repairModpack">
-        <DownloadIcon /> Reinstall
-      </Button>
-    </div>
-  </Card>
-  <Card>
-    <div class="label">
-      <h3>
-        <span class="label__title size-card-header">Instance management</span>
-      </h3>
-    </div>
-    <div v-if="instance.install_stage == 'installed'" class="adjacent-input">
-      <label for="duplicate-profile">
-        <span class="label__title">Duplicate instance</span>
-        <span class="label__description">
-          Creates another copy of the instance, including saves, configs, mods, and everything.
-        </span>
-      </label>
-      <Button
-        id="repair-profile"
-        :disabled:="installing || inProgress || offline"
-        @click="duplicateProfile"
-      >
-        <ClipboardCopyIcon /> Duplicate
-      </Button>
-    </div>
-    <div class="adjacent-input">
-      <label for="repair-profile">
-        <span class="label__title">Repair instance</span>
-        <span class="label__description">
-          Reinstalls Minecraft dependencies and checks for corruption. Use this if your game is not
-          launching due to launcher-related errors.
-        </span>
-      </label>
-      <Button
-        id="repair-profile"
-        color="highlight"
-        :disabled="installing || inProgress || repairing || offline"
-        @click="repairProfile(true)"
-      >
-        <HammerIcon /> Repair
-      </Button>
-    </div>
-    <div class="adjacent-input">
-      <label for="delete-profile">
-        <span class="label__title">Delete instance</span>
-        <span class="label__description">
-          Fully removes a instance from the disk. Be careful, as once you delete a instance there is
-          no way to recover it.
-        </span>
-      </label>
-      <Button
-        id="delete-profile"
-        color="danger"
-        :disabled="removing"
-        @click="$refs.modal_confirm.show()"
-      >
-        <TrashIcon /> Delete
-      </Button>
-    </div>
-  </Card>
-  <ModpackVersionModal
-    v-if="instance.linked_data"
-    ref="modpackVersionModal"
-    :instance="instance"
-    :versions="props.versions"
-  />
-</template>
-
-<script setup>
-import {
-  TrashIcon,
-  UploadIcon,
-  EditIcon,
-  XIcon,
-  SaveIcon,
-  LockIcon,
-  HammerIcon,
-  DownloadIcon,
-  ClipboardCopyIcon,
-} from '@modrinth/assets'
-import { Button, Toggle, Card, Slider, Checkbox, Avatar, Chips, DropdownSelect } from '@modrinth/ui'
-import { SwapIcon } from '@/assets/icons'
-
-import { Multiselect } from 'vue-multiselect'
-import { useRouter } from 'vue-router'
-import {
-  duplicate,
-  edit,
-  edit_icon,
-  get_optimal_jre_key,
-  install,
-  list,
-  remove,
-  update_repair_modrinth,
-} from '@/helpers/profile.js'
-import { computed, readonly, ref, shallowRef, watch } from 'vue'
-import { get_max_memory } from '@/helpers/jre.js'
-import { get } from '@/helpers/settings.js'
-import JavaSelector from '@/components/ui/JavaSelector.vue'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { open } from '@tauri-apps/plugin-dialog'
-import { get_loader_versions } from '@/helpers/metadata.js'
-import { get_game_versions, get_loaders } from '@/helpers/tags.js'
-import { handleError } from '@/store/notifications.js'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
-import { trackEvent } from '@/helpers/analytics'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-
-const breadcrumbs = useBreadcrumbs()
-
-const router = useRouter()
-
-const props = defineProps({
-  instance: {
-    type: Object,
-    required: true,
-  },
-  offline: {
-    type: Boolean,
-    default: false,
-  },
-  versions: {
-    type: Array,
-    required: true,
-  },
-})
-
-const title = ref(props.instance.name)
-const icon = ref(props.instance.icon_path)
-const groups = ref(props.instance.groups)
-
-const modpackVersionModal = ref(null)
-
-const instancesList = await list()
-const availableGroups = ref([
-  ...new Set(
-    instancesList.reduce((acc, obj) => {
-      return acc.concat(obj.groups)
-    }, []),
-  ),
-])
-
-async function resetIcon() {
-  icon.value = null
-  await edit_icon(props.instance.path, null).catch(handleError)
-  trackEvent('InstanceRemoveIcon')
-}
-
-async function setIcon() {
-  const value = await open({
-    multiple: false,
-    filters: [
-      {
-        name: 'Image',
-        extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
-      },
-    ],
-  })
-
-  if (!value) return
-
-  icon.value = value.path ?? value
-  await edit_icon(props.instance.path, icon.value).catch(handleError)
-
-  trackEvent('InstanceSetIcon')
-}
-
-const globalSettings = await get().catch(handleError)
-
-const modalConfirmUnlock = ref(null)
-const modalConfirmUnpair = ref(null)
-
-const overrideJavaInstall = ref(!!props.instance.java_path)
-const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
-const javaInstall = ref({ path: optimalJava.path ?? props.instance.java_path })
-
-const overrideJavaArgs = ref(props.instance.extra_launch_args?.length !== undefined)
-const javaArgs = ref(
-  (props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
-)
-
-const overrideEnvVars = ref(props.instance.custom_env_vars?.length !== undefined)
-const envVars = ref(
-  (props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
-    .map((x) => x.join('='))
-    .join(' '),
-)
-
-const overrideMemorySettings = ref(!!props.instance.memory)
-const memory = ref(props.instance.memory ?? globalSettings.memory)
-const maxMemory = Math.floor((await get_max_memory().catch(handleError)) / 1024)
-
-const overrideWindowSettings = ref(
-  !!props.instance.game_resolution || !!props.instance.force_fullscreen,
-)
-const resolution = ref(props.instance.game_resolution ?? globalSettings.game_resolution)
-const overrideHooks = ref(
-  props.instance.hooks.pre_launch || props.instance.hooks.wrapper || props.instance.hooks.post_exit,
-)
-const hooks = ref(props.instance.hooks ?? globalSettings.hooks)
-
-const fullscreenSetting = ref(!!props.instance.force_fullscreen)
-
-const unlinkModpack = ref(false)
-
-const inProgress = ref(false)
-const installing = computed(() => props.instance.install_stage !== 'installed')
-const installedVersion = computed(() => props.instance?.linked_data?.version_id)
-const installedVersionData = computed(() => {
-  if (!installedVersion.value) return null
-  return props.versions.find((version) => version.id === installedVersion.value)
-})
-
-watch(
-  [
-    title,
-    groups,
-    groups,
-    overrideJavaInstall,
-    javaInstall,
-    overrideJavaArgs,
-    javaArgs,
-    overrideEnvVars,
-    envVars,
-    overrideMemorySettings,
-    memory,
-    overrideWindowSettings,
-    resolution,
-    fullscreenSetting,
-    overrideHooks,
-    hooks,
-    unlinkModpack,
-  ],
-  async () => {
-    await edit(props.instance.path, editProfileObject.value)
-  },
-  { deep: true },
-)
-
-const getLocalVersion = (path) => {
-  const pathSlice = path.split(' ').slice(-1).toString()
-  // If the path ends in (1), (2), etc. it's a duplicate instance and no version can be obtained.
-  if (/^\(\d\)/.test(pathSlice)) {
-    return 'Unknown'
-  }
-  return pathSlice
-}
-
-const editProfileObject = computed(() => {
-  const editProfile = {
-    name: title.value.trim().substring(0, 32) ?? 'Instance',
-    groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0),
-    loader_version: props.instance.loader_version,
-    linked_data: props.instance.linked_data,
-    java: {},
-    hooks: {},
-  }
-
-  if (overrideJavaInstall.value) {
-    if (javaInstall.value.path !== '') {
-      editProfile.java_path = javaInstall.value.path.replace('java.exe', 'javaw.exe')
-    }
-  }
-
-  if (overrideJavaArgs.value) {
-    editProfile.extra_launch_args = javaArgs.value.trim().split(/\s+/).filter(Boolean)
-  }
-
-  if (overrideEnvVars.value) {
-    editProfile.custom_env_vars = envVars.value
-      .trim()
-      .split(/\s+/)
-      .filter(Boolean)
-      .map((x) => x.split('=').filter(Boolean))
-  }
-
-  if (overrideMemorySettings.value) {
-    editProfile.memory = memory.value
-  }
-
-  if (overrideWindowSettings.value) {
-    editProfile.force_fullscreen = fullscreenSetting.value
-
-    if (!fullscreenSetting.value) {
-      editProfile.game_resolution = resolution.value
-    }
-  }
-
-  if (overrideHooks.value) {
-    editProfile.hooks = hooks.value
-  }
-
-  if (unlinkModpack.value) {
-    editProfile.linked_data = null
-  }
-
-  breadcrumbs.setName('Instance', editProfile.name)
-
-  return editProfile
-})
-
-const repairing = ref(false)
-
-async function duplicateProfile() {
-  await duplicate(props.instance.path).catch(handleError)
-  trackEvent('InstanceDuplicate', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-  })
-}
-
-async function repairProfile(force) {
-  repairing.value = true
-  await install(props.instance.path, force).catch(handleError)
-  repairing.value = false
-
-  trackEvent('InstanceRepair', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-  })
-}
-
-async function unpairProfile() {
-  const editProfile = props.instance
-  editProfile.linked_data = null
-  await edit(props.instance.path, editProfile)
-  installedVersion.value = null
-  installedVersionData.value = null
-  modalConfirmUnpair.value.hide()
-}
-
-async function unlockProfile() {
-  const editProfile = props.instance
-  editProfile.linked_data.locked = false
-  await edit(props.instance.path, editProfile)
-  modalConfirmUnlock.value.hide()
-}
-
-const isPackLocked = computed(() => {
-  return props.instance.linked_data && props.instance.linked_data.locked
-})
-
-async function repairModpack() {
-  inProgress.value = true
-  await update_repair_modrinth(props.instance.path).catch(handleError)
-  inProgress.value = false
-
-  trackEvent('InstanceRepair', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-  })
-}
-
-const removing = ref(false)
-async function removeProfile() {
-  removing.value = true
-  await remove(props.instance.path).catch(handleError)
-  removing.value = false
-
-  trackEvent('InstanceRemove', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-  })
-
-  await router.push({ path: '/' })
-}
-
-const changeVersionsModal = ref(null)
-const showSnapshots = ref(false)
-
-const [
-  fabric_versions,
-  forge_versions,
-  quilt_versions,
-  neoforge_versions,
-  all_game_versions,
-  loaders,
-] = await Promise.all([
-  get_loader_versions('fabric').then(shallowRef).catch(handleError),
-  get_loader_versions('forge').then(shallowRef).catch(handleError),
-  get_loader_versions('quilt').then(shallowRef).catch(handleError),
-  get_loader_versions('neo').then(shallowRef).catch(handleError),
-  get_game_versions().then(shallowRef).catch(handleError),
-  get_loaders()
-    .then((value) =>
-      value
-        .filter((item) => item.supported_project_types.includes('modpack'))
-        .map((item) => item.name.toLowerCase()),
-    )
-    .then(ref)
-    .catch(handleError),
-])
-loaders.value.unshift('vanilla')
-
-const loader = ref(props.instance.loader)
-const gameVersion = ref(props.instance.game_version)
-const selectableGameVersions = computed(() => {
-  return all_game_versions.value
-    .filter((item) => {
-      let defaultVal = item.version_type === 'release' || showSnapshots.value
-      if (loader.value === 'fabric') {
-        defaultVal &= fabric_versions.value.gameVersions.some((x) => item.version === x.id)
-      } else if (loader.value === 'forge') {
-        defaultVal &= forge_versions.value.gameVersions.some((x) => item.version === x.id)
-      } else if (loader.value === 'quilt') {
-        defaultVal &= quilt_versions.value.gameVersions.some((x) => item.version === x.id)
-      } else if (loader.value === 'neoforge') {
-        defaultVal &= neoforge_versions.value.gameVersions.some((x) => item.version === x.id)
-      }
-
-      return defaultVal
-    })
-    .map((item) => item.version)
-})
-
-const selectableLoaderVersions = computed(() => {
-  if (gameVersion.value) {
-    if (loader.value === 'fabric') {
-      return fabric_versions.value.gameVersions[0].loaders
-    } else if (loader.value === 'forge') {
-      return forge_versions.value.gameVersions.find((item) => item.id === gameVersion.value).loaders
-    } else if (loader.value === 'quilt') {
-      return quilt_versions.value.gameVersions[0].loaders
-    } else if (loader.value === 'neoforge') {
-      return neoforge_versions.value.gameVersions.find((item) => item.id === gameVersion.value)
-        .loaders
-    }
-  }
-  return []
-})
-const loaderVersionIndex = ref(
-  selectableLoaderVersions.value.findIndex((x) => x.id === props.instance.loader_version),
-)
-
-const isValid = computed(() => {
-  return (
-    selectableGameVersions.value.includes(gameVersion.value) &&
-    (loaderVersionIndex.value >= 0 || loader.value === 'vanilla')
-  )
-})
-
-const isChanged = computed(() => {
-  return (
-    loader.value !== props.instance.loader ||
-    gameVersion.value !== props.instance.game_version ||
-    (loaderVersionIndex.value >= 0 &&
-      selectableLoaderVersions.value[loaderVersionIndex.value].id !== props.instance.loader_version)
-  )
-})
-
-watch(loader, () => (loaderVersionIndex.value = 0))
-
-const editing = ref(false)
-async function saveGvLoaderEdits() {
-  editing.value = true
-
-  const editProfile = editProfileObject.value
-  editProfile.loader = loader.value
-  editProfile.game_version = gameVersion.value
-
-  if (loader.value !== 'vanilla') {
-    editProfile.loader_version = selectableLoaderVersions.value[loaderVersionIndex.value].id
-  } else {
-    loaderVersionIndex.value = -1
-  }
-  await edit(props.instance.path, editProfile).catch(handleError)
-  await repairProfile(false)
-
-  editing.value = false
-  changeVersionsModal.value.hide()
-}
-</script>
-
-<style scoped lang="scss">
-.change-versions-modal {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  :deep(.animated-dropdown .options) {
-    max-height: 13.375rem;
-  }
-
-  .input-label {
-    font-size: 1rem;
-    font-weight: bolder;
-    color: var(--color-contrast);
-    margin-bottom: 0.5rem;
-  }
-
-  .versions {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-  }
-}
-
-.settings-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin: 1rem 0;
-
-  h3 {
-    margin: 0;
-  }
-}
-
-.installation-input {
-  width: 100%;
-}
-
-:deep(button.checkbox) {
-  border: none;
-}
-
-.unlocked-instance {
-  background-color: var(--color-bg);
-}
-
-.modal-delete {
-  padding: var(--gap-lg);
-  display: flex;
-  flex-direction: column;
-
-  .markdown-body {
-    margin-bottom: 1rem;
-  }
-
-  .confirmation-label {
-    margin-bottom: 0.5rem;
-  }
-
-  .confirmation-text {
-    padding-right: 0.25ch;
-    margin: 0 0.25rem;
-  }
-
-  .confirmation-input {
-    input {
-      width: 20rem;
-      max-width: 100%;
-    }
-  }
-
-  .button-group {
-    margin-left: auto;
-    margin-top: 1.5rem;
-  }
-}
-</style>
--- a/apps/app-frontend/src/pages/instance/index.js
+++ b/apps/app-frontend/src/pages/instance/index.js
@@ -1,6 +1,5 @@
 import Index from './Index.vue'
 import Mods from './Mods.vue'
-import Options from './Options.vue'
 import Logs from './Logs.vue'

-export { Index, Mods, Options, Logs }
+export { Index, Mods, Logs }
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -36,7 +36,7 @@ onUnmounted(() => {

 <template>
  <div class="p-6 flex flex-col gap-3">
-    <h1 class="m-0 text-2xl">Library</h1>
+    <h1 class="m-0 text-2xl hidden">Library</h1>
    <NavTabs
      :links="[
        { label: 'All instances', href: `/library` },
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -25,7 +25,10 @@
    <div class="flex flex-col gap-4 p-6">
      <InstanceIndicator v-if="instance" :instance="instance" />
      <template v-if="data">
-        <Teleport v-if="themeStore.featureFlag_projectBackground" to="#background-teleport-target">
+        <Teleport
+          v-if="themeStore.featureFlags.project_background"
+          to="#background-teleport-target"
+        >
          <ProjectBackgroundGradient :project="data" />
        </Teleport>
        <ProjectHeader :project="data">
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -124,15 +124,6 @@ export default new createRouter({
            breadcrumb: [{ name: '?Instance' }],
          },
        },
-        {
-          path: 'options',
-          name: 'Options',
-          component: Instance.Options,
-          meta: {
-            useRootContext: true,
-            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Options' }],
-          },
-        },
        {
          path: 'logs',
          name: 'Logs',
--- a/apps/app-frontend/src/store/theme.js
+++ b/apps/app-frontend/src/store/theme.js
@@ -2,13 +2,13 @@ import { defineStore } from 'pinia'

 export const useTheming = defineStore('themeStore', {
  state: () => ({
-    themeOptions: ['dark', 'light', 'oled'],
+    themeOptions: ['dark', 'light', 'oled', 'system'],
    advancedRendering: true,
    selectedTheme: 'dark',
+    toggleSidebar: false,

    devMode: false,
-    featureFlag_pagePath: false,
-    featureFlag_projectBackground: false,
+    featureFlags: {},
  }),
  actions: {
    setThemeState(newTheme) {
@@ -21,7 +21,18 @@ export const useTheming = defineStore('themeStore', {
      for (const theme of this.themeOptions) {
        document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
      }
-      document.getElementsByTagName('html')[0].classList.add(`${this.selectedTheme}-mode`)
+
+      let theme = this.selectedTheme
+      if (this.selectedTheme === 'system') {
+        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+        if (darkThemeMq.matches) {
+          theme = 'dark'
+        } else {
+          theme = 'light'
+        }
+      }
+
+      document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
    },
  },
 })
--- a/apps/app/Cargo.toml
+++ b/apps/app/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "theseus_gui"
-version = "0.9.0-1"
+version = "0.9.0-2"
 description = "The Modrinth App is a desktop application for managing your Minecraft mods"
 license = "GPL-3.0-only"
 repository = "https://github.com/modrinth/code/apps/app/"
@@ -18,7 +18,6 @@ serde = { version = "1.0", features = ["derive"] }
 serde_with = "3.0.0"

 tauri = { version = "2.1.1",  features = ["devtools", "macos-private-api", "protocol-asset", "unstable"] }
-# tauri = { git = "https://github.com/modrinth/tauri", rev = "67911d5", features = ["devtools", "macos-private-api", "protocol-asset", "unstable"] }
 tauri-plugin-window-state = "2.2.0"
 tauri-plugin-deep-link = "2.2.0"
 tauri-plugin-os = "2.2.0"
--- a/apps/app/src/api/ads.rs
+++ b/apps/app/src/api/ads.rs
@@ -8,6 +8,7 @@ use tokio::sync::RwLock;

 pub struct AdsState {
    pub shown: bool,
+    pub modal_shown: bool,
    pub last_click: Option<Instant>,
    pub malicious_origins: HashSet<String>,
 }
@@ -19,6 +20,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
        .setup(|app, _api| {
            app.manage(RwLock::new(AdsState {
                shown: true,
+                modal_shown: false,
                last_click: None,
                malicious_origins: HashSet::new(),
            }));
@@ -86,6 +88,10 @@ pub async fn init_ads_window<R: Runtime>(
        state.shown = true;
    }

+    if state.modal_shown {
+        return Ok(());
+    }
+
    if let Ok((position, size)) = get_webview_position(&app, dpr) {
        if let Some(webview) = app.webviews().get("ads-window") {
            if state.shown {
@@ -133,7 +139,9 @@ pub async fn show_ads_window<R: Runtime>(
 ) -> crate::api::Result<()> {
    if let Some(webview) = app.webviews().get("ads-window") {
        let state = app.state::<RwLock<AdsState>>();
-        let state = state.read().await;
+        let mut state = state.write().await;
+
+        state.modal_shown = false;

        if state.shown {
            let (position, size) = get_webview_position(&app, dpr)?;
@@ -151,11 +159,13 @@ pub async fn hide_ads_window<R: Runtime>(
    reset: Option<bool>,
 ) -> crate::api::Result<()> {
    if let Some(webview) = app.webviews().get("ads-window") {
-        if reset.unwrap_or(false) {
-            let state = app.state::<RwLock<AdsState>>();
-            let mut state = state.write().await;
+        let state = app.state::<RwLock<AdsState>>();
+        let mut state = state.write().await;

+        if reset.unwrap_or(false) {
            state.shown = false;
+        } else {
+            state.modal_shown = true;
        }

        let _ = webview.set_position(PhysicalPosition::new(-1000, -1000));
--- a/apps/app/src/macos/window_ext.rs
+++ b/apps/app/src/macos/window_ext.rs
@@ -7,7 +7,7 @@ use tauri::{
 }; // 0.8

 const WINDOW_CONTROL_PAD_X: f64 = 9.0;
-const WINDOW_CONTROL_PAD_Y: f64 = 16.0;
+const WINDOW_CONTROL_PAD_Y: f64 = 10.0;

 struct UnsafeWindowHandle(*mut std::ffi::c_void);
 unsafe impl Send for UnsafeWindowHandle {}
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -25,6 +25,7 @@ extern crate objc;
 #[tracing::instrument(skip_all)]
 #[tauri::command]
 async fn initialize_state(app: tauri::AppHandle) -> api::Result<()> {
+    tracing::info!("Initializing app event state...");
    theseus::EventState::init(app.clone()).await?;

    #[cfg(feature = "updater")]
@@ -35,6 +36,7 @@ async fn initialize_state(app: tauri::AppHandle) -> api::Result<()> {

        let update_fut = updater.check();

+        tracing::info!("Initializing app state...");
        State::init().await?;

        let check_bar = theseus::init_loading(
@@ -44,6 +46,7 @@ async fn initialize_state(app: tauri::AppHandle) -> api::Result<()> {
        )
        .await?;

+        tracing::info!("Checking for updates...");
        let update = update_fut.await;

        drop(check_bar);
@@ -88,6 +91,7 @@ async fn initialize_state(app: tauri::AppHandle) -> api::Result<()> {
        State::init().await?;
    }

+    tracing::info!("Finished checking for updates!");
    let state = State::get().await?;
    app.asset_protocol_scope()
        .allow_directory(state.directories.caches_dir(), true)?;
@@ -169,19 +173,19 @@ fn main() {
    }

    builder = builder
-        //         .plugin(tauri_plugin_single_instance::init(|app, args, _cwd| {
-        //             if let Some(payload) = args.get(1) {
-        //                 tracing::info!("Handling deep link from arg {payload}");
-        //                 let payload = payload.clone();
-        //                 tauri::async_runtime::spawn(api::utils::handle_command(
-        //                     payload,
-        //                 ));
-        //             }
-        //
-        //             if let Some(win) = app.get_window("main") {
-        //                 let _ = win.set_focus();
-        //             }
-        //         }))
+        .plugin(tauri_plugin_single_instance::init(|app, args, _cwd| {
+            if let Some(payload) = args.get(1) {
+                tracing::info!("Handling deep link from arg {payload}");
+                let payload = payload.clone();
+                tauri::async_runtime::spawn(api::utils::handle_command(
+                    payload,
+                ));
+            }
+
+            if let Some(win) = app.get_window("main") {
+                let _ = win.set_focus();
+            }
+        }))
        .plugin(tauri_plugin_os::init())
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_deep_link::init())
@@ -274,6 +278,7 @@ fn main() {
        builder = builder.plugin(macos::window_ext::init());
    }

+    tracing::info!("Initializing app...");
    let app = builder.build(tauri::generate_context!());

    match app {
@@ -335,6 +340,7 @@ fn main() {
                .show_alert()
                .unwrap();

+            tracing::error!("Error while running tauri application: {:?}", e);
            panic!("{1}: {:?}", e, "error while running tauri application")
        }
    }
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -44,7 +44,7 @@
    ]
  },
  "productName": "Modrinth App",
-  "version": "0.9.0-1",
+  "version": "0.9.0-2",
  "mainBinaryName": "Modrinth App",
  "identifier": "ModrinthApp",
  "plugins": {
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -373,7 +373,7 @@ export default defineNuxtComponent({
          clear: false,
        },
      },
-      commonMessages
+      commonMessages,
    };
  },
  head: {
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -311,7 +311,6 @@ import {
  ButtonStyled,
  NewProjectCard,
  SearchFilterControl,
-  ContentPageHeader,
 } from "@modrinth/ui";
 import { CheckIcon, DownloadIcon, GameIcon, LeftArrowIcon, XIcon } from "@modrinth/assets";
 import { computed } from "vue";