From 26f2c9ef9dfc49bc57b8cc329fd66fa6cba9af5b Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Tue, 9 May 2023 18:48:54 -0700
Subject: [PATCH 1/5] Loading bars

---
 theseus_gui/src/App.vue                       |  25 ++--
 .../components/modrinth-loading-indicator.js  | 136 ++++++++++++++++++
 theseus_gui/src/pages/Index.vue               |   2 +-
 theseus_gui/src/pages/project/Index.vue       |   2 +
 theseus_gui/src/store/loading.js              |  15 ++
 theseus_gui/src/store/state.js                |   3 +-
 6 files changed, 173 insertions(+), 10 deletions(-)
 create mode 100644 theseus_gui/src/components/modrinth-loading-indicator.js
 create mode 100644 theseus_gui/src/store/loading.js

diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
index fb1b7424d..10eca9aa2 100644
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -2,12 +2,13 @@
 import { onMounted } from 'vue'
 import { RouterView, RouterLink } from 'vue-router'
 import { HomeIcon, SearchIcon, LibraryIcon, PlusIcon, SettingsIcon, Button } from 'omorphia'
-import { useTheming } from '@/store/state'
+import {useLoading, useTheming} from '@/store/state'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import { get } from '@/helpers/settings'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
+import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
 
 const themeStore = useTheming()
 
@@ -16,6 +17,8 @@ onMounted(async () => {
   themeStore.setThemeState(settings)
   themeStore.collapsedNavigation = collapsed_navigation
 })
+
+const loading = useLoading()
 </script>
 
 <template>
