Fix syncing, repairing, add edit method (#111)

* Fix syncing, repairing, add edit method

* comp err

* temp push up

* fixes

* fix more

* add frontend

theseus_gui/src/components/GridDisplay.vue

@@ -97,19 +97,13 @@ const modsRow = ref(null)
 
   .instances {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     width: 100%;
     gap: 1rem;
     margin-right: auto;
     margin-top: 0.8rem;
     scroll-behavior: smooth;
-    overflow-x: scroll;
-    overflow-y: hidden;
-
-    &::-webkit-scrollbar {
-      width: 0px;
-      background: transparent;
-    }
+    overflow-y: scroll;
   }
 }
 

theseus_gui/src/components/RowDisplay.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ChevronLeftIcon, ChevronRightIcon } from 'omorphia'
 import Instance from '@/components/ui/Instance.vue'
-import News from '@/components/ui/News.vue'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps({
@@ -11,12 +10,6 @@ const props = defineProps({
       return []
     },
   },
-  news: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
   label: {
     type: String,
     default: '',
@@ -26,16 +19,9 @@ const props = defineProps({
 
 const allowPagination = ref(false)
 const modsRow = ref(null)
-const newsRow = ref(null)
-
-const shouldRenderNormalInstances = props.instances && props.instances?.length !== 0
-const shouldRenderNews = props.news && props.news?.length !== 0
 
 const handlePaginationDisplay = () => {
-  let parentsRow
-  if (shouldRenderNormalInstances) parentsRow = modsRow.value
-  if (shouldRenderNews) parentsRow = newsRow.value
-  if (!parentsRow) return
+  let parentsRow = modsRow.value
 
   // This is wrapped in a setTimeout because the HtmlCollection seems to struggle
   // with getting populated sometimes. It's a flaky error, but providing a bit of
@@ -53,7 +39,7 @@ const handlePaginationDisplay = () => {
 
 onMounted(() => {
   if (props.canPaginate) window.addEventListener('resize', handlePaginationDisplay)
-  // Check if pagination should be rendered on mount
+
   handlePaginationDisplay()
 })
 onUnmounted(() => {
@@ -61,12 +47,10 @@ onUnmounted(() => {
 })
 
 const handleLeftPage = () => {
-  if (shouldRenderNormalInstances) modsRow.value.scrollLeft -= 170
-  else if (shouldRenderNews) newsRow.value.scrollLeft -= 170
+  modsRow.value.scrollLeft -= 170
 }
 const handleRightPage = () => {
-  if (shouldRenderNormalInstances) modsRow.value.scrollLeft += 170
-  else if (shouldRenderNews) newsRow.value.scrollLeft += 170
+  modsRow.value.scrollLeft += 170
 }
 </script>
 <template>
@@ -79,7 +63,7 @@ const handleRightPage = () => {
         <ChevronRightIcon role="button" @click="handleRightPage" />
       </div>
     </div>
-    <section v-if="shouldRenderNormalInstances" ref="modsRow" class="instances">
+    <section ref="modsRow" class="instances">
       <Instance
         v-for="instance in props.instances"
         :key="instance?.project_id || instance?.id"
@@ -88,9 +72,6 @@ const handleRightPage = () => {
         class="row-instance"
       />
     </section>
-    <section v-else-if="shouldRenderNews" ref="newsRow" class="news">
-      <News v-for="actualNews in props.news" :key="actualNews.id" :news="actualNews" />
-    </section>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -153,19 +134,6 @@ const handleRightPage = () => {
     gap: 1rem;
   }
 
-  .news {
-    margin: auto;
-    width: 100%;
-    scroll-behavior: smooth;
-    overflow-x: scroll;
-    overflow-y: hidden;
-
-    &::-webkit-scrollbar {
-      width: 0px;
-      background: transparent;
-    }
-  }
-
   .instances {
     display: flex;
     flex-direction: row;

theseus_gui/src/components/ui/InstallConfirmModal.vue

@@ -1,25 +1,25 @@
 <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 title = ref('')
+const icon = ref('')
 const confirmModal = ref(null)
 
 defineExpose({
-  show: (id) => {
+  show: (id, projectTitle, projectIcon) => {
     version.value = id
+    title.value = projectTitle
+    icon.value = projectIcon
     confirmModal.value.show()
   },
 })
 
 async function install() {
-  let id = await pack_install(version.value)
-  await router.push({ path: `/instance/${encodeURIComponent(id)}` })
   confirmModal.value.hide()
+  await pack_install(version.value, title.value, icon.value ? icon.value : null)
 }
 </script>
 

theseus_gui/src/components/ui/Instance.vue

@@ -74,13 +74,13 @@ const install = async (e) => {
     ) {
       try {
         modLoading.value = true
-        await pack_install(versions[0].id, props.instance.title)
+        await pack_install(versions[0].id, props.instance.title, props.instance.icon_url)
         modLoading.value = false
       } catch (err) {
         console.error(err)
         modLoading.value = false
       }
-    } else confirmModal.value.show(versions[0].id)
+    } else confirmModal.value.show(versions[0].id, props.instance.title, props.instance.icon_url)
   }
 
   modLoading.value = false
@@ -119,7 +119,7 @@ const stop = async (e) => {
 }
 
 await process_listener((e) => {
-  if (e.event === 'Finished' && e.uuid === uuid.value) playing.value = false
+  if (e.event === 'finished' && e.uuid === uuid.value) playing.value = false
 })
 </script>
 
@@ -147,10 +147,12 @@ await process_listener((e) => {
       @mouseenter="checkProcess"
     >
       <Avatar
-        size="lg"
+        size="none"
         :src="
           props.instance.metadata
-            ? convertFileSrc(props.instance.metadata?.icon)
+            ? props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http')
+              ? props.instance.metadata.icon
+              : convertFileSrc(props.instance.metadata?.icon)
             : props.instance.icon_url
         "
         alt="Mod card"
@@ -315,8 +317,14 @@ await process_listener((e) => {
     background: hsl(220, 11%, 11%) !important;
   }
 
-  .mod-image {
-    border-radius: 1.5rem !important;
+  > .avatar {
+    --size: 100%;
+
+    width: 100% !important;
+    height: auto !important;
+    max-width: unset !important;
+    max-height: unset !important;
+    aspect-ratio: 1 / 1 !important;
   }
 
   .project-info {

theseus_gui/src/components/ui/InstanceInstallModal.vue

@@ -55,7 +55,7 @@ async function install(instance) {
   await installMod(instance.path, version.id)
   await installVersionDependencies(instance, version)
 
-  instance.installed = true
+  instance.installedMod = true
   instance.installing = false
 }
 
@@ -75,7 +75,7 @@ const filteredVersions = computed(() => {
 
   filtered.map((profile) => {
     profile.installing = false
-    profile.installed = checkInstalled(profile, project.value)
+    profile.installedMod = checkInstalled(profile, project.value)
   })
 
   return filtered
@@ -149,10 +149,12 @@ const check_valid = computed(() => {
             <Avatar :src="convertFileSrc(profile.metadata.icon)" class="profile-image" />
             {{ profile.metadata.name }}
           </Button>
-          <Button :disabled="profile.installed || profile.installing" @click="install(profile)">
-            <DownloadIcon v-if="!profile.installed && !profile.installing" />
-            <CheckIcon v-else-if="profile.installed" />
-            {{ profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install' }}
+          <Button :disabled="profile.installedMod || profile.installing" @click="install(profile)">
+            <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+            <CheckIcon v-else-if="profile.installedMod" />
+            {{
+              profile.installing ? 'Installing...' : profile.installedMod ? 'Installed' : 'Install'
+            }}
           </Button>
         </div>
       </div>

theseus_gui/src/components/ui/News.vue

@@ -1,91 +0,0 @@
-<script setup>
-import { Card, ChevronRightIcon } from 'omorphia'
-const props = defineProps({
-  news: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-})
-</script>
-
-<template>
-  <Card class="news-cta">
-    <img :src="props.news.img" alt="News Image" />
-    <div class="body">
-      <div class="headline">
-        <h2>{{ props.news.headline }}</h2>
-        <p>{{ props.news.blurb }}</p>
-      </div>
-      <div class="underline">
-        <p>{{ props.news.source }}</p>
-        <a href="#"><ChevronRightIcon /></a>
-      </div>
-    </div>
-  </Card>
-</template>
-
-<style lang="scss" scoped>
-.news-cta {
-  display: flex;
-  justify-content: center;
-  padding: 0;
-  background: var(--color-raised-bg);
-  min-width: 24.125rem; /* from wireframe */
-  min-height: 8.5rem; /* from wireframe */
-  box-shadow: var(--shadow-raised-lg);
-  cursor: pointer;
-  transition: all ease-in-out 0.1s;
-  &:hover {
-    box-shadow: var(--shadow-floating);
-    filter: brightness(0.85);
-  }
-  img {
-    display: flex;
-    width: 8.4375rem; /* from wireframe */
-    height: 8.5rem; /* from wireframe */
-    border-radius: 0.9rem 0 0 0.9rem;
-  }
-  .body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 8.5rem; /* from wireframe */
-    padding: 0.45rem;
-    .headline {
-      display: inherit;
-      flex-direction: inherit;
-      margin: 0.4rem 0;
-      width: 100%;
-      h2 {
-        font-size: 1rem;
-        text-transform: uppercase;
-      }
-      p {
-        font-size: 0.7rem;
-      }
-    }
-    .underline {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      margin-top: auto;
-      p {
-        font-size: 0.7rem;
-      }
-      a {
-        transition: all ease-in-out 0.2s;
-        width: 1.5rem;
-        color: var(--color-primary);
-        font-size: 1.3rem;
-        &:hover {
-          transform: translate(1px);
-          filter: brightness(150%);
-        }
-      }
-    }
-  }
-}
-</style>