Wire Profile Backend to Frontend (#71)

* Search updates * fixes2 * Some more work * start instance page wiring * Pack installation + Profile viewing * Remove print statement * Fix disappearing profiles * fix compile err * Finish Instance Running * remove print statement * fix prettier * Fix clippy + early return
2023-04-08 18:54:38 -07:00
parent 764d75181f
commit a62d931fe2
27 changed files with 502 additions and 739 deletions
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { watch } from 'vue'
-import { RouterView, useRoute, useRouter, RouterLink } from 'vue-router'
+import { ref, watch } from 'vue'
+import { RouterView, RouterLink } from 'vue-router'
 import {
  ChevronLeftIcon,
  ChevronRightIcon,
@@ -13,9 +13,7 @@ import {
 } from 'omorphia'
 import { useTheming } from '@/store/state'
 import { toggleTheme } from '@/helpers/theme'
-
-const route = useRoute()
-const router = useRouter()
+import { list } from '@/helpers/profile'

 const themeStore = useTheming()

@@ -24,6 +22,16 @@ toggleTheme(themeStore.darkTheme)
 watch(themeStore, (newState) => {
  toggleTheme(newState.darkTheme)
 })
+
+const installedMods = ref(0)
+list().then(
+  (profiles) =>
+    (installedMods.value = Object.values(profiles).reduce(
+      (acc, val) => acc + Object.keys(val.projects).length,
+      0
+    ))
+)
+// TODO: add event when profiles update to update installed mods count
 </script>

 <template>
@@ -47,13 +55,12 @@ watch(themeStore, (newState) => {
    <div class="view">
      <div class="appbar">
        <section class="navigation-controls">
-          <ChevronLeftIcon @click="router.back()" />
-          <ChevronRightIcon @click="router.forward()" />
-          <p>{{ route.name }}</p>
+          <ChevronLeftIcon @click="$router.back()" />
+          <ChevronRightIcon @click="$router.forward()" />
+          <p>{{ $route.name }}</p>
        </section>
        <section class="mod-stats">
-          <p>Updating 2 mods...</p>
-          <p>123 mods installed</p>
+          <p>{{ installedMods }} mods installed</p>
        </section>
      </div>
      <div class="router-view">
@@ -74,36 +81,32 @@ watch(themeStore, (newState) => {

  .router-view {
    width: 100%;
-    height: calc(100% - 2rem);
+    height: 100%;
    overflow: auto;
    overflow-x: hidden;
-    margin-top: 2rem;
  }

  .view {
    margin-left: 5rem;
    width: calc(100% - 5rem);
    height: calc(100%);
+
    .appbar {
-      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
-      height: 2rem;
-      width: calc(100% - 5rem);
-      border-bottom: 1px solid rgba(64, 67, 74, 0.2);
-      background: var(--color-button-bg);
+      background: #40434a;
      text-align: center;
+      padding: 0.5rem 1rem;

      .navigation-controls {
        display: inherit;
        align-items: inherit;
        justify-content: stretch;
-        width: 30%;
-        font-size: 0.9rem;

        svg {
-          width: 18px;
+          width: 1.25rem;
+          height: 1.25rem;
          transition: all ease-in-out 0.1s;

          &:hover {
@@ -130,13 +133,6 @@ watch(themeStore, (newState) => {
        display: inherit;
        align-items: inherit;
        justify-content: flex-end;
-        width: 50%;
-        font-size: 0.8rem;
-        margin-right: 1rem;
-
-        p:nth-child(1) {
-          margin-right: 0.55rem;
-        }
      }
    }
  }
--- a/theseus_gui/src/components/ui/Instance.vue
+++ b/theseus_gui/src/components/ui/Instance.vue
@@ -2,11 +2,9 @@
 import { RouterLink } from 'vue-router'
 import { Card } from 'omorphia'
 import { PlayIcon } from '@/assets/icons'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+
 const props = defineProps({
-  display: {
-    type: String,
-    default: '',
-  },
  instance: {
    type: Object,
    default() {
@@ -18,40 +16,22 @@ const props = defineProps({

 <template>
  <div>
-    <RouterLink
-      v-if="display === 'list'"
-      class="instance-list-item"
-      :to="`/instance/${props.instance.id}`"
-      >{{ props.instance.name }}</RouterLink
-    >
-    <Card
-      v-else-if="display === 'card'"
-      class="instance-card-item"
-      @click="$router.push(`/instance/${props.instance.id}`)"
-    >
-      <img :src="props.instance.img" alt="Trending mod card" />
-      <div class="project-info">
-        <p class="title">{{ props.instance.name }}</p>
-        <p class="description">{{ props.instance.version }}</p>
-      </div>
-      <div class="cta"><PlayIcon /></div>
-    </Card>
+    <RouterLink :to="`/instance/${encodeURIComponent(props.instance.path)}`">
+      <Card 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>
+          <p class="description">
+            {{ props.instance.metadata.loader }} {{ props.instance.metadata.game_version }}
+          </p>
+        </div>
+        <div class="cta"><PlayIcon /></div>
+      </Card>
+    </RouterLink>
  </div>
 </template>

 <style lang="scss" scoped>
-.instance-list-item {
-  display: inline-block;
-  margin: 0.25rem auto;
-  cursor: pointer;
-  transition: all ease-out 0.1s;
-  font-size: 0.8rem;
-  color: var(--color-primary);
-  &:hover {
-    text-decoration: none;
-    filter: brightness(150%);
-  }
-}
 .instance-card-item {
  display: flex;
  flex-direction: column;
@@ -60,6 +40,7 @@ const props = defineProps({
  cursor: pointer;
  padding: 0.75rem;
  transition: 0.1s ease-in-out all;
+
  &:hover {
    filter: brightness(0.85);
    .cta {
@@ -67,6 +48,7 @@ const props = defineProps({
      bottom: 4.5rem;
    }
  }
+
  .cta {
    position: absolute;
    display: flex;
@@ -82,7 +64,7 @@ const props = defineProps({
    transition: 0.3s ease-in-out bottom, 0.1s ease-in-out opacity;
    cursor: pointer;
    svg {
-      color: #fff;
+      color: var(--color-accent-contrast);
      width: 1.5rem;
      height: 1.5rem;
    }
@@ -101,7 +83,7 @@ const props = defineProps({
    width: 100%;
    .title {
      color: var(--color-contrast);
-      max-width: 6rem;
+      //max-width: 10rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
@@ -112,6 +94,7 @@ const props = defineProps({
      display: inline-block;
    }
    .description {
+      color: var(--color-base);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
@@ -120,12 +103,8 @@ const props = defineProps({
      font-size: 0.775rem;
      line-height: 125%;
      margin: 0.25rem 0 0;
+      text-transform: capitalize;
    }
  }
 }
-.dark-mode {
-  .cta > svg {
-    color: #000;
-  }
-}
 </style>
--- a/theseus_gui/src/helpers/pack.js
+++ b/theseus_gui/src/helpers/pack.js
@@ -6,11 +6,11 @@
 import { invoke } from '@tauri-apps/api/tauri'

 // Installs pack from a version ID
-export async function install(version_id) {
-  return await invoke('pack_install_version_id', version_id)
+export async function install(versionId) {
+  return await invoke('pack_install_version_id', { versionId })
 }

 // Installs pack from a path
 export async function install_from_file(path) {
-  return await invoke('pack_install_file', path)
+  return await invoke('pack_install_file', { path })
 }
--- a/theseus_gui/src/helpers/profile.js
+++ b/theseus_gui/src/helpers/profile.js
@@ -35,12 +35,12 @@ export async function list() {

 // Run Minecraft using a pathed profile
 // Returns PID of child
-export async function run(path, credentials) {
-  return await invoke('profile_run', { path, credentials })
+export async function run(path) {
+  return await invoke('profile_run', { path })
 }

 // Run Minecraft using a pathed profile
 // Waits for end
-export async function run_wait(path, credentials) {
-  return await invoke('profile_run_wait', { path, credentials })
+export async function run_wait(path) {
+  return await invoke('profile_run_wait', { path })
 }
--- a/theseus_gui/src/main.js
+++ b/theseus_gui/src/main.js
@@ -4,7 +4,13 @@ import App from '@/App.vue'
 import { createPinia } from 'pinia'
 import '../node_modules/omorphia/dist/style.css'
 import '@/assets/stylesheets/global.scss'
+import FloatingVue from 'floating-vue'
+import { initialize_state } from '@/helpers/state'

 const pinia = createPinia()

-createApp(App).use(router).use(pinia).mount('#app')
+initialize_state()
+  .then(() => {
+    createApp(App).use(router).use(pinia).use(FloatingVue).mount('#app')
+  })
+  .catch((err) => console.error(err))
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { ofetch } from 'ofetch'
 import {
  Pagination,
@@ -13,39 +13,35 @@ import {
  Card,
  ClientIcon,
  ServerIcon,
+  AnimatedLogo,
 } from 'omorphia'
 import Multiselect from 'vue-multiselect'
 import { useSearch } from '@/store/state'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'

-// Pull search store
 const searchStore = useSearch()

-const selectedVersions = ref([])
 const showSnapshots = ref(false)
+const loading = ref(true)

-// Sets the clear button's disabled attr
-const isClearDisabled = computed({
-  get() {
-    if (searchStore.facets.length > 0) return false
-    if (searchStore.orFacets.length > 0) return false
+const [categories, loaders, availableGameVersions] = await Promise.all([
+  get_categories(),
+  get_loaders(),
+  get_game_versions(),
+])

-    if (searchStore.environments.server === true || searchStore.environments.client === true)
-      return false
-    if (searchStore.openSource === true) return false
-    if (selectedVersions.value.length > 0) return false
-    return true
-  },
-})
+const getSearchResults = async (shouldLoad = false) => {
+  const queryString = searchStore.getQueryString()
+  if (shouldLoad === true) {
+    loading.value = true
+  }
+  const response = await ofetch(`https://api.modrinth.com/v2/search${queryString}`)
+  loading.value = false
+  searchStore.setSearchResults(response)
+}

-const categories = await get_categories()
-const loaders = await get_loaders()
-const availableGameVersions = await get_game_versions()
+getSearchResults(true)

-/**
- * Adds or removes facets from state
- * @param {String} facet The facet to commit to state
- */
 const toggleFacet = async (facet) => {
  const index = searchStore.facets.indexOf(facet)

@@ -55,10 +51,6 @@ const toggleFacet = async (facet) => {
  await getSearchResults()
 }

-/**
- * Adds or removes orFacets from state
- * @param {String} orFacet The orFacet to commit to state
- */
 const toggleOrFacet = async (orFacet) => {
  const index = searchStore.orFacets.indexOf(orFacet)

@@ -68,68 +60,15 @@ const toggleOrFacet = async (orFacet) => {
  await getSearchResults()
 }

-/**
- * Makes the API request to labrinth
- */
-const getSearchResults = async () => {
-  const queryString = searchStore.getQueryString()
-  const response = await ofetch(`https://api.modrinth.com/v2/search${queryString}`)
-
-  searchStore.setSearchResults(response)
-}
-await getSearchResults()
-
-/**
- * For when user enters input in search bar
- */
-const refreshSearch = async () => {
-  await getSearchResults()
-}
-
-/**
- * For when the user changes the Sort dropdown
- * @param {Object} e Event param to see selected option
- */
-const handleSort = async (e) => {
-  searchStore.filter = e.option
-  await getSearchResults()
-}
-
-/**
- * For when user changes Limit dropdown
- * @param {Object} e Event param to see selected option
- */
-const handleLimit = async (e) => {
-  searchStore.limit = e.option
-  await getSearchResults()
-}
-
-/**
- * For when user pages results
- * @param {Number} page The new page to display
- */
 const switchPage = async (page) => {
  searchStore.currentPage = parseInt(page)
  if (page === 1) searchStore.offset = 0
-  else searchStore.offset = searchStore.currentPage * 10 - 10
+  else searchStore.offset = (searchStore.currentPage - 1) * searchStore.limit
  await getSearchResults()
 }

-/**
- * For when a user interacts with version filters
- */
-const handleVersionSelect = async () => {
-  searchStore.activeVersions = selectedVersions.value.map((ver) => ver)
-  await getSearchResults()
-}
-
-/**
- * For when user resets all filters
- */
 const handleReset = async () => {
  searchStore.resetFilters()
-  selectedVersions.value = []
-  isClearDisabled.value = true
  await getSearchResults()
 }
 </script>
@@ -137,7 +76,19 @@ const handleReset = async () => {
 <template>
  <div class="search-container">
    <aside class="filter-panel">
-      <Button role="button" :disabled="isClearDisabled" @click="handleReset"
+      <Button
+        role="button"
+        :disabled="
+          !(
+            searchStore.facets.length > 0 ||
+            searchStore.orFacets.length > 0 ||
+            searchStore.environments.server === true ||
+            searchStore.environments.client === true ||
+            searchStore.openSource === true ||
+            searchStore.activeVersions.length > 0
+          )
+        "
+        @click="handleReset"
        ><ClearIcon />Clear Filters</Button
      >
      <div class="categories">
@@ -177,18 +128,18 @@ const handleReset = async () => {
        <SearchFilter
          v-model="searchStore.environments.client"
          display-name="Client"
-          :facet-name="client"
+          facet-name="client"
          class="filter-checkbox"
-          @click="refreshSearch"
+          @click="getSearchResults"
        >
          <ClientIcon aria-hidden="true" />
        </SearchFilter>
        <SearchFilter
          v-model="searchStore.environments.server"
          display-name="Server"
-          :facet-name="server"
+          facet-name="server"
          class="filter-checkbox"
-          @click="refreshSearch"
+          @click="getSearchResults"
        >
          <ServerIcon aria-hidden="true" />
        </SearchFilter>
@@ -197,7 +148,7 @@ const handleReset = async () => {
        <h2>Minecraft versions</h2>
        <Checkbox v-model="showSnapshots" class="filter-checkbox">Show snapshots</Checkbox>
        <multiselect
-          v-model="selectedVersions"
+          v-model="searchStore.activeVersions"
          :options="
            showSnapshots
              ? availableGameVersions.map((x) => x.version)
@@ -211,14 +162,17 @@ const handleReset = async () => {
          :close-on-select="false"
          :clear-search-on-select="false"
          :show-labels="false"
-          :selectable="() => selectedVersions.length <= 6"
          placeholder="Choose versions..."
-          @update:model-value="handleVersionSelect"
+          @update:model-value="getSearchResults"
        />
      </div>
      <div class="open-source">
        <h2>Open source</h2>
-        <Checkbox v-model="searchStore.openSource" class="filter-checkbox" @click="refreshSearch">
+        <Checkbox
+          v-model="searchStore.openSource"
+          class="filter-checkbox"
+          @click="getSearchResults"
+        >
          Open source
        </Checkbox>
      </div>
@@ -231,12 +185,13 @@ const handleReset = async () => {
            <input
              v-model="searchStore.searchInput"
              type="text"
-              placeholder="Search.."
-              @input="refreshSearch"
+              placeholder="Search modpacks..."
+              @input="getSearchResults"
            />
          </div>
          <span>Sort by</span>
          <DropdownSelect
+            v-model="searchStore.filter"
            name="Sort dropdown"
            :options="[
              'Relevance',
@@ -245,19 +200,18 @@ const handleReset = async () => {
              'Recently published',
              'Recently updated',
            ]"
-            :default-value="searchStore.filter"
-            :model-value="searchStore.filter"
            class="sort-dropdown"
-            @change="handleSort"
+            @change="getSearchResults"
          />
          <span>Show per page</span>
          <DropdownSelect
+            v-model="searchStore.limit"
            name="Limit dropdown"
-            :options="['5', '10', '15', '20', '50', '100']"
+            :options="[5, 10, 15, 20, 50, 100]"
            :default-value="searchStore.limit.toString()"
            :model-value="searchStore.limit.toString()"
            class="limit-dropdown"
-            @change="handleLimit"
+            @change="getSearchResults"
          />
        </div>
      </Card>
@@ -266,7 +220,8 @@ const handleReset = async () => {
        :count="searchStore.pageCount"
        @switch-page="switchPage"
      />
-      <section class="project-list display-mode--list instance-results" role="list">
+      <AnimatedLogo v-if="loading" class="loading" />
+      <section v-else class="project-list display-mode--list instance-results" role="list">
        <ProjectCard
          v-for="result in searchStore.searchResults"
          :id="`${result?.project_id}/`"
@@ -396,18 +351,9 @@ const handleReset = async () => {
    margin: 0 1rem 0 17rem;
    width: 100%;

-    .instance-project-item {
-      width: 100%;
-      height: auto;
-      cursor: pointer;
-    }
-
-    .result-project-item {
-      a {
-        &:hover {
-          text-decoration: none !important;
-        }
-      }
+    .loading {
+      margin: 2rem;
+      text-align: center;
    }
  }
 }
--- a/theseus_gui/src/pages/Index.vue
+++ b/theseus_gui/src/pages/Index.vue
@@ -1,22 +1,17 @@
 <script setup>
-import { useInstances, useNews } from '@/store/state'
 import RowDisplay from '@/components/RowDisplay.vue'
+import { shallowRef } from 'vue'
+import { list } from '@/helpers/profile.js'

-const instanceStore = useInstances()
-const newsStore = useNews()
-instanceStore.fetchInstances()
-newsStore.fetchNews()
-
-// Remove once state is populated with real data
-const recentInstances = instanceStore.instances.slice(0, 4)
-const popularInstances = instanceStore.instances.filter((i) => i.downloads > 50 || i.trending)
+const profiles = await list()
+const recentInstances = shallowRef(Object.values(profiles))
 </script>

 <template>
  <div class="page-container">
    <RowDisplay label="Jump back in" :instances="recentInstances" :can-paginate="false" />
-    <RowDisplay label="Popular packs" :instances="popularInstances" :can-paginate="true" />
-    <RowDisplay label="News & updates" :news="newsStore.news" :can-paginate="true" />
+    <RowDisplay label="Popular packs" :instances="recentInstances" :can-paginate="true" />
+    <RowDisplay label="Test" :instances="recentInstances" :can-paginate="true" />
  </div>
 </template>

--- a/theseus_gui/src/pages/Library.vue
+++ b/theseus_gui/src/pages/Library.vue
@@ -1,14 +1,15 @@
 <script setup>
-import { useInstances } from '@/store/state'
 import GridDisplay from '@/components/GridDisplay.vue'
+import { shallowRef } from 'vue'
+import { list } from '@/helpers/profile.js'

-const instances = useInstances()
-instances.fetchInstances()
+const profiles = await list()
+const instances = shallowRef(Object.values(profiles))
 </script>

 <template>
  <div>
-    <GridDisplay label="Instances" :instances="instances.instances" />
-    <GridDisplay label="Modpacks" :instances="instances.instances" />
+    <GridDisplay label="Instances" :instances="instances" />
+    <GridDisplay label="Modpacks" :instances="instances" />
  </div>
 </template>
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -2,13 +2,15 @@
  <div class="instance-container">
    <div class="side-cards">
      <Card class="instance-card">
-        <Avatar size="lg" :src="getInstance(instanceStore).img" />
+        <Avatar size="lg" :src="convertFileSrc(instance.metadata.icon)" />
        <div class="instance-info">
-          <h2 class="name">{{ getInstance(instanceStore).name }}</h2>
-          Fabric {{ getInstance(instanceStore).version }}
+          <h2 class="name">{{ instance.metadata.name }}</h2>
+          <span class="metadata"
+            >{{ instance.metadata.loader }} {{ instance.metadata.game_version }}</span
+          >
        </div>
        <span class="button-group">
-          <Button color="primary" class="instance-button">
+          <Button color="primary" class="instance-button" @click="run($route.params.id)">
            <PlayIcon />
            Play
          </Button>
@@ -18,15 +20,15 @@
        </span>
      </Card>
      <div class="pages-list">
-        <RouterLink :to="`/instance/${$route.params.id}/`" class="btn">
+        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
          <BoxIcon />
          Mods
        </RouterLink>
-        <RouterLink :to="`/instance/${$route.params.id}/options`" class="btn">
+        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
          <SettingsIcon />
          Options
        </RouterLink>
-        <RouterLink :to="`/instance/${$route.params.id}/logs`" class="btn">
+        <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
          <FileIcon />
          Logs
        </RouterLink>
@@ -34,26 +36,20 @@
    </div>
    <div class="content">
      <Promotion />
-      <router-view />
+      <router-view :instance="instance" />
    </div>
  </div>
 </template>
 <script setup>
 import { BoxIcon, SettingsIcon, FileIcon, Button, Avatar, Card, Promotion } from 'omorphia'
 import { PlayIcon, OpenFolderIcon } from '@/assets/icons'
-import { useInstances } from '@/store/state'
+import { get, run } from '@/helpers/profile'
+import { useRoute } from 'vue-router'
+import { shallowRef } from 'vue'
+import { convertFileSrc } from '@tauri-apps/api/tauri'

-const instanceStore = useInstances()
-instanceStore.fetchInstances()
-</script>
-<script>
-export default {
-  methods: {
-    getInstance(instanceStore) {
-      return instanceStore.instances.find((i) => i.id === parseInt(this.$route.params.id))
-    },
-  },
-}
+const route = useRoute()
+const instance = shallowRef(await get(route.params.id))
 </script>

 <style scoped lang="scss">
@@ -101,6 +97,10 @@ Button {
  color: var(--color-contrast);
 }

+.metadata {
+  text-transform: capitalize;
+}
+
 .instance-container {
  display: flex;
  flex-direction: row;
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -10,6 +10,7 @@
          Sort By
          <DropdownSelect
            v-model="sortFilter"
+            name="sort-by"
            :options="['Name', 'Version', 'Author']"
            default-value="Name"
            class="dropdown"
@@ -33,9 +34,9 @@
        <div class="table-cell table-text">Author</div>
        <div class="table-cell table-text">Actions</div>
      </div>
-      <div v-for="mod in search" :key="mod.name" class="table-row">
+      <div v-for="mod in search" :key="mod.file_name" class="table-row">
        <div class="table-cell table-text">
-          <Button v-if="mod.outdated" icon-only>
+          <Button v-if="true" icon-only>
            <UpdatedIcon />
          </Button>
          <Button v-else disabled icon-only>
@@ -43,10 +44,14 @@
          </Button>
        </div>
        <div class="table-cell table-text name-cell">
-          <router-link :to="`/project/${mod.slug}/`" class="mod-text">
+          <router-link v-if="mod.slug" :to="`/project/${mod.slug}/`" class="mod-text">
            <Avatar :src="mod.icon" />
            {{ mod.name }}
          </router-link>
+          <div v-else class="mod-text">
+            <Avatar :src="mod.icon" />
+            {{ mod.name }}
+          </div>
        </div>
        <div class="table-cell table-text">{{ mod.version }}</div>
        <div class="table-cell table-text">{{ mod.author }}</div>
@@ -54,118 +59,17 @@
          <Button icon-only>
            <TrashIcon />
          </Button>
-          <input id="switch-1" type="checkbox" class="switch stylized-toggle" checked />
+          <input
+            id="switch-1"
+            type="checkbox"
+            class="switch stylized-toggle"
+            :checked="mod.disabled"
+          />
        </div>
      </div>
    </div>
  </Card>
 </template>
-
-<script>
-export default {
-  name: 'Mods',
-  data() {
-    return {
-      searchFilter: '',
-      sortFilter: '',
-      mods: [
-        {
-          name: 'Fabric API',
-          slug: 'fabric-api',
-          icon: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
-          version: '0.76.0+1.19.4',
-          author: 'modmuss50',
-          description:
-            'Lightweight and modular API providing common hooks and intercompatibility measures utilized by mods using the Fabric toolchain.',
-          outdated: true,
-        },
-        {
-          name: 'Spirit',
-          slug: 'spirit',
-          icon: 'https://cdn.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png',
-          version: '2.2.4',
-          author: 'CodexAdrian',
-          description: 'Create your own configurable mob spawner!',
-          outdated: true,
-        },
-        {
-          name: 'Botarium',
-          slug: 'botarium',
-          icon: 'https://cdn.modrinth.com/data/2u6LRnMa/98b286b0d541ad4f9409e0af3df82ad09403f179.gif',
-          version: '2.0.5',
-          author: 'CodexAdrian',
-          description:
-            'A crossplatform API for devs that makes transfer and storage of items, fluids and energy easier, as well as some other helpful things',
-          outdated: true,
-        },
-        {
-          name: 'Tempad',
-          slug: 'tempad',
-          icon: 'https://cdn.modrinth.com/data/gKNwt7xu/icon.gif',
-          version: '2.2.4',
-          author: 'CodexAdrian',
-          description: 'Create a portal to anywhere from anywhere',
-          outdated: false,
-        },
-        {
-          name: 'Sodium',
-          slug: 'sodium',
-          icon: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
-          version: '0.4.10',
-          author: 'jellysquid3',
-          description: 'Modern rendering engine and client-side optimization mod for Minecraft',
-          outdated: false,
-        },
-      ],
-    }
-  },
-  computed: {
-    search() {
-      const filtered = this.mods.filter((mod) => {
-        return mod.name.toLowerCase().includes(this.searchFilter.toLowerCase())
-      })
-
-      return this.updateSort(filtered, this.sortFilter)
-    },
-  },
-  methods: {
-    updateSort(projects, sort) {
-      switch (sort) {
-        case 'Version':
-          return projects.slice().sort((a, b) => {
-            if (a.version < b.version) {
-              return -1
-            }
-            if (a.version > b.version) {
-              return 1
-            }
-            return 0
-          })
-        case 'Author':
-          return projects.slice().sort((a, b) => {
-            if (a.author < b.author) {
-              return -1
-            }
-            if (a.author > b.author) {
-              return 1
-            }
-            return 0
-          })
-        default:
-          return projects.slice().sort((a, b) => {
-            if (a.name < b.name) {
-              return -1
-            }
-            if (a.name > b.name) {
-              return 1
-            }
-            return 0
-          })
-      }
-    },
-  },
-}
-</script>
 <script setup>
 import {
  Avatar,
@@ -178,6 +82,97 @@ import {
  UpdatedIcon,
  DropdownSelect,
 } from 'omorphia'
+import { computed, ref, shallowRef } from 'vue'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const projects = shallowRef([])
+for (const project of Object.values(props.instance.projects)) {
+  if (project.metadata.type === 'modrinth') {
+    let owner = project.metadata.members.find((x) => x.role === 'Owner')
+    projects.value.push({
+      name: project.metadata.project.title,
+      slug: project.metadata.project.slug,
+      author: owner ? owner.user.username : null,
+      version: project.metadata.version.version_number,
+      file_name: project.file_name,
+      icon: project.metadata.project.icon_url,
+      disabled: project.disabled,
+    })
+  } else if (project.metadata.type === 'inferred') {
+    projects.value.push({
+      name: project.metadata.title ?? project.file_name,
+      author: project.metadata.authors[0],
+      version: project.metadata.version,
+      file_name: project.file_name,
+      icon: project.metadata.icon ? convertFileSrc(project.metadata.icon) : null,
+      disabled: project.disabled,
+    })
+  } else {
+    projects.value.push({
+      name: project.file_name,
+      author: '',
+      version: null,
+      file_name: project.file_name,
+      icon: null,
+      disabled: project.disabled,
+    })
+  }
+}
+
+const searchFilter = ref('')
+const sortFilter = ref('')
+
+const search = computed(() => {
+  const filtered = projects.value.filter((mod) => {
+    return mod.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+  })
+
+  return updateSort(filtered, sortFilter.value)
+})
+
+function updateSort(projects, sort) {
+  switch (sort) {
+    case 'Version':
+      return projects.slice().sort((a, b) => {
+        if (a.version < b.version) {
+          return -1
+        }
+        if (a.version > b.version) {
+          return 1
+        }
+        return 0
+      })
+    case 'Author':
+      return projects.slice().sort((a, b) => {
+        if (a.author < b.author) {
+          return -1
+        }
+        if (a.author > b.author) {
+          return 1
+        }
+        return 0
+      })
+    default:
+      return projects.slice().sort((a, b) => {
+        if (a.name < b.name) {
+          return -1
+        }
+        if (a.name > b.name) {
+          return 1
+        }
+        return 0
+      })
+  }
+}
 </script>

 <style scoped lang="scss">
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -22,7 +22,6 @@
          ]"
        >
          <EnvironmentIndicator
-            :type-only="moderation"
            :client-side="data.client_side"
            :server-side="data.server_side"
            :type="data.project_type"
@@ -30,7 +29,7 @@
        </Categories>
        <hr class="card-divider" />
        <div class="button-group">
-          <Button color="primary" class="instance-button">
+          <Button color="primary" class="instance-button" @click="install">
            <DownloadIcon />
            Install
          </Button>
@@ -209,6 +208,7 @@ import {
  OpenCollectiveIcon,
 } from '@/assets/external'
 import { get_categories, get_loaders } from '@/helpers/tags'
+import { install as pack_install } from '@/helpers/pack'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ofetch } from 'ofetch'
@@ -230,11 +230,20 @@ const [data, versions, members, dependencies] = await Promise.all([
 watch(
  () => route.params.id,
  () => {
-    router.go()
+    if (route.params.id) router.go()
  }
 )

 dayjs.extend(relativeTime)
+
+async function install() {
+  if (data.value.project_type === 'modpack') {
+    let id = await pack_install(versions.value[0].id)
+
+    let router = useRouter()
+    await router.push({ path: `/instance/${encodeURIComponent(id)}` })
+  }
+}
 </script>

 <style scoped lang="scss">
--- a/theseus_gui/src/store/instances.js
+++ b/theseus_gui/src/store/instances.js
@@ -1,115 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useInstances = defineStore('instanceStore', {
-  state: () => ({
-    instances: [],
-  }),
-  actions: {
-    fetchInstances() {
-      // Fetch from Tauri backend. We will repurpose this to get current instances, news, and popular packs. This action is distinct from the search action
-      const instances = [
-        {
-          id: 1,
-          name: 'Fabulously Optimized',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.18.1',
-          downloads: 10,
-          trending: true,
-          img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
-        },
-        {
-          id: 2,
-          name: 'New Caves',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.18 ',
-          downloads: 8,
-          trending: true,
-          img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
-        },
-        {
-          id: 3,
-          name: 'All the Mods 6',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.16.5',
-          downloads: 4,
-          trending: true,
-          img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
-        },
-        {
-          id: 4,
-          name: 'Bees',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.15.2',
-          downloads: 9,
-          trending: false,
-          img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
-        },
-        {
-          id: 5,
-          name: 'SkyFactory 4',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.12.2',
-          downloads: 1000,
-          trending: false,
-          img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
-        },
-        {
-          id: 6,
-          name: 'RLCraft',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.12.2',
-          downloads: 10000,
-          trending: false,
-          img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
-        },
-        {
-          id: 7,
-          name: 'Regrowth',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.7.10',
-          downloads: 1000,
-          trending: false,
-          img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
-        },
-        {
-          id: 8,
-          name: 'Birds',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.15.2',
-          downloads: 9,
-          trending: false,
-          img: 'https://avatars.githubusercontent.com/u/83074853?v=4',
-        },
-        {
-          id: 9,
-          name: 'Dogs',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.15.2',
-          downloads: 9,
-          trending: false,
-          img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
-        },
-        {
-          id: 10,
-          name: 'Cats',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.15.2',
-          downloads: 9,
-          trending: false,
-          img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
-        },
-        {
-          id: 11,
-          name: 'Rabbits',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-          version: '1.15.2',
-          downloads: 9,
-          trending: false,
-          img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
-        },
-      ]
-
-      this.instances = [...instances]
-    },
-  },
-})
--- a/theseus_gui/src/store/news.js
+++ b/theseus_gui/src/store/news.js
@@ -1,35 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useNews = defineStore('newsStore', {
-  state: () => ({ news: [] }),
-  actions: {
-    fetchNews() {
-      // Fetch from backend.
-      const news = [
-        {
-          id: 1,
-          headline: 'Caves & Cliffs Update: Part II Dev Q&A',
-          blurb: 'Your questions, answered!',
-          source: 'From Minecraft.Net',
-          img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
-        },
-        {
-          id: 2,
-          headline: 'Project of the WeeK: Gobblygook',
-          blurb: 'Your questions, answered!',
-          source: 'Modrinth Blog',
-          img: 'https://avatars.githubusercontent.com/t/3923733?s=280&v=4',
-        },
-        {
-          id: 3,
-          headline: 'Oreo makes a launcher',
-          blurb: 'What did it take?',
-          source: 'Modrinth Blog',
-          img: 'https://avatars.githubusercontent.com/u/30800863?v=4',
-        },
-      ]
-
-      this.news = [...news]
-    },
-  },
-})
--- a/theseus_gui/src/store/search.js
+++ b/theseus_gui/src/store/search.js
@@ -36,6 +36,7 @@ export const useSearch = defineStore('searchStore', {
      formattedAndFacets = formattedAndFacets.slice(0, formattedAndFacets.length - 1)
      formattedAndFacets += ''

+      // TODO: fix me - ask jai
      // If orFacets are present, start building formatted orFacet filter
      let formattedOrFacets = ''
      if (this.orFacets.length > 0 || this.activeVersions.length > 0) {
@@ -91,18 +92,6 @@ export const useSearch = defineStore('searchStore', {
      this.offset = response.offset
      this.pageCount = Math.ceil(this.totalHits / this.limit)
    },
-    toggleCategory(cat) {
-      this.categories[cat] = !this.categories[cat]
-    },
-    toggleLoader(loader) {
-      this.loaders[loader] = !this.loaders[loader]
-    },
-    toggleEnv(env) {
-      this.environments[env] = !this.environments[env]
-    },
-    setVersions(versions) {
-      this.activeVersions = versions
-    },
    resetFilters() {
      this.facets = []
      this.orFacets = []
--- a/theseus_gui/src/store/state.js
+++ b/theseus_gui/src/store/state.js
@@ -1,6 +1,4 @@
-import { useInstances } from './instances'
 import { useSearch } from './search'
 import { useTheming } from './theme'
-import { useNews } from './news'

-export { useInstances, useSearch, useTheming, useNews }
+export { useSearch, useTheming }