@@ -106,9 +109,10 @@ onMounted(async () => {
         </section>
       </div>
       <div class="router-view">
+        <ModrinthLoadingIndicator offset-height="var(--appbar-height)" offset-width="var(--sidebar-width)" />
         <RouterView v-slot="{ Component }">
           <template v-if="Component">
-            <Suspense>
+            <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
               <component :is="Component"></component>
             </Suspense>
           </template>
@@ -120,18 +124,21 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .container {
+  --appbar-height: 3.25rem;
+  --sidebar-width: 5rem;
+
   height: 100vh;
   display: flex;
   flex-direction: row;
   overflow: hidden;
 
   .view {
-    width: var(--view-width);
-
     &.expanded {
-      width: var(--expanded-view-width);
+      --sidebar-width: 13rem;
     }
 
+    width: calc(100% - var(--sidebar-width));
+
     .appbar {
       display: flex;
       justify-content: space-between;
@@ -219,9 +226,11 @@ onMounted(async () => {
   background: var(--color-raised-bg);
 
   &.expanded {
-    width: 13rem;
-    max-width: 13rem;
-    min-width: 13rem;
+    --sidebar-width: 13rem;
+
+    width: var(--sidebar-width);
+    max-width: var(--sidebar-width);
+    min-width: var(--sidebar-width);
   }
 }
 
diff --git a/theseus_gui/src/components/modrinth-loading-indicator.js b/theseus_gui/src/components/modrinth-loading-indicator.js
new file mode 100644
index 000000000..df1a78340
--- /dev/null
+++ b/theseus_gui/src/components/modrinth-loading-indicator.js
@@ -0,0 +1,136 @@
+import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'
+import { useLoading } from '@/store/state.js'
+
+export default defineComponent({
+  name: 'ModrinthLoadingIndicator',
+  props: {
+    throttle: {
+      type: Number,
+      default: 50,
+    },
+    duration: {
+      type: Number,
+      default: 500,
+    },
+    height: {
+      type: Number,
+      default: 3,
+    },
+    color: {
+      type: [String, Boolean],
+      default:
+        'repeating-linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) 100%)',
+    },
+    offsetWidth: {
+      type: String,
+      default: '208px',
+    },
+    offsetHeight: {
+      type: String,
+      default: '52px',
+    },
+  },
+  setup(props, { slots }) {
+    const indicator = useLoadingIndicator({
+      duration: props.duration,
+      throttle: props.throttle,
+    })
+
+    onBeforeUnmount(() => indicator.clear)
+
+    const loading = useLoading()
+
+    watch(loading, (newValue) => {
+      if (newValue.loading) {
+        indicator.start()
+      } else {
+        indicator.finish()
+      }
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          class: 'nuxt-loading-indicator',
+          style: {
+            position: 'fixed',
+            top: props.offsetHeight,
+            right: 0,
+            left: props.offsetWidth,
+            pointerEvents: 'none',
+            width: `calc((100vw - ${props.offsetWidth}) * ${indicator.progress.value / 100})`,
+            height: `${props.height}px`,
+            opacity: indicator.isLoading.value ? 1 : 0,
+            background: props.color || undefined,
+            //backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
+            transition: 'width 0.1s, height 0.4s, opacity 0.4s',
+            zIndex: 999999,
+          },
+        },
+        slots
+      )
+  },
+})
+
+function useLoadingIndicator(opts) {
+  const progress = ref(0)
+  const isLoading = ref(false)
+  const step = computed(() => 10000 / opts.duration)
+
+  let _timer = null
+  let _throttle = null
+
+  function start() {
+    clear()
+    progress.value = 0
+    if (opts.throttle) {
+      _throttle = setTimeout(() => {
+        isLoading.value = true
+        _startTimer()
+      }, opts.throttle)
+    } else {
+      isLoading.value = true
+      _startTimer()
+    }
+  }
+  function finish() {
+    progress.value = 100
+    _hide()
+  }
+
+  function clear() {
+    clearInterval(_timer)
+    clearTimeout(_throttle)
+    _timer = null
+    _throttle = null
+  }
+
+  function _increase(num) {
+    progress.value = Math.min(100, progress.value + num)
+  }
+
+  function _hide() {
+    clear()
+    setTimeout(() => {
+      isLoading.value = false
+      setTimeout(() => {
+        progress.value = 0
+      }, 400)
+    }, 500)
+  }
+
+  function _startTimer() {
+    _timer = setInterval(() => {
+      _increase(step.value)
+    }, 100)
+  }
+
+  return {
+    progress,
+    isLoading,
+    start,
+    finish,
+    clear,
+  }
+}
diff --git a/theseus_gui/src/pages/Index.vue b/theseus_gui/src/pages/Index.vue
index 54a0fde2b..aa0c3689a 100644
--- a/theseus_gui/src/pages/Index.vue
+++ b/theseus_gui/src/pages/Index.vue
@@ -47,7 +47,7 @@ await getInstances()
 await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
 
 const unlisten = await profile_listener(async (e) => {
-  if (e.event === 'edited') {
+  if (e.event === 'created' || e.event === 'removed') {
     await getInstances()
     await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
   }
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 65bcdb2bb..942eb790f 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -247,12 +247,14 @@ const categories = ref(await get_categories())
 const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
+console.log('fetched before')
 const [data, versions, members, dependencies] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`).then(shallowRef),
 ])
+console.log('fetched after')
 
 const installed = ref(instance.value && checkInstalled(instance.value, data.value.id))
 
diff --git a/theseus_gui/src/store/loading.js b/theseus_gui/src/store/loading.js
new file mode 100644
index 000000000..94ad1e28f
--- /dev/null
+++ b/theseus_gui/src/store/loading.js
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+
+export const useLoading = defineStore('loadingStore', {
+  state: () => ({ loading: false }),
+  actions: {
+    startLoading() {
+      console.log('I was told to start loading')
+      this.loading = true
+    },
+    stopLoading() {
+      console.log('I was told to stop loading')
+      this.loading = false
+    },
+  },
+})
diff --git a/theseus_gui/src/store/state.js b/theseus_gui/src/store/state.js
index c8dd645cd..7b59a066f 100644
--- a/theseus_gui/src/store/state.js
+++ b/theseus_gui/src/store/state.js
@@ -1,5 +1,6 @@
 import { useSearch } from './search'
 import { useTheming } from './theme'
 import { useBreadcrumbs } from './breadcrumbs'
+import { useLoading } from './loading'
 
-export { useSearch, useTheming, useBreadcrumbs }
+export { useSearch, useTheming, useBreadcrumbs, useLoading }

From 22a8c1a179fb09aee7591eb88cd56f96040d7c93 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Tue, 9 May 2023 18:49:42 -0700
Subject: [PATCH 2/5] remove print

---
 theseus_gui/src/pages/project/Index.vue | 2 --
 theseus_gui/src/store/loading.js        | 2 --
 2 files changed, 4 deletions(-)

diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index 942eb790f..65bcdb2bb 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -247,14 +247,12 @@ const categories = ref(await get_categories())
 const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
-console.log('fetched before')
 const [data, versions, members, dependencies] = await Promise.all([
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`).then(shallowRef),
   ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`).then(shallowRef),
 ])
-console.log('fetched after')
 
 const installed = ref(instance.value && checkInstalled(instance.value, data.value.id))
 
diff --git a/theseus_gui/src/store/loading.js b/theseus_gui/src/store/loading.js
index 94ad1e28f..379417306 100644
--- a/theseus_gui/src/store/loading.js
+++ b/theseus_gui/src/store/loading.js
@@ -4,11 +4,9 @@ export const useLoading = defineStore('loadingStore', {
   state: () => ({ loading: false }),
   actions: {
     startLoading() {
-      console.log('I was told to start loading')
       this.loading = true
     },
     stopLoading() {
-      console.log('I was told to stop loading')
       this.loading = false
     },
   },

From 8f2295724d3237c5efc52d0cf93eddd7b06607d7 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Tue, 9 May 2023 18:50:00 -0700
Subject: [PATCH 3/5] remove print

---
 theseus_gui/src/App.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
index 10eca9aa2..315452d98 100644
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -2,7 +2,7 @@
 import { onMounted } from 'vue'
 import { RouterView, RouterLink } from 'vue-router'
 import { HomeIcon, SearchIcon, LibraryIcon, PlusIcon, SettingsIcon, Button } from 'omorphia'
-import {useLoading, useTheming} from '@/store/state'
+import { useLoading, useTheming } from '@/store/state'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import { get } from '@/helpers/settings'
@@ -109,7 +109,10 @@ const loading = useLoading()
         </section>
       </div>
       <div class="router-view">
-        <ModrinthLoadingIndicator offset-height="var(--appbar-height)" offset-width="var(--sidebar-width)" />
+        <ModrinthLoadingIndicator
+          offset-height="var(--appbar-height)"
+          offset-width="var(--sidebar-width)"
+        />
         <RouterView v-slot="{ Component }">
           <template v-if="Component">
             <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">

From b9922db11556b1df3c01b6903b450b98d5252c4d Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Wed, 10 May 2023 07:20:29 -0700
Subject: [PATCH 4/5] remove class

---
 theseus_gui/src/components/modrinth-loading-indicator.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/theseus_gui/src/components/modrinth-loading-indicator.js b/theseus_gui/src/components/modrinth-loading-indicator.js
index df1a78340..cf8479044 100644
--- a/theseus_gui/src/components/modrinth-loading-indicator.js
+++ b/theseus_gui/src/components/modrinth-loading-indicator.js
@@ -2,7 +2,6 @@ import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'
 import { useLoading } from '@/store/state.js'
 
 export default defineComponent({
-  name: 'ModrinthLoadingIndicator',
   props: {
     throttle: {
       type: Number,
@@ -52,7 +51,6 @@ export default defineComponent({
       h(
         'div',
         {
-          class: 'nuxt-loading-indicator',
           style: {
             position: 'fixed',
             top: props.offsetHeight,

From 8aa7f67dcf4549c85efd20e529ef6c9fc7c9ed3e Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Wed, 10 May 2023 07:50:51 -0700
Subject: [PATCH 5/5] Fix overlay

---
 theseus_gui/src/components/modrinth-loading-indicator.js | 4 ++--
 theseus_gui/src/pages/AddInstance.vue                    | 7 -------
 2 files changed, 2 insertions(+), 9 deletions(-)
 delete mode 100644 theseus_gui/src/pages/AddInstance.vue

diff --git a/theseus_gui/src/components/modrinth-loading-indicator.js b/theseus_gui/src/components/modrinth-loading-indicator.js
index cf8479044..d3e78e3d9 100644
--- a/theseus_gui/src/components/modrinth-loading-indicator.js
+++ b/theseus_gui/src/components/modrinth-loading-indicator.js
@@ -61,9 +61,9 @@ export default defineComponent({
             height: `${props.height}px`,
             opacity: indicator.isLoading.value ? 1 : 0,
             background: props.color || undefined,
-            //backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
+            backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
             transition: 'width 0.1s, height 0.4s, opacity 0.4s',
-            zIndex: 999999,
+            zIndex: 99,
           },
         },
         slots
diff --git a/theseus_gui/src/pages/AddInstance.vue b/theseus_gui/src/pages/AddInstance.vue
deleted file mode 100644
index 68d916608..000000000
--- a/theseus_gui/src/pages/AddInstance.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup></script>
-
-<template>
-  <div>
-    <p>Add Instance</p>
-  </div>
-</template>