Start instance settings

Author: Geometrically

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>Hello</div>
+</template>

apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import {
+  SettingsIcon,
+  CoffeeIcon,
+  InfoIcon,
+  WrenchIcon,
+  BoxIcon,
+  ArchiveIcon,
+  MonitorIcon,
+} from '@modrinth/assets'
+import { TabbedModal } from '@modrinth/ui'
+import { ref } from 'vue'
+import { defineMessage } from '@vintl/vintl'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
+
+const props = 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.java',
+      defaultMessage: 'Java',
+    }),
+    icon: CoffeeIcon,
+    content: GeneralSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.window',
+      defaultMessage: 'Window',
+    }),
+    icon: MonitorIcon,
+    content: GeneralSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.hooks',
+      defaultMessage: 'Hooks',
+    }),
+    icon: WrenchIcon,
+    content: GeneralSettings,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.modpack',
+      defaultMessage: 'Modpack',
+    }),
+    icon: BoxIcon,
+    content: GeneralSettings,
+    modpackOnly: true,
+  },
+  {
+    name: defineMessage({
+      id: 'instance.settings.tabs.manage',
+      defaultMessage: 'Manage',
+    }),
+    icon: ArchiveIcon,
+    content: GeneralSettings,
+  },
+]
+
+const modal = ref()
+
+function show() {
+  modal.value.show()
+}
+
+defineExpose({ show })
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
+        <SettingsIcon /> Instance settings
+      </span>
+    </template>
+
+    <TabbedModal :tabs="tabs" />
+  </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>

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" />
     <ContentPageHeader>
       <template #icon>
         <Avatar :src="icon" :alt="instance.name" size="96px" />
@@ -48,12 +49,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
@@ -169,6 +167,7 @@ import { handleSevereError } from '@/store/error.js'
 import { get_project, get_version_many } from '@/helpers/cache.js'
 import dayjs from 'dayjs'
 import ExportModal from '@/components/ui/ExportModal.vue'
+import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
 
 const route = useRoute()
 
@@ -347,6 +346,8 @@ const icon = computed(() =>
   instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
 )
 
+const settingsModal = ref()
+
 onUnmounted(() => {
   unlistenProcesses()
   unlistenProfiles()

packages/assets/icons/monitor.svg

@@ -111,6 +111,7 @@ import _MessageIcon from './icons/message.svg?component'
 import _MicrophoneIcon from './icons/microphone.svg?component'
 import _MinimizeIcon from './icons/minimize.svg?component'
 import _MinusIcon from './icons/minus.svg?component'
+import _MonitorIcon from './icons/monitor.svg?component'
 import _MonitorSmartphoneIcon from './icons/monitor-smartphone.svg?component'
 import _MoonIcon from './icons/moon.svg?component'
 import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
@@ -301,6 +302,7 @@ export const MessageIcon = _MessageIcon
 export const MicrophoneIcon = _MicrophoneIcon
 export const MinimizeIcon = _MinimizeIcon
 export const MinusIcon = _MinusIcon
+export const MonitorIcon = _MonitorIcon
 export const MonitorSmartphoneIcon = _MonitorSmartphoneIcon
 export const MoonIcon = _MoonIcon
 export const MoreHorizontalIcon = _MoreHorizontalIcon

packages/assets/index.ts

@@ -18,7 +18,7 @@
       <DropdownIcon v-else-if="collapsingToggleStyle" aria-hidden="true" />
     </button>
     <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
-    <p v-if="label" aria-hidden="true">
+    <p v-if="label" aria-hidden="true" class="checkbox-label">
       {{ label }}
     </p>
     <slot v-else />
@@ -138,4 +138,8 @@ function toggle() {
     cursor: not-allowed;
   }
 }
+
+.checkbox-label {
+  color: var(--color-base);
+}
 </style>