Include region in user subscription metadata

When an issue has been already handled by our part, and thus gets
closed, but affects many users and the fix takes a while to be rolled
out, it usually happens that those who notice the matter later on don't
notice previous reports and create duplicate issues.

Let's try to improve a little bit on that by not filtering out closed
issues in the links for checking whether the same issue was already
reported before. This should make it more obvious to users who follow
the link whether an issue for their problem already exists.

.cargo/config.toml

@@ -1,3 +1,6 @@
 # Windows has stack overflows when calling from Tauri, so we increase compiler size
 [target.'cfg(windows)']
 rustflags = ["-C", "link-args=/STACK:16777220"]
+
+[build]
+rustflags = ["--cfg", "tokio_unstable"]

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/ISSUE_TEMPLATE/1-app-bug.yml

@@ -6,7 +6,7 @@ body:
     attributes:
       label: Please confirm the following.
       options:
-        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate problems
           required: true
         - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
           required: true
@@ -16,7 +16,7 @@ body:
     id: version
     attributes:
       label: What version of the Modrinth App are you using?
-      description: Find this in ⚙️ Settings (bottom right) -> About -> App version.
+      description: Find this in ⚙️ Settings (bottom right) -> After Modrinth App (bottom left)
     validations:
       required: true
   - type: dropdown

.github/ISSUE_TEMPLATE/2-web-bug.yml

@@ -6,7 +6,7 @@ body:
     attributes:
       label: Please confirm the following.
       options:
-        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate problems
           required: true
         - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
           required: true

.github/ISSUE_TEMPLATE/3-api-bug.yml

@@ -6,7 +6,7 @@ body:
     attributes:
       label: Please confirm the following.
       options:
-        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate problems
           required: true
         - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
           required: true

.github/ISSUE_TEMPLATE/4-feature-request.yml

@@ -7,7 +7,7 @@ body:
     attributes:
       label: Please confirm the following.
       options:
-        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate feature requests
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate feature requests
           required: true
         - label: I have checked that this feature request is not on our [roadmap](https://roadmap.modrinth.com)
           required: true

.github/workflows/daedalus-docker.yml

@@ -7,11 +7,13 @@ on:
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
+      - 'packages/daedalus/**'
   pull_request:
     types: [opened, synchronize]
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
+      - 'packages/daedalus/**'
   merge_group:
     types: [checks_requested]
 

.github/workflows/labrinth-docker.yml

@@ -38,8 +38,10 @@ jobs:
       - name: Build and push
         id: docker_build
         uses: docker/build-push-action@v2
+        env:
+          SQLX_OFFLINE: true
         with:
-          context: ./apps/labrinth
+          file: ./apps/labrinth/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.docker_meta.outputs.tags }}
           labels: ${{ steps.docker_meta.outputs.labels }}

.github/workflows/theseus-release.yml

@@ -6,9 +6,11 @@ on:
     tags:
       - 'v*'
     paths:
-      - .github/workflows/app-release.yml
+      - .github/workflows/theseus-release.yml
       - 'apps/app/**'
       - 'apps/app-frontend/**'
+      - 'apps/labrinth/src/common/**'
+      - 'apps/labrinth/Cargo.toml'
       - 'packages/app-lib/**'
       - 'packages/app-macros/**'
       - 'packages/assets/**'
@@ -53,11 +55,11 @@ jobs:
             !target/release/bundle/*/*.app.tar.gz
             !target/release/bundle/*/*.app.tar.gz.sig
 
