Search UI improvements (#107)

* Base impl

* Make project type selectable

* Update Browse.vue

* address changes

* Quick create

* Run linter

* fix merge

* Addressed changes

* Installation improvements

* Run lint

* resourcepacks

* automatic installation of dependencies

* Fix bugs with search

* Addressed changes

* Run linter

* Fixed direct install not working

* Remove back to search

* Update Index.vue

* Addressed some changes

* Shader fix

* fix resetting

* Update Browse.vue

* Direct install from search

* More improvements

* Update SearchCard.vue

* Card V2

* Run linter

* add instance ignoring

* Update Browse.vue

* Finalize changes

* Update SearchCard.vue

* More adjustments

* Fix out of order rendering

* Run linter

* Fix issues

* Add unlisteners

---------

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

theseus_gui/src/pages/project/Description.vue

@@ -1,6 +1,6 @@
 <template>
   <Card>
-    <div class="markdown-body" v-html="renderHighlightedString(project.body)" />
+    <div class="markdown-body" v-html="renderHighlightedString(project?.body ?? '')" />
   </Card>
 </template>
 

theseus_gui/src/pages/project/Index.vue

@@ -187,6 +187,7 @@
   </div>
   <InstallConfirmModal ref="confirmModal" />
   <InstanceInstallModal ref="modInstallModal" />
+  <IncompatibilityWarningModal ref="incompatibilityWarning" />
 </template>
 
 <script setup>
@@ -233,6 +234,7 @@ import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 import Instance from '@/components/ui/Instance.vue'
 import { useSearch } from '@/store/search'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
+import IncompatibilityWarningModal from '@/components/ui/IncompatibilityWarningModal.vue'
 
 const searchStore = useSearch()
 
@@ -242,6 +244,7 @@ const breadcrumbs = useBreadcrumbs()
 
 const confirmModal = ref(null)
 const modInstallModal = ref(null)
+const incompatibilityWarning = ref(null)
 const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
@@ -267,6 +270,10 @@ watch(
 
 dayjs.extend(relativeTime)
 
+const markInstalled = () => {
+  installed.value = true
+}
+
 async function install(version) {
   installing.value = true
   let queuedVersionData
@@ -308,17 +315,43 @@ async function install(version) {
               : true)
         )
         if (!selectedVersion) {
+          incompatibilityWarning.value.show(
+            instance.value,
+            data.value.title,
+            versions.value,
+            markInstalled
+          )
+          installing.value = false
+          return
+        } else {
+          queuedVersionData = selectedVersion
+          await installMod(instance.value.path, selectedVersion.id)
+          installVersionDependencies(instance.value, queuedVersionData)
+        }
+      } else {
+        const gameVersion = instance.value.metadata.game_version
+        const loader = instance.value.metadata.loader
+        const compatible = versions.value.some(
+          (v) =>
+            v.game_versions.includes(gameVersion) &&
+            (data.value.project_type === 'mod'
+              ? v.loaders.includes(loader) || v.loaders.includes('minecraft')
+              : true)
+        )
+        if (compatible) {
+          await installMod(instance.value.path, queuedVersionData.id)
+          await installVersionDependencies(instance.value, queuedVersionData)
+        } else {
+          incompatibilityWarning.value.show(
+            instance.value,
+            data.value.title,
+            [queuedVersionData],
+            markInstalled
+          )
           installing.value = false
           return
         }
-        queuedVersionData = selectedVersion
-        await installMod(instance.value.path, selectedVersion.id)
-      } else {
-        await installMod(instance.value.path, queuedVersionData.id)
       }
-
-      await installVersionDependencies(instance.value, queuedVersionData)
-
       installed.value = true
     } else {
       if (version) {
@@ -345,9 +378,9 @@ async function install(version) {
 .project-sidebar {
   position: fixed;
   width: 20rem;
-  min-height: 100vh;
+  min-height: calc(100vh - 3.25rem);
   height: fit-content;
-  max-height: 100vh;
+  max-height: calc(100vh - 3.25rem);
   overflow-y: auto;
   background: var(--color-raised-bg);
   padding: 1rem;

theseus_gui/src/pages/project/Versions.vue

@@ -35,14 +35,9 @@
           placeholder="Filter versions..."
         />
       </div>
-      <Checkbox
-        v-model="filterCompatible"
-        label="Only show compatible versions"
-        class="filter-checkbox"
-      />
       <Button
         class="no-wrap clear-filters"
-        :disabled="!filterLoader && !filterVersions && !filterCompatible"
+        :disabled="!filterLoader && !filterVersions"
         :action="clearFilters"
       >
         <ClearIcon />
@@ -129,28 +124,17 @@
 </template>
 
 <script setup>
-import {
-  Card,
-  Button,
-  CheckIcon,
-  ClearIcon,
-  Badge,
-  DownloadIcon,
-  Checkbox,
-  formatNumber,
-} from 'omorphia'
+import { Card, Button, CheckIcon, ClearIcon, Badge, DownloadIcon, formatNumber } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { releaseColor } from '@/helpers/utils'
 import { ref } from 'vue'
 
 let filterVersions = ref(null)
 let filterLoader = ref(null)
-let filterCompatible = ref(false)
 
 const clearFilters = () => {
   filterVersions.value = null
   filterLoader.value = null
-  filterCompatible.value = false
 }
 
 defineProps({