Merge commit '74cf3f076eff43755bb4bef62f1c1bb3fc0e6c2a' into feature-clean

2025-05-26 17:59:09 +03:00
parent 3d3038323c 74cf3f076e
commit 3c03cd6091
497 changed files with 15033 additions and 9421 deletions
--- a/apps/app-frontend/src/components/RowDisplay.vue
+++ b/apps/app-frontend/src/components/RowDisplay.vue
@@ -10,7 +10,6 @@ import {
  StopCircleIcon,
  ExternalIcon,
  EyeIcon,
-  ChevronRightIcon,
 } from '@modrinth/assets'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import Instance from '@/components/ui/Instance.vue'
@@ -26,6 +25,7 @@ import { trackEvent } from '@/helpers/analytics'
 import { handleSevereError } from '@/store/error.js'
 import { install as installVersion } from '@/store/install.js'
 import { openUrl } from '@tauri-apps/plugin-opener'
+import { HeadingLink } from '@modrinth/ui'

 const router = useRouter()

@@ -44,7 +44,9 @@ const props = defineProps({
 })

 const actualInstances = computed(() =>
-  props.instances.filter((x) => x && x.instances && x.instances[0]),
+  props.instances.filter(
+    (x) => (x && x.instances && x.instances[0] && x.show === undefined) || x.show,
+  ),
 )

 const modsRow = ref(null)
@@ -181,6 +183,10 @@ const maxInstancesPerRow = ref(1)
 const maxProjectsPerRow = ref(1)

 const calculateCardsPerRow = () => {
+  if (rows.value.length === 0) {
+    return
+  }
+
  // Calculate how many cards fit in one row
  const containerWidth = rows.value[0].clientWidth
  // Convert container width from pixels to rem
@@ -204,16 +210,21 @@ const calculateCardsPerRow = () => {

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

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

@@ -227,17 +238,10 @@ onUnmounted(() => {
    @proceed="deleteProfile"
  />
  <div ref="rowContainer" class="flex flex-col gap-4">
-    <div v-for="(row, rowIndex) in actualInstances" ref="rows" :key="row.label" class="row">
-      <router-link
-        class="flex mb-3 leading-none items-center gap-1 text-primary text-lg font-bold hover:underline group"
-        :class="{ 'mt-1': rowIndex > 0 }"
-        :to="row.route"
-      >
+    <div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
+      <HeadingLink class="mt-1" :to="row.route">
        {{ row.label }}
-        <ChevronRightIcon
-          class="h-5 w-5 stroke-[3px] group-hover:translate-x-1 transition-transform group-hover:text-brand"
-        />
-      </router-link>
+      </HeadingLink>
      <section
        v-if="row.instance"
        ref="modsRow"
--- a/apps/app-frontend/src/components/ui/Breadcrumbs.vue
+++ b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
@@ -19,6 +19,7 @@
          path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
          query: breadcrumb.query,
        }"
+        class="text-primary"
        >{{
          breadcrumb.name.charAt(0) === '?'
            ? breadcrumbData.getName(breadcrumb.name.slice(1))
--- 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/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -9,7 +9,7 @@ import {
  StopCircleIcon,
  TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { Avatar, ButtonStyled, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { finish_install, kill, run } from '@/helpers/profile'
 import { get_by_profile_path } from '@/helpers/process'
@@ -19,10 +19,9 @@ import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 import { trackEvent } from '@/helpers/analytics'
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import { formatCategory } from '@modrinth/utils'

-dayjs.extend(relativeTime)
+const formatRelativeTime = useRelativeTime()

 const props = defineProps({
  instance: {
@@ -173,7 +172,9 @@ onUnmounted(() => unlisten())
      </div>
      <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
        <TimerIcon />
-        <span class="text-sm"> Played {{ dayjs(instance.last_played).fromNow() }} </span>
+        <span class="text-sm">
+          Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
+        </span>
      </div>
    </div>
  </template>
--- 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/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -70,7 +70,7 @@ const onHide = () => {
              v-for="version in filteredVersions"
              :key="version.id"
              class="table-row with-columns selectable"
-              @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
+              @click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
            >
              <div class="table-cell table-text">
                <Button
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -7,7 +7,7 @@
      'router-link-active': isPrimary && isPrimary(route),
      'subpage-active': isSubpage && isSubpage(route),
    }"
-    class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+    class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
  >
    <slot />
  </RouterLink>
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -14,7 +14,10 @@
    <div v-if="selectedProcess" class="status">
      <span class="circle running" />
      <div ref="profileButton" class="running-text">
-        <router-link :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`">
+        <router-link
+          class="text-primary"
+          :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+        >
          {{ selectedProcess.profile.name }}
        </router-link>
        <div v-if="currentProcesses.length > 1" class="arrow button-base" :class="{ rotate: showProfiles }"
--- 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/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import { Avatar, ButtonStyled, OverflowMenu, useRelativeTime } from '@modrinth/ui'
 import {
  UserPlusIcon,
  MoreVerticalIcon,
@@ -18,6 +18,8 @@ import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

+const formatRelativeTime = useRelativeTime()
+
 const props = defineProps<{
  credentials: unknown | null
  signIn: () => void
@@ -205,7 +207,9 @@ onUnmounted(() => {
                You sent <span class="font-bold">{{ friend.username }}</span> a friend request
              </template>
            </p>
-            <p class="m-0 text-sm text-secondary">{{ friend.created.fromNow() }}</p>
+            <p class="m-0 text-sm text-secondary">
+              {{ formatRelativeTime(friend.created.toISOString()) }}
+            </p>
          </div>
          <div class="flex gap-2">
            <template v-if="friend.id === userCredentials.user_id">
--- 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
@@ -41,6 +41,10 @@ const props = defineProps({
  //   type: Boolean,
  //   default: true,
  // },
+  markdown: {
+    type: Boolean,
+    default: true,
+  },
 })

 const emit = defineEmits(['proceed'])
@@ -79,6 +83,7 @@ function proceed() {
    :on-hide="onModalHide"
    :noblur="!themeStore.advancedRendering"
    :danger="danger"
+    :markdown="markdown"
    @proceed="proceed"
  />
 </template>
--- a/apps/app-frontend/src/components/ui/modal/InstanceModalTitlePrefix.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstanceModalTitlePrefix.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
+import { Avatar } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import type { GameInstance } from '@/helpers/types'
+
+defineProps<{
+  instance: GameInstance
+}>()
+</script>
+<template>
+  <span class="flex items-center gap-2 text-lg font-semibold text-primary">
+    <Avatar
+      :src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
+      size="24px"
+      :tint-by="instance.path"
+    />
+    {{ instance.name }} <ChevronRightIcon />
+  </span>
+</template>
--- 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'])
+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 },
 )
@@ -30,14 +27,14 @@ watch(
  <div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
    <div>
      <h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
-        {{ option }}
+        {{ option.replaceAll('_', ' ') }}
      </h2>
    </div>

    <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
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import {
+  EyeIcon,
+  FolderOpenIcon,
+  MoreVerticalIcon,
+  PlayIcon,
+  SpinnerIcon,
+  StopCircleIcon,
+} from '@modrinth/assets'
+import {
+  Avatar,
+  ButtonStyled,
+  commonMessages,
+  OverflowMenu,
+  SmartClickable,
+  useRelativeTime,
+} from '@modrinth/ui'
+import { useVIntl } from '@vintl/vintl'
+import { computed, nextTick, ref, onMounted, onUnmounted } from 'vue'
+import { showProfileInFolder } from '@/helpers/utils'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { useRouter } from 'vue-router'
+import type { GameInstance } from '@/helpers/types'
+import { get_project } from '@/helpers/cache'
+import { capitalizeString } from '@modrinth/utils'
+import { kill, run } from '@/helpers/profile'
+import { handleSevereError } from '@/store/error'
+import { trackEvent } from '@/helpers/analytics'
+import { get_by_profile_path } from '@/helpers/process'
+import { handleError } from '@/store/notifications'
+import { process_listener } from '@/helpers/events'
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+
+const router = useRouter()
+
+const emit = defineEmits<{
+  (e: 'play' | 'stop'): void
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const loadingModpack = ref(!!props.instance.linked_data)
+
+const modpack = ref()
+
+if (props.instance.linked_data) {
+  nextTick().then(async () => {
+    modpack.value = await get_project(props.instance.linked_data?.project_id, 'must_revalidate')
+    loadingModpack.value = false
+  })
+}
+
+const instanceIcon = computed(() => props.instance.icon_path)
+
+const loader = computed(() => {
+  if (props.instance.loader === 'vanilla') {
+    return 'Minecraft'
+  } else if (props.instance.loader === 'neoforge') {
+    return 'NeoForge'
+  } else {
+    return capitalizeString(props.instance.loader)
+  }
+})
+
+const loading = ref(false)
+const playing = ref(false)
+
+const play = async (event: MouseEvent) => {
+  event?.stopPropagation()
+  loading.value = true
+  await run(props.instance.path)
+    .catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
+    .finally(() => {
+      trackEvent('InstancePlay', {
+        loader: props.instance.loader,
+        game_version: props.instance.game_version,
+        source: 'InstanceItem',
+      })
+    })
+  emit('play')
+  loading.value = false
+}
+
+const stop = async (event: MouseEvent) => {
+  event?.stopPropagation()
+  loading.value = true
+  await kill(props.instance.path).catch(handleError)
+  trackEvent('InstanceStop', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+    source: 'InstanceItem',
+  })
+  emit('stop')
+  loading.value = false
+}
+
+const unlistenProcesses = await process_listener(async () => {
+  await checkProcess()
+})
+
+const checkProcess = async () => {
+  const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
+
+  playing.value = runningProcesses.length > 0
+}
+
+onMounted(() => {
+  checkProcess()
+})
+
+onUnmounted(() => {
+  unlistenProcesses()
+})
+</script>
+<template>
+  <SmartClickable>
+    <template #clickable>
+      <router-link
+        class="no-click-animation"
+        :to="`/instance/${encodeURIComponent(instance.path)}`"
+      />
+    </template>
+    <div
+      class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised rounded-xl smart-clickable:highlight-on-hover"
+    >
+      <Avatar
+        :src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
+        :tint-by="instance.path"
+        size="48px"
+      />
+      <div class="flex flex-col col-span-2 justify-between h-full">
+        <div class="flex items-center gap-2">
+          <div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
+            {{ instance.name }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-secondary">
+          <div
+            v-tooltip="
+              instance.last_played
+                ? dayjs(instance.last_played).format('MMMM D, YYYY [at] h:mm A')
+                : null
+            "
+            class="w-fit shrink-0"
+            :class="{ 'cursor-help smart-clickable:allow-pointer-events': instance.last_played }"
+          >
+            <template v-if="instance.last_played">
+              {{
+                formatMessage(commonMessages.playedLabel, {
+                  time: formatRelativeTime(instance.last_played.toISOString()),
+                })
+              }}
+            </template>
+            <template v-else> Not played yet </template>
+          </div>
+          •
+          <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 smart-clickable:allow-pointer-events"
+              :to="`/project/${modpack.id}`"
+            >
+              <Avatar :src="modpack.icon_url" size="16px" class="shrink-0" />
+              <span class="truncate">{{ modpack.title }}</span>
+            </router-link>
+            ({{ loader }} {{ instance.game_version }})
+          </span>
+          <span v-else-if="loadingModpack" class="flex items-center gap-1 truncate text-secondary">
+            <SpinnerIcon class="animate-spin shrink-0" />
+            <span class="truncate">Loading modpack...</span>
+          </span>
+          <span v-else class="flex items-center gap-1 truncate text-secondary">
+            {{ loader }}
+            {{ instance.game_version }}
+          </span>
+        </div>
+      </div>
+      <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+        <ButtonStyled v-if="playing && !loading" color="red">
+          <button @click="stop">
+            <StopCircleIcon aria-hidden="true" />
+            {{ formatMessage(commonMessages.stopButton) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled v-else>
+          <button
+            v-tooltip="playing ? 'Instance is already open' : null"
+            :disabled="playing || loading"
+            @click="play"
+          >
+            <SpinnerIcon v-if="loading" class="animate-spin" />
+            <PlayIcon v-else aria-hidden="true" />
+            {{ formatMessage(commonMessages.playButton) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled circular type="transparent">
+          <OverflowMenu
+            :options="[
+              {
+                id: 'open-instance',
+                shown: !!instance.path,
+                action: () => router.push(encodeURI(`/instance/${instance.path}`)),
+              },
+              {
+                id: 'open-folder',
+                action: () => showProfileInFolder(instance.path),
+              },
+            ]"
+          >
+            <MoreVerticalIcon aria-hidden="true" />
+            <template #open-instance>
+              <EyeIcon aria-hidden="true" />
+              View instance
+            </template>
+            <template #open-folder>
+              <FolderOpenIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.openFolderButton) }}
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+      </div>
+    </div>
+  </SmartClickable>
+</template>
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import {
+  type ServerWorld,
+  type ServerData,
+  type WorldWithProfile,
+  get_recent_worlds,
+  getWorldIdentifier,
+  get_profile_protocol_version,
+  refreshServerData,
+  start_join_server,
+  start_join_singleplayer_world,
+} from '@/helpers/worlds.ts'
+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, computed } from 'vue'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+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[]
+}>()
+
+const theme = useTheming()
+
+const jumpBackInItems = ref<JumpBackInItem[]>([])
+const serverData = ref<Record<string, ServerData>>({})
+const protocolVersions = ref<Record<string, number | null>>({})
+
+const MIN_JUMP_BACK_IN = 3
+const MAX_JUMP_BACK_IN = 6
+const TWO_WEEKS_AGO = dayjs().subtract(14, 'day')
+
+type BaseJumpBackInItem = {
+  last_played: Dayjs
+  instance: GameInstance
+}
+
+type InstanceJumpBackInItem = BaseJumpBackInItem & {
+  type: 'instance'
+}
+
+type WorldJumpBackInItem = BaseJumpBackInItem & {
+  type: 'world'
+  world: WorldWithProfile
+}
+
+type JumpBackInItem = InstanceJumpBackInItem | WorldJumpBackInItem
+
+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')
+  })
+})
+
+await populateJumpBackIn().catch(() => {
+  console.error('Failed to populate jump back in')
+})
+
+async function populateJumpBackIn() {
+  console.info('Repopulating jump back in...')
+
+  const worldItems: WorldJumpBackInItem[] = []
+
+  if (showWorlds.value) {
+    const worlds = await get_recent_worlds(MAX_JUMP_BACK_IN, ['normal', 'favorite'])
+
+    worlds.forEach((world) => {
+      const instance = props.recentInstances.find((instance) => instance.path === world.profile)
+
+      if (!instance || !world.last_played) {
+        return
+      }
+
+      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[] = []
+  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({
+      type: 'instance',
+      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))
+    .slice(0, MAX_JUMP_BACK_IN)
+}
+
+async function refreshServer(address: string, instancePath: string) {
+  await refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
+}
+
+async function joinWorld(world: WorldWithProfile) {
+  console.log(`Joining world ${getWorldIdentifier(world)}`)
+  if (world.type === 'server') {
+    await start_join_server(world.profile, world.address).catch(handleError)
+  } else if (world.type === 'singleplayer') {
+    await start_join_singleplayer_world(world.profile, world.path).catch(handleError)
+  }
+}
+
+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', {
+    source: 'RecentWorldsList',
+  })
+}
+
+const currentProfile = ref<string>()
+const currentWorld = ref<string>()
+
+const unlistenProcesses = await process_listener(async () => {
+  await checkProcesses()
+})
+
+const unlistenProfiles = await profile_listener(async () => {
+  await populateJumpBackIn().catch(() => {
+    console.error('Failed to populate jump back in')
+  })
+})
+
+const runningInstances = ref<string[]>([])
+
+type ProcessMetadata = {
+  uuid: string
+  profile_path: string
+  start_time: string
+}
+
+const checkProcesses = async () => {
+  const runningProcesses: ProcessMetadata[] = await get_all().catch(handleError)
+
+  const runningPaths = runningProcesses.map((x) => x.profile_path)
+
+  const stoppedInstances = runningInstances.value.filter((x) => !runningPaths.includes(x))
+  if (currentProfile.value && stoppedInstances.includes(currentProfile.value)) {
+    currentProfile.value = undefined
+    currentWorld.value = undefined
+  }
+
+  runningInstances.value = runningPaths
+}
+
+onMounted(() => {
+  checkProcesses()
+})
+
+onUnmounted(() => {
+  unlistenProcesses()
+  unlistenProfiles()
+})
+</script>
+
+<template>
+  <div v-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
+    <HeadingLink v-if="theme.getFeatureFlag('worlds_tab')" to="/worlds" class="mt-1">
+      Jump back in
+    </HeadingLink>
+    <span
+      v-else
+      class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold"
+    >
+      Jump back in
+    </span>
+    <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'}`"
+      >
+        <WorldItem
+          v-if="item.type === 'world'"
+          :world="item.world"
+          :playing-instance="runningInstances.includes(item.instance.path)"
+          :playing-world="
+            currentProfile === item.instance.path && currentWorld === getWorldIdentifier(item.world)
+          "
+          :refreshing="
+            item.world.type === 'server'
+              ? serverData[item.world.address].refreshing && !serverData[item.world.address].status
+              : undefined
+          "
+          supports-quick-play
+          :server-status="
+            item.world.type === 'server' ? serverData[item.world.address].status : undefined
+          "
+          :rendered-motd="
+            item.world.type === 'server' ? serverData[item.world.address].renderedMotd : undefined
+          "
+          :current-protocol="protocolVersions[item.instance.path]"
+          :game-mode="
+            item.world.type === 'singleplayer' ? GAME_MODES[item.world.game_mode] : undefined
+          "
+          :instance-path="item.instance.path"
+          :instance-name="item.instance.name"
+          :instance-icon="item.instance.icon_path"
+          @refresh="
+            () =>
+              item.world.type === 'server'
+                ? refreshServer(item.world.address, item.instance.path)
+                : {}
+          "
+          @update="() => populateJumpBackIn()"
+          @play="
+            () => {
+              currentProfile = item.instance.path
+              currentWorld = getWorldIdentifier(item.world)
+              joinWorld(item.world)
+            }
+          "
+          @play-instance="
+            () => {
+              currentProfile = item.instance.path
+              playInstance(item.instance)
+            }
+          "
+          @stop="() => stopInstance(item.instance.path)"
+        />
+        <InstanceItem v-else :instance="item.instance" />
+      </template>
+    </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
@@ -0,0 +1,524 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { ServerStatus, ServerWorld, World } from '@/helpers/worlds.ts'
+import {
+  set_world_display_status,
+  getWorldIdentifier,
+  showWorldInFolder,
+} from '@/helpers/worlds.ts'
+import { formatNumber } from '@modrinth/utils'
+import {
+  useRelativeTime,
+  Avatar,
+  ButtonStyled,
+  commonMessages,
+  OverflowMenu,
+  SmartClickable,
+} from '@modrinth/ui'
+import {
+  IssuesIcon,
+  EyeIcon,
+  ClipboardCopyIcon,
+  EditIcon,
+  FolderOpenIcon,
+  MoreVerticalIcon,
+  NoSignalIcon,
+  PlayIcon,
+  SignalIcon,
+  SkullIcon,
+  SpinnerIcon,
+  StopCircleIcon,
+  TrashIcon,
+  UpdatedIcon,
+  UserIcon,
+  XIcon,
+} from '@modrinth/assets'
+import type { MessageDescriptor } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import type { Component } from 'vue'
+import { computed } from 'vue'
+import { copyToClipboard } from '@/helpers/utils'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { useRouter } from 'vue-router'
+import { Tooltip } from 'floating-vue'
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+
+const router = useRouter()
+
+const emit = defineEmits<{
+  (e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete'): void
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    world: World
+    playingInstance?: boolean
+    playingWorld?: boolean
+    startingInstance?: boolean
+    supportsQuickPlay?: boolean
+    currentProtocol?: number | null
+    highlighted?: boolean
+
+    // Server only
+    refreshing?: boolean
+    serverStatus?: ServerStatus
+    renderedMotd?: string
+
+    // Singleplayer only
+    gameMode?: {
+      icon: Component
+      message: MessageDescriptor
+    }
+
+    // Instance
+    instancePath?: string
+    instanceName?: string
+    instanceIcon?: string
+  }>(),
+  {
+    playingInstance: false,
+    playingWorld: false,
+    startingInstance: false,
+    supportsQuickPlay: false,
+    currentProtocol: null,
+
+    refreshing: false,
+    serverStatus: undefined,
+    renderedMotd: undefined,
+
+    gameMode: undefined,
+
+    instancePath: undefined,
+    instanceName: undefined,
+    instanceIcon: undefined,
+  },
+)
+
+const playingOtherWorld = computed(() => props.playingInstance && !props.playingWorld)
+const hasPlayersTooltip = computed(
+  () => !!props.serverStatus?.players?.sample && props.serverStatus.players?.sample?.length > 0,
+)
+const serverIncompatible = computed(
+  () =>
+    !!props.serverStatus &&
+    !!props.serverStatus.version?.protocol &&
+    !!props.currentProtocol &&
+    props.serverStatus.version.protocol !== props.currentProtocol,
+)
+
+function getPingLevel(ping: number) {
+  if (ping < 150) {
+    return 5
+  } else if (ping < 300) {
+    return 4
+  } else if (ping < 600) {
+    return 3
+  } else if (ping < 1000) {
+    return 2
+  } else {
+    return 1
+  }
+}
+
+const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
+
+const messages = defineMessages({
+  hardcore: {
+    id: 'instance.worlds.hardcore',
+    defaultMessage: 'Hardcore mode',
+  },
+  cantConnect: {
+    id: 'instance.worlds.cant_connect',
+    defaultMessage: "Can't connect to server",
+  },
+  aMinecraftServer: {
+    id: 'instance.worlds.a_minecraft_server',
+    defaultMessage: 'A Minecraft Server',
+  },
+  noQuickPlay: {
+    id: 'instance.worlds.no_quick_play',
+    defaultMessage: 'You can only jump straight into worlds on Minecraft 1.20+',
+  },
+  gameAlreadyOpen: {
+    id: 'instance.worlds.game_already_open',
+    defaultMessage: 'Instance is already open',
+  },
+  copyAddress: {
+    id: 'instance.worlds.copy_address',
+    defaultMessage: 'Copy address',
+  },
+  viewInstance: {
+    id: 'instance.worlds.view_instance',
+    defaultMessage: 'View instance',
+  },
+  playAnyway: {
+    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>
+  <SmartClickable>
+    <template v-if="instancePath" #clickable>
+      <router-link
+        class="no-click-animation"
+        :to="`/instance/${encodeURIComponent(instancePath)}/worlds?highlight=${encodeURIComponent(getWorldIdentifier(world))}`"
+      />
+    </template>
+    <div
+      class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised smart-clickable:highlight-on-hover rounded-xl"
+      :class="{
+        'world-item-highlighted': highlighted,
+      }"
+    >
+      <Avatar
+        :src="
+          world.type === 'server' && serverStatus ? serverStatus.favicon ?? world.icon : world.icon
+        "
+        size="48px"
+      />
+      <div class="flex flex-col justify-between h-full">
+        <div class="flex items-center gap-2">
+          <div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
+            {{ world.name }}
+          </div>
+          <div
+            v-if="world.type === 'singleplayer'"
+            class="text-sm text-secondary flex items-center gap-1 font-semibold"
+          >
+            <UserIcon
+              aria-hidden="true"
+              class="h-4 w-4 text-secondary shrink-0"
+              stroke-width="3px"
+            />
+            {{ formatMessage(commonMessages.singleplayerLabel) }}
+          </div>
+          <div
+            v-else-if="world.type === 'server'"
+            class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
+          >
+            <template v-if="refreshing">
+              <SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
+              Loading...
+            </template>
+            <template v-else-if="serverStatus">
+              <template v-if="serverIncompatible">
+                <IssuesIcon class="shrink-0 text-orange" aria-hidden="true" />
+                <span class="text-orange">
+                  Incompatible version {{ serverStatus.version?.name }}
+                </span>
+              </template>
+              <template v-else>
+                <SignalIcon
+                  v-tooltip="serverStatus ? `${serverStatus.ping}ms` : null"
+                  aria-hidden="true"
+                  :style="`--_signal-${getPingLevel(serverStatus.ping || 0)}: var(--color-green)`"
+                  stroke-width="3px"
+                  class="shrink-0"
+                  :class="{
+                    'smart-clickable:allow-pointer-events': serverStatus,
+                  }"
+                />
+                <Tooltip :disabled="!hasPlayersTooltip">
+                  <span :class="{ 'cursor-help': hasPlayersTooltip }">
+                    {{ formatNumber(serverStatus.players?.online, false) }} online
+                  </span>
+                  <template #popper>
+                    <div class="flex flex-col gap-1">
+                      <span v-for="player in serverStatus.players?.sample" :key="player.name">
+                        {{ player.name }}
+                      </span>
+                    </div>
+                  </template>
+                </Tooltip>
+              </template>
+            </template>
+            <template v-else>
+              <NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" /> Offline
+            </template>
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-secondary">
+          <div
+            v-tooltip="
+              world.last_played ? dayjs(world.last_played).format('MMMM D, YYYY [at] h:mm A') : null
+            "
+            class="w-fit shrink-0"
+            :class="{ 'cursor-help smart-clickable:allow-pointer-events': world.last_played }"
+          >
+            <template v-if="world.last_played">
+              {{
+                formatMessage(commonMessages.playedLabel, {
+                  time: formatRelativeTime(dayjs(world.last_played).toISOString()),
+                })
+              }}
+            </template>
+            <template v-else> Not played yet </template>
+          </div>
+          <template v-if="instancePath">
+            •
+            <router-link
+              class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
+              :to="`/instance/${instancePath}`"
+            >
+              <Avatar
+                :src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
+                size="16px"
+                :tint-by="instancePath"
+                class="shrink-0"
+              />
+              <span class="truncate">{{ instanceName }}</span>
+            </router-link>
+          </template>
+        </div>
+      </div>
+      <div
+        class="font-semibold flex items-center gap-1 justify-center text-center"
+        :class="world.type === 'singleplayer' && world.hardcore ? `text-red` : 'text-secondary'"
+      >
+        <template v-if="world.type === 'server'">
+          <template v-if="refreshing">
+            <SpinnerIcon aria-hidden="true" class="animate-spin" />
+            {{ formatMessage(commonMessages.loadingLabel) }}
+          </template>
+          <div
+            v-else-if="renderedMotd"
+            class="motd-renderer font-normal font-minecraft line-clamp-2 text-secondary leading-5"
+            v-html="renderedMotd"
+          />
+          <div v-else-if="!serverStatus" class="font-normal font-minecraft text-red leading-5">
+            {{ formatMessage(messages.cantConnect) }}
+          </div>
+          <div v-else class="font-normal font-minecraft text-secondary leading-5">
+            {{ formatMessage(messages.aMinecraftServer) }}
+          </div>
+        </template>
+        <template v-else-if="world.type === 'singleplayer' && gameMode">
+          <template v-if="world.hardcore">
+            <SkullIcon aria-hidden="true" class="h-4 w-4 shrink-0" />
+            {{ formatMessage(messages.hardcore) }}
+          </template>
+          <template v-else>
+            <component :is="gameMode.icon" aria-hidden="true" class="h-4 w-4 shrink-0" />
+            {{ formatMessage(gameMode.message) }}
+          </template>
+        </template>
+      </div>
+      <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+        <template v-if="world.type === 'singleplayer' || serverStatus">
+          <ButtonStyled
+            v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
+            color="red"
+          >
+            <button @click="emit('stop')">
+              <StopCircleIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.stopButton) }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-else>
+            <button
+              v-tooltip="
+                serverIncompatible
+                  ? 'Server is incompatible'
+                  : !supportsQuickPlay
+                    ? formatMessage(messages.noQuickPlay)
+                    : playingOtherWorld || locked
+                      ? formatMessage(messages.gameAlreadyOpen)
+                      : null
+              "
+              :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
+              @click="emit('play')"
+            >
+              <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+              <PlayIcon v-else aria-hidden="true" />
+              {{ formatMessage(commonMessages.playButton) }}
+            </button>
+          </ButtonStyled>
+        </template>
+        <ButtonStyled v-else>
+          <button class="invisible">
+            <PlayIcon aria-hidden="true" />
+            {{ formatMessage(commonMessages.playButton) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled circular type="transparent">
+          <OverflowMenu
+            :options="[
+              {
+                id: 'play-instance',
+                shown: !!instancePath,
+                disabled: playingInstance,
+                action: () => emit('play-instance'),
+              },
+              {
+                id: 'play-anyway',
+                shown: serverIncompatible && !playingInstance && supportsQuickPlay,
+                action: () => emit('play'),
+              },
+              {
+                id: 'open-instance',
+                shown: !!instancePath,
+                action: () => router.push(encodeURI(`/instance/${instancePath}`)),
+              },
+              {
+                id: 'refresh',
+                shown: world.type === 'server',
+                action: () => emit('refresh'),
+              },
+              {
+                id: 'copy-address',
+                shown: world.type === 'server',
+                action: () => copyToClipboard((world as ServerWorld).address),
+              },
+              {
+                id: 'edit',
+                action: () => emit('edit'),
+                shown: !instancePath,
+                disabled: locked,
+                tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+              },
+              {
+                id: 'open-folder',
+                shown: world.type === 'singleplayer',
+                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,
+              },
+              {
+                id: 'delete',
+                color: 'red',
+                hoverFilled: true,
+                action: () => emit('delete'),
+                shown: !instancePath,
+                disabled: locked,
+                tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+              },
+            ]"
+          >
+            <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) }}
+            </template>
+            <template #open-instance>
+              <EyeIcon aria-hidden="true" />
+              {{ formatMessage(messages.viewInstance) }}
+            </template>
+            <template #edit>
+              <EditIcon aria-hidden="true" /> {{ formatMessage(commonMessages.editButton) }}
+            </template>
+            <template #open-folder>
+              <FolderOpenIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.openFolderButton) }}
+            </template>
+            <template #copy-address>
+              <ClipboardCopyIcon aria-hidden="true" /> {{ formatMessage(messages.copyAddress) }}
+            </template>
+            <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" />
+              {{
+                formatMessage(
+                  world.type === 'server'
+                    ? commonMessages.removeButton
+                    : commonMessages.deleteLabel,
+                )
+              }}
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+      </div>
+    </div>
+  </SmartClickable>
+</template>
+<style scoped lang="scss">
+.world-item-highlighted {
+  position: relative;
+  animation: fade-highlight 4s ease-out;
+  filter: brightness(1);
+
+  &::before {
+    @apply rounded-xl inset-0 absolute;
+
+    animation: fade-opacity 4s ease-out;
+
+    content: '';
+    box-shadow: 0 0 8px 2px var(--color-brand);
+    border: 1.5px solid var(--color-brand);
+    opacity: 0;
+  }
+}
+
+@keyframes fade-highlight {
+  0% {
+    filter: brightness(1.25);
+  }
+  75% {
+    filter: brightness(1.25);
+  }
+  100% {
+    filter: brightness(1);
+  }
+}
+
+@keyframes fade-opacity {
+  0% {
+    opacity: 0.5;
+  }
+  75% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.light-mode .motd-renderer {
+  filter: brightness(0.75);
+}
+</style>
--- a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages } from '@modrinth/ui'
+import { ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import type { GameInstance } from '@/helpers/types'
+import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
+import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { handleError } from '@/store/notifications'
+import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+  submit: [server: ServerWorld, play: boolean]
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const modal = ref()
+
+const name = ref()
+const address = ref()
+const resourcePack = ref<ServerPackStatus>('enabled')
+
+async function addServer(play: boolean) {
+  const serverName = name.value ? name.value : address.value
+  const resourcePackStatus = resourcePack.value
+  const index =
+    (await add_server_to_profile(
+      props.instance.path,
+      serverName,
+      address.value,
+      resourcePackStatus,
+    ).catch(handleError)) ?? 0
+  emit(
+    'submit',
+    {
+      name: serverName,
+      type: 'server',
+      index,
+      address: address.value,
+      pack_status: resourcePackStatus,
+    },
+    play,
+  )
+  hide()
+}
+
+function show() {
+  name.value = ''
+  address.value = ''
+  resourcePack.value = 'enabled'
+  modal.value.show()
+}
+
+function hide() {
+  modal.value.hide()
+}
+
+const messages = defineMessages({
+  title: {
+    id: 'instance.add-server.title',
+    defaultMessage: 'Add a server',
+  },
+  addServer: {
+    id: 'instance.add-server.add-server',
+    defaultMessage: 'Add server',
+  },
+  addAndPlay: {
+    id: 'instance.add-server.add-and-play',
+    defaultMessage: 'Add and play',
+  },
+})
+
+defineExpose({ show, hide })
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <span class="flex items-center gap-2 text-lg font-semibold text-primary">
+        <InstanceModalTitlePrefix :instance="instance" />
+        <span class="font-extrabold text-contrast">{{ formatMessage(messages.title) }}</span>
+      </span>
+    </template>
+    <ServerModalBody
+      v-model:name="name"
+      v-model:address="address"
+      v-model:resource-pack="resourcePack"
+    />
+    <div class="flex gap-2 mt-4">
+      <ButtonStyled color="brand">
+        <button :disabled="!address" @click="addServer(true)">
+          <PlayIcon />
+          {{ formatMessage(messages.addAndPlay) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button :disabled="!address" @click="addServer(false)">
+          <PlusIcon />
+          {{ formatMessage(messages.addServer) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide()">
+          <XIcon />
+          {{ formatMessage(commonMessages.cancelButton) }}
+        </button>
+      </ButtonStyled>
+    </div>
+  </ModalWrapper>
+</template>
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { SaveIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import type { GameInstance } from '@/helpers/types'
+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()
+
+const emit = defineEmits<{
+  submit: [server: ServerWorld]
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const modal = 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
+  const resourcePackStatus = resourcePack.value
+  await edit_server_in_profile(
+    props.instance.path,
+    index.value,
+    serverName,
+    address.value,
+    resourcePackStatus,
+  ).catch(handleError)
+
+  if (newDisplayStatus.value !== displayStatus.value) {
+    await set_world_display_status(
+      props.instance.path,
+      'server',
+      address.value,
+      newDisplayStatus.value,
+    ).catch(handleError)
+  }
+
+  emit('submit', {
+    name: serverName,
+    type: 'server',
+    index: index.value,
+    address: address.value,
+    pack_status: resourcePackStatus,
+    display_status: newDisplayStatus.value,
+  })
+  hide()
+}
+
+function show(server: ServerWorld) {
+  name.value = server.name
+  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()
+}
+
+function hide() {
+  modal.value.hide()
+}
+
+defineExpose({ show })
+
+const titleMessage = defineMessage({
+  id: 'instance.edit-server.title',
+  defaultMessage: 'Edit server',
+})
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <span class="font-extrabold text-lg text-contrast">{{ formatMessage(titleMessage) }}</span>
+    </template>
+    <ServerModalBody
+      v-model:name="name"
+      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">
+          <SaveIcon />
+          {{ formatMessage(commonMessages.saveChangesButton) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide()">
+          <XIcon />
+          {{ formatMessage(commonMessages.cancelButton) }}
+        </button>
+      </ButtonStyled>
+    </div>
+  </ModalWrapper>
+</template>
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ChevronRightIcon, SaveIcon, XIcon, UndoIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, commonMessages } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import type { GameInstance } from '@/helpers/types'
+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, displayStatus: DisplayStatus]
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const modal = ref()
+
+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)
+
+  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, newDisplayStatus.value)
+  hide()
+}
+
+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()
+}
+
+function hide() {
+  modal.value.hide()
+}
+
+defineExpose({ show })
+
+const messages = defineMessages({
+  title: {
+    id: 'instance.edit-world.title',
+    defaultMessage: 'Edit world',
+  },
+  name: {
+    id: 'instance.edit-world.name',
+    defaultMessage: 'Name',
+  },
+  placeholderName: {
+    id: 'instance.edit-world.placeholder-name',
+    defaultMessage: 'Minecraft World',
+  },
+  resetIcon: {
+    id: 'instance.edit-world.reset-icon',
+    defaultMessage: 'Reset icon',
+  },
+})
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <Avatar :src="removeIcon || !icon ? undefined : icon" size="24px" />
+      {{ instance.name }} <ChevronRightIcon />
+      <span class="font-extrabold text-lg text-contrast">{{ formatMessage(messages.title) }}</span>
+    </template>
+    <div class="w-[450px]">
+      <h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
+        {{ formatMessage(messages.name) }}
+      </h2>
+      <input
+        v-model="name"
+        type="text"
+        :placeholder="formatMessage(messages.placeholderName)"
+        class="w-full"
+        autocomplete="off"
+      />
+      <HideFromHomeOption v-model="hideFromHome" class="mt-3" />
+    </div>
+    <div class="flex gap-2 mt-4">
+      <ButtonStyled color="brand">
+        <button @click="saveWorld">
+          <SaveIcon />
+          {{ formatMessage(commonMessages.saveChangesButton) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button :disabled="removeIcon || !icon" @click="removeIcon = true">
+          <UndoIcon />
+          {{ formatMessage(messages.resetIcon) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide()">
+          <XIcon />
+          {{ formatMessage(commonMessages.cancelButton) }}
+        </button>
+      </ButtonStyled>
+    </div>
+  </ModalWrapper>
+</template>
--- 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/components/ui/world/modal/ServerModalBody.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { TeleportDropdownMenu } from '@modrinth/ui'
+import type { ServerPackStatus } from '@/helpers/worlds.ts'
+import { type MessageDescriptor, defineMessages, useVIntl } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+
+const name = defineModel<string>('name')
+const address = defineModel<string>('address')
+const resourcePack = defineModel<ServerPackStatus>('resourcePack')
+
+const resourcePackOptions: ServerPackStatus[] = ['enabled', 'prompt', 'disabled']
+
+const resourcePackOptionMessages: Record<ServerPackStatus, MessageDescriptor> = defineMessages({
+  enabled: {
+    id: 'instance.add-server.resource-pack.enabled',
+    defaultMessage: 'Enabled',
+  },
+  prompt: {
+    id: 'instance.add-server.resource-pack.prompt',
+    defaultMessage: 'Prompt',
+  },
+  disabled: {
+    id: 'instance.add-server.resource-pack.disabled',
+    defaultMessage: 'Disabled',
+  },
+})
+
+const messages = defineMessages({
+  name: {
+    id: 'instance.server-modal.name',
+    defaultMessage: 'Name',
+  },
+  address: {
+    id: 'instance.server-modal.address',
+    defaultMessage: 'Address',
+  },
+  resourcePack: {
+    id: 'instance.server-modal.resource-pack',
+    defaultMessage: 'Resource pack',
+  },
+  placeholderName: {
+    id: 'instance.server-modal.placeholder-name',
+    defaultMessage: 'Minecraft Server',
+  },
+})
+
+defineExpose({ resourcePackOptions })
+</script>
+<template>
+  <div class="w-[450px]">
+    <h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
+      {{ formatMessage(messages.name) }}
+    </h2>
+    <input
+      v-model="name"
+      type="text"
+      :placeholder="formatMessage(messages.placeholderName)"
+      class="w-full"
+      autocomplete="off"
+    />
+    <h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
+      {{ formatMessage(messages.address) }}
+    </h2>
+    <input
+      v-model="address"
+      type="text"
+      placeholder="example.modrinth.gg"
+      class="w-full"
+      autocomplete="off"
+    />
+    <h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
+      {{ formatMessage(messages.resourcePack) }}
+    </h2>
+    <div>
+      <TeleportDropdownMenu
+        v-model="resourcePack"
+        :options="resourcePackOptions"
+        name="Server resource pack"
+        :display-name="
+          (option: ServerPackStatus) => formatMessage(resourcePackOptionMessages[option])
+        "
+      />
+    </div>
+  </div>
+</template>