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>

packages/ui/src/components/modal/ConfirmModal.vue

@@ -1,12 +1,12 @@
 <template>
-  <NewModal ref="modal" :noblur="noblur" danger :on-hide="onHide">
+  <NewModal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide">
     <template #title>
       <slot name="title">
         <span class="font-extrabold text-contrast text-lg">{{ title }}</span>
       </slot>
     </template>
     <div>
-      <div class="markdown-body" v-html="renderString(description)" />
+      <div class="markdown-body max-w-[35rem]" v-html="renderString(description)" />
       <label v-if="hasToType" for="confirmation" class="confirmation-label">
         <span>
           <strong>To verify, type</strong>
@@ -25,9 +25,9 @@
         />
       </div>
       <div class="flex gap-2 mt-6">
-        <ButtonStyled color="red">
+        <ButtonStyled :color="danger ? 'red' : 'brand'">
           <button :disabled="action_disabled" @click="proceed">
-            <TrashIcon />
+            <component :is="proceedIcon" />
             {{ proceedLabel }}
           </button>
         </ButtonStyled>
@@ -68,6 +68,10 @@ const props = defineProps({
     default: 'No description defined',
     required: true,
   },
+  proceedIcon: {
+    type: Object,
+    default: TrashIcon,
+  },
   proceedLabel: {
     type: String,
     default: 'Proceed',
@@ -76,6 +80,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  danger: {
+    type: Boolean,
+    default: true,
+  },
   onHide: {
     type: Function,
     default() {

packages/ui/src/components/modal/NewModal.vue

@@ -21,6 +21,7 @@
     <div class="modal-container experimental-styles-within" :class="{ shown: visible }">
       <div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
         <div
+          data-tauri-drag-region
           class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
         >
           <div class="flex text-wrap break-words items-center gap-3 min-w-0">

packages/ui/src/components/modal/TabbedModal.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { type Component, ref } from 'vue'
+import { useVIntl, type MessageDescriptor } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+
+type Tab<Props> = {
+  name: MessageDescriptor
+  icon: Component
+  content: Component<Props>
+  props?: Props
+}
+
+defineProps<{
+  tabs: Tab<unknown>[]
+}>()
+
+const selectedTab = ref(0)
+
+function setTab(index: number) {
+  selectedTab.value = index
+}
+
+defineExpose({ selectedTab, setTab })
+</script>
+<template>
+  <div class="grid grid-cols-[auto_1fr]">
+    <div
+      class="flex flex-col gap-1 border-solid pr-4 border-0 border-r-[1px] border-divider min-w-[200px]"
+    >
+      <button
+        v-for="(tab, index) in tabs"
+        :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-all ${selectedTab === index ? 'bg-button-bgSelected text-button-textSelected' : 'bg-transparent text-button-text hover:bg-button-bg hover:text-contrast'}`"
+        @click="() => (selectedTab = index)"
+      >
+        <component :is="tab.icon" class="w-4 h-4" />
+        <span>{{ formatMessage(tab.name) }}</span>
+      </button>
+
+      <slot name="footer" />
+    </div>
+    <div class="w-[600px] h-[500px] overflow-y-auto pl-4">
+      <component :is="tabs[selectedTab].content" v-bind="tabs[selectedTab].props ?? {}" />
+    </div>
+  </div>
+</template>