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/install_flow/IncompatibilityWarningModal.vue

@@ -17,19 +17,21 @@
           <tr class="content">
             <td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
             <td>
-              <DropdownSelect
+              <multiselect
                 v-if="versions?.length > 1"
                 v-model="selectedVersion"
                 :options="versions"
+                :searchable="true"
                 placeholder="Select version"
-                name="Version select"
-                :display-name="
+                open-direction="top"
+                :show-labels="false"
+                :custom-label="
                   (version) =>
                     `${version?.name} (${version?.loaders
                       .map((name) => formatCategory(name))
                       .join(', ')} - ${version?.game_versions.join(', ')})`
                 "
-                render-up
+                :max-height="150"
               />
               <span v-else>
                 <span>
@@ -56,12 +58,13 @@
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { XIcon, DownloadIcon } from '@modrinth/assets'
-import { Button, DropdownSelect } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 import { add_project_from_version as installMod } from '@/helpers/profile'
 import { ref } from 'vue'
 import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
+import Multiselect from 'vue-multiselect'
 
 const instance = ref(null)
 const project = ref(null)

apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

@@ -357,7 +357,7 @@ const createInstance = async () => {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 1rem;
+  min-width: 350px;
 }
 
 .profiles {
@@ -378,7 +378,6 @@ const createInstance = async () => {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 0 0.5rem;
   gap: 0.5rem;
 
   img {