Navbar wireup (#98)

* Navbar wireup

* Fix height issue

* Fix syncing

* working branch

* Added root directories to breadcrumbs

* fix jre detect

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

theseus_gui/src/pages/Browse.vue

@@ -17,9 +17,14 @@ import {
 } 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'
 
 const searchStore = useSearch()
+const breadcrumbs = useBreadcrumbs()
+const route = useRoute()
+breadcrumbs.setContext({ name: 'Browse', link: route.path })
 
 const showSnapshots = ref(false)
 const loading = ref(true)

theseus_gui/src/pages/Index.vue

@@ -2,9 +2,16 @@
 import RowDisplay from '@/components/RowDisplay.vue'
 import { shallowRef } from 'vue'
 import { list } from '@/helpers/profile.js'
+import { useRoute } from 'vue-router'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+
+const route = useRoute()
+const breadcrumbs = useBreadcrumbs()
 
 const profiles = await list()
 const recentInstances = shallowRef(Object.values(profiles))
+
+breadcrumbs.setRootContext({ name: 'Home', link: route.path })
 </script>
 
 <template>

theseus_gui/src/pages/Library.vue

@@ -2,9 +2,16 @@
 import GridDisplay from '@/components/GridDisplay.vue'
 import { shallowRef } from 'vue'
 import { list } from '@/helpers/profile.js'
+import { useRoute } from 'vue-router'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+
+const route = useRoute()
+const breadcrumbs = useBreadcrumbs()
 
 const profiles = await list()
 const instances = shallowRef(Object.values(profiles))
+
+breadcrumbs.setRootContext({ name: 'Library', link: route.path })
 </script>
 
 <template>

theseus_gui/src/pages/instance/Index.vue

@@ -5,9 +5,9 @@
         <Avatar size="lg" :src="convertFileSrc(instance.metadata.icon)" />
         <div class="instance-info">
           <h2 class="name">{{ instance.metadata.name }}</h2>
-          <span class="metadata"
-            >{{ instance.metadata.loader }} {{ instance.metadata.game_version }}</span
-          >
+          <span class="metadata">
+            {{ instance.metadata.loader }} {{ instance.metadata.game_version }}
+          </span>
         </div>
         <span class="button-group">
           <Button color="primary" class="instance-button" @click="run($route.params.id)">
@@ -47,9 +47,17 @@ import { get, run } from '@/helpers/profile'
 import { useRoute } from 'vue-router'
 import { shallowRef } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+
+const breadcrumbs = useBreadcrumbs()
 
 const route = useRoute()
 const instance = shallowRef(await get(route.params.id))
+breadcrumbs.setName('Instance', instance.value.metadata.name)
+breadcrumbs.setContext({
+  name: instance.value.metadata.name,
+  link: route.path,
+})
 </script>
 
 <style scoped lang="scss">
@@ -77,7 +85,7 @@ Button {
   flex-direction: column;
   padding: 1rem;
   background: var(--color-raised-bg);
-  min-height: calc(100% - 2rem);
+  min-height: calc(100% - 3.25rem);
   overflow: hidden;
 }
 

theseus_gui/src/pages/instance/Mods.vue

@@ -36,7 +36,7 @@
       </div>
       <div v-for="mod in search" :key="mod.file_name" class="table-row">
         <div class="table-cell table-text">
-          <Button v-if="true" icon-only>
+          <Button v-if="mod.outdated" icon-only>
             <UpdatedIcon />
           </Button>
           <Button v-else disabled icon-only>
@@ -106,6 +106,7 @@ for (const project of Object.values(props.instance.projects)) {
       file_name: project.file_name,
       icon: project.metadata.project.icon_url,
       disabled: project.disabled,
+      outdated: project.metadata.update_version,
     })
   } else if (project.metadata.type === 'inferred') {
     projects.value.push({
@@ -115,6 +116,7 @@ for (const project of Object.values(props.instance.projects)) {
       file_name: project.file_name,
       icon: project.metadata.icon ? convertFileSrc(project.metadata.icon) : null,
       disabled: project.disabled,
+      outdated: false,
     })
   } else {
     projects.value.push({
@@ -124,6 +126,7 @@ for (const project of Object.values(props.instance.projects)) {
       file_name: project.file_name,
       icon: null,
       disabled: project.disabled,
+      outdated: false,
     })
   }
 }

theseus_gui/src/pages/project/Index.vue

@@ -218,9 +218,11 @@ import { ofetch } from 'ofetch'
 import { useRoute, useRouter } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
 
 const route = useRoute()
 const router = useRouter()
+const breadcrumbs = useBreadcrumbs()
 
 const confirmModal = ref(null)
 const loaders = ref(await get_loaders())
@@ -232,6 +234,8 @@ const [data, versions, members, dependencies] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`).then(shallowRef),
 ])
 
+breadcrumbs.setName('Project', data.value.title)
+
 watch(
   () => route.params.id,
   () => {
@@ -246,7 +250,9 @@ async function install(version) {
     const packs = Object.values(await list())
     if (
       packs.length === 0 ||
-      !packs.map((value) => value.metadata).find((pack) => pack.linked_project_id === data.value.id)
+      !packs
+        .map((value) => value.metadata)
+        .find((pack) => pack.linked_data?.project_id === data.value.id)
     ) {
       let id = await pack_install(version)
       await router.push({ path: `/instance/${encodeURIComponent(id)}` })

theseus_gui/src/pages/project/Version.vue

@@ -183,6 +183,9 @@ import {
 import { releaseColor } from '@/helpers/utils'
 import { ref, defineProps } from 'vue'
 import { useRoute } from 'vue-router'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+
+const breadcrumbs = useBreadcrumbs()
 
 const route = useRoute()
 
@@ -210,7 +213,10 @@ const props = defineProps({
 })
 
 const version = ref(props.versions.find((version) => version.id === route.params.version))
+breadcrumbs.setName('Version', version.value.name)
+
 const author = ref(props.members.find((member) => member.user.id === version.value.author_id))
+
 const displayDependencies = ref(
   version.value.dependencies.map((dependency) => {
     const version = props.dependencies.versions.find((obj) => obj.id === dependency.version_id)