Offline mode (#403)

* offline mode

* fixes, mixpanels, etc

* changes

* prettier

* rev

* actions

theseus_gui/src/pages/Index.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { ref, onUnmounted, shallowRef } from 'vue'
+import { ref, onUnmounted, shallowRef, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
 import { list } from '@/helpers/profile.js'
-import { profile_listener } from '@/helpers/events'
+import { offline_listener, profile_listener } from '@/helpers/events'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { useFetch } from '@/helpers/fetch.js'
 import { handleError } from '@/store/notifications.js'
 import dayjs from 'dayjs'
+import { isOffline } from '@/helpers/utils'
 
 const featuredModpacks = ref({})
 const featuredMods = ref({})
@@ -20,6 +21,8 @@ breadcrumbs.setRootContext({ name: 'Home', link: route.path })
 
 const recentInstances = shallowRef([])
 
+const offline = ref(await isOffline())
+
 const getInstances = async () => {
   const profiles = await list(true).catch(handleError)
   recentInstances.value = Object.values(profiles).sort((a, b) => {
@@ -40,32 +43,55 @@ const getFeaturedModpacks = async () => {
     `https://api.modrinth.com/v2/search?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`,
     'featured modpacks'
   )
-  featuredModpacks.value = response.hits
+  if (response) featuredModpacks.value = response.hits
 }
 const getFeaturedMods = async () => {
   const response = await useFetch(
     'https://api.modrinth.com/v2/search?facets=[["project_type:mod"]]&limit=10&index=follows',
     'featured mods'
   )
-  featuredMods.value = response.hits
+  if (response) featuredMods.value = response.hits
 }
 
 await getInstances()
-await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
 
-const unlisten = await profile_listener(async (e) => {
+if (!offline.value) {
+  await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+}
+
+const unlistenProfile = await profile_listener(async (e) => {
   await getInstances()
   if (e.event === 'created' || e.event === 'removed') {
     await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
   }
 })
 
-onUnmounted(() => unlisten())
+const unlistenOffline = await offline_listener(async (b) => {
+  offline.value = b
+  if (!b) {
+    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+  }
+})
+
+// computed sums of recentInstances, featuredModpacks, featuredMods, treating them as arrays if they are not
+const total = computed(() => {
+  return (
+    (recentInstances.value?.length ?? 0) +
+    (featuredModpacks.value?.length ?? 0) +
+    (featuredMods.value?.length ?? 0)
+  )
+})
+
+onUnmounted(() => {
+  unlistenProfile()
+  unlistenOffline()
+})
 </script>
 
 <template>
   <div class="page-container">
     <RowDisplay
+      v-if="total > 0"
       :instances="[
         {
           label: 'Jump back in',