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