From b094a30677a2c65b4c3a3e689d8bfa5717a45aac Mon Sep 17 00:00:00 2001
From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com>
Date: Mon, 8 May 2023 19:27:27 -0400
Subject: [PATCH] Non modpack wireup & Project to profile install (#90)

* Base impl

* Make project type selectable

* Update Browse.vue

* address changes

* Quick create

* Run linter

* fix merge

* Addressed changes

* Installation improvements

* Run lint

* resourcepacks

* automatic installation of dependencies

* Fix bugs with search

* Addressed changes

* Run linter

* Fixed direct install not working

* Remove back to search

* Update Index.vue

* Addressed some changes

* Shader fix

* fix resetting

* Update Browse.vue

* fixed install not working properly

* Update Index.vue

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
---
 theseus_gui/src/App.vue                       |   2 +-
 .../src/assets/stylesheets/global.scss        |   1 +
 theseus_gui/src/components/ui/Instance.vue    |  44 ++-
 .../components/ui/InstanceInstallModal.vue    | 297 ++++++++++++++++++
 theseus_gui/src/helpers/utils.js              |  27 ++
 theseus_gui/src/pages/Browse.vue              | 153 +++++++--
 theseus_gui/src/pages/Library.vue             |   2 +-
 theseus_gui/src/pages/instance/Index.vue      |  10 +-
 theseus_gui/src/pages/instance/Mods.vue       |  36 ++-
 theseus_gui/src/pages/project/Index.vue       | 107 ++++++-
 theseus_gui/src/pages/project/Version.vue     |  18 +-
 theseus_gui/src/pages/project/Versions.vue    |  19 +-
 theseus_gui/src/routes.js                     |   2 +-
 theseus_gui/src/store/search.js               |  21 +-
 14 files changed, 675 insertions(+), 64 deletions(-)
 create mode 100644 theseus_gui/src/components/ui/InstanceInstallModal.vue

diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
index 5b1c848a..ca735f15 100644
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -50,7 +50,7 @@ list().then(
             <span v-if="!themeStore.collapsedNavigation">Home</span>
           </RouterLink>
           <RouterLink
-            to="/browse"
+            to="/browse/modpack"
             class="btn"
             :class="{
               'icon-only': themeStore.collapsedNavigation,
diff --git a/theseus_gui/src/assets/stylesheets/global.scss b/theseus_gui/src/assets/stylesheets/global.scss
index a677cf8c..ea8fedef 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/Instance.vue b/theseus_gui/src/components/ui/Instance.vue
index ceb74e18..743903b8 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,32 @@ 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.loader.charAt(0).toUpperCase() +
+            props.instance.metadata.loader.slice(1)
+          }}
+          {{ props.instance.metadata.game_version }}
+        </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 +51,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
new file mode 100644
index 00000000..6a515d4d
--- /dev/null
+++ b/theseus_gui/src/components/ui/InstanceInstallModal.vue
@@ -0,0 +1,297 @@
+<script setup>
+import {
+  Avatar,
+  Modal,
+  Button,
+  DownloadIcon,
+  PlusIcon,
+  Card,
+  UploadIcon,
+  XIcon,
+  RightArrowIcon,
+  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 { useRouter } from 'vue-router'
+import { create } from '@/helpers/profile'
+import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
+const router = useRouter()
+const versions = 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: (projectId, selectedVersion) => {
+    project.value = projectId
+    versions.value = selectedVersion
+    installModal.value.show()
+    searchFilter.value = ''
+  },
+})
+
+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'))
+    )
+  })
+
+  await installMod(instance.path, version.id)
+  await installVersionDependencies(instance, version)
+
+  instance.installed = true
+  instance.installing = false
+}
+
+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) => {
+    profile.installing = false
+    profile.installed = checkInstalled(profile, project.value)
+  })
+
+  return filtered
+})
+
+const toggleCreation = () => {
+  showCreation.value = !showCreation.value
+  name.value = null
+  icon.value = null
+  display_icon.value = null
+  gameVersion.value = null
+  loader.value = null
+}
+
+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 () => {
+  creatingInstance.value = true
+  const id = await create(
+    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]
+      : 'vanilla',
+    'latest',
+    icon.value
+  )
+
+  await installMod(id, versions.value[0].id)
+
+  await router.push({ path: `/instance/${encodeURIComponent(id)}` })
+  installModal.value.hide()
+  creatingInstance.value = false
+}
+
+const check_valid = computed(() => {
+  return name.value
+})
+</script>
+
+<template>
+  <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">
+          <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">
+        <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 />
+                <span class="no-wrap"> Upload Icon </span>
+              </Button>
+              <Button @click="reset_icon()">
+                <XIcon />
+                <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" />
+            <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
+              <RightArrowIcon />
+              {{ creatingInstance ? 'Creating...' : 'Create' }}
+            </Button>
+          </div>
+        </div>
+      </Card>
+      <div class="footer">
+        <Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
+          <PlusIcon />
+          {{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
+        </Button>
+        <Button @click="installModal.hide()">Cancel</Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.creation-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0;
+  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%;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.creation-dropdown {
+  width: min-content !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.creation-settings {
+  width: 100%;
+  margin-left: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.profiles {
+  max-height: 12rem;
+  overflow-y: auto;
+}
+
+.option {
+  width: calc(100%);
+  background: var(--color-raised-bg);
+  color: var(--color-base);
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.5rem;
+
+  img {
+    margin-right: 0.5rem;
+  }
+
+  .name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .profile-button {
+    padding: 0.5rem;
+  }
+}
+
+.profile-image {
+  --size: 2rem !important;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+</style>
diff --git a/theseus_gui/src/helpers/utils.js b/theseus_gui/src/helpers/utils.js
index 83238da9..9e9ff599 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':
@@ -10,3 +13,27 @@ export const releaseColor = (releaseType) => {
       return ''
   }
 }
+
+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 1cb5a94d..fc42b1da 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, onMounted, ref, watch } from 'vue'
 import { ofetch } from 'ofetch'
 import {
   Pagination,
@@ -14,17 +14,24 @@ import {
   ClientIcon,
   ServerIcon,
   AnimatedLogo,
+  NavRow,
+  formatCategoryHeader,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { useSearch } from '@/store/state'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'
 import { useRoute } from 'vue-router'
+import Instance from '@/components/ui/Instance.vue'
+
+const route = useRoute()
 
 const searchStore = useSearch()
+searchStore.projectType = route.params.projectType
+const showVersions = ref(true)
+const showLoaders = ref(true)
+
 const breadcrumbs = useBreadcrumbs()
-const route = useRoute()
-breadcrumbs.setContext({ name: 'Browse', link: route.path })
 
 const showSnapshots = ref(false)
 const loading = ref(true)
@@ -35,8 +42,39 @@ 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(
+    (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 (searchStore.instanceContext) {
+    showVersions.value = false
+    showLoaders.value = !(
+      searchStore.projectType === 'mod' || searchStore.projectType === 'resourcepack'
+    )
+  }
   if (shouldLoad === true) {
     loading.value = true
   }
@@ -47,13 +85,22 @@ 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) => {
@@ -62,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) => {
@@ -72,15 +119,21 @@ const switchPage = async (page) => {
   await getSearchResults()
 }
 
-const handleReset = async () => {
-  searchStore.resetFilters()
-  await getSearchResults()
-}
+watch(
+  () => route.params.projectType,
+  async (projectType) => {
+    searchStore.projectType = projectType ?? 'modpack'
+    breadcrumbs.setContext({ name: 'Browse', link: route.path })
+    await handleReset()
+    await switchPage(1)
+  }
+)
 </script>
 
 <template>
   <div class="search-container">
     <aside class="filter-panel">
+      <Instance v-if="searchStore.instanceContext" :instance="searchStore.instanceContext" small />
       <Button
         role="button"
         :disabled="
@@ -96,12 +149,13 @@ const handleReset = async () => {
         @click="handleReset"
         ><ClearIcon />Clear Filters</Button
       >
-      <div class="categories">
-        <h2>Categories</h2>
-        <div
-          v-for="category in categories.filter((cat) => cat.project_type === 'modpack')"
-          :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"
@@ -112,10 +166,20 @@ const handleReset = async () => {
           />
         </div>
       </div>
-      <div 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) => l.supported_project_types?.includes('modpack'))"
+          v-for="loader in loaders.filter((l) =>
+            l.supported_project_types?.includes(searchStore.projectType)
+          )"
           :key="loader"
         >
           <SearchFilter
@@ -128,7 +192,7 @@ const handleReset = async () => {
           />
         </div>
       </div>
-      <div class="environment">
+      <div v-if="searchStore.projectType !== 'datapack'" class="environment">
         <h2>Environments</h2>
         <SearchFilter
           v-model="searchStore.environments.client"
@@ -149,7 +213,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
@@ -183,6 +247,26 @@ const handleReset = async () => {
       </div>
     </aside>
     <div class="search">
+      <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' },
+                ]
+          "
+        />
+      </Card>
       <Card class="search-panel-container">
         <div class="search-panel">
           <div class="iconified-input">
@@ -190,7 +274,7 @@ const handleReset = async () => {
             <input
               v-model="searchStore.searchInput"
               type="text"
-              placeholder="Search modpacks..."
+              :placeholder="`Search ${searchStore.projectType}s...`"
               @input="getSearchResults"
             />
           </div>
@@ -243,12 +327,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"
@@ -265,6 +350,17 @@ const handleReset = async () => {
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss">
+.project-type-dropdown {
+  width: 100% !important;
+}
+
+.project-type-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 1rem;
+}
+
 .search-panel-container {
   display: flex;
   flex-direction: column;
@@ -318,14 +414,13 @@ const handleReset = async () => {
 
   .filter-panel {
     position: fixed;
-    width: 16rem;
+    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: 100%;
+    height: 100%;
+    max-height: calc(100vh - 3rem);
     overflow-y: auto;
 
     h2 {
@@ -353,8 +448,8 @@ const handleReset = async () => {
   }
 
   .search {
-    margin: 0 1rem 0 17rem;
-    width: 100%;
+    margin: 0 1rem 0 20rem;
+    width: calc(100% - 21rem);
 
     .loading {
       margin: 2rem;
diff --git a/theseus_gui/src/pages/Library.vue b/theseus_gui/src/pages/Library.vue
index bb9120c0..88a35dd7 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'
 import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
diff --git a/theseus_gui/src/pages/instance/Index.vue b/theseus_gui/src/pages/instance/Index.vue
index d22fa1a8..0a891b7b 100644
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -47,12 +47,16 @@ 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 { useBreadcrumbs } from '@/store/breadcrumbs'
 
+const route = useRoute()
+const searchStore = useSearch()
 const breadcrumbs = useBreadcrumbs()
 
-const route = useRoute()
 const instance = shallowRef(await get(route.params.id))
+searchStore.instanceContext = instance.value
+
 breadcrumbs.setName('Instance', instance.value.metadata.name)
 breadcrumbs.setContext({
   name: instance.value.metadata.name,
@@ -66,7 +70,7 @@ breadcrumbs.setContext({
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  width: 15rem;
+  width: 17rem;
 }
 
 Button {
@@ -117,7 +121,7 @@ Button {
 }
 
 .content {
-  margin-left: 18rem;
+  margin-left: 20rem;
 }
 
 .instance-info {
diff --git a/theseus_gui/src/pages/instance/Mods.vue b/theseus_gui/src/pages/instance/Mods.vue
index bc17602b..1103d041 100644
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -3,11 +3,11 @@
     <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"
@@ -16,9 +16,9 @@
             class="dropdown"
           />
         </span>
-        <Button color="primary">
+        <Button color="primary" @click="searchMod()">
           <PlusIcon />
-          Add Mods
+          <span class="no-wrap"> Add Content </span>
         </Button>
       </span>
     </div>
@@ -40,7 +40,7 @@
             <UpdatedIcon />
           </Button>
           <Button v-else disabled icon-only>
-            <CheckCircleIcon />
+            <CheckIcon />
           </Button>
         </div>
         <div class="table-cell table-text name-cell">
@@ -77,13 +77,17 @@ import {
   TrashIcon,
   PlusIcon,
   Card,
-  CheckCircleIcon,
+  CheckIcon,
   SearchIcon,
   UpdatedIcon,
   DropdownSelect,
 } 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: {
@@ -142,7 +146,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) => {
@@ -176,9 +180,17 @@ function updateSort(projects, sort) {
       })
   }
 }
+
+const searchMod = () => {
+  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;
@@ -219,4 +231,14 @@ function updateSort(projects, sort) {
 .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 91527367..65bcdb2b 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">
@@ -29,9 +30,15 @@
         </Categories>
         <hr class="card-divider" />
         <div class="button-group">
-          <Button color="primary" class="instance-button" @click="install(versions[0].id)">
-            <DownloadIcon />
-            Install
+          <Button
+            color="primary"
+            class="instance-button"
+            :disabled="installed === true || installing === true"
+            @click="install(null)"
+          >
+            <DownloadIcon v-if="!installed && !installing" />
+            <CheckIcon v-else-if="installed" />
+            {{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
           </Button>
           <a
             :href="`https://modrinth.com/${data.project_type}/${data.slug}`"
@@ -40,7 +47,7 @@
             class="btn"
           >
             <ExternalIcon />
-            Website
+            Site
           </a>
         </div>
         <hr class="card-divider" />
@@ -174,10 +181,12 @@
         :members="members"
         :dependencies="dependencies"
         :install="install"
+        :installed="installed"
       />
     </div>
   </div>
   <InstallConfirmModal ref="confirmModal" />
+  <InstanceInstallModal ref="modInstallModal" />
 </template>
 
 <script setup>
@@ -200,6 +209,7 @@ import {
   CodeIcon,
   formatNumber,
   ExternalIcon,
+  CheckIcon,
 } from 'omorphia'
 import {
   BuyMeACoffeeIcon,
@@ -210,23 +220,33 @@ 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 } 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 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'
 
+const searchStore = useSearch()
+
 const route = useRoute()
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 
 const confirmModal = ref(null)
+const modInstallModal = ref(null)
 const loaders = ref(await get_loaders())
 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),
@@ -234,6 +254,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(
@@ -246,6 +268,21 @@ watch(
 dayjs.extend(relativeTime)
 
 async function install(version) {
+  installing.value = true
+  let queuedVersionData
+
+  if (version) {
+    queuedVersionData = versions.value.find((v) => v.id === version)
+  } else {
+    if (data.value.project_type === 'modpack' || !instance.value) {
+      queuedVersionData = versions.value[0]
+    } else {
+      queuedVersionData = versions.value.find((v) =>
+        v.game_versions.includes(data.value.game_versions[0])
+      )
+    }
+  }
+
   if (data.value.project_type === 'modpack') {
     const packs = Object.values(await list())
     if (
@@ -254,12 +291,48 @@ async function install(version) {
         .map((value) => value.metadata)
         .find((pack) => pack.linked_data?.project_id === data.value.id)
     ) {
-      let id = await pack_install(version)
+      let id = await packInstall(queuedVersionData.id)
       await router.push({ path: `/instance/${encodeURIComponent(id)}` })
     } else {
-      confirmModal.value.show(version)
+      confirmModal.value.show(queuedVersionData.id)
+    }
+  } else {
+    if (instance.value) {
+      if (!version) {
+        const gameVersion = instance.value.metadata.game_version
+        const loader = instance.value.metadata.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')
+              : true)
+        )
+        if (!selectedVersion) {
+          installing.value = false
+          return
+        }
+        queuedVersionData = selectedVersion
+        await installMod(instance.value.path, selectedVersion.id)
+      } else {
+        await installMod(instance.value.path, queuedVersionData.id)
+      }
+
+      installVersionDependencies(instance.value, queuedVersionData)
+
+      installed.value = true
+    } else {
+      if (version) {
+        modInstallModal.value.show(data.value.id, [
+          versions.value.find((v) => v.id === queuedVersionData.id),
+        ])
+      } else {
+        modInstallModal.value.show(data.value.id, versions.value)
+      }
     }
   }
+
+  installing.value = false
 }
 </script>
 
@@ -271,8 +344,12 @@ async function install(version) {
 }
 
 .project-sidebar {
+  position: fixed;
   width: 20rem;
-  min-width: 20rem;
+  min-height: 100vh;
+  height: fit-content;
+  max-height: 100vh;
+  overflow-y: auto;
   background: var(--color-raised-bg);
   padding: 1rem;
 }
@@ -289,6 +366,7 @@ async function install(version) {
   flex-direction: column;
   width: 100%;
   padding: 1rem;
+  margin-left: 20rem;
 }
 
 .button-group {
@@ -398,4 +476,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/pages/project/Version.vue b/theseus_gui/src/pages/project/Version.vue
index 1867cff9..c648f4b5 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'
@@ -210,6 +214,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 ed0042b0..0adbd77a 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,14 @@
         @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 +132,8 @@
 import {
   Card,
   Button,
-  CheckCircleIcon,
+  CheckIcon,
+  ClearIcon,
   Badge,
   DownloadIcon,
   Checkbox,
@@ -155,6 +162,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 5e968971..a56e54c6 100644
--- a/theseus_gui/src/routes.js
+++ b/theseus_gui/src/routes.js
@@ -18,7 +18,7 @@ export default new createRouter({
       },
     },
     {
-      path: '/browse',
+      path: '/browse/:projectType',
       name: 'Browse',
       component: Pages.Browse,
       meta: {
diff --git a/theseus_gui/src/store/search.js b/theseus_gui/src/store/search.js
index 4af8b63a..72207d8d 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: {
@@ -18,10 +19,15 @@ export const useSearch = defineStore('searchStore', {
     activeVersions: [],
     openSource: false,
     limit: 20,
+    instanceContext: null,
   }),
   actions: {
     getQueryString() {
-      let andFacets = ['project_type:modpack']
+      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) => {
@@ -32,7 +38,18 @@ 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 if (this.instanceContext && this.projectType === 'mod') {
+        ;[
+          ...andFacets,
+          `categories:${encodeURIComponent(this.instanceContext.metadata.loader)}`,
+        ].forEach((f) => (formattedAndFacets += `["${f}"],`))
+      } else {
+        andFacets.forEach((f) => (formattedAndFacets += `["${f}"],`))
+      }
       formattedAndFacets = formattedAndFacets.slice(0, formattedAndFacets.length - 1)
       formattedAndFacets += ''