Profile Options (#120)

* init profile settings

* more work

* finish everything

* Switch to index approach

* Fix settings str split

* Run lint

theseus_gui/src/App.vue

@@ -91,7 +91,7 @@ const loading = useLoading()
           @click="() => $refs.installationModal.show()"
         >
           <PlusIcon />
-          <span v-if="!themeStore.collapsedNavigation" class="no-wrap">New Instance</span>
+          <span v-if="!themeStore.collapsedNavigation" class="no-wrap">New instance</span>
         </Button>
         <RouterLink
           to="/settings"

theseus_gui/src/assets/icons/hammer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 12-8.5 8.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L12 9"></path><path d="M17.64 15 22 10.64"></path><path d="m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25v-.86L16.01 4.6a5.56 5.56 0 0 0-3.94-1.64H9l.92.82A6.18 6.18 0 0 1 12 8.4v1.56l2 2h2.47l2.26 1.91"></path></svg>

theseus_gui/src/assets/icons/index.js

@@ -5,3 +5,4 @@ export { default as LoginIcon } from './log-in.svg'
 export { default as StopIcon } from './stop-circle.svg'
 export { default as TerminalIcon } from './terminal-square.svg'
 export { default as UsersIcon } from './users.svg'
+export { default as HammerIcon } from './hammer.svg'

theseus_gui/src/components/ui/InstallConfirmModal.vue

@@ -2,9 +2,6 @@
 import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
 import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
 
 const version = ref('')
 const title = ref('')
@@ -23,9 +20,7 @@ defineExpose({
 
 async function install() {
   installing.value = true
-  let id = await pack_install(version.value)
   await pack_install(version.value, title.value, icon.value ? icon.value : null)
-  await router.push({ path: `/instance/${encodeURIComponent(id)}` })
   confirmModal.value.hide()
 }
 </script>

theseus_gui/src/components/ui/InstanceCreationModal.vue

@@ -18,14 +18,14 @@
         <p class="input-label">Name</p>
         <input v-model="profile_name" class="text-input" type="text" />
       </div>
+      <div class="input-row">
+        <p class="input-label">Loader</p>
+        <Chips v-model="loader" :items="loaders" />
+      </div>
       <div class="input-row">
         <p class="input-label">Game Version</p>
         <div class="versions">
-          <DropdownSelect
-            v-model="game_version"
-            :options="game_versions"
-            :render-up="!showAdvanced"
-          />
+          <DropdownSelect v-model="game_version" :options="game_versions" render-up />
           <Checkbox
             v-if="showAdvanced"
             v-model="showSnapshots"
@@ -34,15 +34,11 @@
           />
         </div>
       </div>
-      <div class="input-row">
-        <p class="input-label">Loader</p>
-        <Chips v-model="loader" :items="loaders" />
-      </div>
-      <div v-if="showAdvanced" class="input-row">
+      <div v-if="showAdvanced && loader !== 'vanilla'" class="input-row">
         <p class="input-label">Loader Version</p>
         <Chips v-model="loader_version" :items="['stable', 'latest', 'other']" />
       </div>
-      <div v-if="showAdvanced && loader_version === 'other'">
+      <div v-if="showAdvanced && loader_version === 'other' && loader !== 'vanilla'">
         <div v-if="game_version" class="input-row">
           <p class="input-label">Select Version</p>
           <DropdownSelect
@@ -98,7 +94,7 @@ const router = useRouter()
 
 const profile_name = ref('')
 const game_version = ref('')
-const loader = ref('')
+const loader = ref('vanilla')
 const loader_version = ref('stable')
 const specified_loader_version = ref('')
 const showContent = ref(false)
@@ -143,17 +139,31 @@ const [fabric_versions, forge_versions, quilt_versions, all_game_versions, loade
       )
       .then(ref),
   ])
+loaders.value.push('vanilla')
 
 const game_versions = computed(() => {
   return all_game_versions.value
-    .filter((item) => item.version_type === 'release' || showSnapshots.value)
+    .filter((item) => {
+      let defaultVal = item.version_type === 'release' || showSnapshots.value
+      if (loader.value === 'fabric') {
+        defaultVal &= fabric_versions.value.gameVersions.some((x) => item.version === x.id)
+      } else if (loader.value === 'forge') {
+        defaultVal &= forge_versions.value.gameVersions.some((x) => item.version === x.id)
+      } else if (loader.value === 'quilt') {
+        defaultVal &= quilt_versions.value.gameVersions.some((x) => item.version === x.id)
+      }
+
+      return defaultVal
+    })
     .map((item) => item.version)
 })
 
 const modal = ref(null)
 
 const check_valid = computed(() => {
-  return profile_name.value && game_version.value
+  return (
+    profile_name.value && game_version.value && game_versions.value.includes(game_version.value)
+  )
 })
 
 const create_instance = async () => {
@@ -166,7 +176,7 @@ const create_instance = async () => {
       profile_name.value,
       game_version.value,
       loader.value,
-      loader_version_value ?? 'stable',
+      loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
       icon.value
     )
 
@@ -185,7 +195,7 @@ const upload_icon = async () => {
     filters: [
       {
         name: 'Image',
-        extensions: ['png', 'jpeg'],
+        extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
       },
     ],
   })

theseus_gui/src/components/ui/JavaDetectionModal.vue

@@ -0,0 +1,109 @@
+<template>
+  <Modal ref="detectJavaModal" header="Select java version">
+    <div class="auto-detect-modal">
+      <div class="table">
+        <div class="table-row table-head">
+          <div class="table-cell table-text">Version</div>
+          <div class="table-cell table-text">Path</div>
+          <div class="table-cell table-text">Actions</div>
+        </div>
+        <div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
+          <div class="table-cell table-text">
+            <span>{{ javaInstall.version }}</span>
+          </div>
+          <div class="table-cell table-text">
+            <span>{{ javaInstall.path }}</span>
+          </div>
+          <div class="table-cell table-text manage">
+            <Button v-if="currentSelected.path === javaInstall.path" disabled
+              ><CheckIcon /> Selected</Button
+            >
+            <Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+          </div>
+        </div>
+        <div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+          <div class="table-cell table-text">No JARS Found!</div>
+        </div>
+      </div>
+      <div class="button-group">
+        <Button @click="$refs.detectJavaModal.hide()">
+          <XIcon />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script setup>
+import { Modal, PlusIcon, CheckIcon, Button, XIcon } from 'omorphia'
+import { ref } from 'vue'
+import {
+  find_jre_17_jres,
+  find_jre_18plus_jres,
+  find_jre_8_jres,
+  get_all_jre,
+} from '@/helpers/jre.js'
+
+const chosenInstallOptions = ref([])
+const detectJavaModal = ref(null)
+const currentSelected = ref({})
+
+defineExpose({
+  show: async (version, currentSelectedJava) => {
+    if (version <= 8 && !!version) {
+      console.log(version)
+      chosenInstallOptions.value = await find_jre_8_jres()
+    } else if (version >= 18) {
+      chosenInstallOptions.value = await find_jre_18plus_jres()
+    } else if (version) {
+      chosenInstallOptions.value = await find_jre_17_jres()
+    } else {
+      console.log('get all')
+      chosenInstallOptions.value = await get_all_jre()
+    }
+
+    currentSelected.value = currentSelectedJava
+    if (!currentSelected.value) {
+      currentSelected.value = { path: '', version: '' }
+    }
+
+    detectJavaModal.value.show()
+  },
+})
+
+const emit = defineEmits(['submit'])
+
+function setJavaInstall(javaInstall) {
+  emit('submit', javaInstall)
+  detectJavaModal.value.hide()
+}
+</script>
+<style lang="scss" scoped>
+.auto-detect-modal {
+  padding: 1rem;
+
+  .table {
+    .table-row {
+      grid-template-columns: 1fr 4fr 1.5fr;
+    }
+
+    span {
+      display: inherit;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.button-group {
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.manage {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>

theseus_gui/src/components/ui/JavaSelector.vue

@@ -0,0 +1,149 @@
+<template>
+  <JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
+  <div class="toggle-setting">
+    <input
+      :disabled="props.disabled"
+      :value="props.modelValue.path"
+      type="text"
+      class="installation-input"
+      :placeholder="placeholder ?? '/path/to/java'"
+      @input="
+        (val) => {
+          emit('update:modelValue', {
+            ...props.modelValue,
+            path: val.target.value,
+          })
+        }
+      "
+    />
+    <span class="installation-buttons">
+      <Button
+        :disabled="props.disabled"
+        @click="$refs.detectJavaModal.show(props.version, props.modelValue)"
+      >
+        <SearchIcon />
+        Auto Detect
+      </Button>
+      <Button :disabled="props.disabled" @click="handleJavaFileInput()">
+        <BrowseIcon />
+        Browse
+      </Button>
+      <Button :disabled="props.disabled" @click="testJava">
+        <PlayIcon />
+        Test
+      </Button>
+      <AnimatedLogo v-if="testingJava === true" class="testing-loader" />
+      <CheckIcon
+        v-else-if="testingJavaSuccess === true && testingJava === false"
+        class="test-success"
+      />
+      <XIcon v-else-if="testingJavaSuccess === false && testingJava === false" class="test-fail" />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { Button, SearchIcon, PlayIcon, CheckIcon, XIcon, AnimatedLogo } from 'omorphia'
+import { BrowseIcon } from '@/assets/icons'
+import { get_jre } from '@/helpers/jre.js'
+import { ref } from 'vue'
+import { open } from '@tauri-apps/api/dialog'
+import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
+
+const props = defineProps({
+  version: {
+    type: Number,
+    required: false,
+    default: null,
+  },
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const testingJava = ref(false)
+const testingJavaSuccess = ref(null)
+async function testJava() {
+  testingJava.value = true
+  let result = await get_jre(props.modelValue.path)
+  testingJava.value = false
+  testingJavaSuccess.value = !!result
+
+  setTimeout(() => {
+    testingJavaSuccess.value = null
+  }, 2000)
+}
+
+async function handleJavaFileInput() {
+  let filePath = await open()
+
+  if (filePath) {
+    let result = await get_jre(filePath)
+    if (!result) {
+      result = {
+        path: filePath,
+        version: props.version.toString(),
+        architecture: 'x86',
+      }
+    }
+
+    emit('update:modelValue', result)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.installation-input {
+  width: 100% !important;
+  flex-grow: 1;
+}
+
+.toggle-setting {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.installation-buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.test-success {
+  color: var(--color-green);
+}
+
+.test-fail {
+  color: var(--color-red);
+}
+</style>
+<style lang="scss">
+.testing-loader {
+  height: 1rem !important;
+  width: 1rem !important;
+
+  svg {
+    height: inherit !important;
+    width: inherit !important;
+  }
+}
+</style>

theseus_gui/src/helpers/profile.js

@@ -36,6 +36,12 @@ export async function get(path, clearProjects) {
   return await invoke('profile_get', { path, clearProjects })
 }
 
+// Get optimal java version from profile
+// Returns a java version
+export async function get_optimal_jre_key(path) {
+  return await invoke('profile_get_optimal_jre_key', { path })
+}
+
 // Get a copy of the profile set
 // Returns hashmap of path -> Profile
 export async function list(clearProjects) {
@@ -99,3 +105,8 @@ export async function run_wait(path) {
 export async function edit(path, editProfile) {
   return await invoke('profile_edit', { path, editProfile })
 }
+
+// Edits a profile's icon
+export async function edit_icon(path, iconPath) {
+  return await invoke('profile_edit_icon', { path, iconPath })
+}

theseus_gui/src/helpers/settings.js

@@ -28,20 +28,6 @@ Memorysettings {
 
 */
 
-// An example test function for getting/setting settings
-export async function test() {
-  // First, print settings and store them to an object
-  let settings = await get()
-  console.log(JSON.stringify(settings))
-
-  // Then set some random settings in that object
-  settings.java_8_path = '/example/path'
-
-  // Set the new settings object
-  await set(settings)
-  console.log(JSON.stringify(await get()))
-}
-
 // Get full settings object
 export async function get() {
   return await invoke('settings_get')

theseus_gui/src/pages/Browse.vue

@@ -15,6 +15,7 @@ import {
   NavRow,
   formatCategoryHeader,
   formatCategory,
+  Promotion,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { useSearch } from '@/store/state'
@@ -271,6 +272,7 @@ const handleInstanceSwitch = async (value) => {
       </Card>
     </aside>
     <div class="search">
+      <Promotion class="promotion" />
       <Card class="project-type-container">
         <NavRow
           :links="
@@ -393,11 +395,14 @@ const handleInstanceSwitch = async (value) => {
   width: 100% !important;
 }
 
+.promotion {
+  margin-top: 1rem;
+}
+
 .project-type-container {
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin-top: 1rem;
 }
 
 .search-panel-card {

theseus_gui/src/pages/Settings.vue

@@ -1,24 +1,10 @@
 <script setup>
 import { ref, watch } from 'vue'
-import {
-  Card,
-  Slider,
-  DropdownSelect,
-  Button,
-  SearchIcon,
-  PlayIcon,
-  Modal,
-  CheckIcon,
-  XIcon,
-  PlusIcon,
-  AnimatedLogo,
-  Toggle,
-} from 'omorphia'
-import { BrowseIcon } from '@/assets/icons'
+import { Card, Slider, DropdownSelect, Toggle } from 'omorphia'
 import { useTheming } from '@/store/state'
 import { get, set } from '@/helpers/settings'
-import { find_jre_8_jres, find_jre_17_jres, get_jre, get_max_memory } from '@/helpers/jre'
-import { open } from '@tauri-apps/api/dialog'
+import { get_max_memory } from '@/helpers/jre'
+import JavaSelector from '@/components/ui/JavaSelector.vue'
 
 const themeStore = useTheming()
 
@@ -28,145 +14,44 @@ if (!fetchSettings.java_globals?.JAVA_8)
   fetchSettings.java_globals.JAVA_8 = { path: '', version: '' }
 if (!fetchSettings.java_globals?.JAVA_17)
   fetchSettings.java_globals.JAVA_17 = { path: '', version: '' }
+
+fetchSettings.javaArgs = fetchSettings.custom_java_args.join(' ')
+fetchSettings.envArgs = fetchSettings.custom_env_args.map((x) => x.join('=')).join(' ')
+
 const settings = ref(fetchSettings)
 const maxMemory = ref((await get_max_memory()) / 1024)
 
-const chosenInstallOptions = ref([])
-const browsingInstall = ref(0)
-
-const testingJava17 = ref(false)
-const java17Success = ref(null)
-const testingJava8 = ref(false)
-const java8Success = ref(null)
-
-// DOM refs
-const detectJavaModal = ref(null)
-
-const handleTheme = async (e) => {
-  themeStore.setThemeState(e.option.toLowerCase())
-  settings.value.theme = themeStore.selectedTheme
-  await set(settings.value)
-}
-
-const handleCollapse = async (e) => {
-  themeStore.collapsedNavigation = e
-  settings.value.collapsed_navigation = themeStore.collapsedNavigation
-  await set(settings.value)
-}
-
-const loadJavaModal = async (version) => {
-  if (version === 17) chosenInstallOptions.value = await find_jre_17_jres()
-  else if (version === 8) chosenInstallOptions.value = await find_jre_8_jres()
-
-  browsingInstall.value = version
-  detectJavaModal.value.show()
-}
-
 watch(settings.value, async (oldSettings, newSettings) => {
+  if (newSettings.java_globals?.JAVA_8?.path === '') {
+    newSettings.java_globals.JAVA_8 = undefined
+  }
+  if (newSettings.java_globals?.JAVA_17?.path === '') {
+    newSettings.java_globals.JAVA_17 = undefined
+  }
+
+  newSettings.custom_java_args = newSettings.javaArgs.trim().split(/\s+/).filter(Boolean)
+  newSettings.custom_env_args = newSettings.envArgs
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((x) => x.split('=').filter(Boolean))
+
+  if (!newSettings.hooks.pre_launch) {
+    newSettings.hooks.pre_launch = null
+  }
+  if (!newSettings.hooks.wrapper) {
+    newSettings.hooks.wrapper = null
+  }
+  if (!newSettings.hooks.post_exit) {
+    newSettings.hooks.post_exit = null
+  }
+
   await set(newSettings)
 })
-
-const handleJava17FileInput = async () => {
-  let filePath = await open()
-  settings.value.java_globals.JAVA_17 = {
-    path: filePath,
-    version: '17',
-  }
-}
-const handleJava8FileInput = async () => {
-  let filePath = await open()
-  settings.value.java_globals.JAVA_8 = {
-    path: filePath,
-    version: '8',
-  }
-}
-
-const handleJava17Test = async () => {
-  let result
-  testingJava17.value = true
-  setTimeout(async () => {
-    result = await get_jre(settings.value.java_globals.JAVA_17.path)
-    testingJava17.value = false
-    if (result) java17Success.value = true
-    else java17Success.value = false
-
-    setTimeout(() => {
-      java17Success.value = null
-    }, 2000)
-  }, 1000)
-}
-
-const handleJava8Test = async () => {
-  let result
-  testingJava8.value = true
-  setTimeout(async () => {
-    result = await get_jre(settings.value.java_globals.JAVA_8.path)
-    testingJava8.value = false
-    java8Success.value = !!result
-
-    setTimeout(() => {
-      java8Success.value = null
-    }, 2000)
-  }, 1000)
-}
-
-const setJavaInstall = (javaInstall) => {
-  if (browsingInstall.value === 17) settings.value.java_globals.JAVA_17 = javaInstall
-  else if (browsingInstall.value === 8) settings.value.java_globals.JAVA_8 = javaInstall
-  detectJavaModal.value.hide()
-  chosenInstallOptions.value = []
-  browsingInstall.value = 0
-}
 </script>
 
 <template>
   <div>
-    <Modal ref="detectJavaModal" header="Select java version">
-      <div class="auto-detect-modal">
-        <div class="table">
-          <div class="table-row table-head">
-            <div class="table-cell table-text">Version</div>
-            <div class="table-cell table-text">Path</div>
-            <div class="table-cell table-text">Actions</div>
-          </div>
-          <div
-            v-for="javaInstall in chosenInstallOptions"
-            :key="javaInstall.path"
-            class="table-row"
-          >
-            <div class="table-cell table-text">
-              <span>{{ javaInstall.version }}</span>
-            </div>
-            <div class="table-cell table-text">
-              <span>{{ javaInstall.path }}</span>
-            </div>
-            <div class="table-cell table-text manage">
-              <Button
-                :disabled="
-                  settings.java_globals.JAVA_17.path === javaInstall.path ||
-                  settings.java_globals.JAVA_8.path === javaInstall.path
-                "
-                class="select-btn"
-                @click="() => setJavaInstall(javaInstall)"
-              >
-                <span
-                  v-if="
-                    settings.java_globals.JAVA_17.path === javaInstall.path ||
-                    settings.java_globals.JAVA_8.path === javaInstall.path
-                  "
-                >
-                  <CheckIcon />Selected
-                </span>
-                <span v-else><PlusIcon />Select</span>
-              </Button>
-            </div>
-          </div>
-          <div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
-            <div class="table-cell table-text">No JARS Found!</div>
-          </div>
-        </div>
-      </div>
-    </Modal>
     <Card class="theming">
       <h2>Display</h2>
       <div class="toggle-setting">
@@ -180,7 +65,12 @@ const setJavaInstall = (javaInstall) => {
           :default-value="settings.theme"
           :model-value="settings.theme"
           class="theme-dropdown"
-          @change="handleTheme"
+          @change="
+            (e) => {
+              themeStore.setThemeState(e.option.toLowerCase())
+              settings.theme = themeStore.selectedTheme
+            }
+          "
         />
       </div>
       <div class="toggle-setting">
@@ -191,133 +81,21 @@ const setJavaInstall = (javaInstall) => {
         <Toggle
           :model-value="themeStore.collapsedNavigation"
           :checked="themeStore.collapsedNavigation"
-          @update:model-value="(value) => handleCollapse(value)"
+          @update:model-value="
+            (e) => {
+              themeStore.collapsedNavigation = e
+              settings.collapsed_navigation = themeStore.collapsedNavigation
+            }
+          "
         />
       </div>
     </Card>
     <Card class="settings-card">
-      <h2 class="settings-title">Java</h2>
+      <h2 class="settings-title">Launcher settings</h2>
       <div class="settings-group">
-        <h3>Java 17 Location</h3>
+        <h3>Resource management</h3>
         <div class="toggle-setting">
-          <input
-            v-model="settings.java_globals.JAVA_17.path"
-            type="text"
-            class="input installation-input"
-            placeholder="/path/to/java17"
-          />
-          <span class="installation-buttons">
-            <Button @click="() => loadJavaModal(17)">
-              <SearchIcon />
-              Auto Detect
-            </Button>
-            <Button @click="handleJava17FileInput">
-              <BrowseIcon />
-              Browse
-            </Button>
-            <Button @click="handleJava17Test">
-              <PlayIcon />
-              Test
-            </Button>
-            <AnimatedLogo v-if="testingJava17 === true" class="testing-loader" />
-            <CheckIcon
-              v-else-if="java17Success === true && testingJava17 === false"
-              class="test-success"
-            />
-            <XIcon
-              v-else-if="java17Success === false && testingJava17 === false"
-              class="test-fail"
-            />
-          </span>
-        </div>
-      </div>
-      <div class="settings-group">
-        <h3>Java 8 Location</h3>
-        <div class="toggle-setting">
-          <input
-            v-model="settings.java_globals.JAVA_8.path"
-            type="text"
-            class="input installation-input"
-            placeholder="/path/to/java8"
-          />
-          <span class="installation-buttons">
-            <Button @click="() => loadJavaModal(8)">
-              <SearchIcon />
-              Auto Detect
-            </Button>
-            <Button @click="handleJava8FileInput">
-              <BrowseIcon />
-              Browse
-            </Button>
-            <Button @click="handleJava8Test">
-              <PlayIcon />
-              Test
-            </Button>
-            <AnimatedLogo v-if="testingJava8 === true" class="testing-loader" />
-            <CheckIcon
-              v-else-if="java8Success === true && testingJava8 === false"
-              class="test-success"
-            />
-            <XIcon v-else-if="java8Success === false && testingJava8 === false" class="test-fail" />
-          </span>
-        </div>
-      </div>
-      <hr class="card-divider" />
-      <div class="settings-group">
-        <h3>Java Arguments</h3>
-        <input
-          v-model="settings.custom_java_args"
-          type="text"
-          class="input installation-input"
-          placeholder="Enter java arguments..."
-        />
-      </div>
-      <div class="settings-group">
-        <h3>Environment Arguments</h3>
-        <input
-          v-model="settings.custom_env_args"
-          type="text"
-          class="input installation-input"
-          placeholder="Enter environment arguments..."
-        />
-      </div>
-      <hr class="card-divider" />
-      <div class="settings-group">
-        <div class="sliders">
-          <span class="slider">
-            Minimum Memory
-            <Slider v-model="settings.memory.minimum" :min="256" :max="maxMemory" :step="10" />
-          </span>
-          <span class="slider">
-            Maximum Memory
-            <Slider v-model="settings.memory.maximum" :min="256" :max="maxMemory" :step="10" />
-          </span>
-        </div>
-      </div>
-    </Card>
-    <Card class="settings-card">
-      <h2 class="settings-title">Window Size</h2>
-      <div class="settings-group">
-        <div class="settings-group">
-          <div class="sliders">
-            <span class="slider">
-              Width
-              <Slider v-model="settings.game_resolution[0]" :min="400" :max="2562" :step="2" />
-            </span>
-            <span class="slider">
-              Height
-              <Slider v-model="settings.game_resolution[1]" :min="400" :max="2562" :step="2" />
-            </span>
-          </div>
-        </div>
-      </div>
-    </Card>
-    <Card class="settings-card">
-      <h2 class="settings-title">Launcher Settings</h2>
-      <div class="settings-group">
-        <h3>Resource Management</h3>
-        <div class="toggle-setting">
-          <span>Maximum Concurrent Downloads</span>
+          <span>Maximum concurrent downloads</span>
           <Slider
             v-model="settings.max_concurrent_downloads"
             class="concurrent-downloads"
@@ -326,13 +104,66 @@ const setJavaInstall = (javaInstall) => {
             :step="1"
           />
         </div>
+        <div class="toggle-setting">
+          <span>Maximum concurrent writes</span>
+          <Slider
+            v-model="settings.max_concurrent_writes"
+            class="concurrent-downloads"
+            :min="1"
+            :max="100"
+            :step="1"
+          />
+        </div>
       </div>
     </Card>
     <Card class="settings-card">
-      <h2 class="settings-title">Commands</h2>
+      <h2 class="settings-title">Java</h2>
+      <div class="settings-group">
+        <h3>Java 17 location</h3>
+        <JavaSelector v-model="settings.java_globals.JAVA_17" :version="17" />
+      </div>
+      <div class="settings-group">
+        <h3>Java 8 location</h3>
+        <JavaSelector v-model="settings.java_globals.JAVA_8" :version="8" />
+      </div>
+      <hr class="card-divider" />
+      <div class="settings-group">
+        <h3>Java arguments</h3>
+        <input
+          v-model="settings.javaArgs"
+          type="text"
+          class="input installation-input"
+          placeholder="Enter java arguments..."
+        />
+      </div>
+      <div class="settings-group">
+        <h3>Environment variables</h3>
+        <input
+          v-model="settings.envArgs"
+          type="text"
+          class="input installation-input"
+          placeholder="Enter environment variables..."
+        />
+      </div>
+      <hr class="card-divider" />
+      <div class="settings-group">
+        <div class="sliders">
+          <span class="slider">
+            Minimum memory
+            <Slider v-model="settings.memory.minimum" :min="256" :max="maxMemory" :step="10" />
+          </span>
+          <span class="slider">
+            Maximum memory
+            <Slider v-model="settings.memory.maximum" :min="256" :max="maxMemory" :step="10" />
+          </span>
+        </div>
+      </div>
+    </Card>
+    <Card class="settings-card">
+      <h2 class="settings-title">Hooks</h2>
       <div class="settings-group">
         <div class="toggle-setting">
-          Pre Launch
+          Pre launch
           <input v-model="settings.hooks.pre_launch" type="text" class="input" />
         </div>
         <div class="toggle-setting">
@@ -340,46 +171,32 @@ const setJavaInstall = (javaInstall) => {
           <input v-model="settings.hooks.wrapper" type="text" class="input" />
         </div>
         <div class="toggle-setting">
-          Post Launch
+          Post exit
           <input v-model="settings.hooks.post_exit" type="text" class="input" />
         </div>
       </div>
     </Card>
+    <Card class="settings-card">
+      <h2 class="settings-title">Window Size</h2>
+      <div class="settings-group">
+        <div class="toggle-setting">
+          Width
+          <input v-model="settings.game_resolution[0]" type="number" class="input" />
+        </div>
+        <div class="toggle-setting">
+          Height
+          <input v-model="settings.game_resolution[1]" type="number" class="input" />
+        </div>
+      </div>
+    </Card>
   </div>
 </template>
 
-<style lang="scss">
-.testing-loader {
-  height: 1rem !important;
-  width: 1rem !important;
-
-  svg {
-    height: inherit !important;
-    width: inherit !important;
-  }
-}
-</style>
 <style lang="scss" scoped>
 .concurrent-downloads {
   width: 80% !important;
 }
 
-.auto-detect-modal {
-  padding: 1rem;
-
-  .table {
-    .table-row {
-      grid-template-columns: 1fr 4fr 1.5fr;
-    }
-
-    span {
-      display: inherit;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
 .slider-input {
   width: 5rem !important;
   flex-basis: 5rem !important;
@@ -393,9 +210,6 @@ const setJavaInstall = (javaInstall) => {
 .theming,
 .settings-card {
   margin: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
 }
 
 .theming {
@@ -411,7 +225,7 @@ const setJavaInstall = (javaInstall) => {
 .settings-card {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .settings-title {
@@ -424,17 +238,12 @@ const setJavaInstall = (javaInstall) => {
   gap: 0.5rem;
 }
 
-.installation-input {
-  width: 100%;
-}
-
-.installation-buttons {
+.toggle-setting {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
-  margin: 0;
 }
 
 .sliders {
@@ -448,25 +257,4 @@ const setJavaInstall = (javaInstall) => {
     flex-grow: 1;
   }
 }
-
-.toggle-setting {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.manage {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.test-success {
-  color: var(--color-green);
-}
-
-.test-fail {
-  color: var(--color-red);
-}
 </style>

theseus_gui/src/pages/instance/Index.vue

@@ -18,8 +18,11 @@
           </span>
         </div>
         <span class="button-group">
+          <Button v-if="instance.install_stage !== 'installed'" disabled class="instance-button">
+            Installing...
+          </Button>
           <Button
-            v-if="playing === true"
+            v-else-if="playing === true"
             color="danger"
             class="instance-button"
             @click="stopInstance"
@@ -38,9 +41,13 @@
             <PlayIcon />
             Play
           </Button>
-          <Button v-else-if="loading === true && playing === false" disabled class="instance-button"
-            >Loading...</Button
+          <Button
+            v-else-if="loading === true && playing === false"
+            disabled
+            class="instance-button"
           >
+            Loading...
+          </Button>
           <!--TODO: https://github.com/tauri-apps/tauri/issues/4062 -->
           <Button class="instance-button" icon-only @click="open({ defaultPath: instance.path })">
             <OpenFolderIcon />
@@ -52,14 +59,14 @@
           <BoxIcon />
           Mods
         </RouterLink>
-        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
-          <SettingsIcon />
-          Options
-        </RouterLink>
         <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
           <FileIcon />
           Logs
         </RouterLink>
+        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
+          <SettingsIcon />
+          Options
+        </RouterLink>
       </div>
     </div>
     <div class="content">
@@ -371,12 +378,4 @@ Button {
     }
   }
 }
-
-.card-divider {
-  background-color: var(--color-button-bg);
-  border: none;
-  color: var(--color-button-bg);
-  height: 1px;
-  margin: var(--gap-xl) 0;
-}
 </style>

theseus_gui/src/pages/instance/Options.vue

@@ -1,139 +1,504 @@
 <template>
+  <Modal ref="changeVersionsModal" header="Change instance versions">
+    <div class="change-versions-modal universal-body">
+      <div class="input-row">
+        <p class="input-label">Loader</p>
+        <Chips v-model="loader" :items="loaders" />
+      </div>
+      <div class="input-row">
+        <p class="input-label">Game Version</p>
+        <div class="versions">
+          <DropdownSelect v-model="gameVersion" :options="selectableGameVersions" render-up />
+          <Checkbox v-model="showSnapshots" class="filter-checkbox" label="Include snapshots" />
+        </div>
+      </div>
+      <div v-if="loader !== 'vanilla'" class="input-row">
+        <p class="input-label">Loader Version</p>
+        <DropdownSelect
+          :model-value="selectableLoaderVersions[loaderVersionIndex]"
+          :options="selectableLoaderVersions"
+          :display-name="(option) => option?.id"
+          render-up
+          @change="(value) => (loaderVersionIndex = value.index)"
+        />
+      </div>
+      <div class="button-group">
+        <button class="btn" @click="$refs.changeVersionsModal.hide()">
+          <XIcon />
+          Cancel
+        </button>
+        <button
+          class="btn btn-primary"
+          :disabled="!isValid || editing"
+          @click="saveGvLoaderEdits()"
+        >
+          <SaveIcon />
+          {{ editing ? 'Saving...' : 'Save changes' }}
+        </button>
+      </div>
+    </div>
+  </Modal>
+  <section class="card">
+    <div class="label">
+      <h3>
+        <span class="label__title size-card-header">Profile</span>
+      </h3>
+    </div>
+    <label for="instance-icon">
+      <span class="label__title">Icon</span>
+    </label>
+    <div class="input-group">
+      <Avatar
+        :src="!icon || (icon && icon.startsWith('http')) ? icon : convertFileSrc(icon)"
+        size="md"
+        class="project__icon"
+      />
+      <div class="input-stack">
+        <button id="instance-icon" class="btn" @click="setIcon">
+          <UploadIcon />
+          Upload icon
+        </button>
+        <button class="btn" @click="resetIcon">
+          <TrashIcon />
+          Remove icon
+        </button>
+      </div>
+    </div>
+
+    <label for="project-name">
+      <span class="label__title">Name</span>
+    </label>
+    <input id="profile-name" v-model="title" maxlength="80" type="text" />
+
+    <div class="adjacent-input">
+      <label for="edit-versions">
+        <span class="label__title">Edit mod loader/game versions</span>
+        <span class="label__description">
+          Allows you to change the mod loader, loader version, or game version of the profile.
+        </span>
+      </label>
+      <button id="edit-versions" class="btn" @click="$refs.changeVersionsModal.show()">
+        <EditIcon />
+        Edit versions
+      </button>
+    </div>
+  </section>
   <Card class="settings-card">
     <h2 class="settings-title">Java</h2>
     <div class="settings-group">
       <h3>Installation</h3>
+      <Checkbox v-model="overrideJavaInstall" label="Override global java installations" />
+      <JavaSelector v-model="javaInstall" :disabled="!overrideJavaInstall" />
+    </div>
+    <hr class="card-divider" />
+    <div class="settings-group">
+      <h3>Java arguments</h3>
+      <Checkbox v-model="overrideJavaArgs" label="Override global java arguments" />
       <input
-        ref="javaPath"
-        v-model="javaPath"
+        v-model="javaArgs"
+        :disabled="!overrideJavaArgs"
         type="text"
         class="input installation-input"
-        placeholder="/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home"
+        placeholder="Enter java arguments..."
+      />
+    </div>
+    <div class="settings-group">
+      <h3>Environment variables</h3>
+      <Checkbox v-model="overrideEnvVars" label="Override global environment variables" />
+      <input
+        v-model="envVars"
+        :disabled="!overrideEnvVars"
+        type="text"
+        class="input installation-input"
+        placeholder="Enter environment variables..."
       />
-      <span class="installation-buttons">
-        <Button @click="saveJavaPath">
-          <SearchIcon />
-          Auto Detect
-        </Button>
-        <Button @click="saveJavaPath">
-          <BrowseIcon />
-          Browse
-        </Button>
-        <Button @click="saveJavaPath">
-          <PlayIcon />
-          Test
-        </Button>
-      </span>
-    </div>
-    <hr class="card-divider" />
-    <div class="settings-group">
-      <h3>Arguments</h3>
-      <input ref="javaArgs" v-model="javaArgs" type="text" class="input installation-input" />
     </div>
     <hr class="card-divider" />
     <div class="settings-group">
+      <Checkbox v-model="overrideMemorySettings" label="Override global memory settings" />
       <div class="sliders">
         <span class="slider">
-          Minimum Memory
-          <Slider v-model="javaMemory" :min="1024" :max="8192" :step="1024" />
+          Minimum memory
+          <Slider
+            v-model="memory.minimum"
+            :disabled="!overrideMemorySettings"
+            :min="256"
+            :max="maxMemory"
+            :step="10"
+          />
         </span>
         <span class="slider">
-          Maximum Memory
-          <Slider v-model="javaMemory" :min="1024" :max="8192" :step="1024" />
+          Maximum memory
+          <Slider
+            v-model="memory.maximum"
+            :disabled="!overrideMemorySettings"
+            :min="256"
+            :max="maxMemory"
+            :step="10"
+          />
         </span>
       </div>
     </div>
   </Card>
   <Card class="settings-card">
     <h2 class="settings-title">Window</h2>
+    <Checkbox v-model="overrideWindowSettings" label="Override global window settings" />
     <div class="settings-group">
-      <div class="settings-group">
-        <div class="sliders">
-          <span class="slider">
-            Width
-            <Slider v-model="javaMemory" :min="1024" :max="8192" :step="1024" />
-          </span>
-          <span class="slider">
-            Height
-            <Slider v-model="javaMemory" :min="1024" :max="8192" :step="1024" />
-          </span>
-        </div>
-        <div class="toggle-setting">
-          Start in Fullscreen
-          <input
-            id="fullscreen"
-            v-model="fullscreen"
-            type="checkbox"
-            name="fullscreen"
-            class="switch stylized-toggle"
-          />
-        </div>
+      <div class="toggle-setting">
+        Width
+        <input
+          v-model="resolution[0]"
+          :disabled="!overrideWindowSettings"
+          type="number"
+          class="input"
+          @change="updateProfile"
+        />
       </div>
-      <hr class="card-divider" />
-      <div class="settings-group">
-        <h3>Console</h3>
-        <div class="toggle-setting">
-          Show console while game is running
-          <input
-            id="fullscreen"
-            v-model="fullscreen"
-            type="checkbox"
-            name="fullscreen"
-            class="switch stylized-toggle"
-          />
-        </div>
-        <div class="toggle-setting">
-          Close console when game quits
-          <input
-            id="fullscreen"
-            v-model="fullscreen"
-            type="checkbox"
-            name="fullscreen"
-            class="switch stylized-toggle"
-          />
-        </div>
-        <div class="toggle-setting">
-          Show console when game crashes
-          <input
-            id="fullscreen"
-            v-model="fullscreen"
-            type="checkbox"
-            name="fullscreen"
-            class="switch stylized-toggle"
-          />
-        </div>
+      <div class="toggle-setting">
+        Height
+        <input
+          v-model="resolution[1]"
+          :disabled="!overrideWindowSettings"
+          type="number"
+          class="input"
+          @change="updateProfile"
+        />
       </div>
     </div>
   </Card>
   <Card class="settings-card">
-    <h2 class="settings-title">Commands</h2>
+    <h2 class="settings-title">Hooks</h2>
+    <Checkbox v-model="overrideHooks" label="Override global hooks" />
     <div class="settings-group">
       <div class="toggle-setting">
-        Pre Launch
-        <input ref="javaArgs" v-model="javaArgs" type="text" class="input" />
+        Pre launch
+        <input v-model="hooks.pre_launch" :disabled="!overrideHooks" type="text" />
       </div>
       <div class="toggle-setting">
         Wrapper
-        <input ref="javaArgs" v-model="javaArgs" type="text" class="input" />
+        <input v-model="hooks.wrapper" :disabled="!overrideHooks" type="text" />
       </div>
       <div class="toggle-setting">
-        Post Launch
-        <input ref="javaArgs" v-model="javaArgs" type="text" class="input" />
+        Post exit
+        <input v-model="hooks.post_exit" :disabled="!overrideHooks" type="text" />
+      </div>
+    </div>
+  </Card>
+  <Card class="settings-card">
+    <h2 class="settings-title">Profile management</h2>
+    <div class="settings-group">
+      <div class="toggle-setting">
+        Repair profile
+        <button class="btn btn-highlight" :disabled="repairing" @click="repairProfile">
+          <HammerIcon /> Repair
+        </button>
+      </div>
+      <div class="toggle-setting">
+        Delete profile
+        <button class="btn btn-danger" :disabled="removing" @click="removeProfile">
+          <TrashIcon /> Delete
+        </button>
       </div>
     </div>
   </Card>
 </template>
 
 <script setup>
-import { Card, Button, SearchIcon, Slider } from 'omorphia'
-import { BrowseIcon, PlayIcon } from '@/assets/icons'
+import {
+  Card,
+  Slider,
+  TrashIcon,
+  Checkbox,
+  UploadIcon,
+  Avatar,
+  EditIcon,
+  Modal,
+  Chips,
+  DropdownSelect,
+  XIcon,
+  SaveIcon,
+} from 'omorphia'
+import { HammerIcon } from '@/assets/icons'
+import { useRouter } from 'vue-router'
+import { edit, edit_icon, get_optimal_jre_key, install, remove } from '@/helpers/profile.js'
+import { computed, readonly, ref, shallowRef, watch } from 'vue'
+import { get_max_memory } from '@/helpers/jre.js'
+import { get } from '@/helpers/settings.js'
+import JavaSelector from '@/components/ui/JavaSelector.vue'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { open } from '@tauri-apps/api/dialog'
+import { get_fabric_versions, get_forge_versions, get_quilt_versions } from '@/helpers/metadata.js'
+import { get_game_versions, get_loaders } from '@/helpers/tags.js'
+
+const router = useRouter()
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    required: true,
+  },
+})
+
+const title = ref(props.instance.metadata.name)
+const icon = ref(props.instance.metadata.icon)
+
+async function resetIcon() {
+  icon.value = null
+  await edit_icon(props.instance.path, null)
+}
+
+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)
+}
+
+const globalSettings = await get()
+
+const javaSettings = props.instance.java ?? {}
+
+const overrideJavaInstall = ref(!!javaSettings.override_version)
+const optimalJava = readonly(await get_optimal_jre_key(props.instance.path))
+const javaInstall = ref(optimalJava ?? javaSettings.override_version ?? { path: '', version: '' })
+
+const overrideJavaArgs = ref(!!javaSettings.extra_arguments)
+const javaArgs = ref((javaSettings.extra_arguments ?? globalSettings.custom_java_args).join(' '))
+
+const overrideEnvVars = ref(!!javaSettings.custom_env_args)
+const envVars = ref(
+  (javaSettings.custom_env_args ?? globalSettings.custom_env_args).map((x) => x.join('=')).join(' ')
+)
+
+const overrideMemorySettings = ref(!!props.instance.memory)
+const memory = ref(props.instance.memory ?? globalSettings.memory)
+const maxMemory = (await get_max_memory()) / 1024
+
+const overrideWindowSettings = ref(!!props.instance.resolution)
+const resolution = ref(props.instance.resolution ?? globalSettings.game_resolution)
+
+const overrideHooks = ref(!!props.instance.hooks)
+const hooks = ref(props.instance.hooks ?? globalSettings.hooks)
+
+watch(
+  [
+    title,
+    overrideJavaInstall,
+    javaInstall,
+    overrideJavaArgs,
+    javaArgs,
+    overrideEnvVars,
+    envVars,
+    overrideMemorySettings,
+    memory.value,
+    overrideWindowSettings,
+    resolution.value,
+    overrideHooks,
+    hooks.value,
+  ],
+  async () => {
+    const editProfile = {
+      metadata: {
+        name: title.value,
+      },
+      java: {},
+    }
+
+    if (overrideJavaInstall.value) {
+      if (javaInstall.value.path !== '') {
+        editProfile.java.override_version = javaInstall.value
+      }
+    }
+
+    if (overrideJavaArgs.value) {
+      if (javaArgs.value !== '') {
+        editProfile.java.extra_arguments = javaArgs.value.trim().split(/\s+/).filter(Boolean)
+      }
+    }
+
+    if (overrideEnvVars.value) {
+      if (envVars.value !== '') {
+        editProfile.java.custom_env_args = envVars.value
+          .trim()
+          .split(/\s+/)
+          .filter(Boolean)
+          .map((x) => x.split('=').filter(Boolean))
+      }
+    }
+
+    if (overrideMemorySettings.value) {
+      editProfile.memory = memory.value
+    }
+
+    if (overrideWindowSettings.value) {
+      editProfile.resolution = resolution.value
+    }
+
+    if (overrideHooks.value) {
+      editProfile.hooks = hooks.value
+    }
+
+    await edit(props.instance.path, editProfile)
+  }
+)
+
+const repairing = ref(false)
+
+async function repairProfile() {
+  repairing.value = true
+  await install(props.instance.path)
+  repairing.value = false
+}
+
+const removing = ref(false)
+async function removeProfile() {
+  removing.value = true
+  await remove(props.instance.path)
+  removing.value = false
+
+  await router.push({ path: '/' })
+}
+
+const changeVersionsModal = ref(null)
+const showSnapshots = ref(false)
+
+const [fabric_versions, forge_versions, quilt_versions, all_game_versions, loaders] =
+  await Promise.all([
+    get_fabric_versions().then(shallowRef),
+    get_forge_versions().then(shallowRef),
+    get_quilt_versions().then(shallowRef),
+    get_game_versions().then(shallowRef),
+    get_loaders()
+      .then((value) =>
+        value
+          .filter((item) => item.supported_project_types.includes('modpack'))
+          .map((item) => item.name.toLowerCase())
+      )
+      .then(ref),
+  ])
+loaders.value.push('vanilla')
+
+const loader = ref(props.instance.metadata.loader)
+
+const gameVersion = ref(props.instance.metadata.game_version)
+const selectableGameVersions = computed(() => {
+  return all_game_versions.value
+    .filter((item) => {
+      let defaultVal = item.version_type === 'release' || showSnapshots.value
+      if (loader.value === 'fabric') {
+        defaultVal &= fabric_versions.value.gameVersions.some((x) => item.version === x.id)
+      } else if (loader.value === 'forge') {
+        defaultVal &= forge_versions.value.gameVersions.some((x) => item.version === x.id)
+      } else if (loader.value === 'quilt') {
+        defaultVal &= quilt_versions.value.gameVersions.some((x) => item.version === x.id)
+      }
+
+      return defaultVal
+    })
+    .map((item) => item.version)
+})
+
+const selectableLoaderVersions = 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
+    }
+  }
+  return []
+})
+const loaderVersionIndex = ref(
+  selectableLoaderVersions.value.findIndex(
+    (x) => x.id === props.instance.metadata.loader_version?.id
+  )
+)
+
+const isValid = computed(() => {
+  return (
+    selectableGameVersions.value.includes(gameVersion.value) &&
+    (loaderVersionIndex.value >= 0 || loader.value === 'vanilla')
+  )
+})
+
+watch(loader, () => (loaderVersionIndex.value = 0))
+
+const editing = ref(false)
+async function saveGvLoaderEdits() {
+  editing.value = true
+
+  const editProfile = {
+    metadata: {
+      game_version: gameVersion.value,
+      loader: loader.value,
+    },
+  }
+
+  if (loader.value !== 'vanilla') {
+    editProfile.metadata.loader_version = selectableLoaderVersions.value[loaderVersionIndex.value]
+  }
+  await edit(props.instance.path, editProfile)
+  await repairProfile()
+
+  editing.value = false
+  changeVersionsModal.value.hide()
+}
 </script>
 
 <style scoped lang="scss">
+.change-versions-modal {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  gap: 1rem;
+
+  .input-label {
+    font-size: 1rem;
+    font-weight: bolder;
+    color: var(--color-contrast);
+    margin-bottom: 0.5rem;
+  }
+
+  .versions {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  .button-group {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+  }
+}
+
 .settings-card {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
+}
+
+.input-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.input-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .settings-title {
@@ -150,15 +515,6 @@ import { BrowseIcon, PlayIcon } from '@/assets/icons'
   width: 100%;
 }
 
-.installation-buttons {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-}
-
 .sliders {
   display: flex;
   flex-wrap: wrap;
@@ -186,4 +542,8 @@ import { BrowseIcon, PlayIcon } from '@/assets/icons'
   height: 1px;
   margin: var(--gap-sm) 0;
 }
+
+:deep(button.checkbox) {
+  border: none;
+}
 </style>

theseus_gui/src/pages/project/Index.vue

@@ -81,11 +81,11 @@
         </div>
         <hr class="card-divider" />
         <div class="button-group">
-          <Button class="instance-button">
+          <Button class="instance-button" disabled>
             <ReportIcon />
             Report
           </Button>
-          <Button class="instance-button">
+          <Button class="instance-button" disabled>
             <HeartIcon />
             Follow
           </Button>
@@ -96,7 +96,8 @@
             v-if="data.issues_url"
             :href="data.issues_url"
             class="title"
-            rel="noopener nofollow ugc"
+            rel="noopener nofollow ugc external"
+            target="_blank"
           >
             <IssuesIcon aria-hidden="true" />
             <span>Issues</span>
@@ -105,16 +106,29 @@
             v-if="data.source_url"
             :href="data.source_url"
             class="title"
-            rel="noopener nofollow ugc"
+            target="_blank"
+            rel="noopener nofollow ugc external"
           >
             <CodeIcon aria-hidden="true" />
             <span>Source</span>
           </a>
-          <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
+          <a
+            v-if="data.wiki_url"
+            :href="data.wiki_url"
+            class="title"
+            rel="noopener nofollow ugc external"
+            target="_blank"
+          >
             <WikiIcon aria-hidden="true" />
             <span>Wiki</span>
           </a>
-          <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
+          <a
+            v-if="data.wiki_url"
+            :href="data.wiki_url"
+            class="title"
+            rel="noopener nofollow ugc external"
+            target="_blank"
+          >
             <DiscordIcon aria-hidden="true" />
             <span>Discord</span>
           </a>
@@ -122,7 +136,8 @@
             v-for="(donation, index) in data.donation_urls"
             :key="index"
             :href="donation.url"
-            rel="noopener nofollow ugc"
+            target="_blank"
+            rel="noopener nofollow ugc external"
           >
             <BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
             <PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />