New instance settings in app (#3033)

* Tabbed interface component * Start instance settings * New instance settings, mostly done minus modpacks * Extract i18n * Some more fixes with settings, still no modpacks yet * Lint * Modpack installation settings * Change no friends language * Remove options legacy button * fix lint, small bug * fix invalid cond on friends ui * update resource management page --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2024-12-17 23:06:01 -08:00
parent 6ceed4b226
commit 547ec730c7
43 changed files with 2891 additions and 239 deletions
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -120,7 +120,7 @@ const handleOptionsClick = async (args) => {
 }

 const search = ref('')
-const group = ref('Category')
+const group = ref('Group')
 const sortBy = ref('Name')

 const filteredResults = computed(() => {
@@ -177,7 +177,7 @@ const filteredResults = computed(() => {

      instanceMap.get(instance.game_version).push(instance)
    })
-  } else if (group.value === 'Category') {
+  } else if (group.value === 'Group') {
    instances.forEach((instance) => {
      if (instance.groups.length === 0) {
        instance.groups.push('None')
@@ -242,7 +242,7 @@ const filteredResults = computed(() => {
      v-model="group"
      class="max-w-[16rem]"
      name="Group Dropdown"
-      :options="['Category', 'Loader', 'Game version', 'None']"
+      :options="['Group', 'Loader', 'Game version', 'None']"
      placeholder="Select..."
    >
      <span class="font-semibold text-primary">Group by: </span>
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -24,6 +24,8 @@ defineExpose({
  },
 })

+const emit = defineEmits(['finish-install'])
+
 const filteredVersions = computed(() => {
  return props.versions
 })
@@ -34,9 +36,17 @@ const installing = computed(() => props.instance.install_stage !== 'installed')
 const inProgress = ref(false)

 const switchVersion = async (versionId) => {
+  modpackVersionModal.value.hide()
  inProgress.value = true
  await update_managed_modrinth_version(props.instance.path, versionId)
  inProgress.value = false
+  emit('finish-install')
+}
+
+const onHide = () => {
+  if (!inProgress.value) {
+    emit('finish-install')
+  }
 }
 </script>

@@ -45,9 +55,10 @@ const switchVersion = async (versionId) => {
    ref="modpackVersionModal"
    class="modpack-version-modal"
    header="Change modpack version"
+    :on-hide="onHide"
  >
    <div class="modal-body">
-      <Card v-if="instance.linked_data" class="mod-card">
+      <div v-if="instance.linked_data" class="mod-card">
        <div class="table">
          <div class="table-row with-columns table-head">
            <div class="table-cell table-text download-cell" />
@@ -106,7 +117,7 @@ const switchVersion = async (versionId) => {
            </div>
          </div>
        </div>
-      </Card>
+      </div>
    </div>
  </ModalWrapper>
 </template>
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -161,7 +161,7 @@ onUnmounted(() => {

 <template>
  <ModalWrapper ref="manageFriendsModal" header="Manage friends">
-    <p v-if="acceptedFriends.length === 0">You have no friends :C</p>
+    <p v-if="acceptedFriends.length === 0">Add friends to share what you're playing!</p>
    <div v-else class="flex flex-col gap-4 min-w-[20rem]">
      <input v-model="search" type="text" placeholder="Search friends..." class="w-full" />
      <div
@@ -237,12 +237,12 @@ onUnmounted(() => {
  </ModalWrapper>
  <ModalWrapper ref="addFriendModal" header="Add a friend">
    <div class="mb-4">
-      <h2 class="m-0 text-xl">Username</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Username</h2>
      <p class="m-0 mt-1 leading-tight">You can add friends with their Modrinth username.</p>
-      <input v-model="username" class="mt-2" type="text" placeholder="Enter username..." />
+      <input v-model="username" class="mt-2 w-full" type="text" placeholder="Enter username..." />
    </div>
    <ButtonStyled color="brand">
-      <button class="ml-auto" :disabled="username.length === 0" @click="addFriendFromModal">
+      <button :disabled="username.length === 0" @click="addFriendFromModal">
        <UserPlusIcon />
        Add friend
      </button>
@@ -310,13 +310,12 @@ onUnmounted(() => {
    </template>
    <template v-else-if="acceptedFriends.length === 0">
      <div class="text-sm">
-        <div class="mb-2">You have no friends :C</div>
        <div v-if="!userCredentials">
          <span class="text-link cursor-pointer" @click="signIn">Sign in</span> to add friends!
        </div>
        <div v-else>
-          Why don't you
-          <span class="text-link cursor-pointer" @click="addFriendModal.show()">add one</span>?
+          <span class="text-link cursor-pointer" @click="addFriendModal.show()">Add friends</span>
+          to share what you're playing!
        </div>
      </div>
    </template>
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { SpinnerIcon, TrashIcon, UploadIcon, PlusIcon, EditIcon, CopyIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, OverflowMenu, Checkbox } from '@modrinth/ui'
+import { computed, ref, type Ref, watch } from 'vue'
+import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+import { handleError } from '@/store/notifications'
+import { trackEvent } from '@/helpers/analytics'
+import { open } from '@tauri-apps/plugin-dialog'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { useRouter } from 'vue-router'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+
+const { formatMessage } = useVIntl()
+const router = useRouter()
+
+const deleteConfirmModal = ref()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const title = ref(props.instance.name)
+const icon: Ref<string | undefined> = ref(props.instance.icon_path)
+const groups = ref(props.instance.groups)
+
+const newCategoryInput = ref('')
+
+const installing = computed(() => props.instance.install_stage !== 'installed')
+
+async function duplicateProfile() {
+  await duplicate(props.instance.path).catch(handleError)
+  trackEvent('InstanceDuplicate', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+  })
+}
+
+const allInstances = ref((await list()) as GameInstance[])
+const availableGroups = computed(() => [
+  ...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]),
+])
+
+async function resetIcon() {
+  icon.value = undefined
+  await edit_icon(props.instance.path, null).catch(handleError)
+  trackEvent('InstanceRemoveIcon')
+}
+
+async function setIcon() {
+  const value = await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
+      },
+    ],
+  })
+
+  if (!value) return
+
+  icon.value = value
+  await edit_icon(props.instance.path, icon.value).catch(handleError)
+
+  trackEvent('InstanceSetIcon')
+}
+
+const editProfileObject = computed(() => ({
+  name: title.value.trim().substring(0, 32) ?? 'Instance',
+  groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0),
+}))
+
+const toggleGroup = (group: string) => {
+  if (groups.value.includes(group)) {
+    groups.value = groups.value.filter((x) => x !== group)
+  } else {
+    groups.value.push(group)
+  }
+}
+
+const addCategory = () => {
+  const text = newCategoryInput.value.trim()
+
+  if (text.length > 0) {
+    groups.value.push(text.substring(0, 32))
+    newCategoryInput.value = ''
+  }
+}
+
+watch(
+  [title, groups, groups],
+  async () => {
+    await edit(props.instance.path, editProfileObject.value)
+  },
+  { deep: true },
+)
+
+const removing = ref(false)
+async function removeProfile() {
+  removing.value = true
+  await remove(props.instance.path).catch(handleError)
+  removing.value = false
+
+  trackEvent('InstanceRemove', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+  })
+
+  await router.push({ path: '/' })
+}
+
+const messages = defineMessages({
+  name: {
+    id: 'instance.settings.tabs.general.name',
+    defaultMessage: 'Name',
+  },
+  libraryGroups: {
+    id: 'instance.settings.tabs.general.library-groups',
+    defaultMessage: 'Library groups',
+  },
+  libraryGroupsDescription: {
+    id: 'instance.settings.tabs.general.library-groups.description',
+    defaultMessage:
+      'Library groups allow you to organize your instances into different sections in your library.',
+  },
+  libraryGroupsEnterName: {
+    id: 'instance.settings.tabs.general.library-groups.enter-name',
+    defaultMessage: 'Enter group name',
+  },
+  libraryGroupsCreate: {
+    id: 'instance.settings.tabs.general.library-groups.create',
+    defaultMessage: 'Create new group',
+  },
+  editIcon: {
+    id: 'instance.settings.tabs.general.edit-icon',
+    defaultMessage: 'Edit icon',
+  },
+  selectIcon: {
+    id: 'instance.settings.tabs.general.edit-icon.select',
+    defaultMessage: 'Select icon',
+  },
+  replaceIcon: {
+    id: 'instance.settings.tabs.general.edit-icon.replace',
+    defaultMessage: 'Replace icon',
+  },
+  removeIcon: {
+    id: 'instance.settings.tabs.general.edit-icon.remove',
+    defaultMessage: 'Remove icon',
+  },
+  duplicateInstance: {
+    id: 'instance.settings.tabs.general.duplicate-instance',
+    defaultMessage: 'Duplicate instance',
+  },
+  duplicateInstanceDescription: {
+    id: 'instance.settings.tabs.general.duplicate-instance.description',
+    defaultMessage: 'Creates a copy of this instance, including worlds, configs, mods, etc.',
+  },
+  duplicateButtonTooltipInstalling: {
+    id: 'instance.settings.tabs.general.duplicate-button.tooltip.installing',
+    defaultMessage: 'Cannot duplicate while installing.',
+  },
+  duplicateButton: {
+    id: 'instance.settings.tabs.general.duplicate-button',
+    defaultMessage: 'Duplicate',
+  },
+  deleteInstance: {
+    id: 'instance.settings.tabs.general.delete',
+    defaultMessage: 'Delete instance',
+  },
+  deleteInstanceDescription: {
+    id: 'instance.settings.tabs.general.delete.description',
+    defaultMessage:
+      'Permanently deletes an instance from your device, including your worlds, configs, and all installed content. Be careful, as once you delete a instance there is no way to recover it.',
+  },
+  deleteInstanceButton: {
+    id: 'instance.settings.tabs.general.delete.button',
+    defaultMessage: 'Delete instance',
+  },
+  deletingInstanceButton: {
+    id: 'instance.settings.tabs.general.deleting.button',
+    defaultMessage: 'Deleting...',
+  },
+})
+</script>
+
+<template>
+  <ConfirmModalWrapper
+    ref="deleteConfirmModal"
+    title="Are you sure you want to delete this instance?"
+    description="If you proceed, all data for your instance will be permanently erased, including your worlds. You will not be able to recover it."
+    :has-to-type="false"
+    proceed-label="Delete"
+    @proceed="removeProfile"
+  />
+  <div class="block">
+    <div class="float-end ml-4 relative group">
+      <OverflowMenu
+        v-tooltip="formatMessage(messages.editIcon)"
+        class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
+        :options="[
+          {
+            id: 'select',
+            action: () => setIcon(),
+          },
+          {
+            id: 'remove',
+            color: 'danger',
+            action: () => resetIcon(),
+            shown: !!icon,
+          },
+        ]"
+      >
+        <Avatar
+          :src="icon ? convertFileSrc(icon) : icon"
+          size="108px"
+          class="!border-4 group-hover:brightness-75"
+          no-shadow
+        />
+        <div class="absolute top-0 right-0 m-2">
+          <div
+            class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
+          >
+            <EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+          </div>
+        </div>
+        <template #select>
+          <UploadIcon />
+          {{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+        </template>
+        <template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+      </OverflowMenu>
+    </div>
+    <label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+      {{ formatMessage(messages.name) }}
+    </label>
+    <div class="flex">
+      <input
+        id="instance-name"
+        v-model="title"
+        autocomplete="off"
+        maxlength="80"
+        class="flex-grow"
+        type="text"
+      />
+    </div>
+    <template v-if="instance.install_stage == 'installed'">
+      <div>
+        <h2
+          id="duplicate-instance-label"
+          class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block"
+        >
+          {{ formatMessage(messages.duplicateInstance) }}
+        </h2>
+        <p class="m-0 mb-2">
+          {{ formatMessage(messages.duplicateInstanceDescription) }}
+        </p>
+      </div>
+      <ButtonStyled>
+        <button
+          v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
+          aria-labelledby="duplicate-instance-label"
+          :disabled="installing"
+          @click="duplicateProfile"
+        >
+          <CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+        </button>
+      </ButtonStyled>
+    </template>
+    <h2 class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
+      {{ formatMessage(messages.libraryGroups) }}
+    </h2>
+    <p class="m-0 mb-2">
+      {{ formatMessage(messages.libraryGroupsDescription) }}
+    </p>
+    <div class="flex flex-col gap-1">
+      <Checkbox
+        v-for="group in availableGroups"
+        :key="group"
+        :model-value="groups.includes(group)"
+        :label="group"
+        @click="toggleGroup(group)"
+      />
+      <div class="flex gap-2 items-center">
+        <input
+          v-model="newCategoryInput"
+          type="text"
+          :placeholder="formatMessage(messages.libraryGroupsEnterName)"
+          @submit="() => addCategory"
+        />
+        <ButtonStyled>
+          <button class="w-fit" @click="() => addCategory()">
+            <PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+    <h2 id="delete-instance-label" class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
+      {{ formatMessage(messages.deleteInstance) }}
+    </h2>
+    <p class="m-0 mb-2">
+      {{ formatMessage(messages.deleteInstanceDescription) }}
+    </p>
+    <ButtonStyled color="red">
+      <button
+        aria-labelledby="delete-instance-label"
+        :disabled="removing"
+        @click="deleteConfirmModal.show()"
+      >
+        <SpinnerIcon v-if="removing" class="animate-spin" />
+        <TrashIcon v-else />
+        {{
+          removing
+            ? formatMessage(messages.deletingInstanceButton)
+            : formatMessage(messages.deleteInstanceButton)
+        }}
+      </button>
+    </ButtonStyled>
+  </div>
+</template>
+<style scoped lang="scss">
+.hovering-icon-shadow {
+  box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
+}
+</style>
--- a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+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 { edit } from '@/helpers/profile'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const globalSettings = (await get().catch(handleError)) as AppSettings
+
+const overrideHooks = ref(
+  !!props.instance.hooks.pre_launch ||
+    !!props.instance.hooks.wrapper ||
+    !!props.instance.hooks.post_exit,
+)
+const hooks = ref(props.instance.hooks ?? globalSettings.hooks)
+
+const editProfileObject = computed(() => {
+  const editProfile: {
+    hooks?: Hooks
+  } = {}
+
+  if (overrideHooks.value) {
+    editProfile.hooks = hooks.value
+  }
+
+  return editProfile
+})
+
+watch(
+  [overrideHooks, hooks],
+  async () => {
+    await edit(props.instance.path, editProfileObject.value)
+  },
+  { deep: true },
+)
+const messages = defineMessages({
+  hooks: {
+    id: 'instance.settings.tabs.hooks.title',
+    defaultMessage: 'Game launch hooks',
+  },
+  hooksDescription: {
+    id: 'instance.settings.tabs.hooks.description',
+    defaultMessage:
+      'Hooks allow advanced users to run certain system commands before and after launching the game.',
+  },
+  customHooks: {
+    id: 'instance.settings.tabs.hooks.custom-hooks',
+    defaultMessage: 'Custom launch hooks',
+  },
+  preLaunch: {
+    id: 'instance.settings.tabs.hooks.pre-launch',
+    defaultMessage: 'Pre-launch',
+  },
+  preLaunchDescription: {
+    id: 'instance.settings.tabs.hooks.pre-launch.description',
+    defaultMessage: 'Ran before the instance is launched.',
+  },
+  preLaunchEnter: {
+    id: 'instance.settings.tabs.hooks.pre-launch.enter',
+    defaultMessage: 'Enter pre-launch command...',
+  },
+  wrapper: {
+    id: 'instance.settings.tabs.hooks.wrapper',
+    defaultMessage: 'Wrapper',
+  },
+  wrapperDescription: {
+    id: 'instance.settings.tabs.hooks.wrapper.description',
+    defaultMessage: 'Wrapper command for launching Minecraft.',
+  },
+  wrapperEnter: {
+    id: 'instance.settings.tabs.hooks.wrapper.enter',
+    defaultMessage: 'Enter wrapper command...',
+  },
+  postExit: {
+    id: 'instance.settings.tabs.hooks.post-exit',
+    defaultMessage: 'Post-exit',
+  },
+  postExitDescription: {
+    id: 'instance.settings.tabs.hooks.post-exit.description',
+    defaultMessage: 'Ran after the game closes.',
+  },
+  postExitEnter: {
+    id: 'instance.settings.tabs.hooks.post-exit.enter',
+    defaultMessage: 'Enter post-exit command...',
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+      {{ formatMessage(messages.hooks) }}
+    </h2>
+    <p class="m-0">
+      {{ formatMessage(messages.hooksDescription) }}
+    </p>
+    <Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="mt-2" />
+
+    <h2 class="mt-2 mb-1 text-lg font-extrabold text-contrast">
+      {{ formatMessage(messages.preLaunch) }}
+    </h2>
+    <p class="m-0">
+      {{ formatMessage(messages.preLaunchDescription) }}
+    </p>
+    <input
+      id="pre-launch"
+      v-model="hooks.pre_launch"
+      autocomplete="off"
+      :disabled="!overrideHooks"
+      type="text"
+      :placeholder="formatMessage(messages.preLaunchEnter)"
+      class="w-full mt-2"
+    />
+
+    <h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
+      {{ formatMessage(messages.wrapper) }}
+    </h2>
+    <p class="m-0">
+      {{ formatMessage(messages.wrapperDescription) }}
+    </p>
+    <input
+      id="wrapper"
+      v-model="hooks.wrapper"
+      autocomplete="off"
+      :disabled="!overrideHooks"
+      type="text"
+      :placeholder="formatMessage(messages.wrapperEnter)"
+      class="w-full mt-2"
+    />
+
+    <h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
+      {{ formatMessage(messages.postExit) }}
+    </h2>
+    <p class="m-0">
+      {{ formatMessage(messages.postExitDescription) }}
+    </p>
+    <input
+      id="post-exit"
+      v-model="hooks.post_exit"
+      autocomplete="off"
+      :disabled="!overrideHooks"
+      type="text"
+      :placeholder="formatMessage(messages.postExitEnter)"
+      class="w-full mt-2"
+    />
+  </div>
+</template>
--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -0,0 +1,742 @@
+<script setup lang="ts">
+import {
+  TransferIcon,
+  IssuesIcon,
+  HammerIcon,
+  DownloadIcon,
+  WrenchIcon,
+  UndoIcon,
+  SpinnerIcon,
+  UnplugIcon,
+  UnlinkIcon,
+} from '@modrinth/assets'
+import { Avatar, Checkbox, Chips, ButtonStyled, TeleportDropdownMenu } from '@modrinth/ui'
+import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
+import { edit, install, update_repair_modrinth } from '@/helpers/profile'
+import { handleError } from '@/store/notifications'
+import { trackEvent } from '@/helpers/analytics'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { get_loader_versions } from '@/helpers/metadata'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
+import {
+  formatCategory,
+  type GameVersionTag,
+  type PlatformTag,
+  type Project,
+  type Version,
+} from '@modrinth/utils'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { get_project, get_version_many } from '@/helpers/cache'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import dayjs from 'dayjs'
+import type { GameInstance, ManifestLoaderVersion, Manifest } from '@/helpers/types.d.ts'
+
+const { formatMessage } = useVIntl()
+
+const repairConfirmModal = ref()
+const modpackVersionModal = ref()
+const modalConfirmUnpair = ref()
+const modalConfirmReinstall = ref()
+
+const props = defineProps<{
+  instance: GameInstance
+  offline?: boolean
+}>()
+
+const loader = ref(props.instance.loader)
+const gameVersion = ref(props.instance.game_version)
+
+const showSnapshots = ref(false)
+
+const [
+  fabric_versions,
+  forge_versions,
+  quilt_versions,
+  neoforge_versions,
+  all_game_versions,
+  loaders,
+] = await Promise.all([
+  get_loader_versions('fabric')
+    .then((manifest: Manifest) => shallowRef(manifest))
+    .catch(handleError),
+  get_loader_versions('forge')
+    .then((manifest: Manifest) => shallowRef(manifest))
+    .catch(handleError),
+  get_loader_versions('quilt')
+    .then((manifest: Manifest) => shallowRef(manifest))
+    .catch(handleError),
+  get_loader_versions('neo')
+    .then((manifest: Manifest) => shallowRef(manifest))
+    .catch(handleError),
+  get_game_versions()
+    .then((gameVersions: GameVersionTag[]) => shallowRef(gameVersions))
+    .catch(handleError),
+  get_loaders()
+    .then((value: PlatformTag[]) =>
+      value
+        .filter(
+          (item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla',
+        )
+        .sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+    )
+    .then((loader: PlatformTag[]) => ref(loader))
+    .catch(handleError),
+])
+
+const modpackProject: Ref<Project | null> = ref(null)
+const modpackVersion: Ref<Version | null> = ref(null)
+const modpackVersions: Ref<Version[] | null> = ref(null)
+const fetching = ref(true)
+
+if (props.instance.linked_data && props.instance.linked_data.project_id && !props.offline) {
+  get_project(props.instance.linked_data.project_id, 'must_revalidate')
+    .then((project) => {
+      modpackProject.value = project
+
+      if (project && project.versions) {
+        get_version_many(project.versions, 'must_revalidate')
+          .then((versions: Version[]) => {
+            modpackVersions.value = versions.sort((a, b) =>
+              dayjs(b.date_published).diff(dayjs(a.date_published)),
+            )
+            modpackVersion.value =
+              versions.find(
+                (version: Version) => version.id === props.instance.linked_data?.version_id,
+              ) ?? null
+          })
+          .catch(handleError)
+          .finally(() => {
+            fetching.value = false
+          })
+      }
+    })
+    .catch((err) => {
+      handleError(err)
+      fetching.value = false
+    })
+} else {
+  fetching.value = false
+}
+
+const currentLoaderIcon = computed(
+  () => loaders?.value.find((x) => x.name === props.instance.loader)?.icon,
+)
+
+const gameVersionsForLoader = computed(() => {
+  return all_game_versions?.value.filter((item) => {
+    if (loader.value === 'fabric') {
+      return !!fabric_versions?.value.gameVersions.some((x) => item.version === x.id)
+    } else if (loader.value === 'forge') {
+      return !!forge_versions?.value.gameVersions.some((x) => item.version === x.id)
+    } else if (loader.value === 'quilt') {
+      return !!quilt_versions?.value.gameVersions.some((x) => item.version === x.id)
+    } else if (loader.value === 'neoforge') {
+      return !!neoforge_versions?.value.gameVersions.some((x) => item.version === x.id)
+    }
+
+    return []
+  })
+})
+
+const hasSnapshots = computed(() =>
+  gameVersionsForLoader.value?.some((x) => x.version_type !== 'release'),
+)
+
+const selectableGameVersionNumbers = computed(() => {
+  return gameVersionsForLoader.value
+    ?.filter((x) => x.version_type === 'release' || showSnapshots.value)
+    .map((x) => x.version)
+})
+
+const selectableLoaderVersions: ComputedRef<ManifestLoaderVersion[] | undefined> = computed(() => {
+  if (gameVersion.value) {
+    if (loader.value === 'fabric') {
+      return fabric_versions?.value.gameVersions[0].loaders
+    } else if (loader.value === 'forge') {
+      return forge_versions?.value?.gameVersions?.find((item) => item.id === gameVersion.value)
+        ?.loaders
+    } else if (loader.value === 'quilt') {
+      return quilt_versions?.value.gameVersions[0].loaders
+    } else if (loader.value === 'neoforge') {
+      return neoforge_versions?.value?.gameVersions?.find((item) => item.id === gameVersion.value)
+        ?.loaders
+    }
+  }
+  return []
+})
+const loaderVersionIndex: Ref<number> = ref(-1)
+
+resetLoaderVersionIndex()
+
+function resetLoaderVersionIndex() {
+  loaderVersionIndex.value =
+    selectableLoaderVersions.value?.findIndex((x) => x.id === props.instance.loader_version) ?? -1
+}
+
+const isValid = computed(() => {
+  return (
+    selectableGameVersionNumbers.value?.includes(gameVersion.value) &&
+    ((loaderVersionIndex.value !== undefined && loaderVersionIndex.value >= 0) ||
+      loader.value === 'vanilla')
+  )
+})
+
+const isChanged = computed(() => {
+  return (
+    loader.value !== props.instance.loader ||
+    gameVersion.value !== props.instance.game_version ||
+    (loader.value !== 'vanilla' &&
+      loaderVersionIndex.value !== undefined &&
+      loaderVersionIndex.value >= 0 &&
+      selectableLoaderVersions.value?.[loaderVersionIndex.value].id !==
+        props.instance.loader_version)
+  )
+})
+
+watch(loader, () => {
+  loaderVersionIndex.value = 0
+})
+
+const editing = ref(false)
+
+async function saveGvLoaderEdits() {
+  editing.value = true
+
+  const editProfile: { loader?: string; game_version?: string; loader_version?: string } = {}
+  editProfile.loader = loader.value
+  editProfile.game_version = gameVersion.value
+
+  if (loader.value !== 'vanilla' && loaderVersionIndex.value !== undefined) {
+    editProfile.loader_version = selectableLoaderVersions.value?.[loaderVersionIndex.value].id
+  } else {
+    loaderVersionIndex.value = -1
+  }
+  console.log('Editing:')
+  console.log(loader.value)
+
+  await edit(props.instance.path, editProfile).catch(handleError)
+  await repairProfile(false)
+
+  editing.value = false
+}
+
+const installing = computed(() => props.instance.install_stage !== 'installed')
+const repairing = ref(false)
+const reinstalling = ref(false)
+const changingVersion = ref(false)
+
+async function repairProfile(force: boolean) {
+  if (force) {
+    repairing.value = true
+  }
+  await install(props.instance.path, force).catch(handleError)
+  if (force) {
+    repairing.value = false
+  }
+
+  trackEvent('InstanceRepair', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+  })
+}
+
+async function unpairProfile() {
+  await edit(props.instance.path, {
+    linked_data: null,
+  })
+  modpackProject.value = null
+  modpackVersion.value = null
+  modpackVersions.value = null
+  modalConfirmUnpair.value.hide()
+}
+
+async function repairModpack() {
+  reinstalling.value = true
+  await update_repair_modrinth(props.instance.path).catch(handleError)
+  reinstalling.value = false
+
+  trackEvent('InstanceRepair', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+  })
+}
+
+const messages = defineMessages({
+  cannotWhileInstalling: {
+    id: 'instance.settings.tabs.installation.tooltip.cannot-while-installing',
+    defaultMessage: 'Cannot {action} while installing',
+  },
+  cannotWhileOffline: {
+    id: 'instance.settings.tabs.installation.tooltip.cannot-while-offline',
+    defaultMessage: 'Cannot {action} while offline',
+  },
+  cannotWhileRepairing: {
+    id: 'instance.settings.tabs.installation.tooltip.cannot-while-repairing',
+    defaultMessage: 'Cannot {action} while repairing',
+  },
+  currentlyInstalled: {
+    id: 'instance.settings.tabs.installation.currently-installed',
+    defaultMessage: 'Currently installed',
+  },
+  platform: {
+    id: 'instance.settings.tabs.installation.platform',
+    defaultMessage: 'Platform',
+  },
+  gameVersion: {
+    id: 'instance.settings.tabs.installation.game-version',
+    defaultMessage: 'Game version',
+  },
+  loaderVersion: {
+    id: 'instance.settings.tabs.installation.loader-version',
+    defaultMessage: '{loader} version',
+  },
+  showAllVersions: {
+    id: 'instance.settings.tabs.installation.show-all-versions',
+    defaultMessage: 'Show all versions',
+  },
+  install: {
+    id: 'instance.settings.tabs.installation.install',
+    defaultMessage: 'Install',
+  },
+  resetSelections: {
+    id: 'instance.settings.tabs.installation.reset-selections',
+    defaultMessage: 'Reset to current',
+  },
+  unknownVersion: {
+    id: 'instance.settings.tabs.installation.unknown-version',
+    defaultMessage: '(unknown version)',
+  },
+  repairConfirmTitle: {
+    id: 'instance.settings.tabs.installation.repair.confirm-title',
+    defaultMessage: 'Repair instance?',
+  },
+  repairConfirmDescription: {
+    id: 'instance.settings.tabs.installation.repair.description',
+    defaultMessage:
+      'Repairing reinstalls Minecraft dependencies and checks for corruption. This may resolve issues if your game is not launching due to launcher-related errors, but will not resolve issues or crashes related to installed mods.',
+  },
+  repairButton: {
+    id: 'instance.settings.tabs.installation.repair.button',
+    defaultMessage: 'Repair',
+  },
+  repairingButton: {
+    id: 'instance.settings.tabs.installation.repair.button.repairing',
+    defaultMessage: 'Repairing',
+  },
+  repairInProgress: {
+    id: 'instance.settings.tabs.installation.repair.in-progress',
+    defaultMessage: 'Repair in progress',
+  },
+  repairAction: {
+    id: 'instance.settings.tabs.installation.tooltip.action.repair',
+    defaultMessage: 'repair',
+  },
+  changeVersionCannotWhileFetching: {
+    id: 'instance.settings.tabs.installation.change-version.cannot-while-fetching',
+    defaultMessage: 'Fetching modpack versions',
+  },
+  changeVersionButton: {
+    id: 'instance.settings.tabs.installation.change-version.button',
+    defaultMessage: 'Change version',
+  },
+  changeVersionAction: {
+    id: 'instance.settings.tabs.installation.tooltip.action.change-version',
+    defaultMessage: 'change version',
+  },
+  installingButton: {
+    id: 'instance.settings.tabs.installation.change-version.button.installing',
+    defaultMessage: 'Installing',
+  },
+  installButton: {
+    id: 'instance.settings.tabs.installation.change-version.button.install',
+    defaultMessage: 'Install',
+  },
+  installingNewVersion: {
+    id: 'instance.settings.tabs.installation.change-version.in-progress',
+    defaultMessage: 'Installing new version',
+  },
+  minecraftVersion: {
+    id: 'instance.settings.tabs.installation.minecraft-version',
+    defaultMessage: 'Minecraft {version}',
+  },
+  noLoaderVersions: {
+    id: 'instance.settings.tabs.installation.no-loader-versions',
+    defaultMessage: '{loader} is not available for Minecraft {version}. Try another mod loader.',
+  },
+  noConnection: {
+    id: 'instance.settings.tabs.installation.no-connection',
+    defaultMessage: 'Cannot fetch linked modpack details. Please check your internet connection.',
+  },
+  noModpackFound: {
+    id: 'instance.settings.tabs.installation.no-modpack-found',
+    defaultMessage:
+      'This instance is linked to a modpack, but the modpack could not be found on Modrinth.',
+  },
+  debugInformation: {
+    id: 'instance.settings.tabs.installation.debug-information',
+    defaultMessage: 'Debug information:',
+  },
+  fetchingModpackDetails: {
+    id: 'instance.settings.tabs.installation.fetching-modpack-details',
+    defaultMessage: 'Fetching modpack details',
+  },
+  unlinkInstanceTitle: {
+    id: 'instance.settings.tabs.installation.unlink.title',
+    defaultMessage: 'Unlink from modpack',
+  },
+  unlinkInstanceDescription: {
+    id: 'instance.settings.tabs.installation.unlink.description',
+    defaultMessage: `This instance is linked to a modpack, which means mods can't be updated and you can't change the mod loader or Minecraft version. Unlinking will permanently disconnect this instance from the modpack.`,
+  },
+  unlinkInstanceButton: {
+    id: 'instance.settings.tabs.installation.unlink.button',
+    defaultMessage: 'Unlink instance',
+  },
+  unlinkInstanceConfirmTitle: {
+    id: 'instance.settings.tabs.installation.unlink.title',
+    defaultMessage: 'Are you sure you want to unlink this instance?',
+  },
+  unlinkInstanceConfirmDescription: {
+    id: 'instance.settings.tabs.installation.unlink.description',
+    defaultMessage:
+      'If you proceed, you will not be able to re-link it without creating an entirely new instance. You will no longer receive modpack updates and it will become a normal.',
+  },
+  reinstallModpackConfirmTitle: {
+    id: 'instance.settings.tabs.installation.reinstall.confirm.title',
+    defaultMessage: 'Are you sure you want to reinstall this instance?',
+  },
+  reinstallModpackConfirmDescription: {
+    id: 'instance.settings.tabs.installation.reinstall.confirm.description',
+    defaultMessage: `Reinstalling will reset content provided by the modpack to their original state.`,
+  },
+  reinstallModpackTitle: {
+    id: 'instance.settings.tabs.installation.reinstall.title',
+    defaultMessage: 'Reinstall modpack',
+  },
+  reinstallModpackDescription: {
+    id: 'instance.settings.tabs.installation.reinstall.description',
+    defaultMessage: `Resets all content provided by the modpack to their original state. This may fix unexpected behavior if changes have been made to the instance.`,
+  },
+  reinstallModpackButton: {
+    id: 'instance.settings.tabs.installation.reinstall.button',
+    defaultMessage: 'Reinstall modpack',
+  },
+  reinstallingModpackButton: {
+    id: 'instance.settings.tabs.installation.reinstall.button.reinstalling',
+    defaultMessage: 'Reinstalling modpack',
+  },
+  reinstallAction: {
+    id: 'instance.settings.tabs.installation.tooltip.action.reinstall',
+    defaultMessage: 'reinstall',
+  },
+})
+</script>
+
+<template>
+  <ConfirmModalWrapper
+    ref="repairConfirmModal"
+    :title="formatMessage(messages.repairConfirmTitle)"
+    :description="formatMessage(messages.repairConfirmDescription)"
+    :proceed-icon="HammerIcon"
+    :proceed-label="formatMessage(messages.repairButton)"
+    :danger="false"
+    @proceed="() => repairProfile(true)"
+  />
+  <ModpackVersionModal
+    v-if="instance.linked_data && modpackVersions"
+    ref="modpackVersionModal"
+    :instance="instance"
+    :versions="modpackVersions"
+    @finish-install="
+      () => {
+        changingVersion = false
+        modpackVersion =
+          modpackVersions?.find(
+            (version: Version) => version.id === props.instance.linked_data?.version_id,
+          ) ?? null
+      }
+    "
+  />
+  <ConfirmModalWrapper
+    ref="modalConfirmUnpair"
+    :title="formatMessage(messages.unlinkInstanceConfirmTitle)"
+    :description="formatMessage(messages.unlinkInstanceConfirmDescription)"
+    :proceed-icon="UnlinkIcon"
+    :proceed-label="formatMessage(messages.unlinkInstanceButton)"
+    @proceed="() => unpairProfile()"
+  />
+  <ConfirmModalWrapper
+    ref="modalConfirmReinstall"
+    :title="formatMessage(messages.reinstallModpackConfirmTitle)"
+    :description="formatMessage(messages.reinstallModpackConfirmDescription)"
+    :proceed-icon="DownloadIcon"
+    :proceed-label="formatMessage(messages.reinstallModpackButton)"
+    @proceed="() => repairModpack()"
+  />
+  <div>
+    <h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+      {{ formatMessage(messages.currentlyInstalled) }}
+    </h2>
+    <div
+      v-if="!modpackProject && instance.linked_data && offline && !fetching"
+      class="text-secondary font-medium mb-2"
+    >
+      <UnplugIcon class="top-[3px] relative" /> {{ formatMessage(messages.noConnection) }}
+    </div>
+    <div v-else-if="!modpackProject && instance.linked_data && !fetching" class="mb-2">
+      <p class="text-brand-red font-medium mt-0">
+        <IssuesIcon class="top-[3px] relative" /> {{ formatMessage(messages.noModpackFound) }}
+      </p>
+      <p>{{ formatMessage(messages.debugInformation) }}</p>
+      <div class="bg-bg p-6 rounded-2xl mt-2 text-sm text-secondary">
+        {{ instance.linked_data }}
+      </div>
+    </div>
+    <div class="flex gap-4 items-center justify-between p-4 bg-bg rounded-2xl">
+      <div v-if="fetching" class="flex items-center gap-2 h-10">
+        <SpinnerIcon class="animate-spin" />
+        {{ formatMessage(messages.fetchingModpackDetails) }}
+      </div>
+      <template v-else>
+        <div class="flex gap-2 items-center">
+          <Avatar v-if="modpackProject" :src="modpackProject?.icon_url" size="40px" />
+          <div
+            v-else
+            class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 [&_svg]:h-full [&_svg]:w-full"
+          >
+            <div v-if="!!currentLoaderIcon" class="contents" v-html="currentLoaderIcon" />
+            <WrenchIcon v-else />
+          </div>
+          <div class="flex flex-col gap-2 justify-center">
+            <span class="font-semibold leading-none">
+              {{
+                modpackProject
+                  ? modpackProject.title
+                  : formatMessage(messages.minecraftVersion, { version: instance.game_version })
+              }}
+            </span>
+            <span class="text-sm text-secondary leading-none">
+              {{
+                modpackProject
+                  ? modpackVersion
+                    ? modpackVersion?.version_number
+                    : 'Unknown version'
+                  : formatCategory(instance.loader)
+              }}
+              <template v-if="instance.loader !== 'vanilla' && !modpackProject">
+                {{ instance.loader_version || formatMessage(messages.unknownVersion) }}
+              </template>
+            </span>
+          </div>
+        </div>
+        <div class="flex gap-1">
+          <ButtonStyled color="orange" type="transparent" hover-color-fill="background">
+            <button
+              v-tooltip="
+                repairing
+                  ? formatMessage(messages.repairInProgress)
+                  : installing || reinstalling
+                    ? formatMessage(messages.cannotWhileInstalling, {
+                        action: formatMessage(messages.repairAction),
+                      })
+                    : offline
+                      ? formatMessage(messages.cannotWhileOffline, {
+                          action: formatMessage(messages.repairAction),
+                        })
+                      : null
+              "
+              :disabled="installing || repairing || reinstalling || offline"
+              @click="repairConfirmModal.show()"
+            >
+              <SpinnerIcon v-if="repairing" class="animate-spin" />
+              <HammerIcon v-else />
+              {{
+                repairing
+                  ? formatMessage(messages.repairingButton)
+                  : formatMessage(messages.repairButton)
+              }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-if="modpackProject" hover-color-fill="background">
+            <button
+              v-tooltip="
+                changingVersion
+                  ? formatMessage(messages.installingNewVersion)
+                  : repairing
+                    ? formatMessage(messages.cannotWhileRepairing, {
+                        action: formatMessage(messages.changeVersionAction),
+                      })
+                    : installing || reinstalling
+                      ? formatMessage(messages.cannotWhileInstalling, {
+                          action: formatMessage(messages.changeVersionAction),
+                        })
+                      : fetching && !modpackVersions
+                        ? formatMessage(messages.changeVersionCannotWhileFetching)
+                        : offline
+                          ? formatMessage(messages.cannotWhileOffline, {
+                              action: formatMessage(messages.changeVersionAction),
+                            })
+                          : null
+              "
+              :disabled="
+                changingVersion ||
+                repairing ||
+                installing ||
+                reinstalling ||
+                offline ||
+                fetching ||
+                !modpackVersions
+              "
+              @click="
+                () => {
+                  changingVersion = true
+                  modpackVersionModal.show()
+                }
+              "
+            >
+              <SpinnerIcon v-if="changingVersion" class="animate-spin" />
+              <TransferIcon v-else />
+              {{
+                changingVersion
+                  ? formatMessage(messages.installingButton)
+                  : formatMessage(messages.changeVersionButton)
+              }}
+            </button>
+          </ButtonStyled>
+        </div>
+      </template>
+    </div>
+    <template v-if="!instance.linked_data || !instance.linked_data.locked">
+      <h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
+        {{ formatMessage(messages.platform) }}
+      </h2>
+      <Chips v-if="loaders" v-model="loader" :items="loaders.map((x) => x.name)" class="mt-2" />
+      <h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
+        {{ formatMessage(messages.gameVersion) }}
+      </h2>
+      <div class="flex flex-wrap mt-2 gap-2">
+        <TeleportDropdownMenu
+          v-if="selectableGameVersionNumbers !== undefined"
+          v-model="gameVersion"
+          :options="selectableGameVersionNumbers"
+          name="Game Version Dropdown"
+        />
+        <Checkbox
+          v-if="hasSnapshots"
+          v-model="showSnapshots"
+          :label="formatMessage(messages.showAllVersions)"
+        />
+      </div>
+      <template v-if="loader !== 'vanilla'">
+        <h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
+          {{ formatMessage(messages.loaderVersion, { loader: formatCategory(loader) }) }}
+        </h2>
+        <TeleportDropdownMenu
+          v-if="selectableLoaderVersions"
+          :model-value="selectableLoaderVersions[loaderVersionIndex]"
+          :options="selectableLoaderVersions"
+          :display-name="(option: ManifestLoaderVersion) => option?.id"
+          name="Version selector"
+          class="mt-2"
+          @change="(value) => (loaderVersionIndex = value.index)"
+        />
+        <div v-else class="mt-2 text-brand-red flex gap-2 items-center">
+          <IssuesIcon />
+          {{ formatMessage(messages.noLoaderVersions, { loader: loader, version: gameVersion }) }}
+        </div>
+      </template>
+      <div class="mt-4 flex flex-wrap gap-2">
+        <ButtonStyled color="brand">
+          <button :disabled="!isValid || !isChanged || editing" @click="saveGvLoaderEdits()">
+            <SpinnerIcon v-if="editing" class="animate-spin" />
+            <DownloadIcon v-else />
+            {{
+              editing
+                ? formatMessage(messages.installingButton)
+                : formatMessage(messages.installButton)
+            }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button
+            :disabled="!isChanged"
+            @click="
+              () => {
+                loader = instance.loader
+                gameVersion = instance.game_version
+                resetLoaderVersionIndex()
+              }
+            "
+          >
+            <UndoIcon />
+            {{ formatMessage(messages.resetSelections) }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </template>
+    <template v-else>
+      <template v-if="instance.linked_data && instance.linked_data.locked">
+        <h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+          {{ formatMessage(messages.unlinkInstanceTitle) }}
+        </h2>
+        <p class="m-0">
+          {{ formatMessage(messages.unlinkInstanceDescription) }}
+        </p>
+        <ButtonStyled>
+          <button class="mt-2" @click="modalConfirmUnpair.show()">
+            <UnlinkIcon /> {{ formatMessage(messages.unlinkInstanceButton) }}
+          </button>
+        </ButtonStyled>
+        <template v-if="modpackProject">
+          <div>
+            <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast block mt-4">
+              {{ formatMessage(messages.reinstallModpackTitle) }}
+            </h2>
+            <p class="m-0">
+              {{ formatMessage(messages.reinstallModpackDescription) }}
+            </p>
+          </div>
+          <ButtonStyled color="red" type="outlined">
+            <button
+              v-tooltip="
+                reinstalling
+                  ? formatMessage(messages.reinstallingModpackButton)
+                  : repairing
+                    ? formatMessage(messages.cannotWhileRepairing, {
+                        action: formatMessage(messages.reinstallAction),
+                      })
+                    : installing
+                      ? formatMessage(messages.cannotWhileInstalling, {
+                          action: formatMessage(messages.reinstallAction),
+                        })
+                      : offline
+                        ? formatMessage(messages.cannotWhileOffline, {
+                            action: formatMessage(messages.reinstallAction),
+                          })
+                        : null
+              "
+              class="mt-2"
+              :disabled="
+                changingVersion ||
+                repairing ||
+                installing ||
+                offline ||
+                fetching ||
+                !modpackVersions
+              "
+              @click="modalConfirmReinstall.show()"
+            >
+              <SpinnerIcon v-if="reinstalling" class="animate-spin" />
+              <DownloadIcon v-else />
+              {{
+                reinstalling
+                  ? formatMessage(messages.reinstallingModpackButton)
+                  : formatMessage(messages.reinstallModpackButton)
+              }}
+            </button>
+          </ButtonStyled>
+        </template>
+      </template>
+    </template>
+  </div>
+</template>
--- a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { Checkbox, Slider } from '@modrinth/ui'
+import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
+import { computed, readonly, ref, watch } from 'vue'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
+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'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const globalSettings = (await get().catch(handleError)) as AppSettings
+
+const overrideJavaInstall = ref(!!props.instance.java_path)
+const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
+const javaInstall = ref({ path: optimalJava.path ?? props.instance.java_path })
+
+const overrideJavaArgs = ref(props.instance.extra_launch_args?.length !== undefined)
+const javaArgs = ref(
+  (props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
+)
+
+const overrideEnvVars = ref(props.instance.custom_env_vars?.length !== undefined)
+const envVars = ref(
+  (props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
+    .map((x) => x.join('='))
+    .join(' '),
+)
+
+const overrideMemorySettings = ref(!!props.instance.memory)
+const memory = ref(props.instance.memory ?? globalSettings.memory)
+const maxMemory = Math.floor((await get_max_memory().catch(handleError)) / 1024)
+
+const editProfileObject = computed(() => {
+  const editProfile: {
+    java_path?: string
+    extra_launch_args?: string[]
+    custom_env_vars?: string[][]
+    memory?: MemorySettings
+  } = {}
+
+  if (overrideJavaInstall.value) {
+    if (javaInstall.value.path !== '') {
+      editProfile.java_path = javaInstall.value.path.replace('java.exe', 'javaw.exe')
+    }
+  }
+
+  if (overrideJavaArgs.value) {
+    editProfile.extra_launch_args = javaArgs.value.trim().split(/\s+/).filter(Boolean)
+  }
+
+  if (overrideEnvVars.value) {
+    editProfile.custom_env_vars = envVars.value
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((x) => x.split('=').filter(Boolean))
+  }
+
+  if (overrideMemorySettings.value) {
+    editProfile.memory = memory.value
+  }
+
+  return editProfile
+})
+
+watch(
+  [
+    overrideJavaInstall,
+    javaInstall,
+    overrideJavaArgs,
+    javaArgs,
+    overrideEnvVars,
+    envVars,
+    overrideMemorySettings,
+    memory,
+  ],
+  async () => {
+    await edit(props.instance.path, editProfileObject.value)
+  },
+  { deep: true },
+)
+
+const messages = defineMessages({
+  javaInstallation: {
+    id: 'instance.settings.tabs.java.java-installation',
+    defaultMessage: 'Java installation',
+  },
+  javaArguments: {
+    id: 'instance.settings.tabs.java.java-arguments',
+    defaultMessage: 'Java arguments',
+  },
+  javaEnvironmentVariables: {
+    id: 'instance.settings.tabs.java.environment-variables',
+    defaultMessage: 'Environment variables',
+  },
+  javaMemory: {
+    id: 'instance.settings.tabs.java.java-memory',
+    defaultMessage: 'Memory allocated',
+  },
+  hooks: {
+    id: 'instance.settings.tabs.java.hooks',
+    defaultMessage: 'Hooks',
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+      {{ formatMessage(messages.javaInstallation) }}
+    </h2>
+    <Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2" />
+    <template v-if="!overrideJavaInstall">
+      <div class="flex my-2 items-center gap-2 font-semibold">
+        <template v-if="javaInstall">
+          <CheckCircleIcon class="text-brand-green h-4 w-4" />
+          <span>Using default Java {{ optimalJava.major_version }} installation:</span>
+        </template>
+        <template v-else-if="optimalJava">
+          <XCircleIcon class="text-brand-red h-5 w-5" />
+          <span
+            >Could not find a default Java {{ optimalJava.major_version }} installation. Please set
+            one below:</span
+          >
+        </template>
+        <template v-else>
+          <XCircleIcon class="text-brand-red h-5 w-5" />
+          <span
+            >Could not automatically determine a Java installation to use. Please set one
+            below:</span
+          >
+        </template>
+      </div>
+      <div
+        v-if="javaInstall && !overrideJavaInstall"
+        class="p-4 bg-bg rounded-xl text-xs text-secondary leading-none font-mono"
+      >
+        {{ javaInstall.path }}
+      </div>
+    </template>
+    <JavaSelector v-if="overrideJavaInstall || !javaInstall" v-model="javaInstall" />
+    <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+      {{ formatMessage(messages.javaMemory) }}
+    </h2>
+    <Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2" />
+    <Slider
+      id="max-memory"
+      v-model="memory.maximum"
+      :disabled="!overrideMemorySettings"
+      :min="512"
+      :max="maxMemory"
+      :step="64"
+      unit="MB"
+    />
+    <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+      {{ formatMessage(messages.javaArguments) }}
+    </h2>
+    <Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
+    <input
+      id="java-args"
+      v-model="javaArgs"
+      autocomplete="off"
+      :disabled="!overrideJavaArgs"
+      type="text"
+      class="w-full"
+      placeholder="Enter java arguments..."
+    />
+    <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+      {{ formatMessage(messages.javaEnvironmentVariables) }}
+    </h2>
+    <Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
+    <input
+      id="env-vars"
+      v-model="envVars"
+      autocomplete="off"
+      :disabled="!overrideEnvVars"
+      type="text"
+      class="w-full"
+      placeholder="Enter environmental variables..."
+    />
+  </div>
+</template>
--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+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 { edit } from '@/helpers/profile'
+
+const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const globalSettings = (await get().catch(handleError)) as AppSettings
+
+const overrideWindowSettings = ref(
+  !!props.instance.game_resolution || !!props.instance.force_fullscreen,
+)
+const resolution: Ref<[number, number]> = ref(
+  props.instance.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
+)
+const fullscreenSetting: Ref<boolean> = ref(
+  props.instance.force_fullscreen ?? globalSettings.force_fullscreen,
+)
+
+const editProfileObject = computed(() => {
+  const editProfile: {
+    force_fullscreen?: boolean
+    game_resolution?: [number, number]
+  } = {}
+
+  if (overrideWindowSettings.value) {
+    editProfile.force_fullscreen = fullscreenSetting.value
+
+    if (!fullscreenSetting.value) {
+      editProfile.game_resolution = resolution.value
+    }
+  }
+
+  return editProfile
+})
+
+watch(
+  [overrideWindowSettings, resolution, fullscreenSetting],
+  async () => {
+    await edit(props.instance.path, editProfileObject.value)
+  },
+  { deep: true },
+)
+
+const messages = defineMessages({
+  customWindowSettings: {
+    id: 'instance.settings.tabs.window.custom-window-settings',
+    defaultMessage: 'Custom window settings',
+  },
+  fullscreen: {
+    id: 'instance.settings.tabs.window.fullscreen',
+    defaultMessage: 'Fullscreen',
+  },
+  fullscreenDescription: {
+    id: 'instance.settings.tabs.window.fullscreen.description',
+    defaultMessage: 'Make the game start in full screen when launched (using options.txt).',
+  },
+  width: {
+    id: 'instance.settings.tabs.window.width',
+    defaultMessage: 'Width',
+  },
+  widthDescription: {
+    id: 'instance.settings.tabs.window.width.description',
+    defaultMessage: 'The width of the game window when launched.',
+  },
+  enterWidth: {
+    id: 'instance.settings.tabs.window.width.enter',
+    defaultMessage: 'Enter width...',
+  },
+  height: {
+    id: 'instance.settings.tabs.window.height',
+    defaultMessage: 'Height',
+  },
+  heightDescription: {
+    id: 'instance.settings.tabs.window.height.description',
+    defaultMessage: 'The height of the game window when launched.',
+  },
+  enterHeight: {
+    id: 'instance.settings.tabs.window.height.enter',
+    defaultMessage: 'Enter height...',
+  },
+})
+</script>
+
+<template>
+  <div>
+    <Checkbox
+      v-model="overrideWindowSettings"
+      :label="formatMessage(messages.customWindowSettings)"
+      @update:model-value="
+        (value) => {
+          if (!value) {
+            resolution = globalSettings.game_resolution
+            fullscreenSetting = globalSettings.force_fullscreen
+          }
+        }
+      "
+    />
+    <div class="mt-2 flex items-center gap-4 justify-between">
+      <div>
+        <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+          {{ formatMessage(messages.fullscreen) }}
+        </h2>
+        <p class="m-0">
+          {{ formatMessage(messages.fullscreenDescription) }}
+        </p>
+      </div>
+      <Toggle
+        id="fullscreen"
+        :model-value="overrideWindowSettings ? fullscreenSetting : globalSettings.force_fullscreen"
+        :checked="fullscreenSetting"
+        :disabled="!overrideWindowSettings"
+        @update:model-value="
+          (e) => {
+            fullscreenSetting = e
+          }
+        "
+      />
+    </div>
+
+    <div class="mt-4 flex items-center gap-4 justify-between">
+      <div>
+        <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+          {{ formatMessage(messages.width) }}
+        </h2>
+        <p class="m-0">
+          {{ formatMessage(messages.widthDescription) }}
+        </p>
+      </div>
+      <input
+        id="width"
+        v-model="resolution[0]"
+        autocomplete="off"
+        :disabled="!overrideWindowSettings || fullscreenSetting"
+        type="number"
+        :placeholder="formatMessage(messages.enterWidth)"
+      />
+    </div>
+
+    <div class="mt-4 flex items-center gap-4 justify-between">
+      <div>
+        <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+          {{ formatMessage(messages.height) }}
+        </h2>
+        <p class="m-0">
+          {{ formatMessage(messages.heightDescription) }}
+        </p>
+      </div>
+      <input
+        id="height"
+        v-model="resolution[1]"
+        autocomplete="off"
+        :disabled="!overrideWindowSettings || fullscreenSetting"
+        type="number"
+        :placeholder="formatMessage(messages.enterHeight)"
+      />
+    </div>
+  </div>
+</template>
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -9,6 +9,7 @@ import {
  GameIcon,
  CoffeeIcon,
 } from '@modrinth/assets'
+import { TabbedModal } from '@modrinth/ui'
 import { ref } from 'vue'
 import { useVIntl, defineMessage } from '@vintl/vintl'
 import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
@@ -24,15 +25,8 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

 const themeStore = useTheming()

-const modal = ref()
-
-function show() {
-  modal.value.show()
-}
-
 const { formatMessage } = useVIntl()

-const selectedTab = ref(0)
 const devModeCounter = ref(0)

 const developerModeEnabled = defineMessage({
@@ -59,8 +53,8 @@ const tabs = [
  },
  {
    name: defineMessage({
-      id: 'app.settings.tabs.java-versions',
-      defaultMessage: 'Java versions',
+      id: 'app.settings.tabs.java-installations',
+      defaultMessage: 'Java installations',
    }),
    icon: CoffeeIcon,
    content: JavaSettings,
@@ -92,13 +86,18 @@ const tabs = [
  },
 ]

+const modal = ref()
+
+function show() {
+  modal.value.show()
+}
+
 defineExpose({ show })

 const version = await getVersion()
 const osPlatform = getOsPlatform()
 const osVersion = getOsVersion()
 </script>
-/
 <template>
  <ModalWrapper ref="modal">
    <template #title>
@@ -106,18 +105,9 @@ const osVersion = getOsVersion()
        <SettingsIcon /> Settings
      </span>
    </template>
-    <div class="grid grid-cols-[auto_1fr] gap-4">
-      <div class="flex flex-col gap-1 border-solid pr-4 border-0 border-r-[1px] border-divider">
-        <button
-          v-for="(tab, index) in tabs.filter((t) => !t.developerOnly || themeStore.devMode)"
-          :key="index"
-          :class="`flex gap-2 items-center text-left rounded-xl px-4 py-2 border-none text-nowrap font-semibold cursor-pointer active:scale-[0.97] transition-transform ${selectedTab === index ? 'bg-highlight text-brand' : 'bg-transparent text-button-text'}`"
-          @click="() => (selectedTab = index)"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          <span>{{ formatMessage(tab.name) }}</span>
-        </button>

+    <TabbedModal :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
+      <template #footer>
        <div class="mt-auto text-secondary text-sm">
          <p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
            {{ formatMessage(developerModeEnabled) }}
@@ -133,8 +123,8 @@ const osVersion = getOsVersion()
                    themeStore.devMode = !themeStore.devMode
                    devModeCounter = 0

-                    if (!themeStore.devMode && tabs[selectedTab].developerOnly === true) {
-                      selectedTab = 0
+                    if (!themeStore.devMode && tabs[modal.selectedTab].developerOnly) {
+                      modal.setTab(0)
                    }
                  }
                }
@@ -152,10 +142,7 @@ const osVersion = getOsVersion()
            </div>
          </div>
        </div>
-      </div>
-      <div class="w-[600px] h-[500px] overflow-y-auto">
-        <component :is="tabs[selectedTab].content" />
-      </div>
-    </div>
+      </template>
+    </TabbedModal>
  </ModalWrapper>
 </template>
--- a/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
@@ -25,10 +25,18 @@ defineProps({
    default: 'No description defined',
    required: true,
  },
+  proceedIcon: {
+    type: Object,
+    default: undefined,
+  },
  proceedLabel: {
    type: String,
    default: 'Proceed',
  },
+  danger: {
+    type: Boolean,
+    default: true,
+  },
 })

 const emit = defineEmits(['proceed'])
@@ -61,9 +69,11 @@ function proceed() {
    :has-to-type="hasToType"
    :title="title"
    :description="description"
+    :proceed-icon="proceedIcon"
    :proceed-label="proceedLabel"
    :on-hide="onModalHide"
    :noblur="!themeStore.advancedRendering"
+    :danger="danger"
    @proceed="proceed"
  />
 </template>
--- a/apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import {
+  ChevronRightIcon,
+  CoffeeIcon,
+  InfoIcon,
+  WrenchIcon,
+  MonitorIcon,
+  CodeIcon,
+} from '@modrinth/assets'
+import { Avatar, TabbedModal } from '@modrinth/ui'
+import { ref } from 'vue'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
+import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
+import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
+import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
+
+const { formatMessage } = useVIntl()
+
+defineProps({
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const tabs = [
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.general',
+      defaultMessage: 'General',
+    }),
+    icon: InfoIcon,
+    content: GeneralSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.installation',
+      defaultMessage: 'Installation',
+    }),
+    icon: WrenchIcon,
+    content: InstallationSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.window',
+      defaultMessage: 'Window',
+    }),
+    icon: MonitorIcon,
+    content: WindowSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.java',
+      defaultMessage: 'Java and memory',
+    }),
+    icon: CoffeeIcon,
+    content: JavaSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.hooks',
+      defaultMessage: 'Launch hooks',
+    }),
+    icon: CodeIcon,
+    content: HooksSettings,
+  },
+]
+
+const modal = ref()
+
+function show() {
+  modal.value.show()
+}
+
+defineExpose({ show })
+
+const titleMessage = defineMessage({
+  id: 'instance.settings.title',
+  defaultMessage: 'Settings',
+})
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <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"
+        />
+        {{ instance.name }} <ChevronRightIcon />
+        <span class="font-extrabold text-contrast">{{ formatMessage(titleMessage) }}</span>
+      </span>
+    </template>
+
+    <TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props: { instance } }))" />
+  </ModalWrapper>
+</template>
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -49,6 +49,9 @@ function onModalHide() {

 <template>
  <Modal ref="modal" :header="header" :noblur="!themeStore.advancedRendering" @hide="onModalHide">
+    <template #title>
+      <slot name="title" />
+    </template>
    <slot />
  </Modal>
 </template>
--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownSelect, Toggle, ThemeSelector } from '@modrinth/ui'
+import { Toggle, ThemeSelector, TeleportDropdownMenu } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
 import { get, set } from '@/helpers/settings'
 import { watch, ref } from 'vue'
@@ -19,7 +19,7 @@ watch(
 )
 </script>
 <template>
-  <h2 class="m-0 text-2xl">Color theme</h2>
+  <h2 class="m-0 text-lg font-extrabold text-contrast">Color theme</h2>
  <p class="m-0 mt-1">Select your preferred color theme for Modrinth App.</p>

  <ThemeSelector
@@ -31,7 +31,7 @@ watch(

  <div class="mt-4 flex items-center justify-between">
    <div>
-      <h2 class="m-0 text-2xl">Advanced rendering</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Advanced rendering</h2>
      <p class="m-0 mt-1">
        Enables advanced rendering such as blur effects that may cause performance issues without
        hardware-accelerated rendering.
@@ -53,7 +53,7 @@ watch(

  <div v-if="os !== 'MacOS'" class="mt-4 flex items-center justify-between gap-4">
    <div>
-      <h2 class="m-0 mt-4 text-2xl">Native Decorations</h2>
+      <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
@@ -70,7 +70,7 @@ watch(

  <div class="mt-4 flex items-center justify-between">
    <div>
-      <h2 class="m-0 mt-4 text-2xl">Minimize launcher</h2>
+      <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
@@ -87,16 +87,14 @@ watch(

  <div class="mt-4 flex items-center justify-between">
    <div>
-      <h2 class="m-0 mt-4 text-2xl">Default landing page</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Default landing page</h2>
      <p class="m-0 mt-1">Change the page to which the launcher opens on.</p>
    </div>
-    <DropdownSelect
+    <TeleportDropdownMenu
      id="opening-page"
      v-model="settings.default_page"
      name="Opening page dropdown"
      :options="['Home', 'Library']"
-      class="opening-page"
-      @change="updateDefaultPage"
    />
  </div>
 </template>
--- a/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
@@ -46,121 +46,136 @@ watch(
 </script>

 <template>
-  <h2 class="m-0 text-2xl">Java arguments</h2>
-  <input
-    id="java-args"
-    v-model="settings.launchArgs"
-    autocomplete="off"
-    type="text"
-    class="installation-input"
-    placeholder="Enter java arguments..."
-  />
+  <div>
+    <h2 class="m-0 text-lg font-extrabold text-contrast">Window size</h2>

-  <h2 class="mt-4 m-0 text-2xl">Environmental variables</h2>
-  <input
-    id="env-vars"
-    v-model="settings.envVars"
-    autocomplete="off"
-    type="text"
-    class="installation-input"
-    placeholder="Enter environmental variables..."
-  />
+    <div class="flex items-center justify-between gap-4">
+      <div>
+        <h3 class="mt-2 m-0 text-base font-extrabold text-primary">Fullscreen</h3>
+        <p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+          Overwrites the options.txt file to start in full screen when launched.
+        </p>
+      </div>

-  <h2 class="mt-4 m-0 text-2xl">Java memory</h2>
-  <p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
-  <Slider
-    id="max-memory"
-    v-model="settings.memory.maximum"
-    :min="8"
-    :max="maxMemory"
-    :step="64"
-    unit="MB"
-  />
-
-  <h2 class="mt-4 m-0 text-2xl">Hooks</h2>
-
-  <h3 class="mt-2 m-0 text-lg">Pre launch</h3>
-  <p class="m-0 mt-1 leading-tight">Ran before the instance is launched.</p>
-  <input
-    id="pre-launch"
-    v-model="settings.hooks.pre_launch"
-    autocomplete="off"
-    type="text"
-    placeholder="Enter pre-launch command..."
-  />
-
-  <h3 class="mt-2 m-0 text-lg">Wrapper</h3>
-  <p class="m-0 mt-1 leading-tight">Wrapper command for launching Minecraft.</p>
-  <input
-    id="wrapper"
-    v-model="settings.hooks.wrapper"
-    autocomplete="off"
-    type="text"
-    placeholder="Enter wrapper command..."
-  />
-
-  <h3 class="mt-2 m-0 text-lg">Post exit</h3>
-  <p class="m-0 mt-1 leading-tight">Ran after the game closes.</p>
-  <input
-    id="post-exit"
-    v-model="settings.hooks.post_exit"
-    autocomplete="off"
-    type="text"
-    placeholder="Enter post-exit command..."
-  />
-
-  <h2 class="mt-4 m-0 text-2xl">Window size</h2>
-
-  <div class="flex items-center justify-between gap-4">
-    <div>
-      <h3 class="mt-2 m-0 text-lg">Fullscreen</h3>
-      <p class="m-0 mt-1 leading-tight">
-        Overwrites the options.txt file to start in full screen when launched.
-      </p>
+      <Toggle
+        id="fullscreen"
+        :model-value="settings.force_fullscreen"
+        :checked="settings.force_fullscreen"
+        @update:model-value="
+          (e) => {
+            settings.force_fullscreen = e
+          }
+        "
+      />
    </div>

-    <Toggle
-      id="fullscreen"
-      :model-value="settings.force_fullscreen"
-      :checked="settings.force_fullscreen"
-      @update:model-value="
-        (e) => {
-          settings.force_fullscreen = e
-        }
-      "
+    <div class="flex items-center justify-between gap-4">
+      <div>
+        <h3 class="mt-2 m-0 text-base font-extrabold text-primary">Width</h3>
+        <p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+          The width of the game window when launched.
+        </p>
+      </div>
+
+      <input
+        id="width"
+        v-model="settings.game_resolution[0]"
+        :disabled="settings.force_fullscreen"
+        autocomplete="off"
+        type="number"
+        placeholder="Enter width..."
+      />
+    </div>
+
+    <div class="flex items-center justify-between gap-4">
+      <div>
+        <h3 class="mt-2 m-0 text-base font-extrabold text-primary">Height</h3>
+        <p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+          The height of the game window when launched.
+        </p>
+      </div>
+
+      <input
+        id="height"
+        v-model="settings.game_resolution[1]"
+        :disabled="settings.force_fullscreen"
+        autocomplete="off"
+        type="number"
+        class="input"
+        placeholder="Enter height..."
+      />
+    </div>
+
+    <hr class="mt-4 bg-button-border border-none h-[1px]" />
+
+    <h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Memory allocated</h2>
+    <p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
+    <Slider
+      id="max-memory"
+      v-model="settings.memory.maximum"
+      :min="512"
+      :max="maxMemory"
+      :step="64"
+      unit="MB"
    />
-  </div>
-
-  <div class="flex items-center justify-between gap-4">
-    <div>
-      <h3 class="mt-2 m-0 text-lg">Width</h3>
-      <p class="m-0 mt-1 leading-tight">The width of the game window when launched.</p>
-    </div>

+    <h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Java arguments</h2>
    <input
-      id="width"
-      v-model="settings.game_resolution[0]"
-      :disabled="settings.force_fullscreen"
+      id="java-args"
+      v-model="settings.launchArgs"
      autocomplete="off"
-      type="number"
-      placeholder="Enter width..."
+      type="text"
+      placeholder="Enter java arguments..."
+      class="w-full"
    />
-  </div>
-
-  <div class="flex items-center justify-between gap-4">
-    <div>
-      <h3 class="mt-2 m-0 text-lg">Height</h3>
-      <p class="m-0 mt-1 leading-tight">The height of the game window when launched.</p>
-    </div>

+    <h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Environmental variables</h2>
    <input
-      id="height"
-      v-model="settings.game_resolution[1]"
-      :disabled="settings.force_fullscreen"
+      id="env-vars"
+      v-model="settings.envVars"
      autocomplete="off"
-      type="number"
-      class="input"
-      placeholder="Enter height..."
+      type="text"
+      placeholder="Enter environmental variables..."
+      class="w-full"
+    />
+
+    <hr class="mt-4 bg-button-border border-none h-[1px]" />
+
+    <h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Hooks</h2>
+
+    <h3 class="mt-2 m-0 text-base font-extrabold text-primary">Pre launch</h3>
+    <p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran before the instance is launched.</p>
+    <input
+      id="pre-launch"
+      v-model="settings.hooks.pre_launch"
+      autocomplete="off"
+      type="text"
+      placeholder="Enter pre-launch command..."
+      class="w-full"
+    />
+
+    <h3 class="mt-2 m-0 text-base font-extrabold text-primary">Wrapper</h3>
+    <p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+      Wrapper command for launching Minecraft.
+    </p>
+    <input
+      id="wrapper"
+      v-model="settings.hooks.wrapper"
+      autocomplete="off"
+      type="text"
+      placeholder="Enter wrapper command..."
+      class="w-full"
+    />
+
+    <h3 class="mt-2 m-0 text-base font-extrabold text-primary">Post exit</h3>
+    <p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran after the game closes.</p>
+    <input
+      id="post-exit"
+      v-model="settings.hooks.post_exit"
+      autocomplete="off"
+      type="text"
+      placeholder="Enter post-exit command..."
+      class="w-full"
    />
  </div>
 </template>
--- a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
@@ -27,7 +27,9 @@ function formatFlagName(name: string) {
 <template>
  <div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
    <div>
-      <h2 class="m-0 text-xl capitalize">{{ formatFlagName(option) }}</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
+        {{ formatFlagName(option) }}
+      </h2>
    </div>

    <Toggle
--- a/apps/app-frontend/src/components/ui/settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/JavaSettings.vue
@@ -19,7 +19,9 @@ async function updateJavaVersion(version) {
 </script>
 <template>
  <div v-for="(javaVersion, index) in [21, 17, 8]" :key="`java-${javaVersion}`">
-    <h2 class="m-0 text-2xl" :class="{ 'mt-4': index !== 0 }">Java {{ javaVersion }} location</h2>
+    <h2 class="m-0 text-lg font-extrabold text-contrast" :class="{ 'mt-4': index !== 0 }">
+      Java {{ javaVersion }} location
+    </h2>
    <JavaSelector
      :id="'java-selector-' + javaVersion"
      v-model="javaVersions[javaVersion]"
--- a/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
@@ -24,8 +24,8 @@ watch(
 <template>
  <div class="flex items-center justify-between gap-4">
    <div>
-      <h2 class="m-0 text-2xl">Personalized ads</h2>
-      <p class="m-0 mt-1 leading-tight">
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Personalized ads</h2>
+      <p class="m-0 text-sm">
        Modrinth's ad provider, Aditude, shows ads based on your preferences. By disabling this
        option, you opt out and ads will no longer be shown based on your interests.
      </p>
@@ -44,8 +44,8 @@ watch(

  <div class="mt-4 flex items-center justify-between gap-4">
    <div>
-      <h2 class="m-0 text-2xl">Telemetry</h2>
-      <p class="m-0 mt-1 leading-tight">
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Telemetry</h2>
+      <p class="m-0 text-sm">
        Modrinth collects anonymized analytics and usage data to improve our user experience and
        customize your experience. By disabling this option, you opt out and your data will no
        longer be collected.
@@ -65,12 +65,14 @@ watch(

  <div class="mt-4 flex items-center justify-between gap-4">
    <div>
-      <h2 class="m-0 text-2xl">Discord RPC</h2>
-      <p class="m-0 mt-1 leading-tight">
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Discord RPC</h2>
+      <p class="m-0 text-sm">
        Manages the Discord Rich Presence integration. Disabling this will cause 'Modrinth' to no
-        longer show up as a game or app you are using on your Discord profile. This does not disable
-        any instance-specific Discord Rich Presence integrations, such as those added by mods. (app
-        restart required to take effect)
+        longer show up as a game or app you are using on your Discord profile.
+      </p>
+      <p class="m-0 mt-2 text-sm">
+        Note: This will not prevent any instance-specific Discord Rich Presence integrations, such
+        as those added by mods. (app restart required to take effect)
      </p>
    </div>
    <Toggle
--- a/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue
@@ -57,13 +57,13 @@ async function findLauncherDir() {
 </script>

 <template>
-  <h2 class="m-0 text-2xl">App directory</h2>
-  <p class="m-0 mt-1">
+  <h2 class="m-0 text-lg font-extrabold text-contrast">App directory</h2>
+  <p class="m-0 mt-1 mb-2 leading-tight text-secondary">
    The directory where the launcher stores all of its files. Changes will be applied after
    restarting the launcher.
  </p>

-  <div class="m-1 mt-2">
+  <div class="m-1 my-2">
    <div class="iconified-input w-full">
      <BoxIcon />
      <input id="appDir" v-model="settings.custom_dir" type="text" class="input" />
@@ -73,31 +73,29 @@ async function findLauncherDir() {
    </div>
  </div>

-  <div class="flex items-center justify-between gap-4 mt-4">
-    <div>
-      <ConfirmModalWrapper
-        ref="purgeCacheConfirmModal"
-        title="Are you sure you want to purge the cache?"
-        description="If you proceed, your entire cache will be purged. This may slow down the app temporarily."
-        :has-to-type="false"
-        proceed-label="Purge cache"
-        @proceed="purgeCache"
-      />
+  <div>
+    <ConfirmModalWrapper
+      ref="purgeCacheConfirmModal"
+      title="Are you sure you want to purge the cache?"
+      description="If you proceed, your entire cache will be purged. This may slow down the app temporarily."
+      :has-to-type="false"
+      proceed-label="Purge cache"
+      @proceed="purgeCache"
+    />

-      <h2 class="m-0 text-2xl">App cache</h2>
-      <p class="m-0 mt-1 leading-tight">
-        The Modrinth app stores a cache of data to speed up loading. This can be purged to force the
-        app to reload data. This may slow down the app temporarily.
-      </p>
-    </div>
-    <button id="purge-cache" class="btn min-w-max" @click="$refs.purgeCacheConfirmModal.show()">
-      <TrashIcon />
-      Purge cache
-    </button>
+    <h2 class="m-0 text-lg font-extrabold text-contrast">App cache</h2>
+    <p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+      The Modrinth app stores a cache of data to speed up loading. This can be purged to force the
+      app to reload data. This may slow down the app temporarily.
+    </p>
  </div>
+  <button id="purge-cache" class="btn min-w-max" @click="$refs.purgeCacheConfirmModal.show()">
+    <TrashIcon />
+    Purge cache
+  </button>

-  <h2 class="m-0 text-2xl mt-4">Maximum concurrent downloads</h2>
-  <p class="m-0 mt-1">
+  <h2 class="m-0 text-lg font-extrabold text-contrast mt-4">Maximum concurrent downloads</h2>
+  <p class="m-0 mt-1 mb-2 leading-tight text-secondary">
    The maximum amount of files the launcher can download at the same time. Set this to a lower
    value if you have a poor internet connection. (app restart required to take effect)
  </p>
@@ -109,8 +107,8 @@ async function findLauncherDir() {
    :step="1"
  />

-  <h2 class="m-0 mt-4 text-2xl">Maximum concurrent writes</h2>
-  <p class="m-0 mt-1">
+  <h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Maximum concurrent writes</h2>
+  <p class="m-0 mt-1 mb-2 leading-tight text-secondary">
    The maximum amount of files the launcher can write to the disk at once. Set this to a lower
    value if you are frequently getting I/O errors. (app restart required to take effect)
  </p>