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>

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

@@ -4,6 +4,7 @@
     @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
   >
     <ExportModal ref="exportModal" :instance="instance" />
+    <InstanceSettingsModal ref="settingsModal" :instance="instance" />
     <ContentPageHeader>
       <template #icon>
         <Avatar :src="icon" :alt="instance.name" size="96px" />
@@ -56,12 +57,9 @@
             <button disabled>Loading...</button>
           </ButtonStyled>
           <ButtonStyled size="large" circular>
-            <RouterLink
-              v-tooltip="'Instance settings'"
-              :to="`/instance/${encodeURIComponent(route.params.id)}/options`"
-            >
+            <button v-tooltip="'Instance settings'" @click="settingsModal.show()">
               <SettingsIcon />
-            </RouterLink>
+            </button>
           </ButtonStyled>
           <ButtonStyled size="large" type="transparent" circular>
             <OverflowMenu
@@ -179,6 +177,7 @@ import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import ExportModal from '@/components/ui/ExportModal.vue'
+import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -362,6 +361,8 @@ const icon = computed(() =>
   instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
 )
 
+const settingsModal = ref()
+
 const timePlayed = computed(() => {
   return instance.value.recent_time_played + instance.value.submitted_time_played
 })

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

@@ -220,7 +220,7 @@
       <Slider
         v-model="memory.maximum"
         :disabled="!overrideMemorySettings"
-        :min="8"
+        :min="512"
         :max="maxMemory"
         :step="64"
         unit="mb"