-            !target/release/bundle/*/*.AppImage
-            !target/release/bundle/*/*.AppImage.tar.gz
-            !target/release/bundle/*/*.AppImage.tar.gz.sig
-            !target/release/bundle/*/*.deb
-            !target/release/bundle/*/*.rpm
+            !target/release/bundle/appimage/*.AppImage
+            !target/release/bundle/appimage/*.AppImage.tar.gz
+            !target/release/bundle/appimage/*.AppImage.tar.gz.sig
+            !target/release/bundle/deb/*.deb
+            !target/release/bundle/rpm/*.rpm
 
             !target/release/bundle/msi/*.msi
             !target/release/bundle/msi/*.msi.zip

.idea/code.iml

@@ -10,9 +10,11 @@
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
       <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/rust-common/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
-</module>
+</module>

.vscode/settings.json

@@ -2,6 +2,7 @@
   "prettier.endOfLine": "lf",
   "editor.formatOnSave": true,
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "editor.detectIndentation": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   }

Cargo.toml

@@ -1,24 +1,183 @@
 [workspace]
-resolver = '2'
+resolver = "2"
 members = [
-  './packages/app-lib',
-	'./apps/app-playground',
-  './apps/app',
-  './apps/labrinth',
-    './apps/daedalus_client',
-    './packages/daedalus',
+  "apps/app",
+  "apps/app-playground",
+  "apps/daedalus_client",
+  "apps/labrinth",
+  "packages/app-lib",
+  "packages/ariadne",
+  "packages/daedalus",
 ]
 
+[workspace.dependencies]
+actix-cors = "0.7.1"
+actix-files = "0.6.6"
+actix-http = "3.11.0"
+actix-multipart = "0.7.2"
+actix-rt = "2.10.0"
+actix-web = "4.11.0"
+actix-web-prom = "0.10.0"
+actix-ws = "0.3.0"
+argon2 = { version = "0.5.3", features = ["std"] }
+ariadne = { path = "packages/ariadne" }
+async-compression = { version = "0.4.23", default-features = false }
+async-recursion = "1.1.1"
+async-stripe = { version = "0.41.0", default-features = false, features = [
+  "runtime-tokio-hyper-rustls",
+] }
+async-trait = "0.1.88"
+async-tungstenite = { version = "0.29.1", default-features = false, features = [
+  "futures-03-sink",
+] }
+async-walkdir = "2.1.0"
+async_zip = "0.0.17"
+base64 = "0.22.1"
+bitflags = "2.9.0"
+bytes = "1.10.1"
+censor = "0.3.0"
+chrono = "0.4.41"
+clap = "4.5.38"
+clickhouse = "0.13.2"
+color-thief = "0.2.2"
+console-subscriber = "0.4.1"
+daedalus = { path = "packages/daedalus" }
+dashmap = "6.1.0"
+deadpool-redis = "0.21.1"
+dirs = "6.0.0"
+discord-rich-presence = "0.2.5"
+dotenv-build = "0.1.1"
+dotenvy = "0.15.7"
+dunce = "1.0.5"
+either = "1.15.0"
+enumset = "1.1.6"
+flate2 = "1.1.1"
+fs4 = { version = "0.13.1", default-features = false }
+futures = { version = "0.3.31", default-features = false }
+futures-util = "0.3.31"
+hex = "0.4.3"
+hickory-resolver = "0.25.2"
+hmac = "0.12.1"
+hyper-tls = "0.6.0"
+hyper-util = "0.1.11"
+iana-time-zone = "0.1.63"
+image = { version = "0.25.6", default-features = false, features = ["rayon"] }
+indexmap = "2.9.0"
+indicatif = "0.17.11"
+itertools = "0.14.0"
+jemalloc_pprof = "0.7.0"
+json-patch = { version = "4.0.0", default-features = false }
+lettre = { version = "0.11.16", default-features = false, features = [
+  "builder",
+  "hostname",
+  "pool",
+  "ring",
+  "rustls",
+  "rustls-native-certs",
+  "smtp-transport",
+] }
+maxminddb = "0.26.0"
+meilisearch-sdk = { version = "0.28.0", default-features = false }
+murmur2 = "0.1.0"
+native-dialog = "0.9.0"
+notify = { version = "8.0.0", default-features = false }
+notify-debouncer-mini = { version = "0.6.0", default-features = false }
+p256 = "0.13.2"
+paste = "1.0.15"
+prometheus = "0.14.0"
+quartz_nbt = "0.2.9"
+quick-xml = "0.37.5"
+rand = "=0.8.5"  # Locked on 0.8 until argon2 and p256 update to 0.9
+rand_chacha = "=0.3.1"  # Locked on 0.3 until we can update rand to 0.9
+redis = "0.31.0"
+regex = "1.11.1"
+reqwest = { version = "0.12.15", default-features = false }
+rust-s3 = { version = "0.35.1", default-features = false, features = [
+  "fail-on-err",
+  "tags",
+  "tokio-rustls-tls",
+] }
+rust_decimal = { version = "1.37.1", features = [
+  "serde-with-float",
+  "serde-with-str",
+] }
+rust_iso3166 = "0.1.14"
+rusty-money = "0.4.1"
+sentry = { version = "0.38.1", default-features = false, features = [
+  "backtrace",
+  "contexts",
+  "debug-images",
+  "panic",
+  "reqwest",
+  "rustls",
+] }
+sentry-actix = "0.38.1"
+serde = "1.0.219"
+serde-xml-rs = "0.8.0"  # Also an XML (de)serializer, consider dropping yaserde in favor of this
+serde_bytes = "0.11.17"
+serde_cbor = "0.11.2"
+serde_ini = "0.2.0"
+serde_json = "1.0.140"
+serde_with = "3.12.0"
+sha1 = "0.10.6"
+sha1_smol = { version = "1.0.1", features = ["std"] }
+sha2 = "0.10.9"
+spdx = "0.10.8"
+sqlx = { version = "0.8.5", default-features = false }
+sysinfo = { version = "0.35.1", default-features = false }
+tar = "0.4.44"
+tauri = "2.5.1"
+tauri-build = "2.2.0"
+tauri-plugin-deep-link = "2.2.1"
+tauri-plugin-dialog = "2.2.1"
+tauri-plugin-opener = "2.2.6"
+tauri-plugin-os = "2.2.1"
+tauri-plugin-single-instance = "2.2.3"
+tauri-plugin-updater = { version = "2.7.1", default-features = false, features = [
+  "rustls-tls",
+  "zip",
+] }
+tauri-plugin-window-state = "2.2.2"
+tempfile = "3.20.0"
+theseus = { path = "packages/app-lib" }
+thiserror = "2.0.12"
+tikv-jemalloc-ctl = "0.6.0"
+tikv-jemallocator = "0.6.0"
+tokio = "1.45.0"
+tokio-stream = "0.1.17"
+tokio-util = "0.7.15"
+totp-rs = "5.7.0"
+tracing = "0.1.41"
+tracing-actix-web = "0.7.18"
+tracing-error = "0.2.1"
+tracing-subscriber = "0.3.19"
+url = "2.5.4"
+urlencoding = "2.1.3"
+uuid = "1.16.0"
+validator = "0.20.0"
+webp = { version = "0.3.0", default-features = false }
+whoami = "1.6.0"
+winreg = "0.55.0"
+woothee = "0.13.0"
+yaserde = "0.12.0"
+zip = { version = "3.0.0", default-features = false, features = [
+  "bzip2",
+  "deflate",
+  "deflate64",
+  "zstd",
+] }
+zxcvbn = "3.1.0"
+
+[patch.crates-io]
+wry = { git = "https://github.com/modrinth/wry", rev = "cafdaa9" }
+
 # Optimize for speed and reduce size on release builds
 [profile.release]
-panic = "abort" # Strip expensive panic clean-up logic
-codegen-units = 1 # Compile crates one after another so the compiler can optimize better
-lto = true # Enables link to optimizations
-opt-level = "s" # Optimize for binary size
-strip = true # Remove debug symbols
+opt-level = "s"  # Optimize for binary size
+strip = true  # Remove debug symbols
+lto = true  # Enables link to optimizations
+panic = "abort"  # Strip expensive panic clean-up logic
+codegen-units = 1  # Compile crates one after another so the compiler can optimize better
 
 [profile.dev.package.sqlx-macros]
 opt-level = 3
-
-[patch.crates-io]
-wry = { git = "https://github.com/modrinth/wry", rev ="e88d4a1" }

apps/app-frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@modrinth/app-frontend",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,12 +16,13 @@
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
     "@sentry/vue": "^8.27.0",
-    "@tauri-apps/api": "^2.1.1",
-    "@tauri-apps/plugin-dialog": "^2.2.0",
-    "@tauri-apps/plugin-os": "^2.2.0",
-    "@tauri-apps/plugin-opener": "^2.2.1",
-    "@tauri-apps/plugin-updater": "^2.3.0",
-    "@tauri-apps/plugin-window-state": "^2.2.0",
+    "@geometrically/minecraft-motd-parser": "^1.1.4",
+    "@tauri-apps/api": "^2.5.0",
+    "@tauri-apps/plugin-dialog": "^2.2.1",
+    "@tauri-apps/plugin-os": "^2.2.1",
+    "@tauri-apps/plugin-opener": "^2.2.6",
+    "@tauri-apps/plugin-updater": "^2.7.1",
+    "@tauri-apps/plugin-window-state": "^2.2.2",
     "@vintl/vintl": "^4.4.1",
     "dayjs": "^1.11.10",
     "floating-vue": "^5.2.2",
@@ -50,7 +51,8 @@
     "tsconfig": "workspace:*",
     "typescript": "^5.5.4",
     "vite": "^5.4.6",
-    "vue-tsc": "^2.1.6"
+    "vue-tsc": "^2.1.6",
+    "@taijased/vue-render-tracker": "^1.0.7"
   },
   "packageManager": "pnpm@9.4.0",
   "web-types": "../../web-types.json"

apps/app-frontend/src/App.vue

@@ -1,28 +1,37 @@
 <script setup>
-import { computed, ref, onMounted, watch, onUnmounted } from 'vue'
-import { RouterView, useRouter, useRoute } from 'vue-router'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
 import {
   ArrowBigUpDashIcon,
-  LogInIcon,
-  HomeIcon,
-  LibraryIcon,
-  PlusIcon,
-  SettingsIcon,
-  XIcon,
-  DownloadIcon,
   CompassIcon,
-  MinimizeIcon,
-  MaximizeIcon,
-  RestoreIcon,
+  DownloadIcon,
+  HomeIcon,
+  LeftArrowIcon,
+  LibraryIcon,
+  LogInIcon,
   LogOutIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+  PlusIcon,
+  RestoreIcon,
   RightArrowIcon,
+  SettingsIcon,
+  WorldIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, ButtonStyled, Notifications, OverflowMenu } from '@modrinth/ui'
+import {
+  Avatar,
+  Button,
+  ButtonStyled,
+  Notifications,
+  OverflowMenu,
+  useRelativeTime,
+} from '@modrinth/ui'
 import { useLoading, useTheming } from '@/store/state'
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { get } from '@/helpers/settings'
+import { get } from '@/helpers/settings.ts'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
@@ -31,12 +40,12 @@ import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
 import { handleError, useNotifications } from '@/store/notifications.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { type } from '@tauri-apps/plugin-os'
-import { isDev, getOS, restartApp } from '@/helpers/utils.js'
-import { initAnalytics, debugAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { getOS, isDev, restartApp } from '@/helpers/utils.js'
+import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { getVersion } from '@tauri-apps/api/app'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
-import { install_from_file } from './helpers/pack'
+import { create_profile_and_install_from_file } from './helpers/pack'
 import { useError } from '@/store/error.js'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
@@ -50,7 +59,7 @@ import { renderString } from '@modrinth/utils'
 import { useFetch } from '@/helpers/fetch.js'
 import { check } from '@tauri-apps/plugin-updater'
 import NavButton from '@/components/ui/NavButton.vue'
-import { get as getCreds, logout, login } from '@/helpers/mr_auth.js'
+import { get as getCreds, login, logout } from '@/helpers/mr_auth.js'
 import { get_user } from '@/helpers/cache.js'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import dayjs from 'dayjs'
@@ -60,6 +69,8 @@ import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 
+const formatRelativeTime = useRelativeTime()
+
 const themeStore = useTheming()
 
 const news = ref([])
@@ -165,11 +176,17 @@ async function setupApp() {
     `https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
     'criticalAnnouncements',
     true,
-  ).then((res) => {
-    if (res && res.header && res.body) {
-      criticalErrorMessage.value = res
-    }
-  })
+  )
+    .then((res) => {
+      if (res && res.header && res.body) {
+        criticalErrorMessage.value = res
+      }
+    })
+    .catch(() => {
+      console.log(
+        `No critical announcement found at https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
+      )
+    })
 
   useFetch(`https://modrinth.com/blog/news.json`, 'news', true).then((res) => {
     if (res && res.articles) {
@@ -256,25 +273,19 @@ themeStore.$subscribe(() => {
   sidebarToggled.value = !themeStore.toggleSidebar
 })
 
-const forceSidebar = ref(false)
+const forceSidebar = computed(
+  () => route.path.startsWith('/browse') || route.path.startsWith('/project'),
+)
 const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
 const showAd = computed(() => !(!sidebarVisible.value || hasPlus.value))
 
-router.afterEach((to) => {
-  forceSidebar.value = to.path.startsWith('/browse') || to.path.startsWith('/project')
-})
-
-const currentTimeout = ref(null)
 watch(
   showAd,
   () => {
     if (!showAd.value) {
-      if (currentTimeout.value) clearTimeout(currentTimeout.value)
       hide_ads_window(true)
     } else {
-      currentTimeout.value = setTimeout(() => {
-        init_ads_window(true)
-      }, 400)
+      init_ads_window(true)
     }
   },
   { immediate: true },
@@ -301,7 +312,7 @@ async function handleCommand(e) {
   if (e.event === 'RunMRPack') {
     // RunMRPack should directly install a local mrpack given a path
     if (e.path.endsWith('.mrpack')) {
-      await install_from_file(e.path).catch(handleError)
+      await create_profile_and_install_from_file(e.path).catch(handleError)
       trackEvent('InstanceCreate', {
         source: 'CreationModalFileDrop',
       })
@@ -364,7 +375,7 @@ function handleAuxClick(e) {
 <template>
   <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
   <div id="teleports"></div>
-  <div v-if="stateInitialized" class="app-grid-layout relative">
+  <div v-if="stateInitialized" class="app-grid-layout experimental-styles-within relative">
     <Suspense>
       <AppSettingsModal ref="settingsModal" />
     </Suspense>
@@ -377,6 +388,9 @@ function handleAuxClick(e) {
       <NavButton v-tooltip.right="'Home'" to="/">
         <HomeIcon />
       </NavButton>
+      <NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
+        <WorldIcon />
+      </NavButton>
       <NavButton
         v-tooltip.right="'Discover content'"
         to="/browse/modpack"
@@ -443,6 +457,20 @@ function handleAuxClick(e) {
     <div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
       <div data-tauri-drag-region class="flex p-3">
         <ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" />
+        <div class="flex items-center gap-1 ml-3">
+          <button
+            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            @click="router.back()"
+          >
+            <LeftArrowIcon />
+          </button>
+          <button
+            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            @click="router.forward()"
+          >
+            <RightArrowIcon />
+          </button>
+        </div>
         <Breadcrumbs class="pt-[2px]" />
       </div>
       <section class="flex ml-auto items-center">
@@ -464,7 +492,7 @@ function handleAuxClick(e) {
             <RunningAppBar />
           </Suspense>
         </div>
-        <section v-if="!nativeDecorations" class="window-controls">
+        <section v-if="!nativeDecorations" class="window-controls" data-tauri-drag-region-exclude>
           <Button class="titlebar-button" icon-only @click="() => getCurrentWindow().minimize()">
             <MinimizeIcon />
           </Button>
@@ -512,6 +540,16 @@ function handleAuxClick(e) {
           width: 'calc(100% - var(--right-bar-width))',
         }"
       ></div>
+      <div
+        v-if="criticalErrorMessage"
+        class="m-6 mb-0 flex flex-col border-red bg-bg-red rounded-2xl border-2 border-solid p-4 gap-1 font-semibold text-contrast"
+      >
+        <h1 class="m-0 text-lg font-extrabold">{{ criticalErrorMessage.header }}</h1>
+        <div
+          class="markdown-body text-primary"
+          v-html="renderString(criticalErrorMessage.body ?? '')"
+        ></div>
+      </div>
       <RouterView v-slot="{ Component }">
         <template v-if="Component">
           <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
@@ -561,7 +599,7 @@ function handleAuxClick(e) {
                 </h4>
                 <p class="my-1 text-sm text-secondary leading-tight">{{ item.summary }}</p>
                 <p class="text-right text-sm text-secondary opacity-60 leading-tight m-0">
-                  {{ dayjs(item.date).fromNow() }}
+                  {{ formatRelativeTime(dayjs(item.date).toISOString()) }}
                 </p>
               </a>
               <hr
@@ -583,12 +621,6 @@ function handleAuxClick(e) {
         <PromotionWrapper />
       </template>
     </div>
-    <div class="view">
-      <div v-if="criticalErrorMessage" class="critical-error-banner" data-tauri-drag-region>
-        <h1>{{ criticalErrorMessage.header }}</h1>
-        <div class="markdown-body" v-html="renderString(criticalErrorMessage.body ?? '')"></div>
-      </div>
-    </div>
   </div>
   <URLConfirmModal ref="urlModal" />
   <Notifications ref="notificationsWrapper" sidebar />
@@ -691,6 +723,14 @@ function handleAuxClick(e) {
   grid-area: status;
 }
 
+[data-tauri-drag-region] {
+  -webkit-app-region: drag;
+}
+
+[data-tauri-drag-region-exclude] {
+  -webkit-app-region: no-drag;
+}
+
 .app-contents {
   position: absolute;
   z-index: 1;
@@ -704,7 +744,7 @@ function handleAuxClick(e) {
 
   display: grid;
   grid-template-columns: 1fr 0px;
-  transition: grid-template-columns 0.4s ease-in-out;
+  // transition: grid-template-columns 0.4s ease-in-out;
 
   &.sidebar-enabled {
     grid-template-columns: 1fr 300px;

apps/app-frontend/src/assets/stylesheets/global.scss

@@ -2,8 +2,44 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'bundled-minecraft-font-mrapp';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'bundled-minecraft-font-mrapp';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'bundled-minecraft-font-mrapp';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'bundled-minecraft-font-mrapp';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 600;
+  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
+}
+
+.font-minecraft {
+  font-family: 'bundled-minecraft-font-mrapp', monospace;
+}
+
 :root {
-  font-family: var(--font-standard);
+  font-family: var(--font-standard, sans-serif), sans-serif;
   color-scheme: dark;
   --view-width: calc(100% - 5rem);
   --expanded-view-width: calc(100% - 13rem);

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"

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

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

@@ -1,11 +1,20 @@
 <script setup>
-import { XIcon, HammerIcon, LogInIcon, UpdatedIcon } from '@modrinth/assets'
+import {
+  CheckIcon,
+  DropdownIcon,
+  XIcon,
+  HammerIcon,
+  LogInIcon,
+  UpdatedIcon,
+  CopyIcon,
+} from '@modrinth/assets'
 import { ChatIcon } from '@/assets/icons'
-import { ref } from 'vue'
+import { ButtonStyled, Collapsible } from '@modrinth/ui'
+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'
@@ -13,6 +22,7 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 const errorModal = ref()
 const error = ref()
 const closable = ref(true)
+const errorCollapsed = ref(false)
 
 const title = ref('An error occurred')
 const errorType = ref('unknown')
@@ -118,6 +128,26 @@ async function repairInstance() {
   }
   loadingRepair.value = false
 }
+
+const hasDebugInfo = computed(
+  () =>
+    errorType.value === 'directory_move' ||
+    errorType.value === 'minecraft_auth' ||
+    errorType.value === 'state_init' ||
+    errorType.value === 'no_loader_version',
+)
+
+const debugInfo = computed(() => error.value.message ?? error.value ?? 'No error message.')
+
+const copied = ref(false)
+
+async function copyToClipboard(text) {
+  await navigator.clipboard.writeText(text)
+  copied.value = true
+  setTimeout(() => {
+    copied.value = false
+  }, 3000)
+}
 </script>
 
 <template>
@@ -244,16 +274,9 @@ async function repairInstance() {
           </div>
         </template>
         <template v-else>
-          {{ error.message ?? error }}
+          {{ debugInfo }}
         </template>
-        <template
-          v-if="
-            errorType === 'directory_move' ||
-            errorType === 'minecraft_auth' ||
-            errorType === 'state_init' ||
-            errorType === 'no_loader_version'
-          "
-        >
+        <template v-if="hasDebugInfo">
           <hr />
           <p>
             If nothing is working and you need help, visit
@@ -261,16 +284,39 @@ async function repairInstance() {
             and start a chat using the widget in the bottom right and we will be more than happy to
             assist! Make sure to provide the following debug information to the agent:
           </p>
-          <details>
-            <summary>Debug information</summary>
-            {{ error.message ?? error }}
-          </details>
         </template>
       </div>
-      <div class="input-group push-right">
-        <a :href="supportLink" class="btn" @click="errorModal.hide()"><ChatIcon /> Get support</a>
-        <button v-if="closable" class="btn" @click="errorModal.hide()"><XIcon /> Close</button>
+      <div class="flex items-center gap-2">
+        <ButtonStyled>
+          <a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+        </ButtonStyled>
+        <ButtonStyled v-if="closable">
+          <button @click="errorModal.hide()"><XIcon /> Close</button>
+        </ButtonStyled>
+        <ButtonStyled v-if="hasDebugInfo">
+          <button :disabled="copied" @click="copyToClipboard(debugInfo)">
+            <template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
+            <template v-else> <CopyIcon /> Copy debug info </template>
+          </button>
+        </ButtonStyled>
       </div>
+      <template v-if="hasDebugInfo">
+        <div class="bg-button-bg rounded-xl mt-2 overflow-clip">
+          <button
+            class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
+            @click="errorCollapsed = !errorCollapsed"
+          >
+            <span class="text-contrast font-extrabold m-0">Debug information:</span>
+            <DropdownIcon
+              class="h-5 w-5 text-secondary transition-transform"
+              :class="{ 'rotate-180': !errorCollapsed }"
+            />
+          </button>
+          <Collapsible :collapsed="errorCollapsed">
+            <pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+          </Collapsible>
+        </div>
+      </template>
     </div>
   </ModalWrapper>
 </template>

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

@@ -151,7 +151,7 @@ const exportPack = async () => {
           </div>
         </div>
         <div v-if="showingFiles" class="table-content">
-          <div v-for="[path, children] of folders" :key="path.name" class="table-row">
+          <div v-for="[path, children] in folders" :key="path.name" class="table-row">
             <div class="table-cell file-entry">
               <div class="file-primary">
                 <Checkbox

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

@@ -1,10 +1,17 @@
 <script setup>
-import { onUnmounted, ref, computed, onMounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SpinnerIcon, GameIcon, TimerIcon, StopCircleIcon, PlayIcon } from '@modrinth/assets'
-import { ButtonStyled, Avatar } from '@modrinth/ui'
+import {
+  DownloadIcon,
+  GameIcon,
+  PlayIcon,
+  SpinnerIcon,
+  StopCircleIcon,
+  TimerIcon,
+} from '@modrinth/assets'
+import { Avatar, ButtonStyled, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { kill, run } from '@/helpers/profile'
+import { finish_install, kill, run } from '@/helpers/profile'
 import { get_by_profile_path } from '@/helpers/process'
 import { process_listener } from '@/helpers/events'
 import { handleError } from '@/store/state.js'
@@ -12,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: {
@@ -35,12 +41,15 @@ const props = defineProps({
 })
 
 const playing = ref(false)
-
+const loading = ref(false)
 const modLoading = computed(
   () =>
-    currentEvent.value === 'installing' || (currentEvent.value === 'launched' && !playing.value),
+    loading.value ||
+    currentEvent.value === 'installing' ||
+    (currentEvent.value === 'launched' && !playing.value),
 )
-const installing = computed(() => props.instance.install_stage !== 'installed')
+const installing = computed(() => props.instance.install_stage.includes('installing'))
+const installed = computed(() => props.instance.install_stage === 'installed')
 
 const router = useRouter()
 
@@ -56,6 +65,7 @@ const checkProcess = async () => {
 
 const play = async (e, context) => {
   e?.stopPropagation()
+  loading.value = true
   await run(props.instance.path)
     .catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
     .finally(() => {
@@ -65,6 +75,7 @@ const play = async (e, context) => {
         source: context,
       })
     })
+  loading.value = false
 }
 
 const stop = async (e, context) => {
@@ -80,6 +91,12 @@ const stop = async (e, context) => {
   })
 }
 
+const repair = async (e) => {
+  e?.stopPropagation()
+
+  await finish_install(props.instance)
+}
+
 const openFolder = async () => {
   await showProfileInFolder(props.instance.path)
 }
@@ -118,7 +135,7 @@ onUnmounted(() => unlisten())
 <template>
   <template v-if="compact">
     <div
-      class="button-base card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer active:scale-[0.98] transition-transform"
+      class="card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer hover:brightness-90 transition-all"
       @click="seeInstance"
       @mouseenter="checkProcess"
     >
@@ -155,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>
@@ -191,6 +210,15 @@ onUnmounted(() => unlisten())
             class="animate-spin w-8 h-8"
             tabindex="-1"
           />
+          <ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
+            <button
+              v-tooltip="'Repair'"
+              class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+              @click="(e) => repair(e)"
+            >
+              <DownloadIcon />
+            </button>
+          </ButtonStyled>
           <ButtonStyled v-else size="large" color="brand" circular>
             <button
               v-tooltip="'Play'"

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>
@@ -199,16 +199,16 @@
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import {
-  PlusIcon,
-  UploadIcon,
-  XIcon,
   CodeIcon,
   FolderOpenIcon,
-  InfoIcon,
   FolderSearchIcon,
+  InfoIcon,
+  PlusIcon,
   UpdatedIcon,
+  UploadIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Chips, Checkbox } from '@modrinth/ui'
+import { Avatar, Button, Checkbox, Chips } from '@modrinth/ui'
 import { computed, onUnmounted, ref, shallowRef } from 'vue'
 import { get_loaders } from '@/helpers/tags'
 import { create } from '@/helpers/profile'
@@ -218,7 +218,7 @@ import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
 import { handleError } from '@/store/notifications.js'
 import Multiselect from 'vue-multiselect'
 import { trackEvent } from '@/helpers/analytics'
-import { install_from_file } from '@/helpers/pack.js'
+import { create_profile_and_install_from_file } from '@/helpers/pack.js'
 import {
   get_default_launcher_path,
   get_importable_instances,
@@ -263,7 +263,7 @@ defineExpose({
       hide()
       const { paths } = event.payload
       if (paths && paths.length > 0 && paths[0].endsWith('.mrpack')) {
-        await install_from_file(paths[0]).catch(handleError)
+        await create_profile_and_install_from_file(paths[0]).catch(handleError)
         trackEvent('InstanceCreate', {
           source: 'CreationModalFileDrop',
         })
@@ -419,7 +419,7 @@ const openFile = async () => {
   const newProject = await open({ multiple: false })
   if (!newProject) return
   hide()
-  await install_from_file(newProject.path ?? newProject).catch(handleError)
+  await create_profile_and_install_from_file(newProject.path ?? newProject).catch(handleError)
 
   trackEvent('InstanceCreate', {
     source: 'CreationModalFileOpen',

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

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>

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

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

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

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

apps/app-frontend/src/components/ui/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

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

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

apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
 import { Button } from '@modrinth/ui'
-import { install as pack_install } from '@/helpers/pack'
+import { create_profile_and_install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
 import { trackEvent } from '@/helpers/analytics'
 import { handleError } from '@/store/state.js'
@@ -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,9 +3,9 @@ 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 { InstanceSettingsTabProps, AppSettings } from '../../../helpers/types'
+import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
 
@@ -114,7 +114,6 @@ const messages = defineMessages({
       <Toggle
         id="fullscreen"
         :model-value="overrideWindowSettings ? fullscreenSetting : globalSettings.force_fullscreen"
-        :checked="fullscreenSetting"
         :disabled="!overrideWindowSettings"
         @update:model-value="
           (e) => {

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()
 
@@ -41,6 +41,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  markdown: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits(['proceed'])
@@ -80,6 +84,7 @@ function proceed() {
     :on-hide="onModalHide"
     :noblur="!themeStore.advancedRendering"
     :danger="danger"
+    :markdown="markdown"
     @proceed="proceed"
   />
 </template>

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>

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()
 
@@ -43,7 +43,7 @@ function onModalHide() {
   if (props.showAdOnClose) {
     show_ads_window()
   }
-  props.onHide()
+  props.onHide?.()
 }
 </script>
 

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 { Toggle, ThemeSelector, TeleportDropdownMenu } from '@modrinth/ui'
+import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
-import { get, set } from '@/helpers/settings'
-import { watch, ref } from 'vue'
+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"
   />
 
@@ -46,7 +47,6 @@ watch(
     <Toggle
       id="advanced-rendering"
       :model-value="themeStore.advancedRendering"
-      :checked="themeStore.advancedRendering"
       @update:model-value="
         (e) => {
           themeStore.advancedRendering = e
@@ -61,16 +61,7 @@ watch(
       <h2 class="m-0 text-lg font-extrabold text-contrast">Native Decorations</h2>
       <p class="m-0 mt-1">Use system window frame (app restart required).</p>
     </div>
-    <Toggle
-      id="native-decorations"
-      :model-value="settings.native_decorations"
-      :checked="settings.native_decorations"
-      @update:model-value="
-        (e) => {
-          settings.native_decorations = e
-        }
-      "
-    />
+    <Toggle id="native-decorations" v-model="settings.native_decorations" />
   </div>
 
   <div class="mt-4 flex items-center justify-between">
@@ -78,16 +69,7 @@ watch(
       <h2 class="m-0 text-lg font-extrabold text-contrast">Minimize launcher</h2>
       <p class="m-0 mt-1">Minimize the launcher when a Minecraft process starts.</p>
     </div>
-    <Toggle
-      id="minimize-launcher"
-      :model-value="settings.hide_on_process_start"
-      :checked="settings.hide_on_process_start"
-      @update:model-value="
-        (e) => {
-          settings.hide_on_process_start = e
-        }
-      "
-    />
+    <Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
   </div>
 
   <div class="mt-4 flex items-center justify-between">
@@ -99,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>
@@ -111,7 +111,6 @@ watch(
     <Toggle
       id="toggle-sidebar"
       :model-value="settings.toggle_sidebar"
-      :checked="settings.toggle_sidebar"
       @update:model-value="
         (e) => {
           settings.toggle_sidebar = e

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'
@@ -57,16 +57,7 @@ watch(
         </p>
       </div>
 
-      <Toggle
-        id="fullscreen"
-        :model-value="settings.force_fullscreen"
-        :checked="settings.force_fullscreen"
-        @update:model-value="
-          (e) => {
-            settings.force_fullscreen = e
-          }
-        "
-      />
+      <Toggle id="fullscreen" v-model="settings.force_fullscreen" />
     </div>
 
     <div class="flex items-center justify-between gap-4">

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,15 +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)"
-      :checked="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'
 
@@ -30,16 +30,7 @@ watch(
         option, you opt out and ads will no longer be shown based on your interests.
       </p>
     </div>
-    <Toggle
-      id="personalized-ads"
-      :model-value="settings.personalized_ads"
-      :checked="settings.personalized_ads"
-      @update:model-value="
-        (e) => {
-          settings.personalized_ads = e
-        }
-      "
-    />
+    <Toggle id="personalized-ads" v-model="settings.personalized_ads" />
   </div>
 
   <div class="mt-4 flex items-center justify-between gap-4">
@@ -51,16 +42,7 @@ watch(
         longer be collected.
       </p>
     </div>
-    <Toggle
-      id="opt-out-analytics"
-      :model-value="settings.telemetry"
-      :checked="settings.telemetry"
-      @update:model-value="
-        (e) => {
-          settings.telemetry = e
-        }
-      "
-    />
+    <Toggle id="opt-out-analytics" v-model="settings.telemetry" />
   </div>
 
   <div class="mt-4 flex items-center justify-between gap-4">
@@ -75,10 +57,6 @@ watch(
         as those added by mods. (app restart required to take effect)
       </p>
     </div>
-    <Toggle
-      id="disable-discord-rpc"
-      v-model="settings.discord_rpc"
-      :checked="settings.discord_rpc"
-    />
+    <Toggle id="disable-discord-rpc" v-model="settings.discord_rpc" />
   </div>
 </template>

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

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

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>

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>

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>

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>

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>

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>

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>

apps/app-frontend/src/helpers/analytics.js

@@ -1,8 +1,9 @@
 import { posthog } from 'posthog-js'
 
 export const initAnalytics = () => {
-  posthog.init('phc_hm2ihMpTAoE86xIm7XzsCB8RPiTRKivViK5biiHedm', {
+  posthog.init('phc_9Iqi6lFs9sr5BSqh9RRNRSJ0mATS9PSgirDiX3iOYJ', {
     persistence: 'localStorage',
+    api_host: 'https://posthog.modrinth.com',
   })
 }
 

apps/app-frontend/src/helpers/events.js

@@ -62,7 +62,7 @@ export async function process_listener(callback) {
     ProfilePayload {
         uuid: unique identification of the process in the state (currently identified by path, but that will change)
         name: name of the profile
-        profile_path: relative path to profile (used for path identification)
+        profile_path: relative path toprofile_listener profile (used for path identification)
         path: path to profile (used for opening the profile in the OS file explorer)
         event: event type ("Created", "Added", "Edited", "Removed")
     }

apps/app-frontend/src/helpers/pack.js

@@ -7,7 +7,13 @@ import { invoke } from '@tauri-apps/api/core'
 import { create } from './profile'
 
 // Installs pack from a version ID
-export async function install(projectId, versionId, packTitle, iconUrl) {
+export async function create_profile_and_install(
+  projectId,
+  versionId,
+  packTitle,
+  iconUrl,
+  createInstanceCallback = () => {},
+) {
   const location = {
     type: 'fromVersionId',
     project_id: projectId,
@@ -24,12 +30,23 @@ export async function install(projectId, versionId, packTitle, iconUrl) {
     null,
     true,
   )
+  createInstanceCallback(profile)
 
   return await invoke('plugin:pack|pack_install', { location, profile })
 }
 
+export async function install_to_existing_profile(projectId, versionId, title, profilePath) {
+  const location = {
+    type: 'fromVersionId',
+    project_id: projectId,
+    version_id: versionId,
+    title,
+  }
+  return await invoke('plugin:pack|pack_install', { location, profile: profilePath })
+}
+
 // Installs pack from a path
-export async function install_from_file(path) {
+export async function create_profile_and_install_from_file(path) {
   const location = {
     type: 'fromFile',
     path: path,

apps/app-frontend/src/helpers/profile.js

@@ -4,6 +4,8 @@
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
+import { install_to_existing_profile } from '@/helpers/pack.js'
+import { handleError } from '@/store/notifications.js'
 
 /// Add instance
 /*
@@ -186,3 +188,17 @@ export async function edit(path, editProfile) {
 export async function edit_icon(path, iconPath) {
   return await invoke('plugin:profile|profile_edit_icon', { path, iconPath })
 }
+
+export async function finish_install(instance) {
+  if (instance.install_stage !== 'pack_installed') {
+    let linkedData = instance.linked_data
+    await install_to_existing_profile(
+      linkedData.project_id,
+      linkedData.version_id,
+      instance.name,
+      instance.path,
+    ).catch(handleError)
+  } else {
+    await install(instance.path, false).catch(handleError)
+  }
+}

apps/app-frontend/src/helpers/settings.js

@@ -1,43 +0,0 @@
-/**
- * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
- *  and deserialized into a usable JS object.
- */
-import { invoke } from '@tauri-apps/api/core'
-
-// Settings object
-/*
-
-Settings {
-    "memory": MemorySettings,
-    "game_resolution": [int int],
-    "custom_java_args": [String ...],
-    "custom_env_args" : [(string, string) ... ]>,
-    "java_globals": Hash of (string, Path),
-    "default_user": Uuid string (can be null),
-    "hooks": Hooks,
-    "max_concurrent_downloads": uint,
-    "version": u32,
-    "collapsed_navigation": bool,
-}
-
-Memorysettings {
-    "min": u32, can be null,
-    "max": u32,
-}
-
-*/
-
-// Get full settings object
-export async function get() {
-  return await invoke('plugin:settings|settings_get')
-}
-
-// Set full settings object
-export async function set(settings) {
-  return await invoke('plugin:settings|settings_set', { settings })
-}
-
-export async function cancel_directory_change() {
-  return await invoke('plugin:settings|cancel_directory_change')
-}

