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/assets/stylesheets/global.scss

@@ -18,13 +18,6 @@
   margin: var(--gap-sm) 0;
 }
 
-.small-card-divider {
-  background-color: var(--color-button-bg);
-  border: none;
-  color: var(--color-button-bg);
-  height: 1px;
-}
-
 .no-wrap {
   white-space: nowrap;
 }

theseus_gui/src/components/GridDisplay.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from 'omorphia'
 import Instance from '@/components/ui/Instance.vue'
 import { ref } from 'vue'
 
@@ -22,30 +21,13 @@ const props = defineProps({
   },
   canPaginate: Boolean,
 })
-const allowPagination = ref(false)
 const modsRow = ref(null)
-const newsRow = ref(null)
-// Remove after state is populated with real data
-const shouldRenderNormalInstances = props.instances && props.instances?.length !== 0
-const shouldRenderNews = props.news && props.news?.length !== 0
-const handleLeftPage = () => {
-  if (shouldRenderNormalInstances) modsRow.value.scrollLeft -= 170
-  else if (shouldRenderNews) newsRow.value.scrollLeft -= 170
-}
-const handleRightPage = () => {
-  if (shouldRenderNormalInstances) modsRow.value.scrollLeft += 170
-  else if (shouldRenderNews) newsRow.value.scrollLeft += 170
-}
 </script>
 <template>
   <div class="row">
     <div class="header">
       <p>{{ props.label }}</p>
       <hr />
-      <div v-if="allowPagination" class="pagination">
-        <ChevronLeftIcon @click="handleLeftPage" />
-        <ChevronRightIcon @click="handleRightPage" />
-      </div>
     </div>
     <section ref="modsRow" class="instances">
       <Instance

theseus_gui/src/components/ui/AccountsCard.vue

@@ -3,7 +3,7 @@
     ref="avatar"
     class="button-base"
     size="sm"
-    :src="selectedAccount.profile_picture"
+    :src="selectedAccount?.profile_picture ?? ''"
     @click="toggle()"
   />
   <transition name="fade">
@@ -62,7 +62,7 @@ const appendProfiles = (accounts) => {
   return accounts.map((account) => {
     return {
       ...account,
-      profile_picture: `https://crafthead.net/helm/${account.username}/128`,
+      profile_picture: `https://crafthead.net/helm/${account.id}/128`,
     }
   })
 }
@@ -74,9 +74,7 @@ const displayAccounts = computed(() =>
 )
 
 const selectedAccount = ref(
-  await users().then((accounts) =>
-    accounts.find((account) => account.id === settings.value.default_user)
-  )
+  accounts.value.find((account) => account.id === settings.value.default_user)
 )
 
 const refreshValues = async () => {

theseus_gui/src/components/ui/InstallConfirmModal.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
+import { useRouter } from 'vue-router'
+import { install as pack_install } from '@/helpers/pack'
+import { ref } from 'vue'
+
+const router = useRouter()
+
+const version = ref('')
+const confirmModal = ref(null)
+
+defineExpose({
+  show: (id) => {
+    version.value = id
+    confirmModal.value.show()
+  },
+})
+
+async function install() {
+  let id = await pack_install(version.value)
+  await router.push({ path: `/instance/${encodeURIComponent(id)}` })
+  confirmModal.value.hide()
+}
+</script>
+
+<template>
+  <Modal ref="confirmModal" header="Are you sure?">
+    <div class="modal-body">
+      <p>
+        This project is already installed on your system. Are you sure you want to install it again?
+      </p>
+      <div class="button-group">
+        <Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
+        <Button color="primary" @click="install()"><DownloadIcon /> Install</Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style lang="scss" scoped>
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+</style>

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 {