Misc fixes, new instance & project cards (#3040)

* Fix some TS errors, and misc settings fixes

* New instance + project cards

* bug fixes + lint

* Quick instance switcher

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>

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

@@ -10,7 +10,7 @@ import {
   CoffeeIcon,
 } from '@modrinth/assets'
 import { TabbedModal } from '@modrinth/ui'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useVIntl, defineMessage } from '@vintl/vintl'
 import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
 import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
@@ -92,7 +92,9 @@ function show() {
   modal.value.show()
 }
 
-defineExpose({ show })
+const isOpen = computed(() => modal.value?.isOpen)
+
+defineExpose({ show, isOpen })
 
 const version = await getVersion()
 const osPlatform = getOsPlatform()

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

@@ -7,7 +7,7 @@ import {
   MonitorIcon,
   CodeIcon,
 } from '@modrinth/assets'
-import { Avatar, TabbedModal } from '@modrinth/ui'
+import { Avatar, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
 import { ref } from 'vue'
 import { defineMessage, useVIntl } from '@vintl/vintl'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -17,19 +17,13 @@ import InstallationSettings from '@/components/ui/instance_settings/Installation
 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'
+import type { InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
 
-defineProps({
-  instance: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-})
+const props = defineProps<InstanceSettingsTabProps>()
 
-const tabs = [
+const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
   {
     name: defineMessage({
       id: 'instance.settings.tabs.general',
@@ -92,12 +86,13 @@ const titleMessage = defineMessage({
         <Avatar
           :src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
           size="24px"
+          :tint-by="props.instance.path"
         />
         {{ instance.name }} <ChevronRightIcon />
         <span class="font-extrabold text-contrast">{{ formatMessage(titleMessage) }}</span>
       </span>
     </template>
 
-    <TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props: { instance } }))" />
+    <TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props }))" />
   </ModalWrapper>
 </template>