apps/app-frontend/src/helpers/settings.ts

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

apps/app-frontend/src/helpers/types.d.ts

@@ -32,7 +32,12 @@ type GameInstance = {
   hooks: Hooks
 }
 
-type InstallStage = 'installed' | 'installing' | 'pack_installing' | 'not_installed'
+type InstallStage =
+  | 'installed'
+  | 'minecraft_installing'
+  | 'pack_installed'
+  | 'pack_installing'
+  | 'not_installed'
 
 type LinkedData = {
   project_id: ModrinthId
@@ -43,6 +48,32 @@ type LinkedData = {
 
 type InstanceLoader = 'vanilla' | 'forge' | 'fabric' | 'quilt' | 'neoforge'
 
+type ContentFile = {
+  hash: string
+  file_name: string
+  size: number
+  metadata?: FileMetadata
+  update_version_id?: string
+  project_type: ContentFileProjectType
+}
+
+type FileMetadata = {
+  project_id: string
+  version_id: string
+}
+
+type ContentFileProjectType = 'mod' | 'datapack' | 'resourcepack' | 'shaderpack'
+
+type CacheBehaviour =
+  // Serve expired data. If fetch fails / launcher is offline, errors are ignored
+  | 'stale_while_revalidate_skip_offline'
+  // Serve expired data, revalidate in background
+  | 'stale_while_revalidate'
+  // Must revalidate if data is expired
+  | 'must_revalidate'
+  // Ignore cache- always fetch updated data from origin
+  | 'bypass'
+
 type MemorySettings = {
   maximum: number
 }
@@ -83,6 +114,7 @@ type AppSettings = {
   collapsed_navigation: boolean
   advanced_rendering: boolean
   native_decorations: boolean
+  worlds_in_home: boolean
 
   telemetry: boolean
   discord_rpc: boolean

apps/app-frontend/src/helpers/utils.js

@@ -37,6 +37,13 @@ export async function restartApp() {
   return await invoke('restart_app')
 }
 
+/**
+ * @deprecated This method is no longer needed, and just returns its parameter
+ */
+export function sanitizePotentialFileUrl(url) {
+  return url
+}
+
 export const releaseColor = (releaseType) => {
   switch (releaseType) {
     case 'release':
@@ -49,3 +56,7 @@ export const releaseColor = (releaseType) => {
       return ''
   }
 }
+
+export async function copyToClipboard(text) {
+  await navigator.clipboard.writeText(text)
+}

apps/app-frontend/src/helpers/worlds.ts

@@ -0,0 +1,327 @@
+import { invoke } from '@tauri-apps/api/core'
+import { get_full_path } from '@/helpers/profile'
+import { openPath } from '@/helpers/utils'
+import { autoToHTML } from '@geometrically/minecraft-motd-parser'
+import dayjs from 'dayjs'
+import type { GameVersion } from '@modrinth/ui'
+
+type BaseWorld = {
+  name: string
+  last_played?: string
+  icon?: string
+  display_status: DisplayStatus
+  type: WorldType
+}
+
+export type WorldType = 'singleplayer' | 'server'
+export type DisplayStatus = 'normal' | 'hidden' | 'favorite'
+
+export type SingleplayerWorld = BaseWorld & {
+  type: 'singleplayer'
+  path: string
+  game_mode: SingleplayerGameMode
+  hardcore: boolean
+  locked: boolean
+}
+
+export type ServerWorld = BaseWorld & {
+  type: 'server'
+  index: number
+  address: string
+  pack_status: ServerPackStatus
+}
+
+export type World = SingleplayerWorld | ServerWorld
+
+export type WorldWithProfile = {
+  profile: string
+} & World
+
+export type SingleplayerGameMode = 'survival' | 'creative' | 'adventure' | 'spectator'
+export type ServerPackStatus = 'enabled' | 'disabled' | 'prompt'
+
+export type ServerStatus = {
+  // https://minecraft.wiki/w/Text_component_format
+  description?: string | Chat
+  players?: {
+    max: number
+    online: number
+    sample: { name: string; id: string }[]
+  }
+  version?: {
+    name: string
+    protocol: number
+  }
+  favicon?: string
+  enforces_secure_chat: boolean
+  ping?: number
+}
+
+export interface Chat {
+  text: string
+  bold: boolean
+  italic: boolean
+  underlined: boolean
+  strikethrough: boolean
+  obfuscated: boolean
+  color?: string
+  extra: Chat[]
+}
+
+export type ServerData = {
+  refreshing: boolean
+  status?: ServerStatus
+  rawMotd?: string | Chat
+  renderedMotd?: string
+}
+
+export async function get_recent_worlds(
+  limit: number,
+  displayStatuses?: DisplayStatus[],
+): Promise<WorldWithProfile[]> {
+  return await invoke('plugin:worlds|get_recent_worlds', { limit, displayStatuses })
+}
+
+export async function get_profile_worlds(path: string): Promise<World[]> {
+  return await invoke('plugin:worlds|get_profile_worlds', { path })
+}
+
+export async function get_singleplayer_world(
+  instance: string,
+  world: string,
+): Promise<SingleplayerWorld> {
+  return await invoke('plugin:worlds|get_singleplayer_world', { instance, world })
+}
+
+export async function set_world_display_status(
+  instance: string,
+  worldType: WorldType,
+  worldId: string,
+  displayStatus: DisplayStatus,
+): Promise<void> {
+  return await invoke('plugin:worlds|set_world_display_status', {
+    instance,
+    worldType,
+    worldId,
+    displayStatus,
+  })
+}
+
+export async function rename_world(
+  instance: string,
+  world: string,
+  newName: string,
+): Promise<void> {
+  return await invoke('plugin:worlds|rename_world', { instance, world, newName })
+}
+
+export async function reset_world_icon(instance: string, world: string): Promise<void> {
+  return await invoke('plugin:worlds|reset_world_icon', { instance, world })
+}
+
+export async function backup_world(instance: string, world: string): Promise<number> {
+  return await invoke('plugin:worlds|backup_world', { instance, world })
+}
+
+export async function delete_world(instance: string, world: string): Promise<void> {
+  return await invoke('plugin:worlds|delete_world', { instance, world })
+}
+
+export async function add_server_to_profile(
+  path: string,
+  name: string,
+  address: string,
+  packStatus: ServerPackStatus,
+): Promise<number> {
+  return await invoke('plugin:worlds|add_server_to_profile', { path, name, address, packStatus })
+}
+
+export async function edit_server_in_profile(
+  path: string,
+  index: number,
+  name: string,
+  address: string,
+  packStatus: ServerPackStatus,
+): Promise<void> {
+  return await invoke('plugin:worlds|edit_server_in_profile', {
+    path,
+    index,
+    name,
+    address,
+    packStatus,
+  })
+}
+
+export async function remove_server_from_profile(path: string, index: number): Promise<void> {
+  return await invoke('plugin:worlds|remove_server_from_profile', { path, index })
+}
+
+export async function get_profile_protocol_version(path: string): Promise<number | null> {
+  return await invoke('plugin:worlds|get_profile_protocol_version', { path })
+}
+
+export async function get_server_status(
+  address: string,
+  protocolVersion: number | null = null,
+): Promise<ServerStatus> {
+  return await invoke('plugin:worlds|get_server_status', { address, protocolVersion })
+}
+
+export async function start_join_singleplayer_world(path: string, world: string): Promise<unknown> {
+  return await invoke('plugin:worlds|start_join_singleplayer_world', { path, world })
+}
+
+export async function start_join_server(path: string, address: string): Promise<unknown> {
+  return await invoke('plugin:worlds|start_join_server', { path, address })
+}
+
+export async function showWorldInFolder(instancePath: string, worldPath: string) {
+  const fullPath = await get_full_path(instancePath)
+  return await openPath(fullPath + '/saves/' + worldPath)
+}
+
+export function getWorldIdentifier(world: World) {
+  return world.type === 'singleplayer' ? world.path : world.address
+}
+
+export function sortWorlds(worlds: World[]) {
+  worlds.sort((a, b) => {
+    if (!a.last_played) {
+      return 1
+    }
+    if (!b.last_played) {
+      return -1
+    }
+    return dayjs(b.last_played).diff(dayjs(a.last_played))
+  })
+}
+
+export function isSingleplayerWorld(world: World): world is SingleplayerWorld {
+  return world.type === 'singleplayer'
+}
+
+export function isServerWorld(world: World): world is ServerWorld {
+  return world.type === 'server'
+}
+
+export async function refreshServerData(
+  serverData: ServerData,
+  protocolVersion: number | null,
+  address: string,
+): Promise<void> {
+  serverData.refreshing = true
+  await get_server_status(address, protocolVersion)
+    .then((status) => {
+      serverData.status = status
+      if (status.description) {
+        serverData.rawMotd = status.description
+        serverData.renderedMotd = autoToHTML(status.description)
+      }
+    })
+    .catch((err) => {
+      console.error(`Refreshing addr: ${address}`, err)
+    })
+    .finally(() => {
+      serverData.refreshing = false
+    })
+}
+
+export async function refreshServers(
+  worlds: World[],
+  serverData: Record<string, ServerData>,
+  protocolVersion: number | null,
+) {
+  const servers = worlds.filter(isServerWorld)
+  servers.forEach((server) => {
+    if (!serverData[server.address]) {
+      serverData[server.address] = {
+        refreshing: true,
+      }
+    } else {
+      serverData[server.address].refreshing = true
+    }
+  })
+
+  // noinspection ES6MissingAwait - handled with .then by refreshServerData already
+  Promise.all(
+    Object.keys(serverData).map((address) =>
+      refreshServerData(serverData[address], protocolVersion, address),
+    ),
+  )
+}
+
+export async function refreshWorld(worlds: World[], instancePath: string, worldPath: string) {
+  const index = worlds.findIndex((w) => w.type === 'singleplayer' && w.path === worldPath)
+  const newWorld = await get_singleplayer_world(instancePath, worldPath)
+  if (index !== -1) {
+    worlds[index] = newWorld
+  } else {
+    console.info(`Adding new world at path: ${worldPath}.`)
+    worlds.push(newWorld)
+  }
+  sortWorlds(worlds)
+}
+
+export async function handleDefaultProfileUpdateEvent(
+  worlds: World[],
+  instancePath: string,
+  e: ProfileEvent,
+) {
+  if (e.event === 'world_updated') {
+    await refreshWorld(worlds, instancePath, e.world)
+  }
+
+  if (e.event === 'server_joined') {
+    const world = worlds.find(
+      (w) =>
+        w.type === 'server' &&
+        (w.address === `${e.host}:${e.port}` || (e.port == 25565 && w.address == e.host)),
+    )
+    if (world) {
+      world.last_played = e.timestamp
+      sortWorlds(worlds)
+    } else {
+      console.error(`Could not find world for server join event: ${e.host}:${e.port}`)
+    }
+  }
+}
+
+export async function refreshWorlds(instancePath: string): Promise<World[]> {
+  const worlds = await get_profile_worlds(instancePath).catch((err) => {
+    console.error(`Error refreshing worlds for instance: ${instancePath}`, err)
+  })
+  if (worlds) {
+    sortWorlds(worlds)
+  }
+
+  return worlds ?? []
+}
+
+const FIRST_QUICK_PLAY_VERSION = '23w14a'
+
+export function hasQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
+  if (!gameVersions.length) {
+    return false
+  }
+
+  const versionIndex = gameVersions.findIndex((v) => v.version === currentVersion)
+  const targetIndex = gameVersions.findIndex((v) => v.version === FIRST_QUICK_PLAY_VERSION)
+
+  return versionIndex !== -1 && targetIndex !== -1 && versionIndex <= targetIndex
+}
+
+export type ProfileEvent = { profile_path_id: string } & (
+  | {
+      event: 'servers_updated'
+    }
+  | {
+      event: 'world_updated'
+      world: string
+    }
+  | {
+      event: 'server_joined'
+      host: string
+      port: number
+      timestamp: string
+    }
+)

apps/app-frontend/src/locales/en-US/index.json

@@ -20,9 +20,60 @@
   "app.settings.tabs.resource-management": {
     "message": "Resource management"
   },
+  "instance.add-server.add-and-play": {
+    "message": "Add and play"
+  },
+  "instance.add-server.add-server": {
+    "message": "Add server"
+  },
+  "instance.add-server.resource-pack.disabled": {
+    "message": "Disabled"
+  },
+  "instance.add-server.resource-pack.enabled": {
+    "message": "Enabled"
+  },
+  "instance.add-server.resource-pack.prompt": {
+    "message": "Prompt"
+  },
+  "instance.add-server.title": {
+    "message": "Add a server"
+  },
+  "instance.edit-server.title": {
+    "message": "Edit server"
+  },
+  "instance.edit-world.hide-from-home": {
+    "message": "Hide from the Home page"
+  },
+  "instance.edit-world.name": {
+    "message": "Name"
+  },
+  "instance.edit-world.placeholder-name": {
+    "message": "Minecraft World"
+  },
+  "instance.edit-world.reset-icon": {
+    "message": "Reset icon"
+  },
+  "instance.edit-world.title": {
+    "message": "Edit world"
+  },
+  "instance.filter.disabled": {
+    "message": "Disabled projects"
+  },
   "instance.filter.updates-available": {
     "message": "Updates available"
   },
+  "instance.server-modal.address": {
+    "message": "Address"
+  },
+  "instance.server-modal.name": {
+    "message": "Name"
+  },
+  "instance.server-modal.placeholder-name": {
+    "message": "Minecraft Server"
+  },
+  "instance.server-modal.resource-pack": {
+    "message": "Resource pack"
+  },
   "instance.settings.tabs.general": {
     "message": "General"
   },
@@ -305,6 +356,48 @@
   "instance.settings.title": {
     "message": "Settings"
   },
+  "instance.worlds.a_minecraft_server": {
+    "message": "A Minecraft Server"
+  },
+  "instance.worlds.cant_connect": {
+    "message": "Can't connect to server"
+  },
+  "instance.worlds.copy_address": {
+    "message": "Copy address"
+  },
+  "instance.worlds.dont_show_on_home": {
+    "message": "Don't show on Home"
+  },
+  "instance.worlds.filter.available": {
+    "message": "Available"
+  },
+  "instance.worlds.game_already_open": {
+    "message": "Instance is already open"
+  },
+  "instance.worlds.hardcore": {
+    "message": "Hardcore mode"
+  },
+  "instance.worlds.no_quick_play": {
+    "message": "You can only jump straight into worlds on Minecraft 1.20+"
+  },
+  "instance.worlds.play_anyway": {
+    "message": "Play anyway"
+  },
+  "instance.worlds.play_instance": {
+    "message": "Play instance"
+  },
+  "instance.worlds.type.server": {
+    "message": "Server"
+  },
+  "instance.worlds.type.singleplayer": {
+    "message": "Singleplayer"
+  },
+  "instance.worlds.view_instance": {
+    "message": "View instance"
+  },
+  "instance.worlds.world_in_use": {
+    "message": "World is in use"
+  },
   "search.filter.locked.instance": {
     "message": "Provided by the instance"
   },

apps/app-frontend/src/main.js

@@ -6,6 +6,7 @@ import FloatingVue from 'floating-vue'
 import 'floating-vue/dist/style.css'
 import { createPlugin } from '@vintl/vintl/plugin'
 import * as Sentry from '@sentry/vue'
+import { VueScanPlugin } from '@taijased/vue-render-tracker'
 
 const VIntlPlugin = createPlugin({
   controllerOpts: {
@@ -24,6 +25,13 @@ const VIntlPlugin = createPlugin({
   injectInto: [],
 })
 
+const vueScan = new VueScanPlugin({
+  enabled: false, // Enable or disable the tracker
+  showOverlay: true, // Show overlay to visualize renders
+  log: false, // Log render events to the console
+  playSound: false, // Play sound on each render
+})
+
 const pinia = createPinia()
 
 let app = createApp(App)
@@ -35,6 +43,7 @@ Sentry.init({
   tracesSampleRate: 0.1,
 })
 
+app.use(vueScan)
 app.use(router)
 app.use(pinia)
 app.use(FloatingVue, {

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

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

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

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onUnmounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
@@ -8,19 +8,32 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { handleError } from '@/store/notifications.js'
 import dayjs from 'dayjs'
 import { get_search_results } from '@/helpers/cache.js'
-
-const featuredModpacks = ref({})
-const featuredMods = ref({})
-const filter = ref('')
+import type { SearchResult } from '@modrinth/utils'
+import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 
 breadcrumbs.setRootContext({ name: 'Home', link: route.path })
 
-const recentInstances = ref([])
+const instances = ref<GameInstance[]>([])
 
-const offline = ref(!navigator.onLine)
+const featuredModpacks = ref<SearchResult[]>([])
+const featuredMods = ref<SearchResult[]>([])
+const installedModpacksFilter = ref('')
+
+const recentInstances = computed(() =>
+  instances.value
+    .filter((x) => x.last_played)
+    .slice()
+    .sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played))),
+)
+
+const hasFeaturedProjects = computed(
+  () => (featuredModpacks.value?.length ?? 0) + (featuredMods.value?.length ?? 0) > 0,
+)
+
+const offline = ref<boolean>(!navigator.onLine)
 window.addEventListener('offline', () => {
   offline.value = true
 })
@@ -28,34 +41,21 @@ window.addEventListener('online', () => {
   offline.value = false
 })
 
-const getInstances = async () => {
-  const profiles = await list().catch(handleError)
-
-  recentInstances.value = profiles
-    .filter((x) => x.last_played)
-    .sort((a, b) => {
-      const dateA = dayjs(a.last_played)
-      const dateB = dayjs(b.last_played)
-
-      if (dateA.isSame(dateB)) {
-        return a.name.localeCompare(b.name)
-      }
-
-      return dateB - dateA
-    })
+async function fetchInstances() {
+  instances.value = await list().catch(handleError)
 
   const filters = []
-  for (const instance of profiles) {
+  for (const instance of instances.value) {
     if (instance.linked_data && instance.linked_data.project_id) {
       filters.push(`NOT"project_id"="${instance.linked_data.project_id}"`)
     }
   }
-  filter.value = filters.join(' AND ')
+  installedModpacksFilter.value = filters.join(' AND ')
 }
 
-const getFeaturedModpacks = async () => {
+async function fetchFeaturedModpacks() {
   const response = await get_search_results(
-    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`,
+    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${installedModpacksFilter.value}`,
   )
 
   if (response) {
@@ -64,7 +64,8 @@ const getFeaturedModpacks = async () => {
     featuredModpacks.value = []
   }
 }
-const getFeaturedMods = async () => {
+
+async function fetchFeaturedMods() {
   const response = await get_search_results('?facets=[["project_type:mod"]]&limit=10&index=follows')
 
   if (response) {
@@ -74,27 +75,21 @@ const getFeaturedMods = async () => {
   }
 }
 
-await getInstances()
+async function refreshFeaturedProjects() {
+  await Promise.all([fetchFeaturedModpacks(), fetchFeaturedMods()])
+}
 
-await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+await fetchInstances()
+await refreshFeaturedProjects()
 
 const unlistenProfile = await profile_listener(async (e) => {
-  await getInstances()
+  await fetchInstances()
 
   if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
-    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+    await refreshFeaturedProjects()
   }
 })
 
-// computed sums of recentInstances, featuredModpacks, featuredMods, treating them as arrays if they are not
-const total = computed(() => {
-  return (
-    (recentInstances.value?.length ?? 0) +
-    (featuredModpacks.value?.length ?? 0) +
-    (featuredMods.value?.length ?? 0)
-  )
-})
-
 onUnmounted(() => {
   unlistenProfile()
 })
@@ -104,17 +99,10 @@ onUnmounted(() => {
   <div class="p-6 flex flex-col gap-2">
     <h1 v-if="recentInstances" class="m-0 text-2xl">Welcome back!</h1>
     <h1 v-else class="m-0 text-2xl">Welcome to Modrinth App!</h1>
+    <RecentWorldsList :recent-instances="recentInstances" />
     <RowDisplay
-      v-if="total > 0"
+      v-if="hasFeaturedProjects"
       :instances="[
-        {
-          label: 'Recently played',
-          route: '/library',
-          instances: recentInstances,
-          instance: true,
-          downloaded: true,
-          compact: true,
-        },
         {
           label: 'Discover a modpack',
           route: '/browse/modpack',

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

@@ -0,0 +1,4 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="p-6 flex flex-col gap-2">Worlds</div>
+</template>

apps/app-frontend/src/pages/index.js

@@ -1,4 +1,5 @@
 import Index from './Index.vue'
 import Browse from './Browse.vue'
+import Worlds from './Worlds.vue'
 
-export { Index, Browse }
+export { Index, Browse, Worlds }

apps/app-frontend/src/pages/instance/Index.vue

@@ -1,174 +1,193 @@
 <template>
-  <div
-    class="p-6 pr-2 pb-4"
-    @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
-  >
-    <ExportModal ref="exportModal" :instance="instance" />
-    <InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
-    <ContentPageHeader>
-      <template #icon>
-        <Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
-      </template>
-      <template #title>
-        {{ instance.name }}
-      </template>
-      <template #summary> </template>
-      <template #stats>
-        <div
-          class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"
-        >
-          <GameIcon class="h-6 w-6 text-secondary" />
-          {{ instance.loader }} {{ instance.game_version }}
-        </div>
-        <div class="flex items-center gap-2 font-semibold">
-          <TimerIcon class="h-6 w-6 text-secondary" />
-          <template v-if="timePlayed > 0">
-            {{ timePlayedHumanized }}
-          </template>
-          <template v-else> Never played </template>
-        </div>
-      </template>
-      <template #actions>
-        <div class="flex gap-2">
-          <ButtonStyled v-if="instance.install_stage !== 'installed'" color="brand" size="large">
-            <button disabled>Installing...</button>
-          </ButtonStyled>
-          <ButtonStyled v-else-if="playing === true" color="red" size="large">
-            <button @click="stopInstance('InstancePage')">
-              <StopCircleIcon />
-              Stop
-            </button>
-          </ButtonStyled>
-          <ButtonStyled
-            v-else-if="playing === false && loading === false"
-            color="brand"
-            size="large"
-          >
-            <button @click="startInstance('InstancePage')">
-              <PlayIcon />
-              Play
-            </button>
-          </ButtonStyled>
-          <ButtonStyled
-            v-else-if="loading === true && playing === false"
-            color="brand"
-            size="large"
-          >
-            <button disabled>Loading...</button>
-          </ButtonStyled>
-          <ButtonStyled size="large" circular>
-            <button v-tooltip="'Instance settings'" @click="settingsModal.show()">
-              <SettingsIcon />
-            </button>
-          </ButtonStyled>
-          <ButtonStyled size="large" type="transparent" circular>
-            <OverflowMenu
-              :options="[
-                {
-                  id: 'open-folder',
-                  action: () => showProfileInFolder(instance.path),
-                },
-                {
-                  id: 'export-mrpack',
-                  action: () => $refs.exportModal.show(),
-                },
-              ]"
-            >
-              <MoreVerticalIcon />
-              <template #share-instance> <UserPlusIcon /> Share instance </template>
-              <template #host-a-server> <ServerIcon /> Create a server </template>
-              <template #open-folder> <FolderOpenIcon /> Open folder </template>
-              <template #export-mrpack> <PackageIcon /> Export modpack </template>
-            </OverflowMenu>
-          </ButtonStyled>
-        </div>
-      </template>
-    </ContentPageHeader>
-  </div>
-  <div class="px-6">
-    <NavTabs :links="tabs" />
-  </div>
-  <div class="p-6 pt-4">
-    <RouterView v-slot="{ Component }" :key="instance.path">
-      <template v-if="Component">
-        <Suspense
-          :key="instance.path"
-          @pending="loadingBar.startLoading()"
-          @resolve="loadingBar.stopLoading()"
-        >
-          <component
-            :is="Component"
-            :instance="instance"
-            :options="options"
-            :offline="offline"
-            :playing="playing"
-            :versions="modrinthVersions"
-            :installed="instance.install_stage !== 'installed'"
-          ></component>
-          <template #fallback>
-            <LoadingIndicator />
-          </template>
-        </Suspense>
-      </template>
-    </RouterView>
-  </div>
-  <ContextMenu ref="options" @option-clicked="handleOptionsClick">
-    <template #play> <PlayIcon /> Play </template>
-    <template #stop> <StopCircleIcon /> Stop </template>
-    <template #add_content> <PlusIcon /> Add content </template>
-    <template #edit> <EditIcon /> Edit </template>
-    <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
-    <template #open_folder> <ClipboardCopyIcon /> Open folder </template>
-    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
-    <template #open_link> <ClipboardCopyIcon /> Open in Modrinth <ExternalIcon /> </template>
-    <template #copy_names><EditIcon />Copy names</template>
-    <template #copy_slugs><HashIcon />Copy slugs</template>
-    <template #copy_links><GlobeIcon />Copy links</template>
-    <template #toggle><EditIcon />Toggle selected</template>
-    <template #disable><XIcon />Disable selected</template>
-    <template #enable><CheckCircleIcon />Enable selected</template>
-    <template #hide_show><EyeIcon />Show/Hide unselected</template>
-    <template #update_all
-      ><UpdatedIcon />Update {{ selected.length > 0 ? 'selected' : 'all' }}</template
+  <div>
+    <div
+      class="p-6 pr-2 pb-4"
+      @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
     >
-    <template #filter_update><UpdatedIcon />Select Updatable</template>
-  </ContextMenu>
+      <ExportModal ref="exportModal" :instance="instance" />
+      <InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
+      <ContentPageHeader>
+        <template #icon>
+          <Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
+        </template>
+        <template #title>
+          {{ instance.name }}
+        </template>
+        <template #summary> </template>
+        <template #stats>
+          <div
+            class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"
+          >
+            <GameIcon class="h-6 w-6 text-secondary" />
+            {{ instance.loader }} {{ instance.game_version }}
+          </div>
+          <div class="flex items-center gap-2 font-semibold">
+            <TimerIcon class="h-6 w-6 text-secondary" />
+            <template v-if="timePlayed > 0">
+              {{ timePlayedHumanized }}
+            </template>
+            <template v-else> Never played </template>
+          </div>
+        </template>
+        <template #actions>
+          <div class="flex gap-2">
+            <ButtonStyled
+              v-if="instance.install_stage.includes('installing')"
+              color="brand"
+              size="large"
+            >
+              <button disabled>Installing...</button>
+            </ButtonStyled>
+            <ButtonStyled
+              v-else-if="instance.install_stage !== 'installed'"
+              color="brand"
+              size="large"
+            >
+              <button @click="repairInstance()">
+                <DownloadIcon />
+                Repair
+              </button>
+            </ButtonStyled>
+            <ButtonStyled v-else-if="playing === true" color="red" size="large">
+              <button @click="stopInstance('InstancePage')">
+                <StopCircleIcon />
+                Stop
+              </button>
+            </ButtonStyled>
+            <ButtonStyled
+              v-else-if="playing === false && loading === false"
+              color="brand"
+              size="large"
+            >
+              <button @click="startInstance('InstancePage')">
+                <PlayIcon />
+                Play
+              </button>
+            </ButtonStyled>
+            <ButtonStyled
+              v-else-if="loading === true && playing === false"
+              color="brand"
+              size="large"
+            >
+              <button disabled>Loading...</button>
+            </ButtonStyled>
+            <ButtonStyled size="large" circular>
+              <button v-tooltip="'Instance settings'" @click="settingsModal.show()">
+                <SettingsIcon />
+              </button>
+            </ButtonStyled>
+            <ButtonStyled size="large" type="transparent" circular>
+              <OverflowMenu
+                :options="[
+                  {
+                    id: 'open-folder',
+                    action: () => showProfileInFolder(instance.path),
+                  },
+                  {
+                    id: 'export-mrpack',
+                    action: () => $refs.exportModal.show(),
+                  },
+                ]"
+              >
+                <MoreVerticalIcon />
+                <template #share-instance> <UserPlusIcon /> Share instance </template>
+                <template #host-a-server> <ServerIcon /> Create a server </template>
+                <template #open-folder> <FolderOpenIcon /> Open folder </template>
+                <template #export-mrpack> <PackageIcon /> Export modpack </template>
+              </OverflowMenu>
+            </ButtonStyled>
+          </div>
+        </template>
+      </ContentPageHeader>
+    </div>
+    <div class="px-6">
+      <NavTabs :links="tabs" />
+    </div>
+    <div v-if="!!instance" class="p-6 pt-4">
+      <RouterView v-slot="{ Component }" :key="instance.path">
+        <template v-if="Component">
+          <Suspense
+            :key="instance.path"
+            @pending="loadingBar.startLoading()"
+            @resolve="loadingBar.stopLoading()"
+          >
+            <component
+              :is="Component"
+              :instance="instance"
+              :options="options"
+              :offline="offline"
+              :playing="playing"
+              :versions="modrinthVersions"
+              :installed="instance.install_stage !== 'installed'"
+              @play="updatePlayState"
+              @stop="() => stopInstance('InstanceSubpage')"
+            ></component>
+            <template #fallback>
+              <LoadingIndicator />
+            </template>
+          </Suspense>
+        </template>
+      </RouterView>
+    </div>
+    <ContextMenu ref="options" @option-clicked="handleOptionsClick">
+      <template #play> <PlayIcon /> Play </template>
+      <template #stop> <StopCircleIcon /> Stop </template>
+      <template #add_content> <PlusIcon /> Add content </template>
+      <template #edit> <EditIcon /> Edit </template>
+      <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
+      <template #open_folder> <ClipboardCopyIcon /> Open folder </template>
+      <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+      <template #open_link> <ClipboardCopyIcon /> Open in Modrinth <ExternalIcon /> </template>
+      <template #copy_names><EditIcon />Copy names</template>
+      <template #copy_slugs><HashIcon />Copy slugs</template>
+      <template #copy_links><GlobeIcon />Copy links</template>
+      <template #toggle><EditIcon />Toggle selected</template>
+      <template #disable><XIcon />Disable selected</template>
+      <template #enable><CheckCircleIcon />Enable selected</template>
+      <template #hide_show><EyeIcon />Show/Hide unselected</template>
+      <template #update_all
+        ><UpdatedIcon />Update {{ selected.length > 0 ? 'selected' : 'all' }}</template
+      >
+      <template #filter_update><UpdatedIcon />Select Updatable</template>
+    </ContextMenu>
+  </div>
 </template>
 <script setup>
 import {
   Avatar,
-  ContentPageHeader,
   ButtonStyled,
-  OverflowMenu,
+  ContentPageHeader,
   LoadingIndicator,
+  OverflowMenu,
 } from '@modrinth/ui'
 import {
-  UserPlusIcon,
-  ServerIcon,
-  PackageIcon,
-  SettingsIcon,
-  PlayIcon,
-  StopCircleIcon,
-  EditIcon,
-  FolderOpenIcon,
-  ClipboardCopyIcon,
-  PlusIcon,
-  ExternalIcon,
-  HashIcon,
-  GlobeIcon,
-  EyeIcon,
-  XIcon,
   CheckCircleIcon,
-  UpdatedIcon,
-  MoreVerticalIcon,
+  ClipboardCopyIcon,
+  DownloadIcon,
+  EditIcon,
+  ExternalIcon,
+  EyeIcon,
+  FolderOpenIcon,
   GameIcon,
+  GlobeIcon,
+  HashIcon,
+  MoreVerticalIcon,
+  PackageIcon,
+  PlayIcon,
+  PlusIcon,
+  ServerIcon,
+  SettingsIcon,
+  StopCircleIcon,
   TimerIcon,
+  UpdatedIcon,
+  UserPlusIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { get, get_full_path, kill, run } from '@/helpers/profile'
+import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
 import { get_by_profile_path } from '@/helpers/process'
 import { process_listener, profile_listener } from '@/helpers/events'
 import { useRoute, useRouter } from 'vue-router'
-import { ref, onUnmounted, computed, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
 import { showProfileInFolder } from '@/helpers/utils.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
@@ -223,6 +242,10 @@ async function fetchInstance() {
       })
   }
 
+  await updatePlayState()
+}
+
+async function updatePlayState() {
   const runningProcesses = await get_by_profile_path(route.params.id).catch(handleError)
 
   playing.value = runningProcesses.length > 0
@@ -238,14 +261,20 @@ watch(
   },
 )
 
+const basePath = computed(() => `/instance/${encodeURIComponent(route.params.id)}`)
+
 const tabs = computed(() => [
   {
     label: 'Content',
-    href: `/instance/${encodeURIComponent(route.params.id)}`,
+    href: `${basePath.value}`,
+  },
+  {
+    label: 'Worlds',
+    href: `${basePath.value}/worlds`,
   },
   {
     label: 'Logs',
-    href: `/instance/${encodeURIComponent(route.params.id)}/logs`,
+    href: `${basePath.value}/logs`,
   },
 ])
 
@@ -294,6 +323,10 @@ const stopInstance = async (context) => {
   })
 }
 
+const repairInstance = async () => {
+  await finish_install(instance.value)
+}
+
 const handleRightClick = (event) => {
   const baseOptions = [
     { name: 'add_content' },

apps/app-frontend/src/pages/instance/Logs.vue

@@ -117,15 +117,37 @@ const route = useRoute()
 const props = defineProps({
   instance: {
     type: Object,
-    required: true,
+    default() {
+      return {}
+    },
+  },
+  options: {
+    type: Object,
+    default() {
+      return {}
+    },
   },
   offline: {
     type: Boolean,
-    default: false,
+    default() {
+      return false
+    },
   },
   playing: {
     type: Boolean,
-    default: false,
+    default() {
+      return false
+    },
+  },
+  versions: {
+    type: Array,
+    required: true,
+  },
+  installed: {
+    type: Boolean,
+    default() {
+      return false
+    },
   },
 })
 

apps/app-frontend/src/pages/instance/Mods.vue

@@ -1,260 +1,252 @@
 <template>
-  <template v-if="projects?.length > 0">
-    <div class="flex items-center gap-2 mb-4">
-      <div class="iconified-input flex-grow">
-        <SearchIcon />
-        <input
-          v-model="searchFilter"
-          type="text"
-          :placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
-          class="text-input search-input"
-          autocomplete="off"
+  <div>
+    <template v-if="projects?.length > 0">
+      <div class="flex items-center gap-2 mb-4">
+        <div class="iconified-input flex-grow">
+          <SearchIcon />
+          <input
+            v-model="searchFilter"
+            type="text"
+            :placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
+            class="text-input search-input"
+            autocomplete="off"
+          />
+          <Button class="r-btn" @click="() => (searchFilter = '')">
+            <XIcon />
+          </Button>
+        </div>
+        <AddContentButton :instance="instance" />
+      </div>
+      <div class="flex items-center justify-between">
+        <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
+          <FilterIcon class="text-secondary h-5 w-5 mr-1" />
+          <button
+            v-for="filter in filterOptions"
+            :key="`content-filter-${filter.id}`"
+            :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
+            @click="toggleArray(selectedFilters, filter.id)"
+          >
+            {{ filter.formattedName }}
+          </button>
+        </div>
+        <Pagination
+          v-if="search.length > 0"
+          :page="currentPage"
+          :count="Math.ceil(search.length / 20)"
+          :link-function="(page) => `?page=${page}`"
+          @switch-page="(page) => (currentPage = page)"
         />
-        <Button class="r-btn" @click="() => (searchFilter = '')">
-          <XIcon />
-        </Button>
       </div>
-      <AddContentButton :instance="instance" />
-    </div>
-    <div class="flex items-center justify-between">
-      <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
-        <FilterIcon class="text-secondary h-5 w-5 mr-1" />
-        <button
-          v-for="filter in filterOptions"
-          :key="filter"
-          :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
-          @click="toggleArray(selectedFilters, filter.id)"
-        >
-          {{ filter.formattedName }}
-        </button>
-      </div>
-      <Pagination
-        v-if="search.length > 0"
-        :page="currentPage"
-        :count="Math.ceil(search.length / 20)"
-        :link-function="(page) => `?page=${page}`"
-        @switch-page="(page) => (currentPage = page)"
-      />
-    </div>
 
-    <ContentListPanel
-      v-model="selectedFiles"
-      :locked="isPackLocked"
-      :items="
-        search.map((x) => {
-          const item: ContentItem<any> = {
-            path: x.path,
-            disabled: x.disabled,
-            filename: x.file_name,
-            icon: x.icon,
-            title: x.name,
-            data: x,
-          }
-
-          if (x.version) {
-            item.version = x.version
-            item.versionId = x.version
-          }
-
-          if (x.id) {
-            item.project = {
-              id: x.id,
-              link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
-              linkProps: {},
+      <ContentListPanel
+        v-model="selectedFiles"
+        :locked="isPackLocked"
+        :items="
+          search.map((x) => {
+            const item: ContentItem<any> = {
+              path: x.path,
+              disabled: x.disabled,
+              filename: x.file_name,
+              icon: x.icon ?? undefined,
+              title: x.name,
+              data: x,
             }
-          }
 
-          if (x.author) {
-            item.creator = {
-              name: x.author,
-              type: 'user',
-              id: x.author,
-              link: 'https://modrinth.com/user/' + x.author,
-              linkProps: { target: '_blank' },
+            if (x.version) {
+              item.version = x.version
+              item.versionId = x.version
             }
-          }
 
-          return item
-        })
-      "
-      :sort-column="sortColumn"
-      :sort-ascending="ascending"
-      :update-sort="sortProjects"
-      :current-page="currentPage"
-    >
-      <template v-if="selectedProjects.length > 0" #headers>
-        <div class="flex gap-2">
+            if (x.id) {
+              item.project = {
+                id: x.id,
+                link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
+                linkProps: {},
+              }
+            }
+
+            if (x.author) {
+              item.creator = {
+                name: x.author.name,
+                type: x.author.type,
+                id: x.author.slug,
+                link: `https://modrinth.com/${x.author.type}/${x.author.slug}`,
+                linkProps: { target: '_blank' },
+              }
+            }
+
+            return item
+          })
+        "
+        :sort-column="sortColumn"
+        :sort-ascending="ascending"
+        :update-sort="sortProjects"
+        :current-page="currentPage"
+      >
+        <template v-if="selectedProjects.length > 0" #headers>
+          <div class="flex gap-2">
+            <ButtonStyled
+              v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
+              color="brand"
+              color-fill="text"
+              hover-color-fill="text"
+            >
+              <button @click="updateSelected()"><DownloadIcon /> Update</button>
+            </ButtonStyled>
+            <ButtonStyled>
+              <OverflowMenu
+                :options="[
+                  {
+                    id: 'share-names',
+                    action: () => shareNames(),
+                  },
+                  {
+                    id: 'share-file-names',
+                    action: () => shareFileNames(),
+                  },
+                  {
+                    id: 'share-urls',
+                    action: () => shareUrls(),
+                  },
+                  {
+                    id: 'share-markdown',
+                    action: () => shareMarkdown(),
+                  },
+                ]"
+              >
+                <ShareIcon /> Share <DropdownIcon />
+                <template #share-names> <TextInputIcon /> Project names </template>
+                <template #share-file-names> <FileIcon /> File names </template>
+                <template #share-urls> <LinkIcon /> Project links </template>
+                <template #share-markdown> <CodeIcon /> Markdown links </template>
+              </OverflowMenu>
+            </ButtonStyled>
+            <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
+              <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
+            </ButtonStyled>
+            <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
+              <button @click="disableAll()"><SlashIcon /> Disable</button>
+            </ButtonStyled>
+            <ButtonStyled color="red">
+              <button @click="deleteSelected()"><TrashIcon /> Remove</button>
+            </ButtonStyled>
+          </div>
+        </template>
+        <template #header-actions>
+          <ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
+            <button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
+              <UpdatedIcon />
+              Refresh
+            </button>
+          </ButtonStyled>
           <ButtonStyled
-            v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
+            v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
+            type="transparent"
+            color="brand"
+            color-fill="text"
+            hover-color-fill="text"
+            @click="updateAll"
+          >
+            <button class="w-max"><DownloadIcon /> Update all</button>
+          </ButtonStyled>
+          <ButtonStyled
+            v-if="canUpdatePack"
+            type="transparent"
             color="brand"
             color-fill="text"
             hover-color-fill="text"
           >
-            <button @click="updateSelected()"><DownloadIcon /> Update</button>
+            <button class="w-max" :disabled="installing" @click="modpackVersionModal?.show()">
+              <DownloadIcon /> Update pack
+            </button>
           </ButtonStyled>
-          <ButtonStyled>
+        </template>
+        <template #actions="{ item }">
+          <ButtonStyled
+            v-if="!isPackLocked && (item.data as any).outdated"
+            type="transparent"
+            color="brand"
+            circular
+          >
+            <button
+              v-tooltip="`Update`"
+              :disabled="(item.data as ProjectListEntry).updating"
+              @click="updateProject(item.data)"
+            >
+              <DownloadIcon />
+            </button>
+          </ButtonStyled>
+          <div v-else class="w-[36px]"></div>
+          <Toggle
+            class="!mx-2"
+            :model-value="!item.data.disabled"
+            @update:model-value="toggleDisableMod(item.data)"
+          />
+          <ButtonStyled type="transparent" circular>
+            <button v-tooltip="'Remove'" @click="removeMod(item)">
+              <TrashIcon />
+            </button>
+          </ButtonStyled>
+
+          <ButtonStyled type="transparent" circular>
             <OverflowMenu
               :options="[
                 {
-                  id: 'share-names',
-                  action: () => shareNames(),
+                  id: 'show-file',
+                  action: () => highlightModInProfile(instance.path, item.path),
                 },
                 {
-                  id: 'share-file-names',
-                  action: () => shareFileNames(),
-                },
-                {
-                  id: 'share-urls',
-                  action: () => shareUrls(),
-                },
-                {
-                  id: 'share-markdown',
-                  action: () => shareMarkdown(),
+                  id: 'copy-link',
+                  shown: item.data !== undefined && item.data.slug !== undefined,
+                  action: () => copyModLink(item),
                 },
               ]"
+              direction="left"
             >
-              <ShareIcon /> Share <DropdownIcon />
-              <template #share-names> <TextInputIcon /> Project names </template>
-              <template #share-file-names> <FileIcon /> File names </template>
-              <template #share-urls> <LinkIcon /> Project links </template>
-              <template #share-markdown> <CodeIcon /> Markdown links </template>
+              <MoreVerticalIcon />
+              <template #show-file> <ExternalIcon /> Show file </template>
+              <template #copy-link> <ClipboardCopyIcon /> Copy link </template>
             </OverflowMenu>
           </ButtonStyled>
-          <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
-            <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
-          </ButtonStyled>
-          <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
-            <button @click="disableAll()"><SlashIcon /> Disable</button>
-          </ButtonStyled>
-          <ButtonStyled color="red">
-            <button @click="deleteSelected()"><TrashIcon /> Remove</button>
-          </ButtonStyled>
+        </template>
+      </ContentListPanel>
+      <div class="flex justify-end mt-4">
+        <Pagination
+          v-if="search.length > 0"
+          :page="currentPage"
+          :count="Math.ceil(search.length / 20)"
+          :link-function="(page) => `?page=${page}`"
+          @switch-page="(page) => (currentPage = page)"
+        />
+      </div>
+    </template>
+    <div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
+      <RadialHeader class="">
+        <div class="flex items-center gap-6 w-[32rem] mx-auto">
+          <img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
+          <span class="text-contrast font-bold text-xl"
+            >You haven't added any content to this instance yet.</span
+          >
         </div>
-      </template>
-      <template #header-actions>
-        <ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
-          <button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
-            <UpdatedIcon />
-            Refresh
-          </button>
-        </ButtonStyled>
-        <ButtonStyled
-          v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
-          type="transparent"
-          color="brand"
-          color-fill="text"
-          hover-color-fill="text"
-          @click="updateAll"
-        >
-          <button class="w-max"><DownloadIcon /> Update all</button>
-        </ButtonStyled>
-        <ButtonStyled
-          v-if="canUpdatePack"
-          type="transparent"
-          color="brand"
-          color-fill="text"
-          hover-color-fill="text"
-        >
-          <button class="w-max" :disabled="installing" @click="modpackVersionModal.show()">
-            <DownloadIcon /> Update pack
-          </button>
-        </ButtonStyled>
-      </template>
-      <template #actions="{ item }">
-        <ButtonStyled
-          v-if="!isPackLocked && (item.data as any).outdated"
-          type="transparent"
-          color="brand"
-          circular
-        >
-          <button
-            v-tooltip="`Update`"
-            :disabled="(item.data as any).updating"
-            @click="updateProject(item.data)"
-          >
-            <DownloadIcon />
-          </button>
-        </ButtonStyled>
-        <div v-else class="w-[36px]"></div>
-        <ButtonStyled type="transparent" circular>
-          <button
-            v-tooltip="item.disabled ? `Enable` : `Disable`"
-            @click="toggleDisableMod(item.data)"
-          >
-            <CheckCircleIcon v-if="item.disabled" />
-            <SlashIcon v-else />
-          </button>
-        </ButtonStyled>
-        <ButtonStyled type="transparent" circular>
-          <OverflowMenu
-            :options="[
-              {
-                id: 'show-file',
-                action: () => highlightModInProfile(instance.path, item.path),
-              },
-              {
-                id: 'copy-link',
-                shown: item.data !== undefined && item.data.slug !== undefined,
-                action: () => copyModLink(item),
-              },
-              {
-                divider: true,
-              },
-              {
-                id: 'remove',
-                color: 'red',
-                action: () => removeMod(item),
-              },
-            ]"
-            direction="left"
-          >
-            <MoreVerticalIcon />
-            <template #show-file> <ExternalIcon /> Show file </template>
-            <template #copy-link> <ClipboardCopyIcon /> Copy link </template>
-            <template v-if="item.disabled" #toggle> <CheckCircleIcon /> Enable </template>
-            <template v-else #toggle> <SlashIcon /> Disable </template>
-            <template #remove> <TrashIcon /> Remove </template>
-          </OverflowMenu>
-        </ButtonStyled>
-      </template>
-    </ContentListPanel>
-    <div class="flex justify-end mt-4">
-      <Pagination
-        v-if="search.length > 0"
-        :page="currentPage"
-        :count="Math.ceil(search.length / 20)"
-        :link-function="(page) => `?page=${page}`"
-        @switch-page="(page) => (currentPage = page)"
-      />
-    </div>
-  </template>
-  <div v-else class="w-full flex flex-col items-center justify-center mt-6 max-w-[48rem] mx-auto">
-    <div class="top-box w-full">
-      <div class="flex items-center gap-6 w-[32rem] mx-auto">
-        <img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
-        <span class="text-contrast font-bold text-xl"
-          >You haven't added any content to this instance yet.</span
-        >
+      </RadialHeader>
+      <div class="flex mt-4 mx-auto">
+        <AddContentButton :instance="instance" />
       </div>
     </div>
-    <div class="top-box-divider"></div>
-    <div class="flex items-center gap-6 py-4">
-      <AddContentButton :instance="instance" />
-    </div>
+    <ShareModalWrapper
+      ref="shareModal"
+      share-title="Sharing modpack content"
+      share-text="Check out the projects I'm using in my modpack!"
+      :open-in-new-tab="false"
+    />
+    <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
+    <ModpackVersionModal
+      v-if="instance.linked_data"
+      ref="modpackVersionModal"
+      :instance="instance"
+      :versions="props.versions"
+    />
   </div>
-  <ShareModalWrapper
-    ref="shareModal"
-    share-title="Sharing modpack content"
-    share-text="Check out the projects I'm using in my modpack!"
-    :open-in-new-tab="false"
-  />
-  <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
-  <ModpackVersionModal
-    v-if="instance.linked_data"
-    ref="modpackVersionModal"
-    :instance="instance"
-    :versions="props.versions"
-  />
 </template>
 <script setup lang="ts">
 import {
@@ -275,7 +267,16 @@ import {
   UpdatedIcon,
   XIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, ContentListPanel, OverflowMenu, Pagination } from '@modrinth/ui'
+import {
+  Button,
+  ButtonStyled,
+  ContentListPanel,
+  OverflowMenu,
+  Pagination,
+  RadialHeader,
+  Toggle,
+} from '@modrinth/ui'
+import type { Organization, Project, TeamMember, Version } from '@modrinth/utils'
 import { formatProjectType } from '@modrinth/utils'
 import type { ComputedRef } from 'vue'
 import { computed, onUnmounted, ref, watch } from 'vue'
@@ -305,31 +306,42 @@ import { profile_listener } from '@/helpers/events.js'
 import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import dayjs from 'dayjs'
+import type { CacheBehaviour, ContentFile, GameInstance } from '@/helpers/types'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { ContentItem } from '@modrinth/ui/src/components/content/ContentListItem.vue'
 
-const props = defineProps({
-  instance: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-  options: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-  offline: {
-    type: Boolean,
-    default() {
-      return false
-    },
-  },
-  versions: {
-    type: Array,
-    required: true,
-  },
-})
+const props = defineProps<{
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu>
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()
+
+type ProjectListEntryAuthor = {
+  name: string
+  slug: string
+  type: 'user' | 'organization'
+}
+
+type ProjectListEntry = {
+  path: string
+  name: string
+  slug?: string
+  author: ProjectListEntryAuthor | null
+  version: string | null
+  file_name: string
+  icon: string | undefined
+  disabled: boolean
+  updateVersion?: string
+  outdated: boolean
+  updated: dayjs.Dayjs
+  project_type: string
+  id?: string
+  updating?: boolean
+  selected?: boolean
+}
 
 const isPackLocked = computed(() => {
   return props.instance.linked_data && props.instance.linked_data.locked
@@ -340,18 +352,21 @@ const canUpdatePack = computed(() => {
 })
 const exportModal = ref(null)
 
-const projects = ref([])
-const selectedFiles = ref([])
+const projects = ref<ProjectListEntry[]>([])
+const selectedFiles = ref<string[]>([])
 const selectedProjects = computed(() =>
   projects.value.filter((x) => selectedFiles.value.includes(x.file_name)),
 )
 
 const selectionMap = ref(new Map())
 
-const initProjects = async (cacheBehaviour?) => {
-  const newProjects = []
+const initProjects = async (cacheBehaviour?: CacheBehaviour) => {
+  const newProjects: ProjectListEntry[] = []
 
-  const profileProjects = await get_projects(props.instance.path, cacheBehaviour)
+  const profileProjects = (await get_projects(props.instance.path, cacheBehaviour)) as Record<
+    string,
+    ContentFile
+  >
   const fetchProjects = []
   const fetchVersions = []
 
@@ -363,21 +378,21 @@ const initProjects = async (cacheBehaviour?) => {
   }
 
   const [modrinthProjects, modrinthVersions] = await Promise.all([
-    await get_project_many(fetchProjects).catch(handleError),
-    await get_version_many(fetchVersions).catch(handleError),
+    (await get_project_many(fetchProjects).catch(handleError)) as Project[],
+    (await get_version_many(fetchVersions).catch(handleError)) as Version[],
   ])
 
   const [modrinthTeams, modrinthOrganizations] = await Promise.all([
-    await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError),
-    await get_organization_many(
+    (await get_team_many(modrinthProjects.map((x) => x.team)).catch(handleError)) as TeamMember[][],
+    (await get_organization_many(
       modrinthProjects.map((x) => x.organization).filter((x) => !!x),
-    ).catch(handleError),
+    ).catch(handleError)) as Organization[],
   ])
 
   for (const [path, file] of Object.entries(profileProjects)) {
     if (file.metadata) {
-      const project = modrinthProjects.find((x) => file.metadata.project_id === x.id)
-      const version = modrinthVersions.find((x) => file.metadata.version_id === x.id)
+      const project = modrinthProjects.find((x) => file.metadata?.project_id === x.id)
+      const version = modrinthVersions.find((x) => file.metadata?.version_id === x.id)
 
       if (project && version) {
         const org = project.organization
@@ -386,21 +401,29 @@ const initProjects = async (cacheBehaviour?) => {
 
         const team = modrinthTeams.find((x) => x[0].team_id === project.team)
 
-        let owner
-
+        let author: ProjectListEntryAuthor | null = null
         if (org) {
-          owner = org.name
+          author = {
+            name: org.name,
+            slug: org.slug,
+            type: 'organization',
+          }
         } else if (team) {
-          owner = team.find((x) => x.is_owner).user.username
-        } else {
-          owner = null
+          const teamMember = team.find((x) => x.is_owner)
+          if (teamMember) {
+            author = {
+              name: teamMember.user.username,
+              slug: teamMember.user.username,
+              type: 'user',
+            }
+          }
         }
 
         newProjects.push({
           path,
           name: project.title,
           slug: project.slug,
-          author: owner,
+          author,
           version: version.version_number,
           file_name: file.file_name,
           icon: project.icon_url,
@@ -419,10 +442,10 @@ const initProjects = async (cacheBehaviour?) => {
     newProjects.push({
       path,
       name: file.file_name.replace('.disabled', ''),
-      author: '',
+      author: null,
       version: null,
       file_name: file.file_name,
-      icon: null,
+      icon: undefined,
       disabled: file.file_name.endsWith('.disabled'),
       outdated: false,
       updated: dayjs(0),
@@ -430,7 +453,7 @@ const initProjects = async (cacheBehaviour?) => {
     })
   }
 
-  projects.value = newProjects
+  projects.value = newProjects ?? []
 
   const newSelectionMap = new Map()
   for (const project of projects.value) {
@@ -446,7 +469,7 @@ const initProjects = async (cacheBehaviour?) => {
 }
 await initProjects()
 
-const modpackVersionModal = ref(null)
+const modpackVersionModal = ref<InstanceType<typeof ModpackVersionModal> | null>()
 const installing = computed(() => props.instance.install_stage !== 'installed')
 
 const vintl = useVIntl()
@@ -462,12 +485,16 @@ const messages = defineMessages({
     id: 'instance.filter.updates-available',
     defaultMessage: 'Updates available',
   },
+  disabledFilter: {
+    id: 'instance.filter.disabled',
+    defaultMessage: 'Disabled projects',
+  },
 })
 
 const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
   const options: FilterOption[] = []
 
-  const frequency = projects.value.reduce((map, item) => {
+  const frequency = projects.value.reduce((map: Record<string, number>, item) => {
     map[item.project_type] = (map[item.project_type] || 0) + 1
     return map
   }, {})
@@ -488,19 +515,30 @@ const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
     })
   }
 
+  if (projects.value.some((m) => m.disabled)) {
+    options.push({
+      id: 'disabled',
+      formattedName: formatMessage(messages.disabledFilter),
+    })
+  }
+
   return options
 })
 
-const selectedFilters = ref([])
+const selectedFilters = ref<string[]>([])
 const filteredProjects = computed(() => {
   const updatesFilter = selectedFilters.value.includes('updates')
+  const disabledFilter = selectedFilters.value.includes('disabled')
 
-  const typeFilters = selectedFilters.value.filter((filter) => filter !== 'updates')
+  const typeFilters = selectedFilters.value.filter(
+    (filter) => filter !== 'updates' && filter !== 'disabled',
+  )
 
   return projects.value.filter((project) => {
     return (
       (typeFilters.length === 0 || typeFilters.includes(project.project_type)) &&
-      (!updatesFilter || project.outdated)
+      (!updatesFilter || project.outdated) &&
+      (!disabledFilter || project.disabled)
     )
   })
 })
@@ -514,7 +552,7 @@ watch(filterOptions, () => {
   }
 })
 
-function toggleArray(array, value) {
+function toggleArray<T>(array: T[], value: T) {
   if (array.includes(value)) {
     array.splice(array.indexOf(value), 1)
   } else {
@@ -524,7 +562,7 @@ function toggleArray(array, value) {
 
 const searchFilter = ref('')
 const selectAll = ref(false)
-const shareModal = ref(null)
+const shareModal = ref<InstanceType<typeof ShareModalWrapper> | null>()
 const ascending = ref(true)
 const sortColumn = ref('Name')
 const currentPage = ref(1)
@@ -565,7 +603,7 @@ const search = computed(() => {
 
 watch([sortColumn, ascending, selectedFilters.value, searchFilter], () => (currentPage.value = 1))
 
-const sortProjects = (filter) => {
+const sortProjects = (filter: string) => {
   if (sortColumn.value === filter) {
     ascending.value = !ascending.value
   } else {
@@ -583,7 +621,7 @@ const updateAll = async () => {
     }
   }
 
-  const paths = await update_all(props.instance.path).catch(handleError)
+  const paths = (await update_all(props.instance.path).catch(handleError)) as Record<string, string>
 
   for (const [oldVal, newVal] of Object.entries(paths)) {
     const index = projects.value.findIndex((x) => x.path === oldVal)
@@ -592,7 +630,7 @@ const updateAll = async () => {
 
     if (projects.value[index].updateVersion) {
       projects.value[index].version = projects.value[index].updateVersion.version_number
-      projects.value[index].updateVersion = null
+      projects.value[index].updateVersion = undefined
     }
   }
   for (const project of setProjects) {
@@ -607,15 +645,15 @@ const updateAll = async () => {
   })
 }
 
-const updateProject = async (mod) => {
+const updateProject = async (mod: ProjectListEntry) => {
   mod.updating = true
   await new Promise((resolve) => setTimeout(resolve, 0))
   mod.path = await update_project(props.instance.path, mod.path).catch(handleError)
   mod.updating = false
 
   mod.outdated = false
-  mod.version = mod.updateVersion.version_number
-  mod.updateVersion = null
+  mod.version = mod.updateVersion?.version_number
+  mod.updateVersion = undefined
 
   trackEvent('InstanceProjectUpdate', {
     loader: props.instance.loader,
@@ -626,15 +664,15 @@ const updateProject = async (mod) => {
   })
 }
 
-const locks = {}
+const locks: Record<string, string | null> = {}
 
-const toggleDisableMod = async (mod) => {
+const toggleDisableMod = async (mod: ProjectListEntry) => {
   // Use mod's id as the key for the lock. If mod doesn't have a unique id, replace `mod.id` with some unique property.
   const lock = locks[mod.file_name]
 
   while (lock) {
     await new Promise((resolve) => {
-      setTimeout((_) => resolve(), 100)
+      setTimeout((value: unknown) => resolve(value), 100)
     })
   }
 
@@ -659,20 +697,20 @@ const toggleDisableMod = async (mod) => {
   locks[mod.file_name] = null
 }
 
-const removeMod = async (mod) => {
+const removeMod = async (mod: ContentItem<ProjectListEntry>) => {
   await remove_project(props.instance.path, mod.path).catch(handleError)
   projects.value = projects.value.filter((x) => mod.path !== x.path)
 
   trackEvent('InstanceProjectRemove', {
     loader: props.instance.loader,
     game_version: props.instance.game_version,
-    id: mod.id,
-    name: mod.name,
-    project_type: mod.project_type,
+    id: mod.data.id,
+    name: mod.data.name,
+    project_type: mod.data.project_type,
   })
 }
 
-const copyModLink = async (mod) => {
+const copyModLink = async (mod: ContentItem<ProjectListEntry>) => {
   await navigator.clipboard.writeText(
     `https://modrinth.com/${mod.data.project_type}/${mod.data.slug}`,
   )
@@ -687,15 +725,15 @@ const deleteSelected = async () => {
 }
 
 const shareNames = async () => {
-  await shareModal.value.show(functionValues.value.map((x) => x.name).join('\n'))
+  await shareModal.value?.show(functionValues.value.map((x) => x.name).join('\n'))
 }
 
 const shareFileNames = async () => {
-  await shareModal.value.show(functionValues.value.map((x) => x.file_name).join('\n'))
+  await shareModal.value?.show(functionValues.value.map((x) => x.file_name).join('\n'))
 }
 
 const shareUrls = async () => {
-  await shareModal.value.show(
+  await shareModal.value?.show(
     functionValues.value
       .filter((x) => x.slug)
       .map((x) => `https://modrinth.com/${x.project_type}/${x.slug}`)
@@ -704,7 +742,7 @@ const shareUrls = async () => {
 }
 
 const shareMarkdown = async () => {
-  await shareModal.value.show(
+  await shareModal.value?.show(
     functionValues.value
       .map((x) => {
         if (x.slug) {
@@ -769,15 +807,17 @@ const unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
   await initProjects()
 })
 
-const unlistenProfiles = await profile_listener(async (event) => {
-  if (
-    event.profile_path_id === props.instance.path &&
-    event.event === 'synced' &&
-    props.instance.install_stage !== 'pack_installing'
-  ) {
-    await initProjects()
-  }
-})
+const unlistenProfiles = await profile_listener(
+  async (event: { event: string; profile_path_id: string }) => {
+    if (
+      event.profile_path_id === props.instance.path &&
+      event.event === 'synced' &&
+      props.instance.install_stage !== 'pack_installing'
+    ) {
+      await initProjects()
+    }
+  },
+)
 
 onUnmounted(() => {
   unlisten()

apps/app-frontend/src/pages/instance/Overview.vue

@@ -0,0 +1,15 @@
+<template>{{ instance.name }} overview</template>
+<script setup lang="ts">
+import type { GameInstance } from '@/helpers/types'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { Version } from '@modrinth/utils'
+
+defineProps<{
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu>
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()
+</script>

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -0,0 +1,463 @@
+<template>
+  <AddServerModal
+    ref="addServerModal"
+    :instance="instance"
+    @submit="
+      (server, start) => {
+        addServer(server)
+        if (start) {
+          joinWorld(server)
+        }
+      }
+    "
+  />
+  <EditServerModal ref="editServerModal" :instance="instance" @submit="editServer" />
+  <EditWorldModal ref="editWorldModal" :instance="instance" @submit="editWorld" />
+  <ConfirmModalWrapper
+    ref="removeServerModal"
+    :title="`Are you sure you want to remove ${serverToRemove?.name ?? 'this server'}?`"
+    :description="`'${serverToRemove?.name}'${serverToRemove?.address === serverToRemove?.name ? ' ' : ` (${serverToRemove?.address})`} will be removed from your list, including in-game, and there will be no way to recover it.`"
+    :markdown="false"
+    @proceed="proceedRemoveServer"
+  />
+  <ConfirmModalWrapper
+    ref="deleteWorldModal"
+    :title="`Are you sure you want to permanently delete this world?`"
+    :description="`'${worldToDelete?.name}' will be **permanently deleted**, and there will be no way to recover it.`"
+    @proceed="proceedDeleteWorld"
+  />
+  <div v-if="worlds.length > 0" class="flex flex-col gap-4">
+    <div class="flex flex-wrap gap-2 items-center">
+      <div class="iconified-input flex-grow">
+        <SearchIcon />
+        <input
+          v-model="searchFilter"
+          type="text"
+          :placeholder="`Search worlds...`"
+          class="text-input search-input"
+          autocomplete="off"
+        />
+        <Button v-if="searchFilter" class="r-btn" @click="() => (searchFilter = '')">
+          <XIcon />
+        </Button>
+      </div>
+      <ButtonStyled>
+        <button :disabled="refreshingAll" @click="refreshAllWorlds">
+          <template v-if="refreshingAll">
+            <SpinnerIcon class="animate-spin" />
+            Refreshing...
+          </template>
+          <template v-else>
+            <UpdatedIcon />
+            Refresh
+          </template>
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="addServerModal?.show()">
+          <PlusIcon />
+          Add a server
+        </button>
+      </ButtonStyled>
+    </div>
+    <FilterBar v-model="filters" :options="filterOptions" show-all-options />
+    <div class="flex flex-col w-full gap-2">
+      <WorldItem
+        v-for="world in filteredWorlds"
+        :key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
+        :world="world"
+        :highlighted="highlightedWorld === getWorldIdentifier(world)"
+        :supports-quick-play="supportsQuickPlay"
+        :current-protocol="protocolVersion"
+        :playing-instance="playing"
+        :playing-world="worldsMatch(world, worldPlaying)"
+        :starting-instance="startingInstance"
+        :refreshing="world.type === 'server' ? serverData[world.address]?.refreshing : undefined"
+        :server-status="world.type === 'server' ? serverData[world.address]?.status : undefined"
+        :rendered-motd="
+          world.type === 'server' ? serverData[world.address]?.renderedMotd : undefined
+        "
+        :game-mode="world.type === 'singleplayer' ? GAME_MODES[world.game_mode] : undefined"
+        @play="() => joinWorld(world)"
+        @stop="() => emit('stop')"
+        @refresh="() => refreshServer((world as ServerWorld).address)"
+        @edit="
+          () =>
+            world.type === 'server' ? editServerModal?.show(world) : editWorldModal?.show(world)
+        "
+        @delete="() => promptToRemoveWorld(world)"
+      />
+    </div>
+  </div>
+  <div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
+    <RadialHeader class="">
+      <div class="flex items-center gap-6 w-[32rem] mx-auto">
+        <img src="@/assets/sad-modrinth-bot.webp" alt="" aria-hidden="true" class="h-24" />
+        <span class="text-contrast font-bold text-xl"> You don't have any worlds yet. </span>
+      </div>
+    </RadialHeader>
+    <div class="flex gap-2 mt-4 mx-auto">
+      <ButtonStyled>
+        <button @click="addServerModal?.show()">
+          <PlusIcon aria-hidden="true" />
+          Add a server
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button :disabled="refreshingAll" @click="refreshAllWorlds">
+          <template v-if="refreshingAll">
+            <SpinnerIcon aria-hidden="true" class="animate-spin" />
+            Refreshing...
+          </template>
+          <template v-else>
+            <UpdatedIcon aria-hidden="true" />
+            Refresh
+          </template>
+        </button>
+      </ButtonStyled>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { GameInstance } from '@/helpers/types'
+import {
+  Button,
+  ButtonStyled,
+  RadialHeader,
+  FilterBar,
+  type FilterBarOption,
+  type GameVersion,
+  GAME_MODES,
+} from '@modrinth/ui'
+import { PlusIcon, SpinnerIcon, UpdatedIcon, SearchIcon, XIcon } from '@modrinth/assets'
+import {
+  type SingleplayerWorld,
+  type World,
+  type ServerWorld,
+  type ServerData,
+  type ProfileEvent,
+  get_profile_protocol_version,
+  remove_server_from_profile,
+  delete_world,
+  start_join_server,
+  start_join_singleplayer_world,
+  getWorldIdentifier,
+  refreshServerData,
+  refreshWorld,
+  sortWorlds,
+  refreshServers,
+  hasQuickPlaySupport,
+  refreshWorlds,
+  handleDefaultProfileUpdateEvent,
+} from '@/helpers/worlds.ts'
+import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
+import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
+import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
+import WorldItem from '@/components/ui/world/WorldItem.vue'
+
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { handleError } from '@/store/notifications'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { Version } from '@modrinth/utils'
+import { profile_listener } from '@/helpers/events'
+import { get_game_versions } from '@/helpers/tags'
+import { defineMessages } from '@vintl/vintl'
+
+const route = useRoute()
+
+const addServerModal = ref<InstanceType<typeof AddServerModal>>()
+const editServerModal = ref<InstanceType<typeof EditServerModal>>()
+const editWorldModal = ref<InstanceType<typeof EditWorldModal>>()
+const removeServerModal = ref<InstanceType<typeof ConfirmModalWrapper>>()
+const deleteWorldModal = ref<InstanceType<typeof ConfirmModalWrapper>>()
+
+const serverToRemove = ref<ServerWorld>()
+const worldToDelete = ref<SingleplayerWorld>()
+
+const emit = defineEmits<{
+  (event: 'play', world: World): void
+  (event: 'stop'): void
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu> | null
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()
+
+const instance = computed(() => props.instance)
+const playing = computed(() => props.playing)
+
+function play(world: World) {
+  emit('play', world)
+}
+
+const filters = ref<string[]>([])
+const searchFilter = ref('')
+
+const refreshingAll = ref(false)
+const hadNoWorlds = ref(true)
+const startingInstance = ref(false)
+const worldPlaying = ref<World>()
+
+const worlds = ref<World[]>([])
+const serverData = ref<Record<string, ServerData>>({})
+
+const protocolVersion = ref<number | null>(await get_profile_protocol_version(instance.value.path))
+
+const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
+  if (e.profile_path_id !== instance.value.path) return
+
+  console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
+
+  if (e.event === 'servers_updated') {
+    await refreshAllWorlds()
+  }
+
+  await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
+})
+
+await refreshAllWorlds()
+
+async function refreshServer(address: string) {
+  if (!serverData.value[address]) {
+    serverData.value[address] = {
+      refreshing: true,
+    }
+  }
+  await refreshServerData(serverData.value[address], protocolVersion.value, address)
+}
+
+async function refreshAllWorlds() {
+  if (refreshingAll.value) {
+    console.log(`Already refreshing, cancelling refresh.`)
+    return
+  }
+
+  refreshingAll.value = true
+
+  worlds.value = await refreshWorlds(instance.value.path).finally(
+    () => (refreshingAll.value = false),
+  )
+  await refreshServers(worlds.value, serverData.value, protocolVersion.value)
+
+  const hasNoWorlds = worlds.value.length === 0
+
+  if (hadNoWorlds.value && hasNoWorlds) {
+    setTimeout(() => {
+      refreshingAll.value = false
+    }, 1000)
+  } else {
+    refreshingAll.value = false
+  }
+
+  hadNoWorlds.value = hasNoWorlds
+}
+
+async function addServer(server: ServerWorld) {
+  worlds.value.push(server)
+  sortWorlds(worlds.value)
+  await refreshServer(server.address)
+}
+
+async function editServer(server: ServerWorld) {
+  const index = worlds.value.findIndex((w) => w.type === 'server' && w.index === server.index)
+  if (index !== -1) {
+    const oldServer = worlds.value[index] as ServerWorld
+    worlds.value[index] = server
+    sortWorlds(worlds.value)
+    if (oldServer.address !== server.address) {
+      await refreshServer(server.address)
+    }
+  } else {
+    handleError(`Error refreshing server, refreshing all worlds`)
+    await refreshAllWorlds()
+  }
+}
+
+async function removeServer(server: ServerWorld) {
+  await remove_server_from_profile(instance.value.path, server.index).catch(handleError)
+  worlds.value = worlds.value.filter((w) => w.type !== 'server' || w.index !== server.index)
+}
+
+async function editWorld(path: string, name: string, removeIcon: boolean) {
+  const world = worlds.value.find((world) => world.type === 'singleplayer' && world.path === path)
+  if (world) {
+    world.name = name
+    if (removeIcon) {
+      world.icon = undefined
+    }
+    sortWorlds(worlds.value)
+  } else {
+    handleError(`Error finding world in list, refreshing all worlds`)
+    await refreshAllWorlds()
+  }
+}
+
+async function deleteWorld(world: SingleplayerWorld) {
+  await delete_world(instance.value.path, world.path).catch(handleError)
+  worlds.value = worlds.value.filter((w) => w.type !== 'singleplayer' || w.path !== world.path)
+}
+
+function handleJoinError(err: unknown) {
+  handleError(err)
+  startingInstance.value = false
+  worldPlaying.value = undefined
+}
+
+async function joinWorld(world: World) {
+  console.log(`Joining world ${getWorldIdentifier(world)}`)
+  startingInstance.value = true
+  worldPlaying.value = world
+  if (world.type === 'server') {
+    await start_join_server(instance.value.path, world.address).catch(handleJoinError)
+  } else if (world.type === 'singleplayer') {
+    await start_join_singleplayer_world(instance.value.path, world.path).catch(handleJoinError)
+  }
+  play(world)
+  startingInstance.value = false
+}
+
+watch(
+  () => playing.value,
+  (playing) => {
+    if (!playing) {
+      worldPlaying.value = undefined
+
+      setTimeout(async () => {
+        for (const world of worlds.value) {
+          if (world.type === 'singleplayer' && world.locked) {
+            await refreshWorld(worlds.value, instance.value.path, world.path)
+          }
+        }
+      }, 1000)
+    }
+  },
+)
+
+function worldsMatch(world: World, other: World | undefined) {
+  if (world.type === 'server' && other?.type === 'server') {
+    return world.address === other.address
+  } else if (world.type === 'singleplayer' && other?.type === 'singleplayer') {
+    return world.path === other.path
+  }
+  return false
+}
+
+const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
+const supportsQuickPlay = computed(() =>
+  hasQuickPlaySupport(gameVersions.value, instance.value.game_version),
+)
+
+const filterOptions = computed(() => {
+  const options: FilterBarOption[] = []
+
+  const hasServer = worlds.value.some((x) => x.type === 'server')
+
+  if (worlds.value.some((x) => x.type === 'singleplayer') && hasServer) {
+    options.push({
+      id: 'singleplayer',
+      message: messages.singleplayer,
+    })
+    options.push({
+      id: 'server',
+      message: messages.server,
+    })
+  }
+
+  if (hasServer) {
+    // add available filter if there's any offline ("unavailable") servers AND there's any singleplayer worlds or available servers
+    if (
+      worlds.value.some(
+        (x) =>
+          x.type === 'server' &&
+          !serverData.value[x.address]?.status &&
+          !serverData.value[x.address]?.refreshing,
+      ) &&
+      worlds.value.some(
+        (x) =>
+          x.type === 'singleplayer' ||
+          (x.type === 'server' &&
+            serverData.value[x.address]?.status &&
+            !serverData.value[x.address]?.refreshing),
+      )
+    ) {
+      options.push({
+        id: 'available',
+        message: messages.available,
+      })
+    }
+  }
+
+  return options
+})
+
+const filteredWorlds = computed(() =>
+  worlds.value.filter((x) => {
+    const availableFilter = filters.value.includes('available')
+    const typeFilter = filters.value.includes('server') || filters.value.includes('singleplayer')
+
+    return (
+      (!typeFilter || filters.value.includes(x.type)) &&
+      (!availableFilter || x.type !== 'server' || serverData.value[x.address]?.status) &&
+      (!searchFilter.value || x.name.toLowerCase().includes(searchFilter.value.toLowerCase()))
+    )
+  }),
+)
+
+const highlightedWorld = ref(route.query.highlight)
+
+function promptToRemoveWorld(world: World): boolean {
+  if (world.type === 'server') {
+    serverToRemove.value = world
+    removeServerModal.value?.show()
+    return !!removeServerModal.value
+  } else {
+    worldToDelete.value = world
+    deleteWorldModal.value?.show()
+    return !!deleteWorldModal.value
+  }
+}
+
+async function proceedRemoveServer() {
+  if (!serverToRemove.value) {
+    handleError(`Error removing server, no server marked for removal.`)
+    return
+  }
+  await removeServer(serverToRemove.value)
+  serverToRemove.value = undefined
+}
+
+async function proceedDeleteWorld() {
+  if (!worldToDelete.value) {
+    handleError(`Error deleting world, no world marked for removal.`)
+    return
+  }
+  await deleteWorld(worldToDelete.value)
+  worldToDelete.value = undefined
+}
+
+onUnmounted(() => {
+  unlistenProfile()
+})
+
+const messages = defineMessages({
+  singleplayer: {
+    id: 'instance.worlds.type.singleplayer',
+    defaultMessage: 'Singleplayer',
+  },
+  server: {
+    id: 'instance.worlds.type.server',
+    defaultMessage: 'Server',
+  },
+  available: {
+    id: 'instance.worlds.filter.available',
+    defaultMessage: 'Available',
+  },
+})
+</script>

apps/app-frontend/src/pages/instance/index.js

@@ -1,5 +1,7 @@
 import Index from './Index.vue'
+import Overview from './Overview.vue'
+import Worlds from './Worlds.vue'
 import Mods from './Mods.vue'
 import Logs from './Logs.vue'
 
-export { Index, Mods, Logs }
+export { Index, Overview, Worlds, Mods, Logs }

apps/app-frontend/src/pages/project/Gallery.vue

@@ -31,10 +31,10 @@
             : 'https://cdn.modrinth.com/placeholder-banner.svg'
         "
         :alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
-        @click.stop=""
+        @click.stop="() => {}"
       />
 
-      <div class="floating" @click.stop="">
+      <div class="floating" @click.stop="() => {}">
         <div class="text">
           <h2 v-if="expandedGalleryItem.title">
             {{ expandedGalleryItem.title }}
@@ -99,7 +99,7 @@ import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 const props = defineProps({
   project: {
     type: Object,
-    default: () => {},
+    default: () => ({}),
   },
 })
 

apps/app-frontend/src/pages/project/Index.vue

@@ -155,7 +155,7 @@ import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { handleError } from '@/store/notifications.js'
@@ -170,6 +170,7 @@ import { openUrl } from '@tauri-apps/plugin-opener'
 dayjs.extend(relativeTime)
 
 const route = useRoute()
+const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
 
@@ -192,6 +193,11 @@ const [allLoaders, allGameVersions] = await Promise.all([
 async function fetchProjectData() {
   const project = await get_project(route.params.id, 'must_revalidate').catch(handleError)
 
+  if (!project) {
+    handleError('Error loading project')
+    return
+  }
+
   data.value = project
   ;[versions.value, members.value, categories.value, instance.value, instanceProjects.value] =
     await Promise.all([
@@ -242,6 +248,9 @@ async function install(version) {
         installedVersion.value = version
       }
     },
+    (profile) => {
+      router.push(`/instance/${profile}`)
+    },
   )
 }
 

apps/app-frontend/src/routes.js

@@ -18,6 +18,14 @@ export default new createRouter({
         breadcrumb: [{ name: 'Home' }],
       },
     },
+    {
+      path: '/worlds',
+      name: 'Worlds',
+      component: Pages.Worlds,
+      meta: {
+        breadcrumb: [{ name: 'Worlds' }],
+      },
+    },
     {
       path: '/browse/:projectType',
       name: 'Discover content',
@@ -106,13 +114,31 @@ export default new createRouter({
       component: Instance.Index,
       props: true,
       children: [
+        // {
+        //   path: '',
+        //   name: 'Overview',
+        //   component: Instance.Overview,
+        //   meta: {
+        //     useRootContext: true,
+        //     breadcrumb: [{ name: '?Instance' }],
+        //   },
+        // },
+        {
+          path: 'worlds',
+          name: 'InstanceWorlds',
+          component: Instance.Worlds,
+          meta: {
+            useRootContext: true,
+            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Worlds' }],
+          },
+        },
         {
           path: '',
           name: 'Mods',
           component: Instance.Mods,
           meta: {
             useRootContext: true,
-            breadcrumb: [{ name: '?Instance' }],
+            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
           },
         },
         {
@@ -121,7 +147,7 @@ export default new createRouter({
           component: Instance.Mods,
           meta: {
             useRootContext: true,
-            breadcrumb: [{ name: '?Instance' }],
+            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
           },
         },
         {

apps/app-frontend/src/store/install.js

@@ -2,14 +2,14 @@ import { defineStore } from 'pinia'
 import {
   add_project_from_version,
   check_installed,
-  list,
   get,
   get_projects,
+  list,
   remove_project,
 } from '@/helpers/profile.js'
 import { handleError } from '@/store/notifications.js'
 import { get_project, get_version_many } from '@/helpers/cache.js'
-import { install as packInstall } from '@/helpers/pack.js'
+import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
 import { trackEvent } from '@/helpers/analytics.js'
 import dayjs from 'dayjs'
 
@@ -23,8 +23,8 @@ export const useInstall = defineStore('installStore', {
     setInstallConfirmModal(ref) {
       this.installConfirmModal = ref
     },
-    showInstallConfirmModal(project, version_id, onInstall) {
-      this.installConfirmModal.show(project, version_id, onInstall)
+    showInstallConfirmModal(project, version_id, onInstall, createInstanceCallback) {
+      this.installConfirmModal.show(project, version_id, onInstall, createInstanceCallback)
     },
     setIncompatibilityWarningModal(ref) {
       this.incompatibilityWarningModal = ref
@@ -41,7 +41,14 @@ export const useInstall = defineStore('installStore', {
   },
 })
 
-export const install = async (projectId, versionId, instancePath, source, callback = () => {}) => {
+export const install = async (
+  projectId,
+  versionId,
+  instancePath,
+  source,
+  callback = () => {},
+  createInstanceCallback = () => {},
+) => {
   const project = await get_project(projectId, 'must_revalidate').catch(handleError)
 
   if (project.project_type === 'modpack') {
@@ -49,7 +56,13 @@ export const install = async (projectId, versionId, instancePath, source, callba
     const packs = await list().catch(handleError)
 
     if (packs.length === 0 || !packs.find((pack) => pack.linked_data?.project_id === project.id)) {
-      await packInstall(project.id, version, project.title, project.icon_url).catch(handleError)
+      await packInstall(
+        project.id,
+        version,
+        project.title,
+        project.icon_url,
+        createInstanceCallback,
+      ).catch(handleError)
 
       trackEvent('PackInstall', {
         id: project.id,
@@ -61,7 +74,7 @@ export const install = async (projectId, versionId, instancePath, source, callba
       callback(version)
     } else {
       const install = useInstall()
-      install.showInstallConfirmModal(project, version, callback)
+      install.showInstallConfirmModal(project, version, callback, createInstanceCallback)
     }
   } else {
     if (instancePath) {

apps/app-frontend/src/store/state.js

@@ -1,4 +1,4 @@
-import { useTheming } from './theme'
+import { useTheming } from './theme.ts'
 import { useBreadcrumbs } from './breadcrumbs'
 import { useLoading } from './loading'
 import { useNotifications, handleError } from './notifications'

apps/app-frontend/src/store/theme.js

@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useTheming = defineStore('themeStore', {
-  state: () => ({
-    themeOptions: ['dark', 'light', 'oled', 'system'],
-    advancedRendering: true,
-    selectedTheme: 'dark',
-    toggleSidebar: false,
-
-    devMode: false,
-    featureFlags: {},
-  }),
-  actions: {
-    setThemeState(newTheme) {
-      if (this.themeOptions.includes(newTheme)) this.selectedTheme = newTheme
-      else console.warn('Selected theme is not present. Check themeOptions.')
-
-      this.setThemeClass()
-    },
-    setThemeClass() {
-      for (const theme of this.themeOptions) {
-        document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
-      }
-
-      let theme = this.selectedTheme
-      if (this.selectedTheme === 'system') {
-        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
-        if (darkThemeMq.matches) {
-          theme = 'dark'
-        } else {
-          theme = 'light'
-        }
-      }
-
-      document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
-    },
-  },
-})

apps/app-frontend/src/store/theme.ts

@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+
+export const DEFAULT_FEATURE_FLAGS = {
+  project_background: false,
+  page_path: false,
+  worlds_tab: false,
+  worlds_in_home: true,
+}
+
+export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const
+
+export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
+export type FeatureFlags = Record<FeatureFlag, boolean>
+export type ColorTheme = (typeof THEME_OPTIONS)[number]
+
+export type ThemeStore = {
+  selectedTheme: ColorTheme
+  advancedRendering: boolean
+  toggleSidebar: boolean
+
+  devMode: boolean
+  featureFlags: FeatureFlags
+}
+
+export const DEFAULT_THEME_STORE: ThemeStore = {
+  selectedTheme: 'dark',
+  advancedRendering: true,
+  toggleSidebar: false,
+
+  devMode: false,
+  featureFlags: DEFAULT_FEATURE_FLAGS,
+}
+
+export const useTheming = defineStore('themeStore', {
+  state: () => DEFAULT_THEME_STORE,
+  actions: {
+    setThemeState(newTheme: ColorTheme) {
+      if (THEME_OPTIONS.includes(newTheme)) {
+        this.selectedTheme = newTheme
+      } else {
+        console.warn('Selected theme is not present. Check themeOptions.')
+      }
+
+      this.setThemeClass()
+    },
+    setThemeClass() {
+      for (const theme of THEME_OPTIONS) {
+        document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
+      }
+
+      let theme = this.selectedTheme
+      if (this.selectedTheme === 'system') {
+        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+        if (darkThemeMq.matches) {
+          theme = 'dark'
+        } else {
+          theme = 'light'
+        }
+      }
+
+      document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
+    },
+    getFeatureFlag(key: FeatureFlag) {
+      return this.featureFlags[key] ?? DEFAULT_FEATURE_FLAGS[key]
+    },
+    getThemeOptions() {
+      return THEME_OPTIONS
+    },
+  },
+})

apps/app-playground/.cargo/config.toml

@@ -0,0 +1,2 @@
+[env]
+SQLX_OFFLINE = "true"

apps/app-playground/Cargo.toml

@@ -1,24 +1,11 @@
 [package]
 name = "theseus_playground"
 version = "0.0.0"
-edition = "2021"
+edition = "2024"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-theseus = { path = "../../packages/app-lib", features = ["cli"] }
-
-serde_json = "1.0"
-serde = { version = "1.0", features = ["derive"] }
-tokio = { version = "1", features = ["full"] }
-thiserror = "1.0"
-url = "2.2"
-webbrowser = "0.8.13"
-dunce = "1.0.3"
-
-futures = "0.3"
-uuid = { version = "1.1", features = ["serde", "v4"] }
-
-tracing = "0.1.37"
-tracing-subscriber = "0.3.18"
-tracing-error = "0.2.0"
+theseus = { workspace = true, features = ["cli"] }
+tokio = { workspace = true, features = ["macros", "rt-multi-thread"] }
+enumset.workspace = true

apps/app-playground/src/main.rs

@@ -3,9 +3,9 @@
     windows_subsystem = "windows"
 )]
 
+use enumset::EnumSet;
 use theseus::prelude::*;
-
-use theseus::profile::create::profile_create;
+use theseus::worlds::get_recent_worlds;
 
 // A simple Rust implementation of the authentication run
 // 1) call the authenticate_begin_flow() function to get the URL to open (like you would in the frontend)
@@ -15,8 +15,7 @@ pub async fn authenticate_run() -> theseus::Result<Credentials> {
     println!("A browser window will now open, follow the login flow there.");
     let login = minecraft_auth::begin_login().await?;
 
-    println!("URL {}", login.redirect_uri.as_str());
-    webbrowser::open(login.redirect_uri.as_str())?;
+    println!("Open URL {} in a browser", login.redirect_uri.as_str());
 
     println!("Please enter URL code: ");
     let mut input = String::new();
@@ -41,54 +40,16 @@ async fn main() -> theseus::Result<()> {
     // Initialize state
     State::init().await?;
 
-    if minecraft_auth::users().await?.is_empty() {
-        println!("No users found, authenticating.");
-        authenticate_run().await?; // could take credentials from here direct, but also deposited in state users
+    let worlds = get_recent_worlds(4, EnumSet::all()).await?;
+    for world in worlds {
+        println!(
+            "World: {:?}/{:?} played at {:?}: {:#?}",
+            world.profile,
+            world.world.name,
+            world.world.last_played,
+            world.world.details
+        );
     }
-    //
-    // st.settings
-    //     .write()
-    //     .await
-    //     .java_globals
-    //     .insert(JAVA_8_KEY.to_string(), check_jre(path).await?.unwrap());
-    // Clear profiles
-    println!("Clearing profiles.");
-    {
-        let h = profile::list().await?;
-        for profile in h.into_iter() {
-            profile::remove(&profile.path).await?;
-        }
-    }
-
-    println!("Creating/adding profile.");
-
-    let name = "Example".to_string();
-    let game_version = "1.16.1".to_string();
-    let modloader = ModLoader::Forge;
-    let loader_version = "stable".to_string();
-
-    let profile_path = profile_create(
-        name,
-        game_version,
-        modloader,
-        Some(loader_version),
-        None,
-        None,
-        None,
-    )
-    .await?;
-
-    println!("running");
-    // Run a profile, running minecraft and store the RwLock to the process
-    let process = profile::run(&profile_path).await?;
-
-    println!("Minecraft UUID: {}", process.uuid);
-
-    println!("All running process UUID {:?}", process::get_all().await?);
-
-    // hold the lock to the process until it ends
-    println!("Waiting for process to end...");
-    process::wait_for(process.uuid).await?;
 
     Ok(())
 }

apps/app/.cargo/config.toml

@@ -0,0 +1,2 @@
+[env]
+SQLX_OFFLINE = "true"

apps/app/Cargo.toml

@@ -1,66 +1,52 @@
 [package]
 name = "theseus_gui"
-version = "0.9.0"
+version = "0.9.5"
 description = "The Modrinth App is a desktop application for managing your Minecraft mods"
 license = "GPL-3.0-only"
 repository = "https://github.com/modrinth/code/apps/app/"
-edition = "2021"
+edition = "2024"
 build = "build.rs"
 
 [build-dependencies]
-tauri-build = { version = "2.0.3", features = ["codegen"] }
+tauri-build = { workspace = true, features = ["codegen"] }
 
 [dependencies]
-theseus = { path = "../../packages/app-lib", features = ["tauri"] }
+theseus = { workspace = true, features = ["tauri"] }
 
-serde_json = "1.0"
-serde = { version = "1.0", features = ["derive"] }
-serde_with = "3.0.0"
+serde_json.workspace = true
+serde = { workspace = true, features = ["derive"] }
+serde_with.workspace = true
 
-tauri = { version = "2.1.1",  features = ["devtools", "macos-private-api", "protocol-asset", "unstable"] }
-tauri-plugin-window-state = "2.2.0"
-tauri-plugin-deep-link = "2.2.0"
-tauri-plugin-os = "2.2.0"
-tauri-plugin-opener = "2.2.1"
-tauri-plugin-dialog = "2.2.0"
-tauri-plugin-updater = { version = "2.3.0" }
-tauri-plugin-single-instance = { version = "2.2.0" }
+tauri = { workspace = true, features = ["devtools", "macos-private-api", "protocol-asset", "unstable"] }
+tauri-plugin-window-state.workspace = true
+tauri-plugin-deep-link.workspace = true
+tauri-plugin-os.workspace = true
+tauri-plugin-opener.workspace = true
+tauri-plugin-dialog.workspace = true
+tauri-plugin-updater.workspace = true
+tauri-plugin-single-instance.workspace = true
 
-tokio = { version = "1", features = ["full"] }
-thiserror = "1.0"
-futures = "0.3"
-daedalus = { path = "../../packages/daedalus" }
-chrono = "0.4.26"
+tokio = { workspace = true, features = ["time"] }
+thiserror.workspace = true
+daedalus.workspace = true
+chrono.workspace = true
+either.workspace = true
 
-dirs = "5.0.1"
+url.workspace = true
+urlencoding.workspace = true
+uuid = { workspace = true, features = ["serde", "v4"] }
 
-url = "2.2"
-uuid = { version = "1.1", features = ["serde", "v4"] }
-os_info = "3.7.0"
+tracing.workspace = true
+tracing-error.workspace = true
 
-tracing = "0.1.37"
-tracing-error = "0.2.0"
+dashmap.workspace = true
+paste.workspace = true
+enumset = { workspace = true, features = ["serde"] }
 
-lazy_static = "1"
-once_cell = "1"
-
-dashmap = "6.0.1"
-paste = "1.0.15"
-
-opener = { version = "0.7.2", features = ["reveal", "dbus-vendored"] }
-
-native-dialog = "0.7.0"
-
-[target.'cfg(not(target_os = "linux"))'.dependencies]
-window-shadows = "0.2.1"
-
-[target.'cfg(target_os = "macos")'.dependencies]
-cocoa = "0.25.0"
-objc = "0.2.7"
-rand = "0.8.5"
+native-dialog.workspace = true
 
 [target.'cfg(target_os = "linux")'.dependencies]
-tauri-plugin-updater = { version = "2.3.0", optional = true, features = ["native-tls-vendored", "zip"], default-features = false }
+tauri-plugin-updater = { workspace = true, optional = true }
 
 [features]
 # by default Tauri runs in production mode

apps/app/build.rs

@@ -240,6 +240,30 @@ fn main() {
                     .default_permission(
                         DefaultPermissionRule::AllowAllCommands,
                     ),
+            )
+            .plugin(
+                "worlds",
+                InlinedPlugin::new()
+                    .commands(&[
+                        "get_recent_worlds",
+                        "get_profile_worlds",
+                        "get_singleplayer_world",
+                        "set_world_display_status",
+                        "rename_world",
+                        "reset_world_icon",
+                        "backup_world",
+                        "delete_world",
+                        "add_server_to_profile",
+                        "edit_server_in_profile",
+                        "remove_server_from_profile",
+                        "get_profile_protocol_version",
+                        "get_server_status",
+                        "start_join_singleplayer_world",
+                        "start_join_server",
+                    ])
+                    .default_permission(
+                        DefaultPermissionRule::AllowAllCommands,
+                    ),
             ),
     )
     .expect("Failed to run tauri-build");

apps/app/capabilities/plugins.json

@@ -35,6 +35,7 @@
     "tags:default",
     "utils:default",
     "ads:default",
-    "friends:default"
+    "friends:default",
+    "worlds:default"
   ]
 }