From 7ccf10b52c116b3edee3354921c331e91c8476b6 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 19 Apr 2023 01:34:00 -0400
Subject: [PATCH 01/24] Base impl

---
 .../src/assets/stylesheets/global.scss        |  1 +
 .../components/ui/InstanceInstallModal.vue    | 95 +++++++++++++++++++
 theseus_gui/src/helpers/profile.js            |  4 +-
 theseus_gui/src/pages/Browse.vue              | 92 +++++++++++++++---
 theseus_gui/src/pages/Library.vue             |  2 +-
 theseus_gui/src/pages/instance/Index.vue      |  2 +-
 theseus_gui/src/pages/instance/Mods.vue       | 12 ++-
 theseus_gui/src/pages/project/Index.vue       | 53 +++++++++--
 theseus_gui/src/store/search.js               |  3 +-
 9 files changed, 234 insertions(+), 30 deletions(-)
 create mode 100644 theseus_gui/src/components/ui/InstanceInstallModal.vue

diff --git a/theseus_gui/src/assets/stylesheets/global.scss b/theseus_gui/src/assets/stylesheets/global.scss
index ea9b6cc89..1d902f45c 100644
--- a/theseus_gui/src/assets/stylesheets/global.scss
+++ b/theseus_gui/src/assets/stylesheets/global.scss
@@ -2,6 +2,7 @@
 
 :root {
   font-family: var(--font-standard);
+  color-scheme: dark;
 }
 
 * {
diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
new file mode 100644
index 000000000..8356688bf
--- /dev/null
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { Avatar, Modal, Button } from 'omorphia'
+import { computed, ref } from 'vue'
+import { add_project_from_version as installMod, list } from '@/helpers/profile'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+
+const version = ref('')
+const installModal = ref(null)
+const searchFilter = ref('')
+
+defineExpose({
+  show: (id) => {
+    version.value = id
+    installModal.value.show()
+    searchFilter.value = ''
+  },
+})
+
+const profiles = ref(await list().then(Object.values))
+
+async function install(instance) {
+  console.log(instance)
+  await installMod(instance, version.value)
+  installModal.value.hide()
+}
+
+const filteredVersions = computed(() => {
+  return profiles.value.filter((profile) => {
+    return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+  })
+})
+</script>
+
+<template>
+  <Modal ref="installModal" header="Install Mod">
+    <div class="modal-body">
+      <input v-model="searchFilter" type="text" class="search" placeholder="Search for a profile" />
+      <div class="profiles">
+        <div
+          v-for="profile in filteredVersions"
+          :key="profile.metadata.name"
+          class="option btn"
+          @click="install(profile.path)"
+        >
+          <Avatar :src="convertFileSrc(profile.metadata.icon)" size="xs" />
+          <div class="name">{{ profile.metadata.name }}</div>
+        </div>
+      </div>
+      <div class="footer">
+        <Button @click="installModal.hide()">Cancel</Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.profiles {
+  max-height: 18rem;
+  overflow-y: auto;
+}
+
+.option {
+  width: calc(100%);
+  background: var(--color-raised-bg);
+  color: var(--color-base);
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  padding: 0.5rem;
+
+  img {
+    margin-right: 0.5rem;
+  }
+
+  .name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+</style>
diff --git a/theseus_gui/src/helpers/profile.js b/theseus_gui/src/helpers/profile.js
index 198f43e09..9d94014ab 100644
--- a/theseus_gui/src/helpers/profile.js
+++ b/theseus_gui/src/helpers/profile.js
@@ -44,8 +44,8 @@ export async function list() {
 
 // Add a project to a profile from a version
 // Returns a path to the new project file
-export async function add_project_from_version(path, version_id) {
-  return await invoke('profile_add_project_from_version', { path, version_id })
+export async function add_project_from_version(path, versionId) {
+  return await invoke('profile_add_project_from_version', { path, versionId })
 }
 
 // Add a project to a profile from a path + project_type
diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 8c324883c..2c6deab92 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -14,15 +14,24 @@ import {
   ClientIcon,
   ServerIcon,
   AnimatedLogo,
+  Avatar,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { useSearch } from '@/store/state'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'
+import { get as getProfile } from '@/helpers/profile'
+import { useRoute } from 'vue-router'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
 
-const searchStore = useSearch()
+const route = useRoute()
 
+const searchStore = useSearch()
+searchStore.projectType = route.query.projectType ?? 'modpack'
+const showVersions = ref(true)
+const showLoaders = ref(true)
 const showSnapshots = ref(false)
 const loading = ref(true)
+const instance = ref(null)
 
 const [categories, loaders, availableGameVersions] = await Promise.all([
   get_categories(),
@@ -42,6 +51,22 @@ const getSearchResults = async (shouldLoad = false) => {
 
 getSearchResults(true)
 
+const handleReset = async () => {
+  searchStore.resetFilters()
+  await getSearchResults()
+}
+
+if (route.query.instance) {
+  instance.value = await getProfile(route.query.instance)
+  console.log(instance.value)
+  searchStore.activeVersions = [instance.value.metadata.game_version]
+  searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
+  showVersions.value = false
+  showLoaders.value = false
+} else {
+  handleReset()
+}
+
 const toggleFacet = async (facet) => {
   const index = searchStore.facets.indexOf(facet)
 
@@ -66,16 +91,26 @@ const switchPage = async (page) => {
   else searchStore.offset = (searchStore.currentPage - 1) * searchStore.limit
   await getSearchResults()
 }
-
-const handleReset = async () => {
-  searchStore.resetFilters()
-  await getSearchResults()
-}
 </script>
 
 <template>
   <div class="search-container">
     <aside class="filter-panel">
+      <Card
+        v-if="instance"
+        class="instance-card button-base"
+        @click="$router.push(`/instance/${encodeURIComponent(instance.path)}`)"
+      >
+        <Avatar
+          :src="convertFileSrc(instance.metadata.icon)"
+          :alt="instance.metadata.name"
+          size="sm"
+        />
+        <div class="instance-card__info">
+          <span class="title">{{ instance.metadata.name }}</span>
+          {{ instance.metadata.game_version }} {{ instance.metadata.loader }}
+        </div>
+      </Card>
       <Button
         role="button"
         :disabled="
@@ -94,7 +129,9 @@ const handleReset = async () => {
       <div class="categories">
         <h2>Categories</h2>
         <div
-          v-for="category in categories.filter((cat) => cat.project_type === 'modpack')"
+          v-for="category in categories.filter(
+            (cat) => cat.project_type === searchStore.projectType
+          )"
           :key="category.name"
         >
           <SearchFilter
@@ -107,10 +144,12 @@ const handleReset = async () => {
           />
         </div>
       </div>
-      <div class="loaders">
+      <div v-if="showLoaders" class="loaders">
         <h2>Loaders</h2>
         <div
-          v-for="loader in loaders.filter((l) => l.supported_project_types?.includes('modpack'))"
+          v-for="loader in loaders.filter((l) =>
+            l.supported_project_types?.includes(searchStore.projectType)
+          )"
           :key="loader"
         >
           <SearchFilter
@@ -144,7 +183,7 @@ const handleReset = async () => {
           <ServerIcon aria-hidden="true" />
         </SearchFilter>
       </div>
-      <div class="versions">
+      <div v-if="showVersions" class="versions">
         <h2>Minecraft versions</h2>
         <Checkbox v-model="showSnapshots" class="filter-checkbox">Show snapshots</Checkbox>
         <multiselect
@@ -185,7 +224,7 @@ const handleReset = async () => {
             <input
               v-model="searchStore.searchInput"
               type="text"
-              placeholder="Search modpacks..."
+              :placeholder="`Search ${searchStore.projectType}s...`"
               @input="getSearchResults"
             />
           </div>
@@ -224,7 +263,9 @@ const handleReset = async () => {
       <section v-else class="project-list display-mode--list instance-results" role="list">
         <ProjectCard
           v-for="result in searchStore.searchResults"
-          :id="`${result?.project_id}/`"
+          :id="`${result?.project_id}/${
+            $route.query.instance ? '?instance=' + encodeURIComponent($route.query.instance) : ''
+          }`"
           :key="result?.project_id"
           class="result-project-item"
           :type="result?.project_type"
@@ -238,12 +279,13 @@ const handleReset = async () => {
           :categories="[
             ...categories.filter(
               (cat) =>
-                result?.display_categories.includes(cat.name) && cat.project_type === 'modpack'
+                result?.display_categories.includes(cat.name) &&
+                cat.project_type === searchStore.projectType
             ),
             ...loaders.filter(
               (loader) =>
                 result?.display_categories.includes(loader.name) &&
-                loader.supported_project_types?.includes('modpack')
+                loader.supported_project_types?.includes(searchStore.projectType)
             ),
           ]"
           :project-type-display="result?.project_type"
@@ -260,6 +302,26 @@ const handleReset = async () => {
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss">
+.instance-card {
+  background-color: var(--color-bg) !important;
+  padding: 1rem !important;
+  display: flex;
+  flex-direction: row;
+  min-height: min-content !important;
+  gap: 1rem;
+
+  .instance-card__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .title {
+      color: var(--color-contrast);
+      font-weight: bolder;
+    }
+  }
+}
+
 .search-panel-container {
   display: flex;
   flex-direction: column;
@@ -320,7 +382,7 @@ const handleReset = async () => {
     flex-direction: column;
     min-height: 100vh;
     height: fit-content;
-    max-height: 100%;
+    max-height: 100vh;
     overflow-y: auto;
 
     h2 {
diff --git a/theseus_gui/src/pages/Library.vue b/theseus_gui/src/pages/Library.vue
index 7f16c00ef..8f978b6a1 100644
--- a/theseus_gui/src/pages/Library.vue
+++ b/theseus_gui/src/pages/Library.vue
@@ -1,7 +1,7 @@
 <script setup>
 import GridDisplay from '@/components/GridDisplay.vue'
 import { shallowRef } from 'vue'
-import { list } from '@/helpers/profile.js'
+import { list } from '@/helpers/profile'
 
 const profiles = await list()
 const instances = shallowRef(Object.values(profiles))
diff --git a/theseus_gui/src/pages/instance/Index.vue b/theseus_gui/src/pages/instance/Index.vue
index 0dd2fc388..e3f73e410 100644
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -77,7 +77,7 @@ Button {
   flex-direction: column;
   padding: 1rem;
   background: var(--color-raised-bg);
-  min-height: calc(100% - 2rem);
+  min-height: calc(100% - 2.25rem);
   overflow: hidden;
 }
 
diff --git a/theseus_gui/src/pages/instance/Mods.vue b/theseus_gui/src/pages/instance/Mods.vue
index bff29fcd0..4d485d462 100644
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -16,7 +16,7 @@
             class="dropdown"
           />
         </span>
-        <Button color="primary">
+        <Button color="primary" @click="searchMod()">
           <PlusIcon />
           Add Mods
         </Button>
@@ -84,6 +84,10 @@ import {
 } from 'omorphia'
 import { computed, ref, shallowRef } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
 
 const props = defineProps({
   instance: {
@@ -139,7 +143,7 @@ const search = computed(() => {
   return updateSort(filtered, sortFilter.value)
 })
 
-function updateSort(projects, sort) {
+const updateSort = (projects, sort) => {
   switch (sort) {
     case 'Version':
       return projects.slice().sort((a, b) => {
@@ -173,6 +177,10 @@ function updateSort(projects, sort) {
       })
   }
 }
+
+const searchMod = () => {
+  router.push({ path: '/browse', query: { projectType: 'mod', instance: route.params.id } })
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 30c02ff0e..03a6a10a6 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -29,9 +29,14 @@
         </Categories>
         <hr class="card-divider" />
         <div class="button-group">
-          <Button color="primary" class="instance-button" @click="install(versions[0].id)">
+          <Button
+            color="primary"
+            class="instance-button"
+            :disabled="installed === true"
+            @click="install()"
+          >
             <DownloadIcon />
-            Install
+            {{ installed ? 'Installed' : 'Install' }}
           </Button>
           <a
             :href="`https://modrinth.com/${data.project_type}/${data.slug}`"
@@ -178,6 +183,7 @@
     </div>
   </div>
   <InstallConfirmModal ref="confirmModal" />
+  <InstanceInstallModal ref="modInstallModal" />
 </template>
 
 <script setup>
@@ -210,21 +216,31 @@ import {
   OpenCollectiveIcon,
 } from '@/assets/external'
 import { get_categories, get_loaders } from '@/helpers/tags'
-import { install as pack_install } from '@/helpers/pack'
-import { list } from '@/helpers/profile'
+import { install as packInstall } from '@/helpers/pack'
+import { list, add_project_from_version as installMod, get as getProfile } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ofetch } from 'ofetch'
 import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 
 const route = useRoute()
 const router = useRouter()
 
 const confirmModal = ref(null)
+const modInstallModal = ref(null)
 const loaders = ref(await get_loaders())
 const categories = ref(await get_categories())
+const installed = ref(
+  route.query.instance
+    ? Object.values((await getProfile(route.query.instance)).projects).some(
+        (p) => p.metadata?.project?.id === route.params.id
+      )
+    : false
+)
+
 const [data, versions, members, dependencies] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`).then(shallowRef),
@@ -242,16 +258,37 @@ watch(
 dayjs.extend(relativeTime)
 
 async function install(version) {
+  let queuedVersion
+
+  if (version) {
+    queuedVersion = version
+  } else {
+    if (data.value.project_type === 'modpack' || !route.query.instance) {
+      queuedVersion = versions.value[0].id
+    } else {
+      queuedVersion = versions.value.find((v) =>
+        v.game_versions.includes(data.value.game_versions[0])
+      ).id
+    }
+  }
+
   if (data.value.project_type === 'modpack') {
     const packs = Object.values(await list())
     if (
       packs.length === 0 ||
       !packs.map((value) => value.metadata).find((pack) => pack.linked_project_id === data.value.id)
     ) {
-      let id = await pack_install(version)
+      let id = await packInstall(queuedVersion)
       await router.push({ path: `/instance/${encodeURIComponent(id)}` })
     } else {
-      confirmModal.value.show(version)
+      confirmModal.value.show(queuedVersion)
+    }
+  } else {
+    if (route.query.instance) {
+      await installMod(route.query.instance, queuedVersion)
+      installed.value = true
+    } else {
+      modInstallModal.value.show(queuedVersion)
     }
   }
 }
@@ -265,8 +302,8 @@ async function install(version) {
 }
 
 .project-sidebar {
-  width: 20rem;
-  min-width: 20rem;
+  width: 21rem;
+  min-width: 21rem;
   background: var(--color-raised-bg);
   padding: 1rem;
 }
diff --git a/theseus_gui/src/store/search.js b/theseus_gui/src/store/search.js
index 38bb6945d..05447efc3 100644
--- a/theseus_gui/src/store/search.js
+++ b/theseus_gui/src/store/search.js
@@ -9,6 +9,7 @@ export const useSearch = defineStore('searchStore', {
     pageCount: 1,
     offset: 0,
     filter: 'Relevance',
+    projectType: '',
     facets: [],
     orFacets: [],
     environments: {
@@ -21,7 +22,7 @@ export const useSearch = defineStore('searchStore', {
   }),
   actions: {
     getQueryString() {
-      let andFacets = ['project_type:modpack']
+      let andFacets = [`project_type:${this.projectType}`]
 
       // Iterate through possible andFacets
       this.facets.forEach((facet) => {

From de887efeb49dda7c6cd25da8d8a85d74414f49c9 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 19 Apr 2023 01:54:38 -0400
Subject: [PATCH 02/24] Make project type selectable

---
 theseus_gui/src/pages/Browse.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 2c6deab92..5919f66e7 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -126,6 +126,22 @@ const switchPage = async (page) => {
         @click="handleReset"
         ><ClearIcon />Clear Filters</Button
       >
+      <div>
+        <h2>Project Type</h2>
+        <DropdownSelect
+          v-model="searchStore.projectType"
+          name="Sort dropdown"
+          :options="[
+              'modpack',
+              'mod',
+              'datapack',
+              'shader',
+              'resourcepack',
+            ]"
+          class="project-type-dropdown"
+          @change="getSearchResults"
+        />
+      </div>
       <div class="categories">
         <h2>Categories</h2>
         <div
@@ -302,6 +318,10 @@ const switchPage = async (page) => {
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss">
+.project-type-dropdown {
+  width: 100% !important;
+}
+
 .instance-card {
   background-color: var(--color-bg) !important;
   padding: 1rem !important;
@@ -309,6 +329,7 @@ const switchPage = async (page) => {
   flex-direction: row;
   min-height: min-content !important;
   gap: 1rem;
+  align-items: center;
 
   .instance-card__info {
     display: flex;

From 31ac9899c0f1c01db6e581b94db25d2dac8dc77a Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 19 Apr 2023 02:38:18 -0400
Subject: [PATCH 03/24] Update Browse.vue

---
 theseus_gui/src/pages/Browse.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 5919f66e7..1bb531399 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -131,13 +131,7 @@ const switchPage = async (page) => {
         <DropdownSelect
           v-model="searchStore.projectType"
           name="Sort dropdown"
-          :options="[
-              'modpack',
-              'mod',
-              'datapack',
-              'shader',
-              'resourcepack',
-            ]"
+          :options="['modpack', 'mod', 'datapack', 'shader', 'resourcepack']"
           class="project-type-dropdown"
           @change="getSearchResults"
         />

From 8a2264e9372dd5ae647552fd60bb30951683d30f Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 21 Apr 2023 05:04:03 -0400
Subject: [PATCH 04/24] address changes

---
 theseus_gui/src-tauri/Cargo.toml              |   2 +-
 theseus_gui/src-tauri/tauri.conf.json         |   3 +
 theseus_gui/src/components/ui/Instance.vue    |  40 +++-
 .../components/ui/InstanceInstallModal.vue    | 220 +++++++++++++++++-
 theseus_gui/src/helpers/profile.js            |   4 +-
 theseus_gui/src/pages/Browse.vue              |  83 +++----
 theseus_gui/src/pages/instance/Index.vue      |   4 +-
 theseus_gui/src/pages/project/Index.vue       |  41 +++-
 theseus_gui/src/store/search.js               |  11 +-
 9 files changed, 328 insertions(+), 80 deletions(-)

diff --git a/theseus_gui/src-tauri/Cargo.toml b/theseus_gui/src-tauri/Cargo.toml
index dd2701619..6a27f4ef3 100644
--- a/theseus_gui/src-tauri/Cargo.toml
+++ b/theseus_gui/src-tauri/Cargo.toml
@@ -19,7 +19,7 @@ theseus = { path = "../../theseus", features = ["tauri"] }
 
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = ["dialog", "protocol-asset", "window-close", "window-create"] }
+tauri = { version = "1.2", features = ["dialog", "dialog-open", "protocol-asset", "window-close", "window-create"] }
 tokio = { version = "1", features = ["full"] }
 thiserror = "1.0"
 tokio-stream = { version = "0.1", features = ["fs"] }
diff --git a/theseus_gui/src-tauri/tauri.conf.json b/theseus_gui/src-tauri/tauri.conf.json
index 8e9e8ac62..4d3e7fe55 100644
--- a/theseus_gui/src-tauri/tauri.conf.json
+++ b/theseus_gui/src-tauri/tauri.conf.json
@@ -20,6 +20,9 @@
       "window": {
         "create": true,
         "close": true
+      },
+      "dialog": {
+        "open": true
       }
     },
     "bundle": {
diff --git a/theseus_gui/src/components/ui/Instance.vue b/theseus_gui/src/components/ui/Instance.vue
index ceb74e181..4bc492dff 100644
--- a/theseus_gui/src/components/ui/Instance.vue
+++ b/theseus_gui/src/components/ui/Instance.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { RouterLink } from 'vue-router'
-import { Card } from 'omorphia'
+import {Avatar, Card} from 'omorphia'
 import { PlayIcon } from '@/assets/icons'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 
@@ -11,13 +11,28 @@ const props = defineProps({
       return {}
     },
   },
+  small: {
+    type: Boolean,
+    default: false,
+  }
 })
 </script>
 
 <template>
   <div>
     <RouterLink :to="`/instance/${encodeURIComponent(props.instance.path)}`">
-      <Card class="instance-card-item">
+      <Card v-if="props.small" class="instance-small-card button-base">
+        <Avatar
+          :src="convertFileSrc(props.instance.metadata.icon)"
+          :alt="props.instance.metadata.name"
+          size="sm"
+        />
+        <div class="instance-small-card__info">
+          <span class="title">{{ props.instance.metadata.name }}</span>
+          {{ props.instance.metadata.game_version }} {{ props.instance.metadata.loader }}
+        </div>
+      </Card>
+      <Card v-else class="instance-card-item">
         <img :src="convertFileSrc(props.instance.metadata.icon)" alt="Trending mod card" />
         <div class="project-info">
           <p class="title">{{ props.instance.metadata.name }}</p>
@@ -32,6 +47,27 @@ const props = defineProps({
 </template>
 
 <style lang="scss" scoped>
+.instance-small-card {
+  background-color: var(--color-bg) !important;
+  padding: 1rem !important;
+  display: flex;
+  flex-direction: row;
+  min-height: min-content !important;
+  gap: 1rem;
+  align-items: center;
+
+  .instance-small-card__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .title {
+      color: var(--color-contrast);
+      font-weight: bolder;
+    }
+  }
+}
+
 .instance-card-item {
   display: flex;
   flex-direction: column;
diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index 8356688bf..c9e803e9f 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -1,15 +1,30 @@
 <script setup>
-import { Avatar, Modal, Button } from 'omorphia'
+import { Avatar, Modal, Button, DownloadIcon, PlusIcon, Card, UploadIcon, XIcon, DropdownSelect } from 'omorphia'
 import { computed, ref } from 'vue'
 import { add_project_from_version as installMod, list } from '@/helpers/profile'
+import { tauri } from '@tauri-apps/api'
+import { open } from '@tauri-apps/api/dialog'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
-
+import {LoginIcon} from "@/assets/icons";
+import {get_game_versions} from "@/helpers/tags";
+import {useRouter} from "vue-router";
+import {create} from "@/helpers/profile";
+const router = useRouter()
 const version = ref('')
+const project = ref('')
 const installModal = ref(null)
 const searchFilter = ref('')
+const showCreation = ref(false)
+const icon = ref(null)
+const name = ref(null)
+const display_icon = ref(null)
+const loader = ref(null)
+const gameVersion = ref(null)
+const creatingInstance = ref(false)
 
 defineExpose({
-  show: (id) => {
+  show: (projectId, id) => {
+    project.value = projectId
     version.value = id
     installModal.value.show()
     searchFilter.value = ''
@@ -19,34 +34,163 @@ defineExpose({
 const profiles = ref(await list().then(Object.values))
 
 async function install(instance) {
-  console.log(instance)
-  await installMod(instance, version.value)
-  installModal.value.hide()
+  instance.installing = true
+  await installMod(instance.path, version.value)
+  instance.installed = true
+  instance.installing = false
 }
 
 const filteredVersions = computed(() => {
-  return profiles.value.filter((profile) => {
+  const filtered = profiles.value.filter((profile) => {
     return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
   })
+
+  filtered.map((profile) => {
+    profile.installing = false
+    profile.installed = checkInstalled(profile)
+  })
+
+  return filtered
+})
+
+const checkInstalled = (profile) => {
+  console.log(Object.values(profile.projects))
+  console.log(project.value)
+  return Object.values(profile.projects).some((p) => p.metadata?.project?.id === project.value)
+}
+
+const toggleCreation = () => {
+  showCreation.value = !showCreation.value
+  name.value = null
+  icon.value = null
+  display_icon.value = null
+  gameVersion.value = null
+  loader.value = null
+}
+
+const gameVersions = ref(
+  (await get_game_versions()).filter((item) => item.version_type === 'release').map((item) => item.version)
+)
+
+const upload_icon = async () => {
+  icon.value = await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png', 'jpeg'],
+      },
+    ],
+  })
+
+  display_icon.value = tauri.convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+  icon.value = null
+  display_icon.value = null
+}
+
+const createInstance = async () => {
+  const loader_version_value = 'latest'
+  creatingInstance.value = true
+  const id = await create(
+    name.value,
+    gameVersion.value,
+    loader.value,
+    loader_version_value,
+    icon.value
+  )
+
+  await installMod(id, version.value)
+
+  await router.push({ path: `/instance/${encodeURIComponent(id)}` })
+  installModal.value.hide()
+  creatingInstance.value = false
+}
+
+const check_valid = computed(() => {
+  return (
+    name.value &&
+    gameVersion.value &&
+    loader.value
+  )
 })
 </script>
 
 <template>
-  <Modal ref="installModal" header="Install Mod">
+  <Modal ref="installModal" header="Install mod to instance">
     <div class="modal-body">
       <input v-model="searchFilter" type="text" class="search" placeholder="Search for a profile" />
       <div class="profiles">
         <div
           v-for="profile in filteredVersions"
           :key="profile.metadata.name"
-          class="option btn"
-          @click="install(profile.path)"
+          class="option"
         >
           <Avatar :src="convertFileSrc(profile.metadata.icon)" size="xs" />
           <div class="name">{{ profile.metadata.name }}</div>
+          <div class="footer">
+            <Button :disabled="profile.installed || profile.installing" @click="install(profile)">
+              <DownloadIcon v-if="!profile.installed && !profile.installing"/>
+              {{ profile.installing ? 'Installing...' :profile.installed ? 'Installed' : 'Install'}}
+            </Button>
+            <Button @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)">
+              <LoginIcon />
+              View
+            </Button>
+          </div>
         </div>
       </div>
+      <Card v-if="showCreation" class="creation-card">
+        <div class="creation-container">
+          <div class="creation-icon">
+            <Avatar
+              size="md"
+              class="icon"
+              :src="display_icon"
+            />
+            <div class="creation-icon__description">
+              <Button @click="upload_icon()">
+                <UploadIcon />
+                Upload Icon
+              </Button>
+              <Button @click="reset_icon()">
+                <XIcon />
+                Remove Icon
+              </Button>
+            </div>
+          </div>
+          <div class="creation-settings">
+            <input v-model="name" type="text" placeholder="Name" class="creation-input"/>
+            <div class="dropdown-options">
+              <DropdownSelect
+                v-model="gameVersion"
+                :options="gameVersions"
+                class="creation-dropdown"
+                placeholder="Version"
+              />
+              <DropdownSelect
+                v-model="loader"
+                :options="['fabric', 'forge', 'quilt']"
+                class="creation-dropdown"
+                placeholder="Loader"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="footer">
+          <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
+            <PlusIcon />
+            {{ creatingInstance ? 'Creating...' : 'Create'}}
+          </Button>
+        </div>
+      </Card>
       <div class="footer">
+        <Button color="primary" @click="toggleCreation()">
+          <PlusIcon />
+          Create new instance
+        </Button>
         <Button @click="installModal.hide()">Cancel</Button>
       </div>
     </div>
@@ -54,6 +198,61 @@ const filteredVersions = computed(() => {
 </template>
 
 <style scoped lang="scss">
+.creation-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: var(--color-bg);
+}
+
+.creation-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.creation-icon {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  flex-grow: 1;
+
+  .creation-icon__description {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+
+.creation-input {
+  width: 100%;
+}
+
+.creation-dropdown {
+  width: min-content !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.creation-settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.5rem;
+  align-items: center;
+  width: min-content;
+
+  .dropdown-options {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+  }
+}
+
 .modal-body {
   display: flex;
   flex-direction: column;
@@ -91,5 +290,6 @@ const filteredVersions = computed(() => {
   flex-direction: row;
   justify-content: flex-end;
   gap: 0.5rem;
+  margin-left: auto;
 }
 </style>
diff --git a/theseus_gui/src/helpers/profile.js b/theseus_gui/src/helpers/profile.js
index 9d94014ab..fe259f600 100644
--- a/theseus_gui/src/helpers/profile.js
+++ b/theseus_gui/src/helpers/profile.js
@@ -21,8 +21,8 @@ export async function create_empty() {
     - icon is a path to an image file, which will be copied into the profile directory
 */
 
-export async function create(name, game_version, modloader, loader_version, icon) {
-  return await invoke('profile_create', { name, game_version, modloader, loader_version, icon })
+export async function create(name, gameVersion, modloader, loaderVersion, icon) {
+  return await invoke('profile_create', { name, gameVersion, modloader, loaderVersion, icon })
 }
 
 // Remove a profile
diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 1bb531399..526c047e6 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -14,14 +14,14 @@ import {
   ClientIcon,
   ServerIcon,
   AnimatedLogo,
-  Avatar,
+  Chips,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { useSearch } from '@/store/state'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'
 import { get as getProfile } from '@/helpers/profile'
 import { useRoute } from 'vue-router'
-import { convertFileSrc } from '@tauri-apps/api/tauri'
+import Instance from "@/components/ui/Instance.vue";
 
 const route = useRoute()
 
@@ -60,7 +60,7 @@ if (route.query.instance) {
   instance.value = await getProfile(route.query.instance)
   console.log(instance.value)
   searchStore.activeVersions = [instance.value.metadata.game_version]
-  searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
+  if(searchStore.projectType === 'mod') searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
   showVersions.value = false
   showLoaders.value = false
 } else {
@@ -91,26 +91,21 @@ const switchPage = async (page) => {
   else searchStore.offset = (searchStore.currentPage - 1) * searchStore.limit
   await getSearchResults()
 }
+
+const setProjectType = (type) => {
+  searchStore.projectType = type
+  handleReset()
+  if(instance.value && (type === 'modpack' || type === 'mod')) {
+    searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
+  }
+  getSearchResults()
+}
 </script>
 
 <template>
   <div class="search-container">
     <aside class="filter-panel">
-      <Card
-        v-if="instance"
-        class="instance-card button-base"
-        @click="$router.push(`/instance/${encodeURIComponent(instance.path)}`)"
-      >
-        <Avatar
-          :src="convertFileSrc(instance.metadata.icon)"
-          :alt="instance.metadata.name"
-          size="sm"
-        />
-        <div class="instance-card__info">
-          <span class="title">{{ instance.metadata.name }}</span>
-          {{ instance.metadata.game_version }} {{ instance.metadata.loader }}
-        </div>
-      </Card>
+      <Instance v-if="instance" :instance="instance" small />
       <Button
         role="button"
         :disabled="
@@ -126,21 +121,11 @@ const switchPage = async (page) => {
         @click="handleReset"
         ><ClearIcon />Clear Filters</Button
       >
-      <div>
-        <h2>Project Type</h2>
-        <DropdownSelect
-          v-model="searchStore.projectType"
-          name="Sort dropdown"
-          :options="['modpack', 'mod', 'datapack', 'shader', 'resourcepack']"
-          class="project-type-dropdown"
-          @change="getSearchResults"
-        />
-      </div>
       <div class="categories">
         <h2>Categories</h2>
         <div
           v-for="category in categories.filter(
-            (cat) => cat.project_type === searchStore.projectType
+            (cat) => cat.project_type === (searchStore.projectType === 'datapack' ? 'mod' : searchStore.projectType)
           )"
           :key="category.name"
         >
@@ -154,7 +139,7 @@ const switchPage = async (page) => {
           />
         </div>
       </div>
-      <div v-if="showLoaders" class="loaders">
+      <div v-if="showLoaders && searchStore.projectType !== 'datapack'" class="loaders">
         <h2>Loaders</h2>
         <div
           v-for="loader in loaders.filter((l) =>
@@ -172,7 +157,7 @@ const switchPage = async (page) => {
           />
         </div>
       </div>
-      <div class="environment">
+      <div v-if="searchStore.projectType !== 'datapack'" class="environment">
         <h2>Environments</h2>
         <SearchFilter
           v-model="searchStore.environments.client"
@@ -227,6 +212,13 @@ const switchPage = async (page) => {
       </div>
     </aside>
     <div class="search">
+      <Card class="project-type-container">
+        <Chips
+          :model-value="searchStore.projectType"
+          :items="instance ? ['mod', 'datapack', 'shader', 'resourcepack'] : ['modpack', 'mod', 'datapack', 'shader', 'resourcepack']"
+          @update:model-value="newValue => setProjectType(newValue)"
+        />
+      </Card>
       <Card class="search-panel-container">
         <div class="search-panel">
           <div class="iconified-input">
@@ -316,25 +308,12 @@ const switchPage = async (page) => {
   width: 100% !important;
 }
 
-.instance-card {
-  background-color: var(--color-bg) !important;
-  padding: 1rem !important;
+.project-type-container {
   display: flex;
-  flex-direction: row;
-  min-height: min-content !important;
-  gap: 1rem;
-  align-items: center;
-
-  .instance-card__info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .title {
-      color: var(--color-contrast);
-      font-weight: bolder;
-    }
-  }
+  flex-direction: column;
+  width: 100%;
+  margin-top: 1rem;
+  padding: 0.8rem !important;
 }
 
 .search-panel-container {
@@ -390,7 +369,7 @@ const switchPage = async (page) => {
 
   .filter-panel {
     position: fixed;
-    width: 16rem;
+    width: 19rem;
     background: var(--color-raised-bg);
     padding: 1rem 1rem 3rem 1rem;
     display: flex;
@@ -425,8 +404,8 @@ const switchPage = async (page) => {
   }
 
   .search {
-    margin: 0 1rem 0 17rem;
-    width: 100%;
+    margin: 1rem 1rem 0 20rem;
+    width: calc(100% - 21rem);
 
     .loading {
       margin: 2rem;
diff --git a/theseus_gui/src/pages/instance/Index.vue b/theseus_gui/src/pages/instance/Index.vue
index e3f73e410..332af0f99 100644
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -58,7 +58,7 @@ const instance = shallowRef(await get(route.params.id))
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  width: 15rem;
+  width: 17rem;
 }
 
 Button {
@@ -109,7 +109,7 @@ Button {
 }
 
 .content {
-  margin-left: 18rem;
+  margin-left: 20rem;
 }
 
 .instance-info {
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 03a6a10a6..789615e4c 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="root-container">
     <div v-if="data" class="project-sidebar">
+      <Instance v-if="instance" :instance="instance" small />
       <Card class="sidebar-card">
         <Avatar size="lg" :src="data.icon_url" />
         <div class="instance-info">
@@ -32,11 +33,11 @@
           <Button
             color="primary"
             class="instance-button"
-            :disabled="installed === true"
+            :disabled="installed === true || installing === true"
             @click="install()"
           >
-            <DownloadIcon />
-            {{ installed ? 'Installed' : 'Install' }}
+            <DownloadIcon v-if="!installed && !installing" />
+            {{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
           </Button>
           <a
             :href="`https://modrinth.com/${data.project_type}/${data.slug}`"
@@ -45,7 +46,7 @@
             class="btn"
           >
             <ExternalIcon />
-            Website
+            Site
           </a>
         </div>
         <hr class="card-divider" />
@@ -225,6 +226,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
+import Instance from '@/components/ui/Instance.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -233,9 +235,16 @@ const confirmModal = ref(null)
 const modInstallModal = ref(null)
 const loaders = ref(await get_loaders())
 const categories = ref(await get_categories())
+const instance = ref(null)
+const installing = ref(false)
+
+if (route.query.instance) {
+  instance.value = await getProfile(route.query.instance)
+}
+
 const installed = ref(
-  route.query.instance
-    ? Object.values((await getProfile(route.query.instance)).projects).some(
+  instance.value
+    ? Object.values(instance.value.projects).some(
         (p) => p.metadata?.project?.id === route.params.id
       )
     : false
@@ -258,6 +267,7 @@ watch(
 dayjs.extend(relativeTime)
 
 async function install(version) {
+  installing.value = true
   let queuedVersion
 
   if (version) {
@@ -288,9 +298,11 @@ async function install(version) {
       await installMod(route.query.instance, queuedVersion)
       installed.value = true
     } else {
-      modInstallModal.value.show(queuedVersion)
+      modInstallModal.value.show(data.value.id, queuedVersion)
     }
   }
+
+  installing.value = false
 }
 </script>
 
@@ -302,8 +314,8 @@ async function install(version) {
 }
 
 .project-sidebar {
-  width: 21rem;
-  min-width: 21rem;
+  width: 19rem;
+  min-width: 19rem;
   background: var(--color-raised-bg);
   padding: 1rem;
 }
@@ -429,4 +441,15 @@ async function install(version) {
     }
   }
 }
+
+.install-loading {
+  scale: 0.2;
+  height: 1rem;
+  width: 1rem;
+  margin-right: -1rem;
+
+  :deep(svg) {
+    color: var(--color-contrast);
+  }
+}
 </style>
diff --git a/theseus_gui/src/store/search.js b/theseus_gui/src/store/search.js
index 05447efc3..3414ee577 100644
--- a/theseus_gui/src/store/search.js
+++ b/theseus_gui/src/store/search.js
@@ -22,7 +22,7 @@ export const useSearch = defineStore('searchStore', {
   }),
   actions: {
     getQueryString() {
-      let andFacets = [`project_type:${this.projectType}`]
+      let andFacets = [`project_type:${this.projectType === 'datapack' ? 'mod' : this.projectType}`]
 
       // Iterate through possible andFacets
       this.facets.forEach((facet) => {
@@ -33,7 +33,14 @@ export const useSearch = defineStore('searchStore', {
 
       // Create andFacet string
       let formattedAndFacets = ''
-      andFacets.forEach((f) => (formattedAndFacets += `["${f}"],`))
+      if (this.projectType === 'datapack') {
+        [
+          ...andFacets,
+          `categories:${encodeURIComponent('datapack')}`,
+        ].forEach((f) => (formattedAndFacets += `["${f}"],`))
+      } else {
+        andFacets.forEach((f) => (formattedAndFacets += `["${f}"],`))
+      }
       formattedAndFacets = formattedAndFacets.slice(0, formattedAndFacets.length - 1)
       formattedAndFacets += ''
 

From 8d2bfa3cc4c970a7b6b8253e13a68a927912c823 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 21 Apr 2023 19:10:54 -0400
Subject: [PATCH 05/24] Quick create

---
 .../components/ui/InstanceInstallModal.vue    | 78 +++++++------------
 theseus_gui/src/pages/project/Index.vue       |  2 +-
 2 files changed, 29 insertions(+), 51 deletions(-)

diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index c9e803e9f..c925fa5cf 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -1,12 +1,11 @@
 <script setup>
-import { Avatar, Modal, Button, DownloadIcon, PlusIcon, Card, UploadIcon, XIcon, DropdownSelect } from 'omorphia'
+import { Avatar, Modal, Button, DownloadIcon, PlusIcon, Card, UploadIcon, XIcon, RightArrowIcon } from 'omorphia'
 import { computed, ref } from 'vue'
 import { add_project_from_version as installMod, list } from '@/helpers/profile'
 import { tauri } from '@tauri-apps/api'
 import { open } from '@tauri-apps/api/dialog'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import {LoginIcon} from "@/assets/icons";
-import {get_game_versions} from "@/helpers/tags";
 import {useRouter} from "vue-router";
 import {create} from "@/helpers/profile";
 const router = useRouter()
@@ -23,9 +22,9 @@ const gameVersion = ref(null)
 const creatingInstance = ref(false)
 
 defineExpose({
-  show: (projectId, id) => {
+  show: (projectId, selectedVersion) => {
     project.value = projectId
-    version.value = id
+    version.value = selectedVersion
     installModal.value.show()
     searchFilter.value = ''
   },
@@ -68,10 +67,6 @@ const toggleCreation = () => {
   loader.value = null
 }
 
-const gameVersions = ref(
-  (await get_game_versions()).filter((item) => item.version_type === 'release').map((item) => item.version)
-)
-
 const upload_icon = async () => {
   icon.value = await open({
     multiple: false,
@@ -92,17 +87,16 @@ const reset_icon = () => {
 }
 
 const createInstance = async () => {
-  const loader_version_value = 'latest'
   creatingInstance.value = true
   const id = await create(
     name.value,
-    gameVersion.value,
-    loader.value,
-    loader_version_value,
+    version.value.game_versions[0],
+    version.value.loaders[0] !== 'forge' || version.value.loaders[0] !== 'fabric' || version.value.loaders[0] !== 'quilt' ? version.value.loaders[0] : 'vanilla',
+    'latest',
     icon.value
   )
 
-  await installMod(id, version.value)
+  await installMod(id, version.value.id)
 
   await router.push({ path: `/instance/${encodeURIComponent(id)}` })
   installModal.value.hide()
@@ -111,9 +105,7 @@ const createInstance = async () => {
 
 const check_valid = computed(() => {
   return (
-    name.value &&
-    gameVersion.value &&
-    loader.value
+    name.value
   )
 })
 </script>
@@ -153,43 +145,31 @@ const check_valid = computed(() => {
             <div class="creation-icon__description">
               <Button @click="upload_icon()">
                 <UploadIcon />
-                Upload Icon
+                <span class="no-wrap">
+                  Upload Icon
+                </span>
               </Button>
               <Button @click="reset_icon()">
                 <XIcon />
-                Remove Icon
+                <span class="no-wrap">
+                  Remove Icon
+                </span>
               </Button>
             </div>
           </div>
           <div class="creation-settings">
             <input v-model="name" type="text" placeholder="Name" class="creation-input"/>
-            <div class="dropdown-options">
-              <DropdownSelect
-                v-model="gameVersion"
-                :options="gameVersions"
-                class="creation-dropdown"
-                placeholder="Version"
-              />
-              <DropdownSelect
-                v-model="loader"
-                :options="['fabric', 'forge', 'quilt']"
-                class="creation-dropdown"
-                placeholder="Loader"
-              />
-            </div>
+            <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
+              <RightArrowIcon />
+              {{ creatingInstance ? 'Creating...' : 'Create'}}
+            </Button>
           </div>
         </div>
-        <div class="footer">
-          <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
-            <PlusIcon />
-            {{ creatingInstance ? 'Creating...' : 'Create'}}
-          </Button>
-        </div>
       </Card>
       <div class="footer">
-        <Button color="primary" @click="toggleCreation()">
+        <Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
           <PlusIcon />
-          Create new instance
+          {{ showCreation ? 'Hide New Instance' : 'Create new instance'}}
         </Button>
         <Button @click="installModal.hide()">Cancel</Button>
       </div>
@@ -231,6 +211,10 @@ const check_valid = computed(() => {
   width: 100%;
 }
 
+.no-wrap {
+  white-space: nowrap;
+}
+
 .creation-dropdown {
   width: min-content !important;
   display: flex;
@@ -239,18 +223,12 @@ const check_valid = computed(() => {
 }
 
 .creation-settings {
+  width: 100%;
+  margin-left: 0.5rem;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   gap: 0.5rem;
-  align-items: center;
-  width: min-content;
-
-  .dropdown-options {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
-  }
+  justify-content: center;
 }
 
 .modal-body {
@@ -261,7 +239,7 @@ const check_valid = computed(() => {
 }
 
 .profiles {
-  max-height: 18rem;
+  max-height: 14rem;
   overflow-y: auto;
 }
 
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 789615e4c..a4fd0cc7a 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -298,7 +298,7 @@ async function install(version) {
       await installMod(route.query.instance, queuedVersion)
       installed.value = true
     } else {
-      modInstallModal.value.show(data.value.id, queuedVersion)
+      modInstallModal.value.show(data.value.id, versions.value.find((v) => v.id === queuedVersion))
     }
   }
 

From accf5cac13e4be1afcff4abb11f08b2eba050877 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 21 Apr 2023 19:11:20 -0400
Subject: [PATCH 06/24] Run linter

---
 theseus_gui/src/components/ui/Instance.vue    |  4 +-
 .../components/ui/InstanceInstallModal.vue    | 60 ++++++++++---------
 theseus_gui/src/pages/Browse.vue              | 19 ++++--
 theseus_gui/src/pages/project/Index.vue       |  5 +-
 theseus_gui/src/store/search.js               |  7 +--
 5 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/theseus_gui/src/components/ui/Instance.vue b/theseus_gui/src/components/ui/Instance.vue
index 4bc492dff..731af3d19 100644
--- a/theseus_gui/src/components/ui/Instance.vue
+++ b/theseus_gui/src/components/ui/Instance.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { RouterLink } from 'vue-router'
-import {Avatar, Card} from 'omorphia'
+import { Avatar, Card } from 'omorphia'
 import { PlayIcon } from '@/assets/icons'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 
@@ -14,7 +14,7 @@ const props = defineProps({
   small: {
     type: Boolean,
     default: false,
-  }
+  },
 })
 </script>
 
diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index c925fa5cf..ac084d27f 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -1,13 +1,23 @@
 <script setup>
-import { Avatar, Modal, Button, DownloadIcon, PlusIcon, Card, UploadIcon, XIcon, RightArrowIcon } from 'omorphia'
+import {
+  Avatar,
+  Modal,
+  Button,
+  DownloadIcon,
+  PlusIcon,
+  Card,
+  UploadIcon,
+  XIcon,
+  RightArrowIcon,
+} from 'omorphia'
 import { computed, ref } from 'vue'
 import { add_project_from_version as installMod, list } from '@/helpers/profile'
 import { tauri } from '@tauri-apps/api'
 import { open } from '@tauri-apps/api/dialog'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
-import {LoginIcon} from "@/assets/icons";
-import {useRouter} from "vue-router";
-import {create} from "@/helpers/profile";
+import { LoginIcon } from '@/assets/icons'
+import { useRouter } from 'vue-router'
+import { create } from '@/helpers/profile'
 const router = useRouter()
 const version = ref('')
 const project = ref('')
@@ -91,7 +101,11 @@ const createInstance = async () => {
   const id = await create(
     name.value,
     version.value.game_versions[0],
-    version.value.loaders[0] !== 'forge' || version.value.loaders[0] !== 'fabric' || version.value.loaders[0] !== 'quilt' ? version.value.loaders[0] : 'vanilla',
+    version.value.loaders[0] !== 'forge' ||
+      version.value.loaders[0] !== 'fabric' ||
+      version.value.loaders[0] !== 'quilt'
+      ? version.value.loaders[0]
+      : 'vanilla',
     'latest',
     icon.value
   )
@@ -104,9 +118,7 @@ const createInstance = async () => {
 }
 
 const check_valid = computed(() => {
-  return (
-    name.value
-  )
+  return name.value
 })
 </script>
 
@@ -115,17 +127,15 @@ const check_valid = computed(() => {
     <div class="modal-body">
       <input v-model="searchFilter" type="text" class="search" placeholder="Search for a profile" />
       <div class="profiles">
-        <div
-          v-for="profile in filteredVersions"
-          :key="profile.metadata.name"
-          class="option"
-        >
+        <div v-for="profile in filteredVersions" :key="profile.metadata.name" class="option">
           <Avatar :src="convertFileSrc(profile.metadata.icon)" size="xs" />
           <div class="name">{{ profile.metadata.name }}</div>
           <div class="footer">
             <Button :disabled="profile.installed || profile.installing" @click="install(profile)">
-              <DownloadIcon v-if="!profile.installed && !profile.installing"/>
-              {{ profile.installing ? 'Installing...' :profile.installed ? 'Installed' : 'Install'}}
+              <DownloadIcon v-if="!profile.installed && !profile.installing" />
+              {{
+                profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install'
+              }}
             </Button>
             <Button @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)">
               <LoginIcon />
@@ -137,31 +147,23 @@ const check_valid = computed(() => {
       <Card v-if="showCreation" class="creation-card">
         <div class="creation-container">
           <div class="creation-icon">
-            <Avatar
-              size="md"
-              class="icon"
-              :src="display_icon"
-            />
+            <Avatar size="md" class="icon" :src="display_icon" />
             <div class="creation-icon__description">
               <Button @click="upload_icon()">
                 <UploadIcon />
-                <span class="no-wrap">
-                  Upload Icon
-                </span>
+                <span class="no-wrap"> Upload Icon </span>
               </Button>
               <Button @click="reset_icon()">
                 <XIcon />
-                <span class="no-wrap">
-                  Remove Icon
-                </span>
+                <span class="no-wrap"> Remove Icon </span>
               </Button>
             </div>
           </div>
           <div class="creation-settings">
-            <input v-model="name" type="text" placeholder="Name" class="creation-input"/>
+            <input v-model="name" type="text" placeholder="Name" class="creation-input" />
             <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
               <RightArrowIcon />
-              {{ creatingInstance ? 'Creating...' : 'Create'}}
+              {{ creatingInstance ? 'Creating...' : 'Create' }}
             </Button>
           </div>
         </div>
@@ -169,7 +171,7 @@ const check_valid = computed(() => {
       <div class="footer">
         <Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
           <PlusIcon />
-          {{ showCreation ? 'Hide New Instance' : 'Create new instance'}}
+          {{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
         </Button>
         <Button @click="installModal.hide()">Cancel</Button>
       </div>
diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 526c047e6..6162a4874 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -21,7 +21,7 @@ import { useSearch } from '@/store/state'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'
 import { get as getProfile } from '@/helpers/profile'
 import { useRoute } from 'vue-router'
-import Instance from "@/components/ui/Instance.vue";
+import Instance from '@/components/ui/Instance.vue'
 
 const route = useRoute()
 
@@ -60,7 +60,8 @@ if (route.query.instance) {
   instance.value = await getProfile(route.query.instance)
   console.log(instance.value)
   searchStore.activeVersions = [instance.value.metadata.game_version]
-  if(searchStore.projectType === 'mod') searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
+  if (searchStore.projectType === 'mod')
+    searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
   showVersions.value = false
   showLoaders.value = false
 } else {
@@ -95,7 +96,7 @@ const switchPage = async (page) => {
 const setProjectType = (type) => {
   searchStore.projectType = type
   handleReset()
-  if(instance.value && (type === 'modpack' || type === 'mod')) {
+  if (instance.value && (type === 'modpack' || type === 'mod')) {
     searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
   }
   getSearchResults()
@@ -125,7 +126,9 @@ const setProjectType = (type) => {
         <h2>Categories</h2>
         <div
           v-for="category in categories.filter(
-            (cat) => cat.project_type === (searchStore.projectType === 'datapack' ? 'mod' : searchStore.projectType)
+            (cat) =>
+              cat.project_type ===
+              (searchStore.projectType === 'datapack' ? 'mod' : searchStore.projectType)
           )"
           :key="category.name"
         >
@@ -215,8 +218,12 @@ const setProjectType = (type) => {
       <Card class="project-type-container">
         <Chips
           :model-value="searchStore.projectType"
-          :items="instance ? ['mod', 'datapack', 'shader', 'resourcepack'] : ['modpack', 'mod', 'datapack', 'shader', 'resourcepack']"
-          @update:model-value="newValue => setProjectType(newValue)"
+          :items="
+            instance
+              ? ['mod', 'datapack', 'shader', 'resourcepack']
+              : ['modpack', 'mod', 'datapack', 'shader', 'resourcepack']
+          "
+          @update:model-value="(newValue) => setProjectType(newValue)"
         />
       </Card>
       <Card class="search-panel-container">
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index a4fd0cc7a..af7dae728 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -298,7 +298,10 @@ async function install(version) {
       await installMod(route.query.instance, queuedVersion)
       installed.value = true
     } else {
-      modInstallModal.value.show(data.value.id, versions.value.find((v) => v.id === queuedVersion))
+      modInstallModal.value.show(
+        data.value.id,
+        versions.value.find((v) => v.id === queuedVersion)
+      )
     }
   }
 
diff --git a/theseus_gui/src/store/search.js b/theseus_gui/src/store/search.js
index 3414ee577..30a5d2ce9 100644
--- a/theseus_gui/src/store/search.js
+++ b/theseus_gui/src/store/search.js
@@ -34,10 +34,9 @@ export const useSearch = defineStore('searchStore', {
       // Create andFacet string
       let formattedAndFacets = ''
       if (this.projectType === 'datapack') {
-        [
-          ...andFacets,
-          `categories:${encodeURIComponent('datapack')}`,
-        ].forEach((f) => (formattedAndFacets += `["${f}"],`))
+        ;[...andFacets, `categories:${encodeURIComponent('datapack')}`].forEach(
+          (f) => (formattedAndFacets += `["${f}"],`)
+        )
       } else {
         andFacets.forEach((f) => (formattedAndFacets += `["${f}"],`))
       }

From 34189c296336255d783c7a2572186ecdf40d6c13 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Fri, 21 Apr 2023 18:44:33 -0700
Subject: [PATCH 07/24] fix merge

---
 theseus_gui/src-tauri/tauri.conf.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/theseus_gui/src-tauri/tauri.conf.json b/theseus_gui/src-tauri/tauri.conf.json
index 582849c76..68ecc7703 100644
--- a/theseus_gui/src-tauri/tauri.conf.json
+++ b/theseus_gui/src-tauri/tauri.conf.json
@@ -26,9 +26,6 @@
       "window": {
         "create": true,
         "close": true
-      },
-      "dialog": {
-        "open": true
       }
     },
     "bundle": {

From 590c58662803604d14712c54897c87b53027e6c2 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 21 Apr 2023 22:27:46 -0400
Subject: [PATCH 08/24] Addressed changes

---
 theseus_gui/src/components/ui/Instance.vue            |  6 +++++-
 .../src/components/ui/InstanceInstallModal.vue        |  4 +++-
 theseus_gui/src/pages/project/Index.vue               | 11 +++++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/theseus_gui/src/components/ui/Instance.vue b/theseus_gui/src/components/ui/Instance.vue
index 731af3d19..743903b8a 100644
--- a/theseus_gui/src/components/ui/Instance.vue
+++ b/theseus_gui/src/components/ui/Instance.vue
@@ -29,7 +29,11 @@ const props = defineProps({
         />
         <div class="instance-small-card__info">
           <span class="title">{{ props.instance.metadata.name }}</span>
-          {{ props.instance.metadata.game_version }} {{ props.instance.metadata.loader }}
+          {{
+            props.instance.metadata.loader.charAt(0).toUpperCase() +
+            props.instance.metadata.loader.slice(1)
+          }}
+          {{ props.instance.metadata.game_version }}
         </div>
       </Card>
       <Card v-else class="instance-card-item">
diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index ac084d27f..5ffb0fd33 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -9,6 +9,7 @@ import {
   UploadIcon,
   XIcon,
   RightArrowIcon,
+  CheckCircleIcon,
 } from 'omorphia'
 import { computed, ref } from 'vue'
 import { add_project_from_version as installMod, list } from '@/helpers/profile'
@@ -44,7 +45,7 @@ const profiles = ref(await list().then(Object.values))
 
 async function install(instance) {
   instance.installing = true
-  await installMod(instance.path, version.value)
+  await installMod(instance.path, version.value.id)
   instance.installed = true
   instance.installing = false
 }
@@ -133,6 +134,7 @@ const check_valid = computed(() => {
           <div class="footer">
             <Button :disabled="profile.installed || profile.installing" @click="install(profile)">
               <DownloadIcon v-if="!profile.installed && !profile.installing" />
+              <CheckCircleIcon v-else-if="profile.installed" />
               {{
                 profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install'
               }}
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index af7dae728..473ee9f6d 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -37,6 +37,7 @@
             @click="install()"
           >
             <DownloadIcon v-if="!installed && !installing" />
+            <CheckCircleIcon v-else-if="installed" />
             {{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
           </Button>
           <a
@@ -207,6 +208,7 @@ import {
   CodeIcon,
   formatNumber,
   ExternalIcon,
+  CheckCircleIcon,
 } from 'omorphia'
 import {
   BuyMeACoffeeIcon,
@@ -317,8 +319,12 @@ async function install(version) {
 }
 
 .project-sidebar {
-  width: 19rem;
-  min-width: 19rem;
+  position: fixed;
+  width: 20rem;
+  min-height: 100vh;
+  height: fit-content;
+  max-height: 100vh;
+  overflow-y: auto;
   background: var(--color-raised-bg);
   padding: 1rem;
 }
@@ -335,6 +341,7 @@ async function install(version) {
   flex-direction: column;
   width: 100%;
   padding: 1rem;
+  margin-left: 20rem;
 }
 
 .button-group {

From cd7beb73c93c9908380768e59c25a7f172df32c8 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Sat, 22 Apr 2023 00:11:32 -0400
Subject: [PATCH 09/24] Installation improvements

---
 .../components/ui/InstanceInstallModal.vue    | 27 +++++++++-------
 theseus_gui/src/pages/project/Index.vue       | 31 ++++++++++++++++---
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index 5ffb0fd33..59bca3c57 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -20,7 +20,7 @@ import { LoginIcon } from '@/assets/icons'
 import { useRouter } from 'vue-router'
 import { create } from '@/helpers/profile'
 const router = useRouter()
-const version = ref('')
+const versions = ref([])
 const project = ref('')
 const installModal = ref(null)
 const searchFilter = ref('')
@@ -35,7 +35,7 @@ const creatingInstance = ref(false)
 defineExpose({
   show: (projectId, selectedVersion) => {
     project.value = projectId
-    version.value = selectedVersion
+    versions.value = selectedVersion
     installModal.value.show()
     searchFilter.value = ''
   },
@@ -45,7 +45,11 @@ const profiles = ref(await list().then(Object.values))
 
 async function install(instance) {
   instance.installing = true
-  await installMod(instance.path, version.value.id)
+  const version = versions.value.find((v) => {
+    return v.game_versions.includes(instance.metadata.game_version)
+    && (v.loaders.includes(instance.metadata.loader) || v.loaders.includes('minecraft'))
+  })
+  await installMod(instance.path, version.id)
   instance.installed = true
   instance.installing = false
 }
@@ -53,6 +57,9 @@ async function install(instance) {
 const filteredVersions = computed(() => {
   const filtered = profiles.value.filter((profile) => {
     return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+  }).filter((profile) => {
+    return versions.value.flatMap(v => v.game_versions).includes(profile.metadata.game_version)
+    && versions.value.flatMap(v => v.loaders).some(value => value === profile.metadata.loader || value === 'minecraft')
   })
 
   filtered.map((profile) => {
@@ -64,8 +71,6 @@ const filteredVersions = computed(() => {
 })
 
 const checkInstalled = (profile) => {
-  console.log(Object.values(profile.projects))
-  console.log(project.value)
   return Object.values(profile.projects).some((p) => p.metadata?.project?.id === project.value)
 }
 
@@ -101,17 +106,17 @@ const createInstance = async () => {
   creatingInstance.value = true
   const id = await create(
     name.value,
-    version.value.game_versions[0],
-    version.value.loaders[0] !== 'forge' ||
-      version.value.loaders[0] !== 'fabric' ||
-      version.value.loaders[0] !== 'quilt'
-      ? version.value.loaders[0]
+    versions.value[0].game_versions[0],
+    versions.value[0].loaders[0] !== 'forge' ||
+    versions.value[0].loaders[0] !== 'fabric' ||
+    versions.value[0].loaders[0] !== 'quilt'
+      ? versions.value[0].loaders[0]
       : 'vanilla',
     'latest',
     icon.value
   )
 
-  await installMod(id, version.value.id)
+  await installMod(id, versions.value[0].id)
 
   await router.push({ path: `/instance/${encodeURIComponent(id)}` })
   installModal.value.hide()
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 473ee9f6d..3382831d7 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -297,13 +297,34 @@ async function install(version) {
     }
   } else {
     if (route.query.instance) {
-      await installMod(route.query.instance, queuedVersion)
+      if (!version) {
+        const gameVersion = instance.value.metadata.game_version;
+        const loader = instance.value.metadata.loader;
+        console.log(gameVersion, loader)
+        console.log(instance.value)
+        console.log(data.value.project_type)
+        const selectedVersion = versions.value.find((v) =>
+          v.game_versions.includes(gameVersion)
+          && data.value.project_type === 'mod' ? v.loaders.includes(loader) : true
+        )
+        console.log(selectedVersion)
+        await installMod(route.query.instance, selectedVersion.id)
+      } else {
+        await installMod(route.query.instance, queuedVersion)
+      }
       installed.value = true
     } else {
-      modInstallModal.value.show(
-        data.value.id,
-        versions.value.find((v) => v.id === queuedVersion)
-      )
+      if (version) {
+        modInstallModal.value.show(
+          data.value.id,
+          [ versions.value.find((v) => v.id === queuedVersion) ]
+        )
+      } else {
+        modInstallModal.value.show(
+          data.value.id,
+          versions.value
+        )
+      }
     }
   }
 

From 4582df817f91944178e74c671a461565fb1c514d Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Sat, 22 Apr 2023 00:11:57 -0400
Subject: [PATCH 10/24] Run lint

---
 .../components/ui/InstanceInstallModal.vue    | 28 ++++++++++++-------
 theseus_gui/src/pages/project/Index.vue       | 21 ++++++--------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index 59bca3c57..ff4da7929 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -46,8 +46,10 @@ const profiles = ref(await list().then(Object.values))
 async function install(instance) {
   instance.installing = true
   const version = versions.value.find((v) => {
-    return v.game_versions.includes(instance.metadata.game_version)
-    && (v.loaders.includes(instance.metadata.loader) || v.loaders.includes('minecraft'))
+    return (
+      v.game_versions.includes(instance.metadata.game_version) &&
+      (v.loaders.includes(instance.metadata.loader) || v.loaders.includes('minecraft'))
+    )
   })
   await installMod(instance.path, version.id)
   instance.installed = true
@@ -55,12 +57,18 @@ async function install(instance) {
 }
 
 const filteredVersions = computed(() => {
-  const filtered = profiles.value.filter((profile) => {
-    return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-  }).filter((profile) => {
-    return versions.value.flatMap(v => v.game_versions).includes(profile.metadata.game_version)
-    && versions.value.flatMap(v => v.loaders).some(value => value === profile.metadata.loader || value === 'minecraft')
-  })
+  const filtered = profiles.value
+    .filter((profile) => {
+      return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+    })
+    .filter((profile) => {
+      return (
+        versions.value.flatMap((v) => v.game_versions).includes(profile.metadata.game_version) &&
+        versions.value
+          .flatMap((v) => v.loaders)
+          .some((value) => value === profile.metadata.loader || value === 'minecraft')
+      )
+    })
 
   filtered.map((profile) => {
     profile.installing = false
@@ -108,8 +116,8 @@ const createInstance = async () => {
     name.value,
     versions.value[0].game_versions[0],
     versions.value[0].loaders[0] !== 'forge' ||
-    versions.value[0].loaders[0] !== 'fabric' ||
-    versions.value[0].loaders[0] !== 'quilt'
+      versions.value[0].loaders[0] !== 'fabric' ||
+      versions.value[0].loaders[0] !== 'quilt'
       ? versions.value[0].loaders[0]
       : 'vanilla',
     'latest',
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 3382831d7..4fa08d5b4 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -298,14 +298,15 @@ async function install(version) {
   } else {
     if (route.query.instance) {
       if (!version) {
-        const gameVersion = instance.value.metadata.game_version;
-        const loader = instance.value.metadata.loader;
+        const gameVersion = instance.value.metadata.game_version
+        const loader = instance.value.metadata.loader
         console.log(gameVersion, loader)
         console.log(instance.value)
         console.log(data.value.project_type)
         const selectedVersion = versions.value.find((v) =>
-          v.game_versions.includes(gameVersion)
-          && data.value.project_type === 'mod' ? v.loaders.includes(loader) : true
+          v.game_versions.includes(gameVersion) && data.value.project_type === 'mod'
+            ? v.loaders.includes(loader)
+            : true
         )
         console.log(selectedVersion)
         await installMod(route.query.instance, selectedVersion.id)
@@ -315,15 +316,11 @@ async function install(version) {
       installed.value = true
     } else {
       if (version) {
-        modInstallModal.value.show(
-          data.value.id,
-          [ versions.value.find((v) => v.id === queuedVersion) ]
-        )
+        modInstallModal.value.show(data.value.id, [
+          versions.value.find((v) => v.id === queuedVersion),
+        ])
       } else {
-        modInstallModal.value.show(
-          data.value.id,
-          versions.value
-        )
+        modInstallModal.value.show(data.value.id, versions.value)
       }
     }
   }

From 001df2ce3987d0cffd0274b9e2a6e5b5a74fcf5f Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Sat, 22 Apr 2023 01:57:19 -0400
Subject: [PATCH 11/24] resourcepacks

---
 theseus_gui/src/pages/Browse.vue        | 2 +-
 theseus_gui/src/pages/project/Index.vue | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 6162a4874..acca04814 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -411,7 +411,7 @@ const setProjectType = (type) => {
   }
 
   .search {
-    margin: 1rem 1rem 0 20rem;
+    margin: 0 1rem 0 20rem;
     width: calc(100% - 21rem);
 
     .loading {
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 4fa08d5b4..2f8d2f7ec 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -304,9 +304,7 @@ async function install(version) {
         console.log(instance.value)
         console.log(data.value.project_type)
         const selectedVersion = versions.value.find((v) =>
-          v.game_versions.includes(gameVersion) && data.value.project_type === 'mod'
-            ? v.loaders.includes(loader)
-            : true
+          v.game_versions.includes(gameVersion) && (v.loaders.includes(loader) || v.loaders.includes('minecraft'))
         )
         console.log(selectedVersion)
         await installMod(route.query.instance, selectedVersion.id)

From b6a36a43aafd965387493a63bb12bb9d98211a5b Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Sat, 22 Apr 2023 23:41:56 -0400
Subject: [PATCH 12/24] automatic installation of dependencies

---
 theseus_gui/package.json                      |  2 +-
 .../components/ui/InstanceInstallModal.vue    | 25 +++++++--
 theseus_gui/src/helpers/utils.js              |  4 ++
 theseus_gui/src/pages/project/Index.vue       | 56 ++++++++++++-------
 theseus_gui/yarn.lock                         |  8 +--
 5 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/theseus_gui/package.json b/theseus_gui/package.json
index 3c0e1a414..ec752c1db 100644
--- a/theseus_gui/package.json
+++ b/theseus_gui/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
     "ofetch": "^1.0.1",
-    "omorphia": "^0.4.9",
+    "omorphia": "^0.4.10",
     "pinia": "^2.0.33",
     "vite-svg-loader": "^4.0.0",
     "vue": "^3.2.45",
diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index ff4da7929..957ca0bc6 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -19,6 +19,8 @@ import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { LoginIcon } from '@/assets/icons'
 import { useRouter } from 'vue-router'
 import { create } from '@/helpers/profile'
+import { ofetch } from 'ofetch'
+import { checkInstalled } from '@/helpers/utils'
 const router = useRouter()
 const versions = ref([])
 const project = ref('')
@@ -52,6 +54,23 @@ async function install(instance) {
     )
   })
   await installMod(instance.path, version.id)
+  for (const dep of version.dependencies) {
+    if (dep.version_id) {
+      if (checkInstalled(instance, dep.project_id)) continue
+      await installMod(instance.path, dep.version_id)
+    } else {
+      if (checkInstalled(instance, dep.project_id)) continue
+      const depVersions = await ofetch(
+        `https://api.modrinth.com/v2/project/${dep.project_id}/version`
+      )
+      const latest = depVersions.find(
+        (v) =>
+          v.game_versions.includes(instance.metadata.game_version) &&
+          v.loaders.includes(instance.metadata.loader)
+      )
+      await installMod(instance.path, latest.id)
+    }
+  }
   instance.installed = true
   instance.installing = false
 }
@@ -72,16 +91,12 @@ const filteredVersions = computed(() => {
 
   filtered.map((profile) => {
     profile.installing = false
-    profile.installed = checkInstalled(profile)
+    profile.installed = checkInstalled(profile, project.value)
   })
 
   return filtered
 })
 
-const checkInstalled = (profile) => {
-  return Object.values(profile.projects).some((p) => p.metadata?.project?.id === project.value)
-}
-
 const toggleCreation = () => {
   showCreation.value = !showCreation.value
   name.value = null
diff --git a/theseus_gui/src/helpers/utils.js b/theseus_gui/src/helpers/utils.js
index 83238da91..300dbdb0f 100644
--- a/theseus_gui/src/helpers/utils.js
+++ b/theseus_gui/src/helpers/utils.js
@@ -10,3 +10,7 @@ export const releaseColor = (releaseType) => {
       return ''
   }
 }
+
+export const checkInstalled = (profile, checkProject) => {
+  return Object.values(profile.projects).some((p) => p.metadata?.project?.id === checkProject)
+}
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 2f8d2f7ec..2fd9dbe64 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -226,6 +226,7 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import { ofetch } from 'ofetch'
 import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
+import { checkInstalled } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 import Instance from '@/components/ui/Instance.vue'
@@ -244,13 +245,7 @@ if (route.query.instance) {
   instance.value = await getProfile(route.query.instance)
 }
 
-const installed = ref(
-  instance.value
-    ? Object.values(instance.value.projects).some(
-        (p) => p.metadata?.project?.id === route.params.id
-      )
-    : false
-)
+const installed = ref(instance.value ? checkInstalled(instance.value, route.params.id) : false)
 
 const [data, versions, members, dependencies] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
@@ -270,17 +265,17 @@ dayjs.extend(relativeTime)
 
 async function install(version) {
   installing.value = true
-  let queuedVersion
+  let queuedVersionData
 
   if (version) {
-    queuedVersion = version
+    queuedVersionData = versions.value.find((v) => v.id === version)
   } else {
     if (data.value.project_type === 'modpack' || !route.query.instance) {
-      queuedVersion = versions.value[0].id
+      queuedVersionData = versions.value[0]
     } else {
-      queuedVersion = versions.value.find((v) =>
+      queuedVersionData = versions.value.find((v) =>
         v.game_versions.includes(data.value.game_versions[0])
-      ).id
+      )
     }
   }
 
@@ -290,32 +285,51 @@ async function install(version) {
       packs.length === 0 ||
       !packs.map((value) => value.metadata).find((pack) => pack.linked_project_id === data.value.id)
     ) {
-      let id = await packInstall(queuedVersion)
+      let id = await packInstall(queuedVersionData.id)
       await router.push({ path: `/instance/${encodeURIComponent(id)}` })
     } else {
-      confirmModal.value.show(queuedVersion)
+      confirmModal.value.show(queuedVersionData.id)
     }
   } else {
     if (route.query.instance) {
       if (!version) {
         const gameVersion = instance.value.metadata.game_version
         const loader = instance.value.metadata.loader
-        console.log(gameVersion, loader)
-        console.log(instance.value)
-        console.log(data.value.project_type)
-        const selectedVersion = versions.value.find((v) =>
-          v.game_versions.includes(gameVersion) && (v.loaders.includes(loader) || v.loaders.includes('minecraft'))
+        const selectedVersion = versions.value.find(
+          (v) =>
+            v.game_versions.includes(gameVersion) &&
+            (v.loaders.includes(loader) || v.loaders.includes('minecraft'))
         )
         console.log(selectedVersion)
+        queuedVersionData = selectedVersion
         await installMod(route.query.instance, selectedVersion.id)
       } else {
-        await installMod(route.query.instance, queuedVersion)
+        await installMod(route.query.instance, queuedVersionData.id)
       }
+
+      for (const dep of queuedVersionData.dependencies) {
+        if (dep.version_id) {
+          if (checkInstalled(instance.value, dep.project_id)) continue
+          await installMod(route.query.instance, dep.version_id)
+        } else {
+          if (checkInstalled(instance.value, dep.project_id)) continue
+          const depVersions = await ofetch(
+            `https://api.modrinth.com/v2/project/${dep.project_id}/version`
+          )
+          const latest = depVersions.find(
+            (v) =>
+              v.game_versions.includes(instance.value.metadata.game_version) &&
+              v.loaders.includes(instance.value.metadata.loader)
+          )
+          await installMod(route.query.instance, latest.id)
+        }
+      }
+
       installed.value = true
     } else {
       if (version) {
         modInstallModal.value.show(data.value.id, [
-          versions.value.find((v) => v.id === queuedVersion),
+          versions.value.find((v) => v.id === queuedVersionData.id),
         ])
       } else {
         modInstallModal.value.show(data.value.id, versions.value)
diff --git a/theseus_gui/yarn.lock b/theseus_gui/yarn.lock
index 79b33947b..877f53a92 100644
--- a/theseus_gui/yarn.lock
+++ b/theseus_gui/yarn.lock
@@ -1168,10 +1168,10 @@ ofetch@^1.0.1:
     node-fetch-native "^1.0.2"
     ufo "^1.1.0"
 
-omorphia@^0.4.9:
-  version "0.4.9"
-  resolved "https://registry.yarnpkg.com/omorphia/-/omorphia-0.4.9.tgz#2c13cee8892dfdf892e1912794c783c379c8c5a8"
-  integrity sha512-LbCCVhMmxiNdlFjJRsL4QBgBS1csA1YhV0jiKwGWp0D659ZOoatUbiY7V7gpzPv1IgI6rXC1no06cRWgSzDOKA==
+omorphia@^0.4.10:
+  version "0.4.10"
+  resolved "https://registry.yarnpkg.com/omorphia/-/omorphia-0.4.10.tgz#93c0e6a08a233f27d76587286e42450af44bb55d"
+  integrity sha512-WgSFosOqoM0IRpzGNYyprfZSRyBLgqs6sTmKRuWo96ZpzrHRWAom2upIm/HAxAC+YBwFni5sgUeBemXYI7wmuw==
   dependencies:
     dayjs "^1.11.7"
     floating-vue "^2.0.0-beta.20"

From 8f4f8c64de55d3598f8c423fddf766db86bef2c3 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Mon, 24 Apr 2023 15:03:09 -0400
Subject: [PATCH 13/24] Fix bugs with search

---
 .../components/ui/InstanceInstallModal.vue    | 23 +++-----------
 theseus_gui/src/helpers/utils.js              | 27 +++++++++++++++--
 theseus_gui/src/pages/Browse.vue              | 30 +++++++++----------
 theseus_gui/src/pages/project/Index.vue       | 25 ++++------------
 theseus_gui/src/store/search.js               | 10 +++++++
 5 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index 957ca0bc6..aac7ea314 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -19,8 +19,7 @@ import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { LoginIcon } from '@/assets/icons'
 import { useRouter } from 'vue-router'
 import { create } from '@/helpers/profile'
-import { ofetch } from 'ofetch'
-import { checkInstalled } from '@/helpers/utils'
+import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
 const router = useRouter()
 const versions = ref([])
 const project = ref('')
@@ -53,24 +52,10 @@ async function install(instance) {
       (v.loaders.includes(instance.metadata.loader) || v.loaders.includes('minecraft'))
     )
   })
+
   await installMod(instance.path, version.id)
-  for (const dep of version.dependencies) {
-    if (dep.version_id) {
-      if (checkInstalled(instance, dep.project_id)) continue
-      await installMod(instance.path, dep.version_id)
-    } else {
-      if (checkInstalled(instance, dep.project_id)) continue
-      const depVersions = await ofetch(
-        `https://api.modrinth.com/v2/project/${dep.project_id}/version`
-      )
-      const latest = depVersions.find(
-        (v) =>
-          v.game_versions.includes(instance.metadata.game_version) &&
-          v.loaders.includes(instance.metadata.loader)
-      )
-      await installMod(instance.path, latest.id)
-    }
-  }
+  await installVersionDependencies(instance, version)
+
   instance.installed = true
   instance.installing = false
 }
diff --git a/theseus_gui/src/helpers/utils.js b/theseus_gui/src/helpers/utils.js
index 300dbdb0f..9e9ff599b 100644
--- a/theseus_gui/src/helpers/utils.js
+++ b/theseus_gui/src/helpers/utils.js
@@ -1,3 +1,6 @@
+import { add_project_from_version as installMod } from '@/helpers/profile'
+import { ofetch } from 'ofetch'
+
 export const releaseColor = (releaseType) => {
   switch (releaseType) {
     case 'release':
@@ -11,6 +14,26 @@ export const releaseColor = (releaseType) => {
   }
 }
 
-export const checkInstalled = (profile, checkProject) => {
-  return Object.values(profile.projects).some((p) => p.metadata?.project?.id === checkProject)
+export const checkInstalled = (profile, projectId) => {
+  return Object.values(profile.projects).some((p) => p.metadata?.project?.id === projectId)
+}
+
+export const installVersionDependencies = async (profile, version) => {
+  for (const dep of version.dependencies) {
+    if (dep.version_id) {
+      if (checkInstalled(profile, dep.project_id)) continue
+      await installMod(profile.path, dep.version_id)
+    } else {
+      if (checkInstalled(profile, dep.project_id)) continue
+      const depVersions = await ofetch(
+        `https://api.modrinth.com/v2/project/${dep.project_id}/version`
+      )
+      const latest = depVersions.find(
+        (v) =>
+          v.game_versions.includes(profile.metadata.game_version) &&
+          v.loaders.includes(profile.metadata.loader)
+      )
+      await installMod(profile.path, latest.id)
+    }
+  }
 }
diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index acca04814..917f8ed91 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -33,6 +33,14 @@ const showSnapshots = ref(false)
 const loading = ref(true)
 const instance = ref(null)
 
+if (route.query.instance) {
+  instance.value = await getProfile(route.query.instance)
+  searchStore.instanceContext = instance.value
+} else {
+  instance.value = null
+  searchStore.instanceContext = null
+}
+
 const [categories, loaders, availableGameVersions] = await Promise.all([
   get_categories(),
   get_loaders(),
@@ -41,6 +49,12 @@ const [categories, loaders, availableGameVersions] = await Promise.all([
 
 const getSearchResults = async (shouldLoad = false) => {
   const queryString = searchStore.getQueryString()
+  if (route.query.instance) {
+    showVersions.value = false
+    showLoaders.value = !(
+      searchStore.projectType === 'mod' || searchStore.projectType === 'resourcepack'
+    )
+  }
   if (shouldLoad === true) {
     loading.value = true
   }
@@ -56,18 +70,6 @@ const handleReset = async () => {
   await getSearchResults()
 }
 
-if (route.query.instance) {
-  instance.value = await getProfile(route.query.instance)
-  console.log(instance.value)
-  searchStore.activeVersions = [instance.value.metadata.game_version]
-  if (searchStore.projectType === 'mod')
-    searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
-  showVersions.value = false
-  showLoaders.value = false
-} else {
-  handleReset()
-}
-
 const toggleFacet = async (facet) => {
   const index = searchStore.facets.indexOf(facet)
 
@@ -96,10 +98,6 @@ const switchPage = async (page) => {
 const setProjectType = (type) => {
   searchStore.projectType = type
   handleReset()
-  if (instance.value && (type === 'modpack' || type === 'mod')) {
-    searchStore.facets = [`categories:'${encodeURIComponent(instance.value.metadata.loader)}'`]
-  }
-  getSearchResults()
 }
 </script>
 
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 2fd9dbe64..dd0df440a 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -226,7 +226,7 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import { ofetch } from 'ofetch'
 import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
-import { checkInstalled } from '@/helpers/utils'
+import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 import Instance from '@/components/ui/Instance.vue'
@@ -300,30 +300,17 @@ async function install(version) {
             v.game_versions.includes(gameVersion) &&
             (v.loaders.includes(loader) || v.loaders.includes('minecraft'))
         )
-        console.log(selectedVersion)
+        if (!selectedVersion) {
+          installing.value = false
+          return
+        }
         queuedVersionData = selectedVersion
         await installMod(route.query.instance, selectedVersion.id)
       } else {
         await installMod(route.query.instance, queuedVersionData.id)
       }
 
-      for (const dep of queuedVersionData.dependencies) {
-        if (dep.version_id) {
-          if (checkInstalled(instance.value, dep.project_id)) continue
-          await installMod(route.query.instance, dep.version_id)
-        } else {
-          if (checkInstalled(instance.value, dep.project_id)) continue
-          const depVersions = await ofetch(
-            `https://api.modrinth.com/v2/project/${dep.project_id}/version`
-          )
-          const latest = depVersions.find(
-            (v) =>
-              v.game_versions.includes(instance.value.metadata.game_version) &&
-              v.loaders.includes(instance.value.metadata.loader)
-          )
-          await installMod(route.query.instance, latest.id)
-        }
-      }
+      installVersionDependencies(instance.value, queuedVersionData)
 
       installed.value = true
     } else {
diff --git a/theseus_gui/src/store/search.js b/theseus_gui/src/store/search.js
index afc04519a..72207d8d0 100644
--- a/theseus_gui/src/store/search.js
+++ b/theseus_gui/src/store/search.js
@@ -19,11 +19,16 @@ export const useSearch = defineStore('searchStore', {
     activeVersions: [],
     openSource: false,
     limit: 20,
+    instanceContext: null,
   }),
   actions: {
     getQueryString() {
       let andFacets = [`project_type:${this.projectType === 'datapack' ? 'mod' : this.projectType}`]
 
+      if (this.instanceContext) {
+        this.activeVersions = [this.instanceContext.metadata.game_version]
+      }
+
       // Iterate through possible andFacets
       this.facets.forEach((facet) => {
         andFacets.push(facet)
@@ -37,6 +42,11 @@ export const useSearch = defineStore('searchStore', {
         ;[...andFacets, `categories:${encodeURIComponent('datapack')}`].forEach(
           (f) => (formattedAndFacets += `["${f}"],`)
         )
+      } else if (this.instanceContext && this.projectType === 'mod') {
+        ;[
+          ...andFacets,
+          `categories:${encodeURIComponent(this.instanceContext.metadata.loader)}`,
+        ].forEach((f) => (formattedAndFacets += `["${f}"],`))
       } else {
         andFacets.forEach((f) => (formattedAndFacets += `["${f}"],`))
       }

From c588c53e3d9175cb62bd663c50599421893ad3e7 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 26 Apr 2023 01:16:08 -0400
Subject: [PATCH 14/24] Addressed changes

---
 theseus_gui/src/App.vue                       |  2 +-
 .../components/ui/InstanceInstallModal.vue    | 45 +++++-----
 theseus_gui/src/pages/Browse.vue              | 89 +++++++++++--------
 theseus_gui/src/pages/instance/Index.vue      |  4 +
 theseus_gui/src/pages/instance/Mods.vue       | 30 +++++--
 theseus_gui/src/pages/project/Index.vue       | 20 ++---
 theseus_gui/src/pages/project/Version.vue     | 18 ++--
 theseus_gui/src/pages/project/Versions.vue    | 14 ++-
 theseus_gui/src/routes.js                     |  2 +-
 9 files changed, 139 insertions(+), 85 deletions(-)

diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
index f775f67db..d7b64c361 100644
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -43,7 +43,7 @@ list().then(
         </suspense>
         <div class="pages-list">
           <RouterLink to="/" class="button-base nav-button"><HomeIcon /></RouterLink>
-          <RouterLink to="/browse" class="button-base nav-button"> <SearchIcon /></RouterLink>
+          <RouterLink to="/browse/modpack" class="button-base nav-button"> <SearchIcon /></RouterLink>
           <RouterLink to="/library" class="button-base nav-button"> <LibraryIcon /></RouterLink>
           <button
             color="primary"
diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index aac7ea314..492fb9543 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -9,14 +9,13 @@ import {
   UploadIcon,
   XIcon,
   RightArrowIcon,
-  CheckCircleIcon,
+  CheckIcon,
 } from 'omorphia'
 import { computed, ref } from 'vue'
 import { add_project_from_version as installMod, list } from '@/helpers/profile'
 import { tauri } from '@tauri-apps/api'
 import { open } from '@tauri-apps/api/dialog'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
-import { LoginIcon } from '@/assets/icons'
 import { useRouter } from 'vue-router'
 import { create } from '@/helpers/profile'
 import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
@@ -142,21 +141,17 @@ const check_valid = computed(() => {
       <input v-model="searchFilter" type="text" class="search" placeholder="Search for a profile" />
       <div class="profiles">
         <div v-for="profile in filteredVersions" :key="profile.metadata.name" class="option">
-          <Avatar :src="convertFileSrc(profile.metadata.icon)" size="xs" />
-          <div class="name">{{ profile.metadata.name }}</div>
-          <div class="footer">
-            <Button :disabled="profile.installed || profile.installing" @click="install(profile)">
-              <DownloadIcon v-if="!profile.installed && !profile.installing" />
-              <CheckCircleIcon v-else-if="profile.installed" />
-              {{
-                profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install'
-              }}
-            </Button>
-            <Button @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)">
-              <LoginIcon />
-              View
-            </Button>
-          </div>
+          <Button color="raised" class="profile-button" @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)">
+            <Avatar :src="convertFileSrc(profile.metadata.icon)" class="profile-image" />
+            {{ profile.metadata.name }}
+          </Button>
+          <Button :disabled="profile.installed || profile.installing" @click="install(profile)">
+            <DownloadIcon v-if="!profile.installed && !profile.installing" />
+            <CheckIcon v-else-if="profile.installed" />
+            {{
+              profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install'
+            }}
+          </Button>
         </div>
       </div>
       <Card v-if="showCreation" class="creation-card">
@@ -199,7 +194,7 @@ const check_valid = computed(() => {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  margin-top: 1rem;
+  margin: 0;
   padding: 1rem;
   background-color: var(--color-bg);
 }
@@ -256,7 +251,7 @@ const check_valid = computed(() => {
 }
 
 .profiles {
-  max-height: 14rem;
+  max-height: 12rem;
   overflow-y: auto;
 }
 
@@ -267,7 +262,9 @@ const check_valid = computed(() => {
   box-shadow: none;
   display: flex;
   flex-direction: row;
-  padding: 0.5rem;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.5rem;
 
   img {
     margin-right: 0.5rem;
@@ -278,6 +275,14 @@ const check_valid = computed(() => {
     flex-direction: column;
     justify-content: center;
   }
+
+  .profile-button {
+    padding: 0.5rem;
+  }
+}
+
+.profile-image {
+  --size: 2rem !important;
 }
 
 .footer {
diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 917f8ed91..37ca21ab4 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import {computed, ref, watch} from 'vue'
 import { ofetch } from 'ofetch'
 import {
   Pagination,
@@ -14,32 +14,26 @@ import {
   ClientIcon,
   ServerIcon,
   AnimatedLogo,
-  Chips,
+  NavRow,
+  formatCategoryHeader
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { useSearch } from '@/store/state'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'
-import { get as getProfile } from '@/helpers/profile'
 import { useRoute } from 'vue-router'
 import Instance from '@/components/ui/Instance.vue'
 
 const route = useRoute()
 
 const searchStore = useSearch()
-searchStore.projectType = route.query.projectType ?? 'modpack'
+searchStore.projectType = route.params.projectType
+if (searchStore.projectType === 'modpack') {
+  searchStore.instanceContext = null
+}
 const showVersions = ref(true)
 const showLoaders = ref(true)
 const showSnapshots = ref(false)
 const loading = ref(true)
-const instance = ref(null)
-
-if (route.query.instance) {
-  instance.value = await getProfile(route.query.instance)
-  searchStore.instanceContext = instance.value
-} else {
-  instance.value = null
-  searchStore.instanceContext = null
-}
 
 const [categories, loaders, availableGameVersions] = await Promise.all([
   get_categories(),
@@ -47,9 +41,26 @@ const [categories, loaders, availableGameVersions] = await Promise.all([
   get_game_versions(),
 ])
 
+console.log(categories)
+
+const sortedCategories = computed( () => {
+  const values = new Map();
+  for (const category of categories.filter(
+    (cat) =>
+      cat.project_type ===
+      (searchStore.projectType === 'datapack' ? 'mod' : searchStore.projectType)
+  )) {
+    if (!values.has(category.header)) {
+      values.set(category.header, [])
+    }
+    values.get(category.header).push(category)
+  }
+  return values
+});
+
 const getSearchResults = async (shouldLoad = false) => {
   const queryString = searchStore.getQueryString()
-  if (route.query.instance) {
+  if (searchStore.instanceContext) {
     showVersions.value = false
     showLoaders.value = !(
       searchStore.projectType === 'mod' || searchStore.projectType === 'resourcepack'
@@ -95,16 +106,19 @@ const switchPage = async (page) => {
   await getSearchResults()
 }
 
-const setProjectType = (type) => {
-  searchStore.projectType = type
-  handleReset()
-}
+watch(
+  () => route.params.projectType,
+  (projectType) => {
+    searchStore.projectType = projectType ?? 'modpack'
+    handleReset()
+  }
+)
 </script>
 
 <template>
   <div class="search-container">
     <aside class="filter-panel">
-      <Instance v-if="instance" :instance="instance" small />
+      <Instance v-if="searchStore.instanceContext" :instance="searchStore.instanceContext" small />
       <Button
         role="button"
         :disabled="
@@ -120,14 +134,10 @@ const setProjectType = (type) => {
         @click="handleReset"
         ><ClearIcon />Clear Filters</Button
       >
-      <div class="categories">
-        <h2>Categories</h2>
+      <div v-for="categoryList in Array.from(sortedCategories)" :key="categoryList[0]" class="categories">
+        <h2>{{formatCategoryHeader(categoryList[0])}}</h2>
         <div
-          v-for="category in categories.filter(
-            (cat) =>
-              cat.project_type ===
-              (searchStore.projectType === 'datapack' ? 'mod' : searchStore.projectType)
-          )"
+          v-for="category in categoryList[1]"
           :key="category.name"
         >
           <SearchFilter
@@ -214,14 +224,20 @@ const setProjectType = (type) => {
     </aside>
     <div class="search">
       <Card class="project-type-container">
-        <Chips
-          :model-value="searchStore.projectType"
-          :items="
-            instance
-              ? ['mod', 'datapack', 'shader', 'resourcepack']
-              : ['modpack', 'mod', 'datapack', 'shader', 'resourcepack']
-          "
-          @update:model-value="(newValue) => setProjectType(newValue)"
+        <NavRow
+          :links="
+          searchStore.instanceContext ? [
+            { label: 'Mods', href: `/browse/mod` },
+            { label: 'Datapacks', href: `/browse/datapack` },
+            { label: 'Shaders', href: `/browse/shader` },
+            { label: 'Resource Packs', href: `/browse/resourcepack` },
+          ] : [
+            { label: 'Modpacks', href: '/browse/modpack' },
+            { label: 'Mods', href: '/browse/mod' },
+            { label: 'Datapacks', href: '/browse/datapack' },
+            { label: 'Shaders', href: '/browse/shader' },
+            { label: 'Resource Packs', href: '/browse/resourcepack' },
+          ]"
         />
       </Card>
       <Card class="search-panel-container">
@@ -270,9 +286,7 @@ const setProjectType = (type) => {
       <section v-else class="project-list display-mode--list instance-results" role="list">
         <ProjectCard
           v-for="result in searchStore.searchResults"
-          :id="`${result?.project_id}/${
-            $route.query.instance ? '?instance=' + encodeURIComponent($route.query.instance) : ''
-          }`"
+          :id="`${result?.project_id}/`"
           :key="result?.project_id"
           class="result-project-item"
           :type="result?.project_type"
@@ -318,7 +332,6 @@ const setProjectType = (type) => {
   flex-direction: column;
   width: 100%;
   margin-top: 1rem;
-  padding: 0.8rem !important;
 }
 
 .search-panel-container {
diff --git a/theseus_gui/src/pages/instance/Index.vue b/theseus_gui/src/pages/instance/Index.vue
index 332af0f99..d02b91026 100644
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -47,9 +47,13 @@ import { get, run } from '@/helpers/profile'
 import { useRoute } from 'vue-router'
 import { shallowRef } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { useSearch} from "@/store/search";
+
+const searchStore = useSearch()
 
 const route = useRoute()
 const instance = shallowRef(await get(route.params.id))
+searchStore.instanceContext = instance.value
 </script>
 
 <style scoped lang="scss">
diff --git a/theseus_gui/src/pages/instance/Mods.vue b/theseus_gui/src/pages/instance/Mods.vue
index df6687f7a..cbc14da3f 100644
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -3,11 +3,13 @@
     <div class="card-row">
       <div class="iconified-input">
         <SearchIcon />
-        <input v-model="searchFilter" type="text" placeholder="Search Mods" />
+        <input v-model="searchFilter" type="text" placeholder="Search Mods" class="text-input"/>
       </div>
       <span class="manage">
         <span class="text-combo">
-          Sort By
+          <span class="no-wrap sort">
+            Sort By
+          </span>
           <DropdownSelect
             v-model="sortFilter"
             name="sort-by"
@@ -18,7 +20,9 @@
         </span>
         <Button color="primary" @click="searchMod()">
           <PlusIcon />
-          Add Mods
+          <span class="no-wrap">
+            Add Content
+          </span>
         </Button>
       </span>
     </div>
@@ -40,7 +44,7 @@
             <UpdatedIcon />
           </Button>
           <Button v-else disabled icon-only>
-            <CheckCircleIcon />
+            <CheckIcon />
           </Button>
         </div>
         <div class="table-cell table-text name-cell">
@@ -77,7 +81,7 @@ import {
   TrashIcon,
   PlusIcon,
   Card,
-  CheckCircleIcon,
+  CheckIcon,
   SearchIcon,
   UpdatedIcon,
   DropdownSelect,
@@ -179,11 +183,15 @@ const updateSort = (projects, sort) => {
 }
 
 const searchMod = () => {
-  router.push({ path: '/browse', query: { projectType: 'mod', instance: route.params.id } })
+  router.push({ path: '/browse/mod', query: { instance: route.params.id } })
 }
 </script>
 
 <style scoped lang="scss">
+.text-input {
+  width: 100%;
+}
+
 .manage {
   display: flex;
   gap: 0.5rem;
@@ -224,4 +232,14 @@ const searchMod = () => {
 .dropdown {
   width: 7rem !important;
 }
+
+.no-wrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.sort {
+    padding-left: 0.5rem;
+  }
+}
 </style>
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index dd0df440a..e69fc824e 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -37,7 +37,7 @@
             @click="install()"
           >
             <DownloadIcon v-if="!installed && !installing" />
-            <CheckCircleIcon v-else-if="installed" />
+            <CheckIcon v-else-if="installed" />
             {{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
           </Button>
           <a
@@ -181,6 +181,7 @@
         :members="members"
         :dependencies="dependencies"
         :install="install"
+        :installed="installed"
       />
     </div>
   </div>
@@ -208,7 +209,7 @@ import {
   CodeIcon,
   formatNumber,
   ExternalIcon,
-  CheckCircleIcon,
+  CheckIcon,
 } from 'omorphia'
 import {
   BuyMeACoffeeIcon,
@@ -220,7 +221,7 @@ import {
 } from '@/assets/external'
 import { get_categories, get_loaders } from '@/helpers/tags'
 import { install as packInstall } from '@/helpers/pack'
-import { list, add_project_from_version as installMod, get as getProfile } from '@/helpers/profile'
+import { list, add_project_from_version as installMod } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ofetch } from 'ofetch'
@@ -230,6 +231,9 @@ import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 import Instance from '@/components/ui/Instance.vue'
+import { useSearch} from "@/store/search";
+
+const searchStore = useSearch()
 
 const route = useRoute()
 const router = useRouter()
@@ -238,13 +242,9 @@ const confirmModal = ref(null)
 const modInstallModal = ref(null)
 const loaders = ref(await get_loaders())
 const categories = ref(await get_categories())
-const instance = ref(null)
+const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
-if (route.query.instance) {
-  instance.value = await getProfile(route.query.instance)
-}
-
 const installed = ref(instance.value ? checkInstalled(instance.value, route.params.id) : false)
 
 const [data, versions, members, dependencies] = await Promise.all([
@@ -270,7 +270,7 @@ async function install(version) {
   if (version) {
     queuedVersionData = versions.value.find((v) => v.id === version)
   } else {
-    if (data.value.project_type === 'modpack' || !route.query.instance) {
+    if (data.value.project_type === 'modpack' || !instance.value) {
       queuedVersionData = versions.value[0]
     } else {
       queuedVersionData = versions.value.find((v) =>
@@ -291,7 +291,7 @@ async function install(version) {
       confirmModal.value.show(queuedVersionData.id)
     }
   } else {
-    if (route.query.instance) {
+    if (instance.value) {
       if (!version) {
         const gameVersion = instance.value.metadata.game_version
         const loader = instance.value.metadata.loader
diff --git a/theseus_gui/src/pages/project/Version.vue b/theseus_gui/src/pages/project/Version.vue
index b524bdd3e..7fb395060 100644
--- a/theseus_gui/src/pages/project/Version.vue
+++ b/theseus_gui/src/pages/project/Version.vue
@@ -6,9 +6,10 @@
         <span v-if="version.featured">Auto-Featured</span>
       </div>
       <div class="button-group">
-        <Button color="primary" :action="() => install(version.id)">
-          <DownloadIcon />
-          Install
+        <Button color="primary" :action="() => install(version.id)" :disabled="installed">
+          <DownloadIcon v-if="!installed"/>
+          <CheckIcon v-else />
+          {{ installed ? 'Installed' : 'Install' }}
         </Button>
         <Button :link="`/project/${route.params.id}/versions`">
           <LeftArrowIcon />
@@ -57,9 +58,11 @@
               v-if="project.project_type !== 'modpack' || file.primary"
               class="download"
               :action="() => install(version.id)"
+              :disabled="installed"
             >
-              <DownloadIcon />
-              Install
+              <DownloadIcon v-if="!installed"/>
+              <CheckIcon v-else />
+              {{ installed ? 'Installed' : 'Install' }}
             </Button>
           </Card>
         </Card>
@@ -177,6 +180,7 @@ import {
   Badge,
   ExternalIcon,
   CopyCode,
+  CheckIcon,
   formatBytes,
   renderString,
 } from 'omorphia'
@@ -207,6 +211,10 @@ const props = defineProps({
     type: Function,
     required: true,
   },
+  installed: {
+    type: Boolean,
+    required: true,
+  },
 })
 
 const version = ref(props.versions.find((version) => version.id === route.params.version))
diff --git a/theseus_gui/src/pages/project/Versions.vue b/theseus_gui/src/pages/project/Versions.vue
index ed0042b0a..623d7fb4e 100644
--- a/theseus_gui/src/pages/project/Versions.vue
+++ b/theseus_gui/src/pages/project/Versions.vue
@@ -45,7 +45,7 @@
         :disabled="!filterLoader && !filterVersions && !filterCompatible"
         :action="clearFilters"
       >
-        <CheckCircleIcon />
+        <ClearIcon />
         Clear Filters
       </Button>
     </div>
@@ -65,8 +65,9 @@
         @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
       >
         <div class="table-cell table-text">
-          <Button color="primary" icon-only @click.stop="() => install(version.id)">
-            <DownloadIcon />
+          <Button color="primary" icon-only :disabled="installed" @click.stop="() => install(version.id)">
+            <DownloadIcon v-if="!installed"/>
+            <CheckIcon v-else />
           </Button>
         </div>
         <div class="name-cell table-cell table-text">
@@ -126,7 +127,8 @@
 import {
   Card,
   Button,
-  CheckCircleIcon,
+  CheckIcon,
+  ClearIcon,
   Badge,
   DownloadIcon,
   Checkbox,
@@ -155,6 +157,10 @@ defineProps({
     type: Function,
     required: true,
   },
+  installed: {
+    type: Boolean,
+    required: true,
+  },
 })
 </script>
 
diff --git a/theseus_gui/src/routes.js b/theseus_gui/src/routes.js
index 71c1d2d67..0a78258f4 100644
--- a/theseus_gui/src/routes.js
+++ b/theseus_gui/src/routes.js
@@ -15,7 +15,7 @@ export default new createRouter({
       component: Pages.Index,
     },
     {
-      path: '/browse',
+      path: '/browse/:projectType',
       name: 'Browse',
       component: Pages.Browse,
     },

From 6a794d2e46626b130d97b2979ea7356b0ed771b9 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 26 Apr 2023 01:38:17 -0400
Subject: [PATCH 15/24] Run linter

---
 theseus_gui/src/App.vue                       |  4 +-
 .../components/ui/InstanceInstallModal.vue    | 10 ++--
 theseus_gui/src/pages/Browse.vue              | 52 ++++++++++---------
 theseus_gui/src/pages/instance/Index.vue      |  2 +-
 theseus_gui/src/pages/instance/Mods.vue       | 10 ++--
 theseus_gui/src/pages/project/Index.vue       | 16 +++++-
 theseus_gui/src/pages/project/Version.vue     |  4 +-
 theseus_gui/src/pages/project/Versions.vue    |  9 +++-
 8 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
index d7b64c361..00fb6ce57 100644
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -43,7 +43,9 @@ list().then(
         </suspense>
         <div class="pages-list">
           <RouterLink to="/" class="button-base nav-button"><HomeIcon /></RouterLink>
-          <RouterLink to="/browse/modpack" class="button-base nav-button"> <SearchIcon /></RouterLink>
+          <RouterLink to="/browse/modpack" class="button-base nav-button">
+            <SearchIcon
+          /></RouterLink>
           <RouterLink to="/library" class="button-base nav-button"> <LibraryIcon /></RouterLink>
           <button
             color="primary"
diff --git a/theseus_gui/src/components/ui/InstanceInstallModal.vue b/theseus_gui/src/components/ui/InstanceInstallModal.vue
index 492fb9543..6a515d4de 100644
--- a/theseus_gui/src/components/ui/InstanceInstallModal.vue
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -141,16 +141,18 @@ const check_valid = computed(() => {
       <input v-model="searchFilter" type="text" class="search" placeholder="Search for a profile" />
       <div class="profiles">
         <div v-for="profile in filteredVersions" :key="profile.metadata.name" class="option">
-          <Button color="raised" class="profile-button" @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)">
+          <Button
+            color="raised"
+            class="profile-button"
+            @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)"
+          >
             <Avatar :src="convertFileSrc(profile.metadata.icon)" class="profile-image" />
             {{ profile.metadata.name }}
           </Button>
           <Button :disabled="profile.installed || profile.installing" @click="install(profile)">
             <DownloadIcon v-if="!profile.installed && !profile.installing" />
             <CheckIcon v-else-if="profile.installed" />
-            {{
-              profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install'
-            }}
+            {{ profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install' }}
           </Button>
         </div>
       </div>
diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 37ca21ab4..e5e8ac3de 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, ref, watch} from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ofetch } from 'ofetch'
 import {
   Pagination,
@@ -15,7 +15,7 @@ import {
   ServerIcon,
   AnimatedLogo,
   NavRow,
-  formatCategoryHeader
+  formatCategoryHeader,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { useSearch } from '@/store/state'
@@ -43,8 +43,8 @@ const [categories, loaders, availableGameVersions] = await Promise.all([
 
 console.log(categories)
 
-const sortedCategories = computed( () => {
-  const values = new Map();
+const sortedCategories = computed(() => {
+  const values = new Map()
   for (const category of categories.filter(
     (cat) =>
       cat.project_type ===
@@ -56,7 +56,7 @@ const sortedCategories = computed( () => {
     values.get(category.header).push(category)
   }
   return values
-});
+})
 
 const getSearchResults = async (shouldLoad = false) => {
   const queryString = searchStore.getQueryString()
@@ -134,12 +134,13 @@ watch(
         @click="handleReset"
         ><ClearIcon />Clear Filters</Button
       >
-      <div v-for="categoryList in Array.from(sortedCategories)" :key="categoryList[0]" class="categories">
-        <h2>{{formatCategoryHeader(categoryList[0])}}</h2>
-        <div
-          v-for="category in categoryList[1]"
-          :key="category.name"
-        >
+      <div
+        v-for="categoryList in Array.from(sortedCategories)"
+        :key="categoryList[0]"
+        class="categories"
+      >
+        <h2>{{ formatCategoryHeader(categoryList[0]) }}</h2>
+        <div v-for="category in categoryList[1]" :key="category.name">
           <SearchFilter
             :active-filters="searchStore.facets"
             :icon="category.icon"
@@ -226,18 +227,21 @@ watch(
       <Card class="project-type-container">
         <NavRow
           :links="
-          searchStore.instanceContext ? [
-            { label: 'Mods', href: `/browse/mod` },
-            { label: 'Datapacks', href: `/browse/datapack` },
-            { label: 'Shaders', href: `/browse/shader` },
-            { label: 'Resource Packs', href: `/browse/resourcepack` },
-          ] : [
-            { label: 'Modpacks', href: '/browse/modpack' },
-            { label: 'Mods', href: '/browse/mod' },
-            { label: 'Datapacks', href: '/browse/datapack' },
-            { label: 'Shaders', href: '/browse/shader' },
-            { label: 'Resource Packs', href: '/browse/resourcepack' },
-          ]"
+            searchStore.instanceContext
+              ? [
+                  { label: 'Mods', href: `/browse/mod` },
+                  { label: 'Datapacks', href: `/browse/datapack` },
+                  { label: 'Shaders', href: `/browse/shader` },
+                  { label: 'Resource Packs', href: `/browse/resourcepack` },
+                ]
+              : [
+                  { label: 'Modpacks', href: '/browse/modpack' },
+                  { label: 'Mods', href: '/browse/mod' },
+                  { label: 'Datapacks', href: '/browse/datapack' },
+                  { label: 'Shaders', href: '/browse/shader' },
+                  { label: 'Resource Packs', href: '/browse/resourcepack' },
+                ]
+          "
         />
       </Card>
       <Card class="search-panel-container">
@@ -286,7 +290,7 @@ watch(
       <section v-else class="project-list display-mode--list instance-results" role="list">
         <ProjectCard
           v-for="result in searchStore.searchResults"
-          :id="`${result?.project_id}/`"
+          :id="`${result?.project_id}/?fromSearch=true`"
           :key="result?.project_id"
           class="result-project-item"
           :type="result?.project_type"
diff --git a/theseus_gui/src/pages/instance/Index.vue b/theseus_gui/src/pages/instance/Index.vue
index d02b91026..1fc0f4899 100644
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -47,7 +47,7 @@ import { get, run } from '@/helpers/profile'
 import { useRoute } from 'vue-router'
 import { shallowRef } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
-import { useSearch} from "@/store/search";
+import { useSearch } from '@/store/search'
 
 const searchStore = useSearch()
 
diff --git a/theseus_gui/src/pages/instance/Mods.vue b/theseus_gui/src/pages/instance/Mods.vue
index cbc14da3f..3828958fe 100644
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -3,13 +3,11 @@
     <div class="card-row">
       <div class="iconified-input">
         <SearchIcon />
-        <input v-model="searchFilter" type="text" placeholder="Search Mods" class="text-input"/>
+        <input v-model="searchFilter" type="text" placeholder="Search Mods" class="text-input" />
       </div>
       <span class="manage">
         <span class="text-combo">
-          <span class="no-wrap sort">
-            Sort By
-          </span>
+          <span class="no-wrap sort"> Sort By </span>
           <DropdownSelect
             v-model="sortFilter"
             name="sort-by"
@@ -20,9 +18,7 @@
         </span>
         <Button color="primary" @click="searchMod()">
           <PlusIcon />
-          <span class="no-wrap">
-            Add Content
-          </span>
+          <span class="no-wrap"> Add Content </span>
         </Button>
       </span>
     </div>
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index e69fc824e..6788afd51 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="root-container">
     <div v-if="data" class="project-sidebar">
+      <Button v-if="fromSearch" class="back-button" @click="$router.push('/browse/mod')">
+        <LeftArrowIcon />
+        Back to search
+      </Button>
       <Instance v-if="instance" :instance="instance" small />
       <Card class="sidebar-card">
         <Avatar size="lg" :src="data.icon_url" />
@@ -210,6 +214,7 @@ import {
   formatNumber,
   ExternalIcon,
   CheckIcon,
+  LeftArrowIcon,
 } from 'omorphia'
 import {
   BuyMeACoffeeIcon,
@@ -231,7 +236,7 @@ import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 import Instance from '@/components/ui/Instance.vue'
-import { useSearch} from "@/store/search";
+import { useSearch } from '@/store/search'
 
 const searchStore = useSearch()
 
@@ -243,6 +248,7 @@ const modInstallModal = ref(null)
 const loaders = ref(await get_loaders())
 const categories = ref(await get_categories())
 const instance = ref(searchStore.instanceContext)
+const fromSearch = ref(route.query.fromSearch === 'true')
 const installing = ref(false)
 
 const installed = ref(instance.value ? checkInstalled(instance.value, route.params.id) : false)
@@ -335,6 +341,14 @@ async function install(version) {
   min-height: 100%;
 }
 
+.back-button {
+  margin-bottom: 0.75rem;
+  background-color: var(--color-bg);
+  padding: 1rem;
+  border-radius: var(--radius-lg);
+  width: 100%;
+}
+
 .project-sidebar {
   position: fixed;
   width: 20rem;
diff --git a/theseus_gui/src/pages/project/Version.vue b/theseus_gui/src/pages/project/Version.vue
index 7fb395060..d24384b52 100644
--- a/theseus_gui/src/pages/project/Version.vue
+++ b/theseus_gui/src/pages/project/Version.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="button-group">
         <Button color="primary" :action="() => install(version.id)" :disabled="installed">
-          <DownloadIcon v-if="!installed"/>
+          <DownloadIcon v-if="!installed" />
           <CheckIcon v-else />
           {{ installed ? 'Installed' : 'Install' }}
         </Button>
@@ -60,7 +60,7 @@
               :action="() => install(version.id)"
               :disabled="installed"
             >
-              <DownloadIcon v-if="!installed"/>
+              <DownloadIcon v-if="!installed" />
               <CheckIcon v-else />
               {{ installed ? 'Installed' : 'Install' }}
             </Button>
diff --git a/theseus_gui/src/pages/project/Versions.vue b/theseus_gui/src/pages/project/Versions.vue
index 623d7fb4e..0adbd77a1 100644
--- a/theseus_gui/src/pages/project/Versions.vue
+++ b/theseus_gui/src/pages/project/Versions.vue
@@ -65,8 +65,13 @@
         @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
       >
         <div class="table-cell table-text">
-          <Button color="primary" icon-only :disabled="installed" @click.stop="() => install(version.id)">
-            <DownloadIcon v-if="!installed"/>
+          <Button
+            color="primary"
+            icon-only
+            :disabled="installed"
+            @click.stop="() => install(version.id)"
+          >
+            <DownloadIcon v-if="!installed" />
             <CheckIcon v-else />
           </Button>
         </div>

From 616c4ca22d99ee33d57f8894a0c1b7ba288a357c Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 26 Apr 2023 16:29:16 -0400
Subject: [PATCH 16/24] Fixed direct install not working

---
 theseus_gui/src/pages/project/Index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 6788afd51..ec9d16d7d 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -38,7 +38,7 @@
             color="primary"
             class="instance-button"
             :disabled="installed === true || installing === true"
-            @click="install()"
+            @click="install(null)"
           >
             <DownloadIcon v-if="!installed && !installing" />
             <CheckIcon v-else-if="installed" />
@@ -311,9 +311,9 @@ async function install(version) {
           return
         }
         queuedVersionData = selectedVersion
-        await installMod(route.query.instance, selectedVersion.id)
+        await installMod(instance.value.path, selectedVersion.id)
       } else {
-        await installMod(route.query.instance, queuedVersionData.id)
+        await installMod(instance.value.path, queuedVersionData.id)
       }
 
       installVersionDependencies(instance.value, queuedVersionData)

From 1960e2a82b43de430afcdff8ce9daaa861d0a970 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 26 Apr 2023 23:26:38 -0400
Subject: [PATCH 17/24] Remove back to search

---
 theseus_gui/src/pages/Browse.vue        |  2 +-
 theseus_gui/src/pages/project/Index.vue | 14 --------------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 039478188..842d86b7b 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -295,7 +295,7 @@ watch(
       <section v-else class="project-list display-mode--list instance-results" role="list">
         <ProjectCard
           v-for="result in searchStore.searchResults"
-          :id="`${result?.project_id}/?fromSearch=true`"
+          :id="`${result?.project_id}/`"
           :key="result?.project_id"
           class="result-project-item"
           :type="result?.project_type"
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index b7192ae1a..83341ad7f 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="root-container">
     <div v-if="data" class="project-sidebar">
-      <Button v-if="fromSearch" class="back-button" @click="$router.push('/browse/mod')">
-        <LeftArrowIcon />
-        Back to search
-      </Button>
       <Instance v-if="instance" :instance="instance" small />
       <Card class="sidebar-card">
         <Avatar size="lg" :src="data.icon_url" />
@@ -214,7 +210,6 @@ import {
   formatNumber,
   ExternalIcon,
   CheckIcon,
-  LeftArrowIcon,
 } from 'omorphia'
 import {
   BuyMeACoffeeIcon,
@@ -250,7 +245,6 @@ const modInstallModal = ref(null)
 const loaders = ref(await get_loaders())
 const categories = ref(await get_categories())
 const instance = ref(searchStore.instanceContext)
-const fromSearch = ref(route.query.fromSearch === 'true')
 const installing = ref(false)
 
 const installed = ref(instance.value ? checkInstalled(instance.value, route.params.id) : false)
@@ -347,14 +341,6 @@ async function install(version) {
   min-height: 100%;
 }
 
-.back-button {
-  margin-bottom: 0.75rem;
-  background-color: var(--color-bg);
-  padding: 1rem;
-  border-radius: var(--radius-lg);
-  width: 100%;
-}
-
 .project-sidebar {
   position: fixed;
   width: 20rem;

From 32d57489b41491d68a528b6fee4cd4be30bcfcd5 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 26 Apr 2023 23:32:54 -0400
Subject: [PATCH 18/24] Update Index.vue

---
 theseus_gui/src/pages/instance/Index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theseus_gui/src/pages/instance/Index.vue b/theseus_gui/src/pages/instance/Index.vue
index 3a1e40034..0a891b7ba 100644
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -50,12 +50,12 @@ import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { useSearch } from '@/store/search'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
+const route = useRoute()
 const searchStore = useSearch()
 const breadcrumbs = useBreadcrumbs()
 
 const instance = shallowRef(await get(route.params.id))
 searchStore.instanceContext = instance.value
-const route = useRoute()
 
 breadcrumbs.setName('Instance', instance.value.metadata.name)
 breadcrumbs.setContext({

From 591ef21c0a265470855753363bd03956f5f8ad4d Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 28 Apr 2023 19:12:39 -0400
Subject: [PATCH 19/24] Addressed some changes

---
 theseus_gui/src/pages/Browse.vue        | 12 ++--
 theseus_gui/src/pages/project/Index.vue | 87 ++++++++++++-------------
 2 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 842d86b7b..ca52aebc2 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -46,8 +46,6 @@ const [categories, loaders, availableGameVersions] = await Promise.all([
   get_game_versions(),
 ])
 
-console.log(categories)
-
 const sortedCategories = computed(() => {
   const values = new Map()
   for (const category of categories.filter(
@@ -116,6 +114,7 @@ watch(
   (projectType) => {
     searchStore.projectType = projectType ?? 'modpack'
     handleReset()
+    breadcrumbs.setContext({ name: 'Browse', link: route.path })
   }
 )
 </script>
@@ -156,7 +155,7 @@ watch(
           />
         </div>
       </div>
-      <div v-if="showLoaders && searchStore.projectType !== 'datapack'" class="loaders">
+      <div v-if="showLoaders && searchStore.projectType !== 'datapack' && searchStore.projectType !== 'resourcepack' && searchStore.projectType !== 'shader'" class="loaders">
         <h2>Loaders</h2>
         <div
           v-for="loader in loaders.filter((l) =>
@@ -398,12 +397,11 @@ watch(
     position: fixed;
     width: 19rem;
     background: var(--color-raised-bg);
-    padding: 1rem 1rem 3rem 1rem;
+    padding: 1rem;
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
-    height: fit-content;
-    max-height: 100vh;
+    height: 100%;
+    max-height: calc(100vh - 3rem);
     overflow-y: auto;
 
     h2 {
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 83341ad7f..5d3612ce7 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="root-container">
     <div v-if="data" class="project-sidebar">
-      <Instance v-if="instance" :instance="instance" small />
+      <Instance v-if="instance" :instance="instance" small/>
       <Card class="sidebar-card">
-        <Avatar size="lg" :src="data.icon_url" />
+        <Avatar size="lg" :src="data.icon_url"/>
         <div class="instance-info">
           <h2 class="name">{{ data.title }}</h2>
           {{ data.description }}
@@ -28,7 +28,7 @@
             :type="data.project_type"
           />
         </Categories>
-        <hr class="card-divider" />
+        <hr class="card-divider"/>
         <div class="button-group">
           <Button
             color="primary"
@@ -36,8 +36,8 @@
             :disabled="installed === true || installing === true"
             @click="install(null)"
           >
-            <DownloadIcon v-if="!installed && !installing" />
-            <CheckIcon v-else-if="installed" />
+            <DownloadIcon v-if="!installed && !installing"/>
+            <CheckIcon v-else-if="installed"/>
             {{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
           </Button>
           <a
@@ -46,51 +46,51 @@
             target="_blank"
             class="btn"
           >
-            <ExternalIcon />
+            <ExternalIcon/>
             Site
           </a>
         </div>
-        <hr class="card-divider" />
+        <hr class="card-divider"/>
         <div class="stats">
           <div class="stat">
-            <DownloadIcon aria-hidden="true" />
+            <DownloadIcon aria-hidden="true"/>
             <p>
               <strong>{{ formatNumber(data.downloads) }}</strong>
               <span class="stat-label"> download<span v-if="data.downloads !== '1'">s</span></span>
             </p>
           </div>
           <div class="stat">
-            <HeartIcon aria-hidden="true" />
+            <HeartIcon aria-hidden="true"/>
             <p>
               <strong>{{ formatNumber(data.followers) }}</strong>
               <span class="stat-label"> follower<span v-if="data.followers !== '1'">s</span></span>
             </p>
           </div>
           <div class="stat date">
-            <CalendarIcon aria-hidden="true" />
+            <CalendarIcon aria-hidden="true"/>
             <span
-              ><span class="date-label">Created </span> {{ dayjs(data.published).fromNow() }}</span
+            ><span class="date-label">Created </span> {{ dayjs(data.published).fromNow() }}</span
             >
           </div>
           <div class="stat date">
-            <UpdatedIcon aria-hidden="true" />
+            <UpdatedIcon aria-hidden="true"/>
             <span
-              ><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
+            ><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
             >
           </div>
         </div>
-        <hr class="card-divider" />
+        <hr class="card-divider"/>
         <div class="button-group">
           <Button class="instance-button">
-            <ReportIcon />
+            <ReportIcon/>
             Report
           </Button>
           <Button class="instance-button">
-            <HeartIcon />
+            <HeartIcon/>
             Follow
           </Button>
         </div>
-        <hr class="card-divider" />
+        <hr class="card-divider"/>
         <div class="links">
           <a
             v-if="data.issues_url"
@@ -98,7 +98,7 @@
             class="title"
             rel="noopener nofollow ugc"
           >
-            <IssuesIcon aria-hidden="true" />
+            <IssuesIcon aria-hidden="true"/>
             <span>Issues</span>
           </a>
           <a
@@ -107,15 +107,15 @@
             class="title"
             rel="noopener nofollow ugc"
           >
-            <CodeIcon aria-hidden="true" />
+            <CodeIcon aria-hidden="true"/>
             <span>Source</span>
           </a>
           <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
-            <WikiIcon aria-hidden="true" />
+            <WikiIcon aria-hidden="true"/>
             <span>Wiki</span>
           </a>
           <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
-            <DiscordIcon aria-hidden="true" />
+            <DiscordIcon aria-hidden="true"/>
             <span>Discord</span>
           </a>
           <a
@@ -124,13 +124,13 @@
             :href="donation.url"
             rel="noopener nofollow ugc"
           >
-            <BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
-            <PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />
-            <KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true" />
-            <PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true" />
-            <OpenCollectiveIcon v-else-if="donation.id === 'open-collective'" aria-hidden="true" />
-            <HeartIcon v-else-if="donation.id === 'github'" />
-            <CoinsIcon v-else />
+            <BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true"/>
+            <PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true"/>
+            <KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true"/>
+            <PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true"/>
+            <OpenCollectiveIcon v-else-if="donation.id === 'open-collective'" aria-hidden="true"/>
+            <HeartIcon v-else-if="donation.id === 'github'"/>
+            <CoinsIcon v-else/>
             <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
             <span v-else-if="donation.id === 'patreon'">Patreon</span>
             <span v-else-if="donation.id === 'paypal'">PayPal</span>
@@ -142,7 +142,7 @@
       </Card>
     </div>
     <div v-if="data" class="content-container">
-      <Promotion />
+      <Promotion/>
       <Card class="tabs">
         <NavRow
           v-if="data.gallery.length > 0"
@@ -185,8 +185,8 @@
       />
     </div>
   </div>
-  <InstallConfirmModal ref="confirmModal" />
-  <InstanceInstallModal ref="modInstallModal" />
+  <InstallConfirmModal ref="confirmModal"/>
+  <InstanceInstallModal ref="modInstallModal"/>
 </template>
 
 <script setup>
@@ -219,20 +219,20 @@ import {
   KoFiIcon,
   OpenCollectiveIcon,
 } from '@/assets/external'
-import { get_categories, get_loaders } from '@/helpers/tags'
-import { install as packInstall } from '@/helpers/pack'
-import { list, add_project_from_version as installMod } from '@/helpers/profile'
+import {get_categories, get_loaders} from '@/helpers/tags'
+import {install as packInstall} from '@/helpers/pack'
+import {list, add_project_from_version as installMod} from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { ofetch } from 'ofetch'
-import { useRoute, useRouter } from 'vue-router'
-import { ref, shallowRef, watch } from 'vue'
-import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
+import {ofetch} from 'ofetch'
+import {useRoute, useRouter} from 'vue-router'
+import {ref, shallowRef, watch} from 'vue'
+import {checkInstalled, installVersionDependencies} from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 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 {useSearch} from '@/store/search'
+import {useBreadcrumbs} from '@/store/breadcrumbs'
 
 const searchStore = useSearch()
 
@@ -292,7 +292,7 @@ async function install(version) {
         .find((pack) => pack.linked_data?.project_id === data.value.id)
     ) {
       let id = await packInstall(queuedVersionData.id)
-      await router.push({ path: `/instance/${encodeURIComponent(id)}` })
+      await router.push({path: `/instance/${encodeURIComponent(id)}`})
     } else {
       confirmModal.value.show(queuedVersionData.id)
     }
@@ -301,10 +301,9 @@ async function install(version) {
       if (!version) {
         const gameVersion = instance.value.metadata.game_version
         const loader = instance.value.metadata.loader
+        console.log(gameVersion, loader)
         const selectedVersion = versions.value.find(
-          (v) =>
-            v.game_versions.includes(gameVersion) &&
-            (v.loaders.includes(loader) || v.loaders.includes('minecraft'))
+          (v) => v.game_versions.includes(gameVersion) && (!data.value.project_type === 'mod' || v.loaders.includes(loader) || v.loaders.includes('minecraft'))
         )
         if (!selectedVersion) {
           installing.value = false

From d3729a88ade749d6c888d2f9db4056525f7c2718 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 28 Apr 2023 19:16:58 -0400
Subject: [PATCH 20/24] Shader fix

---
 theseus_gui/src/pages/Browse.vue        | 10 ++-
 theseus_gui/src/pages/project/Index.vue | 89 +++++++++++++------------
 2 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index ca52aebc2..98710063b 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -155,7 +155,15 @@ watch(
           />
         </div>
       </div>
-      <div v-if="showLoaders && searchStore.projectType !== 'datapack' && searchStore.projectType !== 'resourcepack' && searchStore.projectType !== 'shader'" class="loaders">
+      <div
+        v-if="
+          showLoaders &&
+          searchStore.projectType !== 'datapack' &&
+          searchStore.projectType !== 'resourcepack' &&
+          searchStore.projectType !== 'shader'
+        "
+        class="loaders"
+      >
         <h2>Loaders</h2>
         <div
           v-for="loader in loaders.filter((l) =>
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 5d3612ce7..d6fd4e1c7 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="root-container">
     <div v-if="data" class="project-sidebar">
-      <Instance v-if="instance" :instance="instance" small/>
+      <Instance v-if="instance" :instance="instance" small />
       <Card class="sidebar-card">
-        <Avatar size="lg" :src="data.icon_url"/>
+        <Avatar size="lg" :src="data.icon_url" />
         <div class="instance-info">
           <h2 class="name">{{ data.title }}</h2>
           {{ data.description }}
@@ -28,7 +28,7 @@
             :type="data.project_type"
           />
         </Categories>
-        <hr class="card-divider"/>
+        <hr class="card-divider" />
         <div class="button-group">
           <Button
             color="primary"
@@ -36,8 +36,8 @@
             :disabled="installed === true || installing === true"
             @click="install(null)"
           >
-            <DownloadIcon v-if="!installed && !installing"/>
-            <CheckIcon v-else-if="installed"/>
+            <DownloadIcon v-if="!installed && !installing" />
+            <CheckIcon v-else-if="installed" />
             {{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
           </Button>
           <a
@@ -46,51 +46,51 @@
             target="_blank"
             class="btn"
           >
-            <ExternalIcon/>
+            <ExternalIcon />
             Site
           </a>
         </div>
-        <hr class="card-divider"/>
+        <hr class="card-divider" />
         <div class="stats">
           <div class="stat">
-            <DownloadIcon aria-hidden="true"/>
+            <DownloadIcon aria-hidden="true" />
             <p>
               <strong>{{ formatNumber(data.downloads) }}</strong>
               <span class="stat-label"> download<span v-if="data.downloads !== '1'">s</span></span>
             </p>
           </div>
           <div class="stat">
-            <HeartIcon aria-hidden="true"/>
+            <HeartIcon aria-hidden="true" />
             <p>
               <strong>{{ formatNumber(data.followers) }}</strong>
               <span class="stat-label"> follower<span v-if="data.followers !== '1'">s</span></span>
             </p>
           </div>
           <div class="stat date">
-            <CalendarIcon aria-hidden="true"/>
+            <CalendarIcon aria-hidden="true" />
             <span
-            ><span class="date-label">Created </span> {{ dayjs(data.published).fromNow() }}</span
+              ><span class="date-label">Created </span> {{ dayjs(data.published).fromNow() }}</span
             >
           </div>
           <div class="stat date">
-            <UpdatedIcon aria-hidden="true"/>
+            <UpdatedIcon aria-hidden="true" />
             <span
-            ><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
+              ><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
             >
           </div>
         </div>
-        <hr class="card-divider"/>
+        <hr class="card-divider" />
         <div class="button-group">
           <Button class="instance-button">
-            <ReportIcon/>
+            <ReportIcon />
             Report
           </Button>
           <Button class="instance-button">
-            <HeartIcon/>
+            <HeartIcon />
             Follow
           </Button>
         </div>
-        <hr class="card-divider"/>
+        <hr class="card-divider" />
         <div class="links">
           <a
             v-if="data.issues_url"
@@ -98,7 +98,7 @@
             class="title"
             rel="noopener nofollow ugc"
           >
-            <IssuesIcon aria-hidden="true"/>
+            <IssuesIcon aria-hidden="true" />
             <span>Issues</span>
           </a>
           <a
@@ -107,15 +107,15 @@
             class="title"
             rel="noopener nofollow ugc"
           >
-            <CodeIcon aria-hidden="true"/>
+            <CodeIcon aria-hidden="true" />
             <span>Source</span>
           </a>
           <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
-            <WikiIcon aria-hidden="true"/>
+            <WikiIcon aria-hidden="true" />
             <span>Wiki</span>
           </a>
           <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
-            <DiscordIcon aria-hidden="true"/>
+            <DiscordIcon aria-hidden="true" />
             <span>Discord</span>
           </a>
           <a
@@ -124,13 +124,13 @@
             :href="donation.url"
             rel="noopener nofollow ugc"
           >
-            <BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true"/>
-            <PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true"/>
-            <KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true"/>
-            <PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true"/>
-            <OpenCollectiveIcon v-else-if="donation.id === 'open-collective'" aria-hidden="true"/>
-            <HeartIcon v-else-if="donation.id === 'github'"/>
-            <CoinsIcon v-else/>
+            <BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
+            <PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />
+            <KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true" />
+            <PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true" />
+            <OpenCollectiveIcon v-else-if="donation.id === 'open-collective'" aria-hidden="true" />
+            <HeartIcon v-else-if="donation.id === 'github'" />
+            <CoinsIcon v-else />
             <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
             <span v-else-if="donation.id === 'patreon'">Patreon</span>
             <span v-else-if="donation.id === 'paypal'">PayPal</span>
@@ -142,7 +142,7 @@
       </Card>
     </div>
     <div v-if="data" class="content-container">
-      <Promotion/>
+      <Promotion />
       <Card class="tabs">
         <NavRow
           v-if="data.gallery.length > 0"
@@ -185,8 +185,8 @@
       />
     </div>
   </div>
-  <InstallConfirmModal ref="confirmModal"/>
-  <InstanceInstallModal ref="modInstallModal"/>
+  <InstallConfirmModal ref="confirmModal" />
+  <InstanceInstallModal ref="modInstallModal" />
 </template>
 
 <script setup>
@@ -219,20 +219,20 @@ import {
   KoFiIcon,
   OpenCollectiveIcon,
 } from '@/assets/external'
-import {get_categories, get_loaders} from '@/helpers/tags'
-import {install as packInstall} from '@/helpers/pack'
-import {list, add_project_from_version as installMod} from '@/helpers/profile'
+import { get_categories, get_loaders } from '@/helpers/tags'
+import { install as packInstall } from '@/helpers/pack'
+import { list, add_project_from_version as installMod } from '@/helpers/profile'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import {ofetch} from 'ofetch'
-import {useRoute, useRouter} from 'vue-router'
-import {ref, shallowRef, watch} from 'vue'
-import {checkInstalled, installVersionDependencies} from '@/helpers/utils'
+import { ofetch } from 'ofetch'
+import { useRoute, useRouter } from 'vue-router'
+import { ref, shallowRef, watch } from 'vue'
+import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 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 { useSearch } from '@/store/search'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
 
 const searchStore = useSearch()
 
@@ -292,7 +292,7 @@ async function install(version) {
         .find((pack) => pack.linked_data?.project_id === data.value.id)
     ) {
       let id = await packInstall(queuedVersionData.id)
-      await router.push({path: `/instance/${encodeURIComponent(id)}`})
+      await router.push({ path: `/instance/${encodeURIComponent(id)}` })
     } else {
       confirmModal.value.show(queuedVersionData.id)
     }
@@ -301,9 +301,12 @@ async function install(version) {
       if (!version) {
         const gameVersion = instance.value.metadata.game_version
         const loader = instance.value.metadata.loader
-        console.log(gameVersion, loader)
         const selectedVersion = versions.value.find(
-          (v) => v.game_versions.includes(gameVersion) && (!data.value.project_type === 'mod' || v.loaders.includes(loader) || v.loaders.includes('minecraft'))
+          (v) =>
+            v.game_versions.includes(gameVersion) &&
+            (data.value.project_type === 'mod'
+              ? v.loaders.includes(loader) || v.loaders.includes('minecraft')
+              : true)
         )
         if (!selectedVersion) {
           installing.value = false

From fbc4ebe19b8d44fba5e7ac9ea031f31d3791e9d1 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 28 Apr 2023 23:40:13 -0400
Subject: [PATCH 21/24] fix resetting

---
 theseus_gui/src/pages/Browse.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 98710063b..e3a42907c 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import {computed, onMounted, ref, watch} from 'vue'
 import { ofetch } from 'ofetch'
 import {
   Pagination,
@@ -28,14 +28,10 @@ const route = useRoute()
 
 const searchStore = useSearch()
 searchStore.projectType = route.params.projectType
-if (searchStore.projectType === 'modpack') {
-  searchStore.instanceContext = null
-}
 const showVersions = ref(true)
 const showLoaders = ref(true)
 
 const breadcrumbs = useBreadcrumbs()
-breadcrumbs.setContext({ name: 'Browse', link: route.path })
 
 const showSnapshots = ref(false)
 const loading = ref(true)
@@ -46,6 +42,16 @@ const [categories, loaders, availableGameVersions] = await Promise.all([
   get_game_versions(),
 ])
 
+onMounted(() => {
+  breadcrumbs.setContext({ name: 'Browse', link: route.path })
+  if (searchStore.projectType === 'modpack') {
+    searchStore.instanceContext = null
+  }
+  searchStore.searchInput = ''
+  handleReset()
+  switchPage(1)
+})
+
 const sortedCategories = computed(() => {
   const values = new Map()
   for (const category of categories.filter(
@@ -80,17 +86,21 @@ const getSearchResults = async (shouldLoad = false) => {
 getSearchResults(true)
 
 const handleReset = async () => {
+  searchStore.currentPage = 1
+  searchStore.offset = 0
   searchStore.resetFilters()
   await getSearchResults()
 }
 
 const toggleFacet = async (facet) => {
+  searchStore.currentPage = 1
+  searchStore.offset = 0
   const index = searchStore.facets.indexOf(facet)
 
   if (index !== -1) searchStore.facets.splice(index, 1)
   else searchStore.facets.push(facet)
 
-  await getSearchResults()
+  await switchPage(1)
 }
 
 const toggleOrFacet = async (orFacet) => {
@@ -99,7 +109,7 @@ const toggleOrFacet = async (orFacet) => {
   if (index !== -1) searchStore.orFacets.splice(index, 1)
   else searchStore.orFacets.push(orFacet)
 
-  await getSearchResults()
+  await switchPage(1)
 }
 
 const switchPage = async (page) => {
@@ -111,10 +121,11 @@ const switchPage = async (page) => {
 
 watch(
   () => route.params.projectType,
-  (projectType) => {
+  async (projectType) => {
     searchStore.projectType = projectType ?? 'modpack'
-    handleReset()
     breadcrumbs.setContext({ name: 'Browse', link: route.path })
+    await handleReset()
+    await switchPage(1)
   }
 )
 </script>

From 61be7f79f2de31ff50598dd8688b47793890cdfc Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Fri, 28 Apr 2023 23:40:29 -0400
Subject: [PATCH 22/24] Update Browse.vue

---
 theseus_gui/src/pages/Browse.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index e3a42907c..fc42b1da7 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, ref, watch} from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { ofetch } from 'ofetch'
 import {
   Pagination,

From dab504df18b8cd572eb8d1005855b93234e91613 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Mon, 8 May 2023 17:32:24 -0400
Subject: [PATCH 23/24] fixed install not working properly

---
 theseus_gui/src/pages/project/Index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index d6fd4e1c7..0b6523ef6 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -247,7 +247,6 @@ const categories = ref(await get_categories())
 const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
-const installed = ref(instance.value ? checkInstalled(instance.value, route.params.id) : false)
 
 const [data, versions, members, dependencies] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
@@ -256,6 +255,8 @@ const [data, versions, members, dependencies] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`).then(shallowRef),
 ])
 
+const installed = ref(instance.value && checkInstalled(instance.value, data.value.id))
+
 breadcrumbs.setName('Project', data.value.title)
 
 watch(

From 27e777b7027a5561a7431076183d541058c45848 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Mon, 8 May 2023 17:35:23 -0400
Subject: [PATCH 24/24] Update Index.vue

---
 theseus_gui/src/pages/project/Index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 0b6523ef6..65bcdb2bb 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -247,7 +247,6 @@ const categories = ref(await get_categories())
 const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
-
 const [data, versions, members, dependencies] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`).then(shallowRef),