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/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>