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

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>

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>

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>