Project wireup (#80)

* Remove unneeded style

* Base modpack wire up

* Run lint

* Thats not supposed to be there

* Remove errant class

* Fix safety

* Username => ID

* fix id missing

* Fix bug with clicking

* remove unnecessary

* Update Versions.vue

* Addressed changes

* Lintttt

theseus_gui/src/pages/Project.vue

@@ -1,7 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <p>Project page</p>
-  </div>
-</template>

theseus_gui/src/pages/index.js

@@ -1,7 +1,6 @@
 import Index from './Index.vue'
 import Browse from './Browse.vue'
 import Library from './Library.vue'
-import Project from './Project.vue'
 import Settings from './Settings.vue'
 
-export { Index, Browse, Library, Project, Settings }
+export { Index, Browse, Library, Settings }

theseus_gui/src/pages/project/Index.vue

@@ -29,7 +29,7 @@
         </Categories>
         <hr class="card-divider" />
         <div class="button-group">
-          <Button color="primary" class="instance-button" @click="install">
+          <Button color="primary" class="instance-button" @click="install(versions[0].id)">
             <DownloadIcon />
             Install
           </Button>
@@ -173,9 +173,11 @@
         :versions="versions"
         :members="members"
         :dependencies="dependencies"
+        :install="install"
       />
     </div>
   </div>
+  <InstallConfirmModal ref="confirmModal" />
 </template>
 
 <script setup>
@@ -209,15 +211,18 @@ import {
 } 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 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'
 
 const route = useRoute()
 const router = useRouter()
 
+const confirmModal = ref(null)
 const loaders = ref(await get_loaders())
 const categories = ref(await get_categories())
 const [data, versions, members, dependencies] = await Promise.all([
@@ -236,12 +241,18 @@ watch(
 
 dayjs.extend(relativeTime)
 
-async function install() {
+async function install(version) {
   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)}` })
+    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)
+      await router.push({ path: `/instance/${encodeURIComponent(id)}` })
+    } else {
+      confirmModal.value.show(version)
+    }
   }
 }
 </script>

theseus_gui/src/pages/project/Version.vue

@@ -6,7 +6,7 @@
         <span v-if="version.featured">Auto-Featured</span>
       </div>
       <div class="button-group">
-        <Button color="primary">
+        <Button color="primary" :action="() => install(version.id)">
           <DownloadIcon />
           Install
         </Button>
@@ -53,7 +53,11 @@
                 <span v-if="file.primary" class="primary-label"> Primary </span>
               </span>
             </span>
-            <Button class="download">
+            <Button
+              v-if="project.project_type !== 'modpack' || file.primary"
+              class="download"
+              :action="() => install(version.id)"
+            >
               <DownloadIcon />
               Install
             </Button>
@@ -183,6 +187,10 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 
 const props = defineProps({
+  project: {
+    type: Object,
+    required: true,
+  },
   versions: {
     type: Array,
     required: true,
@@ -195,6 +203,10 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  install: {
+    type: Function,
+    required: true,
+  },
 })
 
 const version = ref(props.versions.find((version) => version.id === route.params.version))

theseus_gui/src/pages/project/Versions.vue

@@ -58,14 +58,14 @@
         <div class="table-cell table-text">Supports</div>
         <div class="table-cell table-text">Stats</div>
       </div>
-      <router-link
+      <div
         v-for="version in versions"
         :key="version.id"
-        class="button-base table-row"
-        :to="`/project/${$route.params.id}/version/${version.id}`"
+        class="table-row selectable"
+        @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
       >
         <div class="table-cell table-text">
-          <Button color="primary" icon-only>
+          <Button color="primary" icon-only @click.stop="() => install(version.id)">
             <DownloadIcon />
           </Button>
         </div>
@@ -117,7 +117,7 @@
             <span> Downloads </span>
           </div>
         </div>
-      </router-link>
+      </div>
     </div>
   </Card>
 </template>
@@ -151,6 +151,10 @@ defineProps({
     type: Array,
     required: true,
   },
+  install: {
+    type: Function,
+    required: true,
+  },
 })
 </script>
 
@@ -174,6 +178,19 @@ defineProps({
 .table-row {
   display: grid;
   grid-template-columns: min-content 1fr 1fr 1.5fr;
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
+    outline 0.2s ease-in-out;
+
+  &.selectable:focus-visible,
+  &.selectable:hover {
+    cursor: pointer;
+    filter: brightness(0.85);
+  }
+
+  &.selectable:active {
+    filter: brightness(0.8);
+    scale: 0.99;
+  }
 }
 
 .table-head {