MR App 0.9.5 - Big bugfix update (#3585)

* Add launcher_feature_version to Profile * Misc fixes - Add typing to theme and settings stuff - Push instance route on creation from installing a modpack - Fixed servers not reloading properly when first added * Make old instances scan the logs folder for joined servers on launcher startup * Create AttachedWorldData * Change AttachedWorldData interface * Rename WorldType::World to WorldType::Singleplayer * Implement world display status system * Fix Minecraft font * Fix set_world_display_status Tauri error * Add 'Play instance' option * Add option to disable worlds showing in Home * Fixes - Fix available server filter only showing if there are some available - Fixed server and singleplayer filters sometimes showing when there are only servers or singleplayer worlds - Fixed new worlds not being automatically added when detected - Rephrased Jump back into worlds option description * Fixed sometimes more than 6 items showing up in Jump back in * Fix servers.dat issue with instances you haven't played before * Fix too large of bulk requests being made, limit max to 800 #3430 * Add hiding from home page, add types to Mods.vue * Make recent worlds go into grid when display is huge * Fix lint * Remove redundant media query * Fix protocol version on home page, and home page being blocked by pinging servers * Clippy fix * More Clippy fixes * Fix Prettier lints * Undo `from_string` changes --------- Co-authored-by: Josiah Glosson <soujournme@gmail.com> Co-authored-by: Alejandro González <me@alegon.dev>
2025-05-01 16:13:13 -07:00
parent 4a2605bc1e
commit 3dad6b317f
123 changed files with 1622 additions and 744 deletions
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -24,7 +24,7 @@ import { useLoading, useTheming } from '@/store/state'
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { get } from '@/helpers/settings'
+import { get } from '@/helpers/settings.ts'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -7,7 +7,7 @@
  font-style: normal;
  font-display: swap;
  font-weight: 400;
-  src: url('https://cdn.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
+  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
 }

@font-face {
@@ -15,7 +15,7 @@
  font-style: italic;
  font-display: swap;
  font-weight: 400;
-  src: url('https://cdn.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
+  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
 }

@font-face {
@@ -23,7 +23,7 @@
  font-style: normal;
  font-display: swap;
  font-weight: 600;
-  src: url('https://cdn.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
+  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
 }

@font-face {
@@ -31,7 +31,7 @@
  font-style: italic;
  font-display: swap;
  font-weight: 600;
-  src: url('https://cdn.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
+  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
 }

 .font-minecraft {
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -14,7 +14,7 @@ import { ref, computed } from 'vue'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { handleError } from '@/store/notifications.js'
 import { handleSevereError } from '@/store/error.js'
-import { cancel_directory_change } from '@/helpers/settings.js'
+import { cancel_directory_change } from '@/helpers/settings.ts'
 import { install } from '@/helpers/profile.js'
 import { trackEvent } from '@/helpers/analytics'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <ModalWrapper ref="modal" header="Create instance">
+  <ModalWrapper ref="modal" header="Creating an instance">
    <div class="modal-header">
      <Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
    </div>
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -124,8 +124,11 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ref, computed } from 'vue'
 import { install as installVersion } from '@/store/install.js'
+import { useRouter } from 'vue-router'
 dayjs.extend(relativeTime)

+const router = useRouter()
+
 const props = defineProps({
  backgroundImage: {
    type: String,
@@ -168,6 +171,9 @@ async function install() {
      installing.value = false
      emit('install', props.project.project_id ?? props.project.id)
    },
+    (profile) => {
+      router.push(`/instance/${profile}`)
+    },
  )
 }

--- a/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
@@ -13,15 +13,17 @@ const confirmModal = ref(null)
 const installing = ref(false)

 const onInstall = ref(() => {})
+const onCreateInstance = ref(() => {})

 defineExpose({
-  show: (projectVal, versionIdVal, callback) => {
+  show: (projectVal, versionIdVal, callback, createInstanceCallback) => {
    project.value = projectVal
    versionId.value = versionIdVal
    installing.value = false
    confirmModal.value.show()

    onInstall.value = callback
+    onCreateInstance.value = createInstanceCallback

    trackEvent('PackInstallStart')
  },
@@ -36,6 +38,7 @@ async function install() {
    versionId.value,
    project.value.title,
    project.value.icon_url,
+    onCreateInstance.value,
  ).catch(handleError)
  trackEvent('PackInstall', {
    id: project.value.id,
--- a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
@@ -3,7 +3,7 @@ import { Checkbox } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings'
+import { get } from '@/helpers/settings.ts'
 import { edit } from '@/helpers/profile'
 import type { InstanceSettingsTabProps, AppSettings, Hooks } from '../../../helpers/types'

--- a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
@@ -7,7 +7,7 @@ import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
 import { get_max_memory } from '@/helpers/jre'
-import { get } from '@/helpers/settings'
+import { get } from '@/helpers/settings.ts'
 import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'

 const { formatMessage } = useVIntl()
--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -3,7 +3,7 @@ import { Checkbox, Toggle } from '@modrinth/ui'
 import { computed, ref, type Ref, watch } from 'vue'
 import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings'
+import { get } from '@/helpers/settings.ts'
 import { edit } from '@/helpers/profile'
 import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'

--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -22,7 +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'
+import { get, set } from '@/helpers/settings.ts'

 const themeStore = useTheming()

--- a/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { ConfirmModal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.js'
+import { useTheming } from '@/store/theme.ts'

 const themeStore = useTheming()

--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { NewModal as Modal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.js'
+import { useTheming } from '@/store/theme.ts'

 const themeStore = useTheming()

--- a/apps/app-frontend/src/components/ui/modal/ShareModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ShareModalWrapper.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { ShareModal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.js'
+import { useTheming } from '@/store/theme.ts'

 const themeStore = useTheming()

--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
-import { get, set } from '@/helpers/settings'
+import { get, set } from '@/helpers/settings.ts'
 import { ref, watch } from 'vue'
 import { getOS } from '@/helpers/utils'
+import type { ColorTheme } from '@/store/theme.ts'

 const themeStore = useTheming()

@@ -24,13 +25,13 @@ watch(

  <ThemeSelector
    :update-color-theme="
-      (theme) => {
+      (theme: ColorTheme) => {
        themeStore.setThemeState(theme)
        settings.theme = theme
      }
    "
    :current-theme="settings.theme"
-    :theme-options="themeStore.themeOptions"
+    :theme-options="themeStore.getThemeOptions()"
    system-theme-color="system"
  />

@@ -80,10 +81,28 @@ watch(
      id="opening-page"
      v-model="settings.default_page"
      name="Opening page dropdown"
+      class="w-40"
      :options="['Home', 'Library']"
    />
  </div>

+  <div class="mt-4 flex items-center justify-between">
+    <div>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Jump back into worlds</h2>
+      <p class="m-0 mt-1">Includes recent worlds in the "Jump back in" section on the Home page.</p>
+    </div>
+    <Toggle
+      :model-value="themeStore.getFeatureFlag('worlds_in_home')"
+      @update:model-value="
+        () => {
+          const newValue = !themeStore.getFeatureFlag('worlds_in_home')
+          themeStore.featureFlags['worlds_in_home'] = newValue
+          settings.feature_flags['worlds_in_home'] = newValue
+        }
+      "
+    />
+  </div>
+
  <div class="mt-4 flex items-center justify-between">
    <div>
      <h2 class="m-0 text-lg font-extrabold text-contrast">Toggle sidebar</h2>
--- a/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { get, set } from '@/helpers/settings'
+import { get, set } from '@/helpers/settings.ts'
 import { ref, watch } from 'vue'
 import { get_max_memory } from '@/helpers/jre'
 import { handleError } from '@/store/notifications'
--- a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
@@ -2,18 +2,15 @@
 import { Toggle } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
 import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings'
+import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
+import { DEFAULT_FEATURE_FLAGS, type FeatureFlag } from '@/store/theme.ts'

 const themeStore = useTheming()

-const settings = ref(await get())
-const options = ref(['project_background', 'page_path', 'worlds_tab'])
+const settings = ref(await getSettings())
+const options = ref<FeatureFlag[]>(Object.keys(DEFAULT_FEATURE_FLAGS))

-function getStoreValue(key: string) {
-  return themeStore.featureFlags[key] ?? false
-}
-
-function setStoreValue(key: string, value: boolean) {
+function setFeatureFlag(key: string, value: boolean) {
  themeStore.featureFlags[key] = value
  settings.value.feature_flags[key] = value
 }
@@ -21,7 +18,7 @@ function setStoreValue(key: string, value: boolean) {
 watch(
  settings,
  async () => {
-    await set(settings.value)
+    await setSettings(settings.value)
  },
  { deep: true },
 )
@@ -36,8 +33,8 @@ watch(

    <Toggle
      id="advanced-rendering"
-      :model-value="getStoreValue(option)"
-      @update:model-value="() => setStoreValue(option, !themeStore.featureFlags[option])"
+      :model-value="themeStore.getFeatureFlag(option)"
+      @update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
    />
  </div>
 </template>
--- a/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings'
+import { get, set } from '@/helpers/settings.ts'
 import { Toggle } from '@modrinth/ui'
 import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'

--- a/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { Button, Slider } from '@modrinth/ui'
 import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings.js'
+import { get, set } from '@/helpers/settings.ts'
 import { purge_cache_types } from '@/helpers/cache.js'
 import { handleError } from '@/store/notifications.js'
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -153,7 +153,7 @@ onUnmounted(() => {
          •
          <span v-if="modpack" class="flex items-center gap-1 truncate text-secondary">
            <router-link
-              class="inline-flex items-center gap-1 truncate hover:underline text-secondary"
+              class="inline-flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
              :to="`/project/${modpack.id}`"
            >
              <Avatar :src="modpack.icon_url" size="16px" class="shrink-0" />
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -13,16 +13,17 @@ import {
 import { HeadingLink, GAME_MODES } from '@modrinth/ui'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
 import InstanceItem from '@/components/ui/world/InstanceItem.vue'
-import { watch, onMounted, onUnmounted, ref } from 'vue'
+import { watch, onMounted, onUnmounted, ref, computed } from 'vue'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
-import { useTheming } from '@/store/theme'
-import { kill } from '@/helpers/profile'
+import { useTheming } from '@/store/theme.ts'
+import { kill, run } from '@/helpers/profile'
 import { handleError } from '@/store/notifications'
 import { trackEvent } from '@/helpers/analytics'
 import { process_listener, profile_listener } from '@/helpers/events'
 import { get_all } from '@/helpers/process'
 import type { GameInstance } from '@/helpers/types'
+import { handleSevereError } from '@/store/error'

 const props = defineProps<{
  recentInstances: GameInstance[]
@@ -54,7 +55,9 @@ type WorldJumpBackInItem = BaseJumpBackInItem & {

 type JumpBackInItem = InstanceJumpBackInItem | WorldJumpBackInItem

-watch(props.recentInstances, async () => {
+const showWorlds = computed(() => theme.getFeatureFlag('worlds_in_home'))
+
+watch([() => props.recentInstances, () => showWorlds.value], async () => {
  await populateJumpBackIn().catch(() => {
    console.error('Failed to populate jump back in')
  })
@@ -66,66 +69,71 @@ await populateJumpBackIn().catch(() => {

 async function populateJumpBackIn() {
  console.info('Repopulating jump back in...')
-  const worlds = await get_recent_worlds(MAX_JUMP_BACK_IN)

  const worldItems: WorldJumpBackInItem[] = []
-  worlds.forEach((world) => {
-    const instance = props.recentInstances.find((instance) => instance.path === world.profile)

-    if (!instance || !world.last_played) {
-      return
-    }
+  if (showWorlds.value) {
+    const worlds = await get_recent_worlds(MAX_JUMP_BACK_IN, ['normal', 'favorite'])

-    worldItems.push({
-      type: 'world',
-      last_played: dayjs(world.last_played),
-      world: world,
-      instance: instance,
-    })
-  })
+    worlds.forEach((world) => {
+      const instance = props.recentInstances.find((instance) => instance.path === world.profile)

-  const servers: {
-    instancePath: string
-    address: string
-  }[] = worldItems
-    .filter((item) => item.world.type === 'server' && item.instance)
-    .map((item) => ({
-      instancePath: item.instance.path,
-      address: (item.world as ServerWorld).address,
-    }))
-
-  // fetch protocol versions for all unique MC versions with server worlds
-  const uniqueServerInstances = new Set<string>(servers.map((x) => x.instancePath))
-  await Promise.all(
-    [...uniqueServerInstances].map((path) => {
-      get_profile_protocol_version(path)
-        .then((protoVer) => (protocolVersions.value[path] = protoVer))
-        .catch(() => {
-          console.error(`Failed to get profile protocol for: ${path} `)
-        })
-    }),
-  )
-
-  // initialize server data
-  servers.forEach(({ address }) => {
-    if (!serverData.value[address]) {
-      serverData.value[address] = {
-        refreshing: true,
+      if (!instance || !world.last_played) {
+        return
      }
-    }
-  })

-  // fetch each server's data
-  await Promise.all(
-    servers.map(({ instancePath, address }) =>
-      refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
-    ),
-  )
+      worldItems.push({
+        type: 'world',
+        last_played: dayjs(world.last_played),
+        world: world,
+        instance: instance,
+      })
+    })
+
+    const servers: {
+      instancePath: string
+      address: string
+    }[] = worldItems
+      .filter((item) => item.world.type === 'server' && item.instance)
+      .map((item) => ({
+        instancePath: item.instance.path,
+        address: (item.world as ServerWorld).address,
+      }))
+
+    // fetch protocol versions for all unique MC versions with server worlds
+    const uniqueServerInstances = new Set<string>(servers.map((x) => x.instancePath))
+    await Promise.all(
+      [...uniqueServerInstances].map((path) =>
+        get_profile_protocol_version(path)
+          .then((protoVer) => (protocolVersions.value[path] = protoVer))
+          .catch(() => {
+            console.error(`Failed to get profile protocol for: ${path} `)
+          }),
+      ),
+    )
+
+    // initialize server data
+    servers.forEach(({ address }) => {
+      if (!serverData.value[address]) {
+        serverData.value[address] = {
+          refreshing: true,
+        }
+      }
+    })
+
+    // fetch each server's data
+    Promise.all(
+      servers.map(({ instancePath, address }) =>
+        refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
+      ),
+    )
+  }

  const instanceItems: InstanceJumpBackInItem[] = []
-  props.recentInstances.forEach((instance) => {
-    if (worldItems.some((item) => item.instance.path === instance.path) || !instance.last_played) {
-      return
+  for (const instance of props.recentInstances) {
+    const worldItem = worldItems.find((item) => item.instance.path === instance.path)
+    if ((worldItem && worldItem.last_played.isAfter(TWO_WEEKS_AGO)) || !instance.last_played) {
+      continue
    }

    instanceItems.push({
@@ -133,13 +141,13 @@ async function populateJumpBackIn() {
      last_played: dayjs(instance.last_played),
      instance: instance,
    })
-  })
+  }

  const items: JumpBackInItem[] = [...worldItems, ...instanceItems]
  items.sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played)))
-  jumpBackInItems.value = items.filter(
-    (item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO),
-  )
+  jumpBackInItems.value = items
+    .filter((item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO))
+    .slice(0, MAX_JUMP_BACK_IN)
 }

 async function refreshServer(address: string, instancePath: string) {
@@ -155,6 +163,18 @@ async function joinWorld(world: WorldWithProfile) {
  }
 }

+async function playInstance(instance: GameInstance) {
+  await run(instance.path)
+    .catch((err) => handleSevereError(err, { profilePath: instance.path }))
+    .finally(() => {
+      trackEvent('InstancePlay', {
+        loader: instance.loader,
+        game_version: instance.game_version,
+        source: 'WorldItem',
+      })
+    })
+}
+
 async function stopInstance(path: string) {
  await kill(path).catch(handleError)
  trackEvent('InstanceStop', {
@@ -209,11 +229,7 @@ onUnmounted(() => {

 <template>
  <div v-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
-    <HeadingLink
-      v-if="(theme.featureFlags as Record<string, boolean>)['worlds_tab']"
-      to="/worlds"
-      class="mt-1"
-    >
+    <HeadingLink v-if="theme.getFeatureFlag('worlds_tab')" to="/worlds" class="mt-1">
      Jump back in
    </HeadingLink>
    <span
@@ -222,7 +238,7 @@ onUnmounted(() => {
    >
      Jump back in
    </span>
-    <div class="flex flex-col w-full gap-2">
+    <div class="grid-when-huge flex flex-col w-full gap-2">
      <template
        v-for="item in jumpBackInItems"
        :key="`${item.instance.path}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
@@ -246,7 +262,7 @@ onUnmounted(() => {
          :rendered-motd="
            item.world.type === 'server' ? serverData[item.world.address].renderedMotd : undefined
          "
-          :current-protocol="protocolVersions[item.instance.game_version]"
+          :current-protocol="protocolVersions[item.instance.path]"
          :game-mode="
            item.world.type === 'singleplayer' ? GAME_MODES[item.world.game_mode] : undefined
          "
@@ -259,6 +275,7 @@ onUnmounted(() => {
                ? refreshServer(item.world.address, item.instance.path)
                : {}
          "
+          @update="() => populateJumpBackIn()"
          @play="
            () => {
              currentProfile = item.instance.path
@@ -266,6 +283,12 @@ onUnmounted(() => {
              joinWorld(item.world)
            }
          "
+          @play-instance="
+            () => {
+              currentProfile = item.instance.path
+              playInstance(item.instance)
+            }
+          "
          @stop="() => stopInstance(item.instance.path)"
        />
        <InstanceItem v-else :instance="item.instance" />
@@ -273,3 +296,9 @@ onUnmounted(() => {
    </div>
  </div>
 </template>
+<style scoped lang="scss">
+.grid-when-huge {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(670px, 1fr));
+}
+</style>
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
 import type { ServerStatus, ServerWorld, World } from '@/helpers/worlds.ts'
-import { getWorldIdentifier, showWorldInFolder } from '@/helpers/worlds.ts'
+import {
+  set_world_display_status,
+  getWorldIdentifier,
+  showWorldInFolder,
+} from '@/helpers/worlds.ts'
 import { formatNumber } from '@modrinth/utils'
 import {
  IssuesIcon,
@@ -19,6 +23,7 @@ import {
  TrashIcon,
  UpdatedIcon,
  UserIcon,
+  XIcon,
 } from '@modrinth/assets'
 import { Avatar, ButtonStyled, commonMessages, OverflowMenu, SmartClickable } from '@modrinth/ui'
 import type { MessageDescriptor } from '@vintl/vintl'
@@ -35,7 +40,7 @@ const { formatMessage } = useVIntl()
 const router = useRouter()

 const emit = defineEmits<{
-  (e: 'play' | 'stop' | 'refresh' | 'edit' | 'delete'): void
+  (e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete'): void
 }>()

 const props = withDefaults(
@@ -69,6 +74,7 @@ const props = withDefaults(
    playingWorld: false,
    startingInstance: false,
    supportsQuickPlay: false,
+    currentProtocol: null,

    refreshing: false,
    serverStatus: undefined,
@@ -143,10 +149,18 @@ const messages = defineMessages({
    id: 'instance.worlds.play_anyway',
    defaultMessage: 'Play anyway',
  },
+  playInstance: {
+    id: 'instance.worlds.play_instance',
+    defaultMessage: 'Play instance',
+  },
  worldInUse: {
    id: 'instance.worlds.world_in_use',
    defaultMessage: 'World is in use',
  },
+  dontShowOnHome: {
+    id: 'instance.worlds.dont_show_on_home',
+    defaultMessage: `Don't show on Home`,
+  },
 })
 </script>
 <template>
@@ -336,6 +350,12 @@ const messages = defineMessages({
        <ButtonStyled circular type="transparent">
          <OverflowMenu
            :options="[
+              {
+                id: 'play-instance',
+                shown: !!instancePath,
+                disabled: playingInstance,
+                action: () => emit('play-instance'),
+              },
              {
                id: 'play-anyway',
                shown: serverIncompatible && !playingInstance && supportsQuickPlay,
@@ -344,7 +364,7 @@ const messages = defineMessages({
              {
                id: 'open-instance',
                shown: !!instancePath,
-                action: () => router.push(encodeURI(`/instance/${instancePath}/worlds`)),
+                action: () => router.push(encodeURI(`/instance/${instancePath}`)),
              },
              {
                id: 'refresh',
@@ -369,6 +389,24 @@ const messages = defineMessages({
                action: () =>
                  world.type === 'singleplayer' ? showWorldInFolder(instancePath, world.path) : {},
              },
+              {
+                divider: true,
+                shown: !!instancePath,
+              },
+              {
+                id: 'dont-show-on-home',
+                shown: !!instancePath,
+                action: () => {
+                  set_world_display_status(
+                    instancePath,
+                    world.type,
+                    getWorldIdentifier(world),
+                    'hidden',
+                  ).then(() => {
+                    emit('update')
+                  })
+                },
+              },
              {
                divider: true,
                shown: !instancePath,
@@ -385,6 +423,10 @@ const messages = defineMessages({
            ]"
          >
            <MoreVerticalIcon aria-hidden="true" />
+            <template #play-instance>
+              <PlayIcon aria-hidden="true" />
+              {{ formatMessage(messages.playInstance) }}
+            </template>
            <template #play-anyway>
              <PlayIcon aria-hidden="true" />
              {{ formatMessage(messages.playAnyway) }}
@@ -406,6 +448,10 @@ const messages = defineMessages({
            <template #refresh>
              <UpdatedIcon aria-hidden="true" /> {{ formatMessage(commonMessages.refreshButton) }}
            </template>
+            <template #dont-show-on-home>
+              <XIcon aria-hidden="true" />
+              {{ formatMessage(messages.dontShowOnHome) }}
+            </template>
            <template #delete>
              <TrashIcon aria-hidden="true" />
              {{
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, commonMessages } from '@modrinth/ui'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import type { GameInstance } from '@/helpers/types'
-import { edit_server_in_profile, type ServerWorld } from '@/helpers/worlds.ts'
+import {
+  type ServerPackStatus,
+  edit_server_in_profile,
+  type ServerWorld,
+  set_world_display_status,
+  type DisplayStatus,
+} from '@/helpers/worlds.ts'
 import { defineMessage, useVIntl } from '@vintl/vintl'
 import { handleError } from '@/store/notifications'
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'

 const { formatMessage } = useVIntl()

@@ -21,10 +28,14 @@ const props = defineProps<{

 const modal = ref()

-const name = ref()
-const address = ref()
-const resourcePack = ref('enabled')
-const index = ref()
+const name = ref<string>('')
+const address = ref<string>('')
+const resourcePack = ref<ServerPackStatus>('enabled')
+const index = ref<number>(0)
+const displayStatus = ref<DisplayStatus>('normal')
+const hideFromHome = ref(false)
+
+const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal'))

 async function saveServer() {
  const serverName = name.value ? name.value : address.value
@@ -36,12 +47,23 @@ async function saveServer() {
    address.value,
    resourcePackStatus,
  ).catch(handleError)
+
+  if (newDisplayStatus.value !== displayStatus.value) {
+    await set_world_display_status(
+      props.instance.path,
+      'server',
+      address.value,
+      newDisplayStatus.value,
+    )
+  }
+
  emit('submit', {
    name: serverName,
    type: 'server',
    index: index.value,
    address: address.value,
    pack_status: resourcePackStatus,
+    display_status: newDisplayStatus.value,
  })
  hide()
 }
@@ -51,6 +73,8 @@ function show(server: ServerWorld) {
  address.value = server.address
  resourcePack.value = server.pack_status
  index.value = server.index
+  displayStatus.value = server.display_status
+  hideFromHome.value = server.display_status === 'hidden'
  modal.value.show()
 }

@@ -75,6 +99,7 @@ const titleMessage = defineMessage({
      v-model:address="address"
      v-model:resource-pack="resourcePack"
    />
+    <HideFromHomeOption v-model="hideFromHome" class="mt-3" />
    <div class="flex gap-2 mt-4">
      <ButtonStyled color="brand">
        <button :disabled="!address" @click="saveServer">
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import { ChevronRightIcon, SaveIcon, XIcon, UndoIcon } from '@modrinth/assets'
 import { Avatar, ButtonStyled, commonMessages } from '@modrinth/ui'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import type { GameInstance } from '@/helpers/types'
-import type { SingleplayerWorld } from '@/helpers/worlds.ts'
-import { rename_world, reset_world_icon } from '@/helpers/worlds.ts'
+import type { DisplayStatus, SingleplayerWorld } from '@/helpers/worlds.ts'
+import { set_world_display_status, rename_world, reset_world_icon } from '@/helpers/worlds.ts'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { handleError } from '@/store/notifications'
+import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'

 const { formatMessage } = useVIntl()

 const emit = defineEmits<{
-  submit: [path: string, name: string, removeIcon: boolean]
+  submit: [path: string, name: string, removeIcon: boolean, displayStatus: DisplayStatus]
 }>()

 const props = defineProps<{
@@ -25,6 +26,10 @@ const icon = ref()
 const name = ref()
 const path = ref()
 const removeIcon = ref(false)
+const displayStatus = ref<DisplayStatus>('normal')
+const hideFromHome = ref(false)
+
+const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal'))

 async function saveWorld() {
  await rename_world(props.instance.path, path.value, name.value).catch(handleError)
@@ -32,8 +37,16 @@ async function saveWorld() {
  if (removeIcon.value) {
    await reset_world_icon(props.instance.path, path.value).catch(handleError)
  }
+  if (newDisplayStatus.value !== displayStatus.value) {
+    await set_world_display_status(
+      props.instance.path,
+      'singleplayer',
+      path.value,
+      newDisplayStatus.value,
+    )
+  }

-  emit('submit', path.value, name.value, removeIcon.value)
+  emit('submit', path.value, name.value, removeIcon.value, newDisplayStatus.value)
  hide()
 }

@@ -41,6 +54,8 @@ function show(world: SingleplayerWorld) {
  name.value = world.name
  path.value = world.path
  icon.value = world.icon
+  displayStatus.value = world.display_status
+  hideFromHome.value = world.display_status === 'hidden'
  modal.value.show()
 }

@@ -87,6 +102,7 @@ const messages = defineMessages({
        class="w-full"
        autocomplete="off"
      />
+      <HideFromHomeOption v-model="hideFromHome" class="mt-3" />
    </div>
    <div class="flex gap-2 mt-4">
      <ButtonStyled color="brand">
--- a/apps/app-frontend/src/components/ui/world/modal/HideFromHomeOption.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/HideFromHomeOption.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import { computed } from 'vue'
+import { Checkbox } from '@modrinth/ui'
+
+const { formatMessage } = useVIntl()
+const value = defineModel<boolean>({ required: true })
+
+const labelMessage = defineMessage({
+  id: 'instance.edit-world.hide-from-home',
+  defaultMessage: `Hide from the Home page`,
+})
+
+const label = computed(() => formatMessage(labelMessage))
+</script>
+<template>
+  <Checkbox v-model="value" :label="label" />
+</template>
--- a/apps/app-frontend/src/helpers/pack.js
+++ b/apps/app-frontend/src/helpers/pack.js
@@ -7,7 +7,13 @@ import { invoke } from '@tauri-apps/api/core'
 import { create } from './profile'

 // Installs pack from a version ID
-export async function create_profile_and_install(projectId, versionId, packTitle, iconUrl) {
+export async function create_profile_and_install(
+  projectId,
+  versionId,
+  packTitle,
+  iconUrl,
+  createInstanceCallback = () => {},
+) {
  const location = {
    type: 'fromVersionId',
    project_id: projectId,
@@ -24,6 +30,7 @@ export async function create_profile_and_install(projectId, versionId, packTitle
    null,
    true,
  )
+  createInstanceCallback(profile)

  return await invoke('plugin:pack|pack_install', { location, profile })
 }
--- a/apps/app-frontend/src/helpers/settings.js
+++ b/apps/app-frontend/src/helpers/settings.js
@@ -1,43 +0,0 @@
-/**
- * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
- *  and deserialized into a usable JS object.
- */
-import { invoke } from '@tauri-apps/api/core'
-
-// Settings object
-/*
-
-Settings {
-    "memory": MemorySettings,
-    "game_resolution": [int int],
-    "custom_java_args": [String ...],
-    "custom_env_args" : [(string, string) ... ]>,
-    "java_globals": Hash of (string, Path),
-    "default_user": Uuid string (can be null),
-    "hooks": Hooks,
-    "max_concurrent_downloads": uint,
-    "version": u32,
-    "collapsed_navigation": bool,
-}
-
-Memorysettings {
-    "min": u32, can be null,
-    "max": u32,
-}
-
-*/
-
-// Get full settings object
-export async function get() {
-  return await invoke('plugin:settings|settings_get')
-}
-
-// Set full settings object
-export async function set(settings) {
-  return await invoke('plugin:settings|settings_set', { settings })
-}
-
-export async function cancel_directory_change() {
-  return await invoke('plugin:settings|cancel_directory_change')
-}
--- a/apps/app-frontend/src/helpers/settings.ts
+++ b/apps/app-frontend/src/helpers/settings.ts
@@ -0,0 +1,78 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/core'
+import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
+import type { Hooks, MemorySettings, WindowSize } from '@/helpers/types'
+
+// Settings object
+/*
+
+Settings {
+    "memory": MemorySettings,
+    "game_resolution": [int int],
+    "custom_java_args": [String ...],
+    "custom_env_args" : [(string, string) ... ]>,
+    "java_globals": Hash of (string, Path),
+    "default_user": Uuid string (can be null),
+    "hooks": Hooks,
+    "max_concurrent_downloads": uint,
+    "version": u32,
+    "collapsed_navigation": bool,
+}
+
+Memorysettings {
+    "min": u32, can be null,
+    "max": u32,
+}
+
+*/
+
+export type AppSettings = {
+  max_concurrent_downloads: number
+  max_concurrent_writes: number
+
+  theme: ColorTheme
+  default_page: 'home' | 'library'
+  collapsed_navigation: boolean
+  advanced_rendering: boolean
+  native_decorations: boolean
+  toggle_sidebar: boolean
+
+  telemetry: boolean
+  discord_rpc: boolean
+  personalized_ads: boolean
+
+  onboarded: boolean
+
+  extra_launch_args: string[]
+  custom_env_vars: [string, string][]
+  memory: MemorySettings
+  force_fullscreen: boolean
+  game_resolution: WindowSize
+  hide_on_process_start: boolean
+  hooks: Hooks
+
+  custom_dir?: string | null
+  prev_custom_dir?: string | null
+  migrated: boolean
+
+  developer_mode: boolean
+  feature_flags: Record<FeatureFlag, boolean>
+}
+
+// Get full settings object
+export async function get() {
+  return (await invoke('plugin:settings|settings_get')) as AppSettings
+}
+
+// Set full settings object
+export async function set(settings: AppSettings) {
+  return await invoke('plugin:settings|settings_set', { settings })
+}
+
+export async function cancel_directory_change(): Promise<void> {
+  return await invoke('plugin:settings|cancel_directory_change')
+}
--- a/apps/app-frontend/src/helpers/types.d.ts
+++ b/apps/app-frontend/src/helpers/types.d.ts
@@ -48,6 +48,32 @@ type LinkedData = {

 type InstanceLoader = 'vanilla' | 'forge' | 'fabric' | 'quilt' | 'neoforge'

+type ContentFile = {
+  hash: string
+  file_name: string
+  size: number
+  metadata?: FileMetadata
+  update_version_id?: string
+  project_type: ContentFileProjectType
+}
+
+type FileMetadata = {
+  project_id: string
+  version_id: string
+}
+
+type ContentFileProjectType = 'mod' | 'datapack' | 'resourcepack' | 'shaderpack'
+
+type CacheBehaviour =
+  // Serve expired data. If fetch fails / launcher is offline, errors are ignored
+  | 'stale_while_revalidate_skip_offline'
+  // Serve expired data, revalidate in background
+  | 'stale_while_revalidate'
+  // Must revalidate if data is expired
+  | 'must_revalidate'
+  // Ignore cache- always fetch updated data from origin
+  | 'bypass'
+
 type MemorySettings = {
  maximum: number
 }
@@ -88,6 +114,7 @@ type AppSettings = {
  collapsed_navigation: boolean
  advanced_rendering: boolean
  native_decorations: boolean
+  worlds_in_home: boolean

  telemetry: boolean
  discord_rpc: boolean
--- a/apps/app-frontend/src/helpers/worlds.ts
+++ b/apps/app-frontend/src/helpers/worlds.ts
@@ -9,8 +9,13 @@ type BaseWorld = {
  name: string
  last_played?: string
  icon?: string
+  display_status: DisplayStatus
+  type: WorldType
 }

+export type WorldType = 'singleplayer' | 'server'
+export type DisplayStatus = 'normal' | 'hidden' | 'favorite'
+
 export type SingleplayerWorld = BaseWorld & {
  type: 'singleplayer'
  path: string
@@ -70,8 +75,11 @@ export type ServerData = {
  renderedMotd?: string
 }

-export async function get_recent_worlds(limit: number): Promise<WorldWithProfile[]> {
-  return await invoke('plugin:worlds|get_recent_worlds', { limit })
+export async function get_recent_worlds(
+  limit: number,
+  displayStatuses?: DisplayStatus[],
+): Promise<WorldWithProfile[]> {
+  return await invoke('plugin:worlds|get_recent_worlds', { limit, displayStatuses })
 }

 export async function get_profile_worlds(path: string): Promise<World[]> {
@@ -85,6 +93,20 @@ export async function get_singleplayer_world(
  return await invoke('plugin:worlds|get_singleplayer_world', { instance, world })
 }

+export async function set_world_display_status(
+  instance: string,
+  worldType: WorldType,
+  worldId: string,
+  displayStatus: DisplayStatus,
+): Promise<void> {
+  return await invoke('plugin:worlds|set_world_display_status', {
+    instance,
+    worldType,
+    worldId,
+    displayStatus,
+  })
+}
+
 export async function rename_world(
  instance: string,
  world: string,
@@ -230,12 +252,14 @@ export async function refreshServers(

 export async function refreshWorld(worlds: World[], instancePath: string, worldPath: string) {
  const index = worlds.findIndex((w) => w.type === 'singleplayer' && w.path === worldPath)
+  const newWorld = await get_singleplayer_world(instancePath, worldPath)
  if (index !== -1) {
-    worlds[index] = await get_singleplayer_world(instancePath, worldPath)
-    sortWorlds(worlds)
+    worlds[index] = newWorld
  } else {
-    console.error(`Error refreshing world, could not find world at path ${worldPath}.`)
+    console.info(`Adding new world at path: ${worldPath}.`)
+    worlds.push(newWorld)
  }
+  sortWorlds(worlds)
 }

 export async function handleDefaultProfileUpdateEvent(
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -22,7 +22,7 @@
          <FilterIcon class="text-secondary h-5 w-5 mr-1" />
          <button
            v-for="filter in filterOptions"
-            :key="filter"
+            :key="`content-filter-${filter.id}`"
            :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)"
          >
@@ -47,7 +47,7 @@
              path: x.path,
              disabled: x.disabled,
              filename: x.file_name,
-              icon: x.icon,
+              icon: x.icon ?? undefined,
              title: x.name,
              data: x,
            }
@@ -156,7 +156,7 @@
            color-fill="text"
            hover-color-fill="text"
          >
-            <button class="w-max" :disabled="installing" @click="modpackVersionModal.show()">
+            <button class="w-max" :disabled="installing" @click="modpackVersionModal?.show()">
              <DownloadIcon /> Update pack
            </button>
          </ButtonStyled>
@@ -170,7 +170,7 @@
          >
            <button
              v-tooltip="`Update`"
-              :disabled="(item.data as any).updating"
+              :disabled="(item.data as ProjectListEntry).updating"
              @click="updateProject(item.data)"
            >
              <DownloadIcon />
@@ -276,6 +276,7 @@ import {
  RadialHeader,
  Toggle,
 } from '@modrinth/ui'
+import type { Organization, Project, TeamMember, Version } from '@modrinth/utils'
 import { formatProjectType } from '@modrinth/utils'
 import type { ComputedRef } from 'vue'
 import { computed, onUnmounted, ref, watch } from 'vue'
@@ -305,43 +306,18 @@ import { profile_listener } from '@/helpers/events.js'
 import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import dayjs from 'dayjs'
+import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'

-const props = defineProps({
-  instance: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-  options: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-  offline: {
-    type: Boolean,
-    default() {
-      return false
-    },
-  },
-  playing: {
-    type: Boolean,
-    default() {
-      return false
-    },
-  },
-  versions: {
-    type: Array,
-    required: true,
-  },
-  installed: {
-    type: Boolean,
-    default() {
-      return false
-    },
-  },
-})
+const props = defineProps<{
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu>
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()

 type ProjectListEntryAuthor = {
  name: string
@@ -356,13 +332,15 @@ type ProjectListEntry = {
  author: ProjectListEntryAuthor | null
  version: string | null
  file_name: string
-  icon: string | null
+  icon: string | undefined
  disabled: boolean
  updateVersion?: string
  outdated: boolean
  updated: dayjs.Dayjs
  project_type: string
  id?: string
+  updating?: boolean
+  selected?: boolean
 }

 const isPackLocked = computed(() => {
@@ -375,17 +353,20 @@ const canUpdatePack = computed(() => {
 const exportModal = ref(null)

 const projects = ref<ProjectListEntry[]>([])
-const selectedFiles = ref([])
+const selectedFiles = ref<string[]>([])
 const selectedProjects = computed(() =>
  projects.value.filter((x) => selectedFiles.value.includes(x.file_name)),
 )

 const selectionMap = ref(new Map())

-const initProjects = async (cacheBehaviour?) => {
+const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
  const newProjects: ProjectListEntry[] = []

-  const profileProjects = await get_projects(props.instance.path, cacheBehaviour)
+  const profileProjects = (await get_projects(props.instance.path, cacheBehaviour)) as Record<
+    string,
+    ContentFile
+  >
  const fetchProjects = []
  const fetchVersions = []

@@ -397,21 +378,21 @@ const initProjects = async (cacheBehaviour?) => {
  }

  const [modrinthProjects, modrinthVersions] = await Promise.all([
-    await get_project_many(fetchProjects).catch(handleError),
-    await get_version_many(fetchVersions).catch(handleError),
+    (await get_project_many(fetchProjects).catch(handleError)) as Project[],
+    (await get_version_many(fetchVersions).catch(handleError)) as Version[],
  ])

  const [modrinthTeams, modrinthOrganizations] = await Promise.all([
-    await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError),
-    await get_organization_many(
+    (await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError)) as TeamMember[][],
+    (await get_organization_many(
      modrinthProjects.map((x) => x.organization).filter((x) => !!x),
-    ).catch(handleError),
+    ).catch(handleError)) as Organization[],
  ])

  for (const [path, file] of Object.entries(profileProjects)) {
    if (file.metadata) {
-      const project = modrinthProjects.find((x) => file.metadata.project_id === x.id)
-      const version = modrinthVersions.find((x) => file.metadata.version_id === x.id)
+      const project = modrinthProjects.find((x) => file.metadata?.project_id === x.id)
+      const version = modrinthVersions.find((x) => file.metadata?.version_id === x.id)

      if (project && version) {
        const org = project.organization
@@ -420,7 +401,7 @@ const initProjects = async (cacheBehaviour?) => {

        const team = modrinthTeams.find((x) => x[0].team_id === project.team)

-        let author: ProjectListEntryAuthor | null
+        let author: ProjectListEntryAuthor | null = null
        if (org) {
          author = {
            name: org.name,
@@ -429,13 +410,13 @@ const initProjects = async (cacheBehaviour?) => {
          }
        } else if (team) {
          const teamMember = team.find((x) => x.is_owner)
-          author = {
-            name: teamMember.user.username,
-            slug: teamMember.user.username,
-            type: 'user',
+          if (teamMember) {
+            author = {
+              name: teamMember.user.username,
+              slug: teamMember.user.username,
+              type: 'user',
+            }
          }
-        } else {
-          author = null
        }

        newProjects.push({
@@ -464,7 +445,7 @@ const initProjects = async (cacheBehaviour?) => {
      author: null,
      version: null,
      file_name: file.file_name,
-      icon: null,
+      icon: undefined,
      disabled: file.file_name.endsWith('.disabled'),
      outdated: false,
      updated: dayjs(0),
@@ -488,7 +469,7 @@ const initProjects = async (cacheBehaviour?) => {
 }
 await initProjects()

-const modpackVersionModal = ref(null)
+const modpackVersionModal = ref<InstanceType<typeof ModpackVersionModal> | null>()
 const installing = computed(() => props.instance.install_stage !== 'installed')

 const vintl = useVIntl()
@@ -513,7 +494,7 @@ const messages = defineMessages({
 const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
  const options: FilterOption[] = []

-  const frequency = projects.value.reduce((map, item) => {
+  const frequency = projects.value.reduce((map: Record<string, number>, item) => {
    map[item.project_type] = (map[item.project_type] || 0) + 1
    return map
  }, {})
@@ -544,7 +525,7 @@ const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
  return options
 })

-const selectedFilters = ref([])
+const selectedFilters = ref<string[]>([])
 const filteredProjects = computed(() => {
  const updatesFilter = selectedFilters.value.includes('updates')
  const disabledFilter = selectedFilters.value.includes('disabled')
@@ -571,7 +552,7 @@ watch(filterOptions, () => {
  }
 })

-function toggleArray(array, value) {
+function toggleArray<T>(array: T[], value: T) {
  if (array.includes(value)) {
    array.splice(array.indexOf(value), 1)
  } else {
@@ -581,7 +562,7 @@ function toggleArray(array, value) {

 const searchFilter = ref('')
 const selectAll = ref(false)
-const shareModal = ref(null)
+const shareModal = ref<InstanceType<typeof ShareModalWrapper> | null>()
 const ascending = ref(true)
 const sortColumn = ref('Name')
 const currentPage = ref(1)
@@ -622,7 +603,7 @@ const search = computed(() => {

 watch([sortColumn, ascending, selectedFilters.value, searchFilter], () => (currentPage.value = 1))

-const sortProjects = (filter) => {
+const sortProjects = (filter: string) => {
  if (sortColumn.value === filter) {
    ascending.value = !ascending.value
  } else {
@@ -640,7 +621,7 @@ const updateAll = async () => {
    }
  }

-  const paths = await update_all(props.instance.path).catch(handleError)
+  const paths = (await update_all(props.instance.path).catch(handleError)) as Record<string, string>

  for (const [oldVal, newVal] of Object.entries(paths)) {
    const index = projects.value.findIndex((x) => x.path === oldVal)
@@ -649,7 +630,7 @@ const updateAll = async () => {

    if (projects.value[index].updateVersion) {
      projects.value[index].version = projects.value[index].updateVersion.version_number
-      projects.value[index].updateVersion = null
+      projects.value[index].updateVersion = undefined
    }
  }
  for (const project of setProjects) {
@@ -664,15 +645,15 @@ const updateAll = async () => {
  })
 }

-const updateProject = async (mod) => {
+const updateProject = async (mod: ProjectListEntry) => {
  mod.updating = true
  await new Promise((resolve) => setTimeout(resolve, 0))
  mod.path = await update_project(props.instance.path, mod.path).catch(handleError)
  mod.updating = false

  mod.outdated = false
-  mod.version = mod.updateVersion.version_number
-  mod.updateVersion = null
+  mod.version = mod.updateVersion?.version_number
+  mod.updateVersion = undefined

  trackEvent('InstanceProjectUpdate', {
    loader: props.instance.loader,
@@ -683,15 +664,15 @@ const updateProject = async (mod) => {
  })
 }

-const locks = {}
+const locks: Record<string, string | null> = {}

-const toggleDisableMod = async (mod) => {
+const toggleDisableMod = async (mod: ProjectListEntry) => {
  // 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.
  const lock = locks[mod.file_name]

  while (lock) {
    await new Promise((resolve) => {
-      setTimeout((_) => resolve(), 100)
+      setTimeout((value: unknown) => resolve(value), 100)
    })
  }

@@ -716,20 +697,20 @@ const toggleDisableMod = async (mod) => {
  locks[mod.file_name] = null
 }

-const removeMod = async (mod) => {
+const removeMod = async (mod: ContentItem<ProjectListEntry>) => {
  await remove_project(props.instance.path, mod.path).catch(handleError)
  projects.value = projects.value.filter((x) => mod.path !== x.path)

  trackEvent('InstanceProjectRemove', {
    loader: props.instance.loader,
    game_version: props.instance.game_version,
-    id: mod.id,
-    name: mod.name,
-    project_type: mod.project_type,
+    id: mod.data.id,
+    name: mod.data.name,
+    project_type: mod.data.project_type,
  })
 }

-const copyModLink = async (mod) => {
+const copyModLink = async (mod: ContentItem<ProjectListEntry>) => {
  await navigator.clipboard.writeText(
    `https://modrinth.com/${mod.data.project_type}/${mod.data.slug}`,
  )
@@ -744,15 +725,15 @@ const deleteSelected = async () => {
 }

 const shareNames = async () => {
-  await shareModal.value.show(functionValues.value.map((x) => x.name).join('\n'))
+  await shareModal.value?.show(functionValues.value.map((x) => x.name).join('\n'))
 }

 const shareFileNames = async () => {
-  await shareModal.value.show(functionValues.value.map((x) => x.file_name).join('\n'))
+  await shareModal.value?.show(functionValues.value.map((x) => x.file_name).join('\n'))
 }

 const shareUrls = async () => {
-  await shareModal.value.show(
+  await shareModal.value?.show(
    functionValues.value
      .filter((x) => x.slug)
      .map((x) => `https://modrinth.com/${x.project_type}/${x.slug}`)
@@ -761,7 +742,7 @@ const shareUrls = async () => {
 }

 const shareMarkdown = async () => {
-  await shareModal.value.show(
+  await shareModal.value?.show(
    functionValues.value
      .map((x) => {
        if (x.slug) {
@@ -826,15 +807,17 @@ const unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
  await initProjects()
 })

-const unlistenProfiles = await profile_listener(async (event) => {
-  if (
-    event.profile_path_id === props.instance.path &&
-    event.event === 'synced' &&
-    props.instance.install_stage !== 'pack_installing'
-  ) {
-    await initProjects()
-  }
-})
+const unlistenProfiles = await profile_listener(
+  async (event: { event: string; profile_path_id: string }) => {
+    if (
+      event.profile_path_id === props.instance.path &&
+      event.event === 'synced' &&
+      props.instance.install_stage !== 'pack_installing'
+    ) {
+      await initProjects()
+    }
+  },
+)

 onUnmounted(() => {
  unlisten()
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -60,7 +60,7 @@
        </button>
      </ButtonStyled>
    </div>
-    <FilterBar v-model="filters" :options="filterOptions" />
+    <FilterBar v-model="filters" :options="filterOptions" show-all-options />
    <div class="flex flex-col w-full gap-2">
      <WorldItem
        v-for="world in filteredWorlds"
@@ -225,6 +225,11 @@ const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
 await refreshAllWorlds()

 async function refreshServer(address: string) {
+  if (!serverData.value[address]) {
+    serverData.value[address] = {
+      refreshing: true,
+    }
+  }
  await refreshServerData(serverData.value[address], protocolVersion.value, address)
 }

@@ -263,9 +268,12 @@ async function addServer(server: ServerWorld) {
 async function editServer(server: ServerWorld) {
  const index = worlds.value.findIndex((w) => w.type === 'server' && w.index === server.index)
  if (index !== -1) {
+    const oldServer = worlds.value[index] as ServerWorld
    worlds.value[index] = server
    sortWorlds(worlds.value)
-    await refreshServer(server.address)
+    if (oldServer.address !== server.address) {
+      await refreshServer(server.address)
+    }
  } else {
    handleError(`Error refreshing server, refreshing all worlds`)
    await refreshAllWorlds()
@@ -349,26 +357,34 @@ const supportsQuickPlay = computed(() =>
 const filterOptions = computed(() => {
  const options: FilterBarOption[] = []

-  if (worlds.value.some((x) => x.type === 'singleplayer')) {
+  const hasServer = worlds.value.some((x) => x.type === 'server')
+
+  if (worlds.value.some((x) => x.type === 'singleplayer') && hasServer) {
    options.push({
      id: 'singleplayer',
      message: messages.singleplayer,
    })
-  }
-
-  if (worlds.value.some((x) => x.type === 'server')) {
    options.push({
      id: 'server',
      message: messages.server,
    })
+  }

-    // add available filter if there's any offline ("unavailable") servers
+  if (hasServer) {
+    // add available filter if there's any offline ("unavailable") servers AND there's any singleplayer worlds or available servers
    if (
      worlds.value.some(
        (x) =>
          x.type === 'server' &&
          !serverData.value[x.address]?.status &&
          !serverData.value[x.address]?.refreshing,
+      ) &&
+      worlds.value.some(
+        (x) =>
+          x.type === 'singleplayer' ||
+          (x.type === 'server' &&
+            serverData.value[x.address]?.status &&
+            !serverData.value[x.address]?.refreshing),
      )
    ) {
      options.push({
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -155,7 +155,7 @@ import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { handleError } from '@/store/notifications.js'
@@ -170,6 +170,7 @@ import { openUrl } from '@tauri-apps/plugin-opener'
 dayjs.extend(relativeTime)

 const route = useRoute()
+const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()

@@ -247,6 +248,9 @@ async function install(version) {
        installedVersion.value = version
      }
    },
+    (profile) => {
+      router.push(`/instance/${profile}`)
+    },
  )
 }

--- a/apps/app-frontend/src/store/install.js
+++ b/apps/app-frontend/src/store/install.js
@@ -23,8 +23,8 @@ export const useInstall = defineStore('installStore', {
    setInstallConfirmModal(ref) {
      this.installConfirmModal = ref
    },
-    showInstallConfirmModal(project, version_id, onInstall) {
-      this.installConfirmModal.show(project, version_id, onInstall)
+    showInstallConfirmModal(project, version_id, onInstall, createInstanceCallback) {
+      this.installConfirmModal.show(project, version_id, onInstall, createInstanceCallback)
    },
    setIncompatibilityWarningModal(ref) {
      this.incompatibilityWarningModal = ref
@@ -41,7 +41,14 @@ export const useInstall = defineStore('installStore', {
  },
 })

-export const install = async (projectId, versionId, instancePath, source, callback = () => {}) => {
+export const install = async (
+  projectId,
+  versionId,
+  instancePath,
+  source,
+  callback = () => {},
+  createInstanceCallback = () => {},
+) => {
  const project = await get_project(projectId, 'must_revalidate').catch(handleError)

  if (project.project_type === 'modpack') {
@@ -49,7 +56,13 @@ export const install = async (projectId, versionId, instancePath, source, callba
    const packs = await list().catch(handleError)

    if (packs.length === 0 || !packs.find((pack) => pack.linked_data?.project_id === project.id)) {
-      await packInstall(project.id, version, project.title, project.icon_url).catch(handleError)
+      await packInstall(
+        project.id,
+        version,
+        project.title,
+        project.icon_url,
+        createInstanceCallback,
+      ).catch(handleError)

      trackEvent('PackInstall', {
        id: project.id,
@@ -61,7 +74,7 @@ export const install = async (projectId, versionId, instancePath, source, callba
      callback(version)
    } else {
      const install = useInstall()
-      install.showInstallConfirmModal(project, version, callback)
+      install.showInstallConfirmModal(project, version, callback, createInstanceCallback)
    }
  } else {
    if (instancePath) {
--- a/apps/app-frontend/src/store/state.js
+++ b/apps/app-frontend/src/store/state.js
@@ -1,4 +1,4 @@
-import { useTheming } from './theme'
+import { useTheming } from './theme.ts'
 import { useBreadcrumbs } from './breadcrumbs'
 import { useLoading } from './loading'
 import { useNotifications, handleError } from './notifications'
--- a/apps/app-frontend/src/store/theme.js
+++ b/apps/app-frontend/src/store/theme.js
@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useTheming = defineStore('themeStore', {
-  state: () => ({
-    themeOptions: ['dark', 'light', 'oled', 'system'],
-    advancedRendering: true,
-    selectedTheme: 'dark',
-    toggleSidebar: false,
-
-    devMode: false,
-    featureFlags: {},
-  }),
-  actions: {
-    setThemeState(newTheme) {
-      if (this.themeOptions.includes(newTheme)) this.selectedTheme = newTheme
-      else console.warn('Selected theme is not present. Check themeOptions.')
-
-      this.setThemeClass()
-    },
-    setThemeClass() {
-      for (const theme of this.themeOptions) {
-        document.getElementsByTagName('html')[0].classList.remove(`${theme}-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-frontend/src/store/theme.ts
+++ b/apps/app-frontend/src/store/theme.ts
@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+
+export const DEFAULT_FEATURE_FLAGS = {
+  project_background: false,
+  page_path: false,
+  worlds_tab: false,
+  worlds_in_home: true,
+}
+
+export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const
+
+export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
+export type FeatureFlags = Record<FeatureFlag, boolean>
+export type ColorTheme = (typeof THEME_OPTIONS)[number]
+
+export type ThemeStore = {
+  selectedTheme: ColorTheme
+  advancedRendering: boolean
+  toggleSidebar: boolean
+
+  devMode: boolean
+  featureFlags: FeatureFlags
+}
+
+export const DEFAULT_THEME_STORE: ThemeStore = {
+  selectedTheme: 'dark',
+  advancedRendering: true,
+  toggleSidebar: false,
+
+  devMode: false,
+  featureFlags: DEFAULT_FEATURE_FLAGS,
+}
+
+export const useTheming = defineStore('themeStore', {
+  state: () => DEFAULT_THEME_STORE,
+  actions: {
+    setThemeState(newTheme: ColorTheme) {
+      if (THEME_OPTIONS.includes(newTheme)) {
+        this.selectedTheme = newTheme
+      } else {
+        console.warn('Selected theme is not present. Check themeOptions.')
+      }
+
+      this.setThemeClass()
+    },
+    setThemeClass() {
+      for (const theme of THEME_OPTIONS) {
+        document.getElementsByTagName('html')[0].classList.remove(`${theme}-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`)
+    },
+    getFeatureFlag(key: FeatureFlag) {
+      return this.featureFlags[key] ?? DEFAULT_FEATURE_FLAGS[key]
+    },
+    getThemeOptions() {
+      return THEME_OPTIONS
+    },
+  },
+})