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>

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'

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>

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}`)
+    },
   )
 }
 

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,

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'
 

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()

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'
 

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()
 

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()
 

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()
 

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()
 

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>

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'

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>

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'
 

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'

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" />

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>

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" />
               {{

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">

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">

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>