Offline mode (#403)

* offline mode

* fixes, mixpanels, etc

* changes

* prettier

* rev

* actions

theseus_gui/src/App.vue

@@ -20,12 +20,17 @@ import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
 import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
 import { useNotifications } from '@/store/notifications.js'
-import { command_listener, warning_listener } from '@/helpers/events.js'
+import { offline_listener, command_listener, warning_listener } from '@/helpers/events.js'
 import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
 import { type } from '@tauri-apps/api/os'
 import { appWindow } from '@tauri-apps/api/window'
-import { isDev } from '@/helpers/utils.js'
-import mixpanel from 'mixpanel-browser'
+import { isDev, isOffline } from '@/helpers/utils.js'
+import {
+  mixpanel_track,
+  mixpanel_init,
+  mixpanel_opt_out_tracking,
+  mixpanel_is_loaded,
+} from '@/helpers/mixpanel'
 import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
 import { getVersion } from '@tauri-apps/api/app'
 import { window as TauriWindow } from '@tauri-apps/api'
@@ -33,13 +38,14 @@ import { TauriEvent } from '@tauri-apps/api/event'
 import { await_sync, check_safe_loading_bars_complete } from './helpers/state'
 import { confirm } from '@tauri-apps/api/dialog'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
-// import OnboardingScreen from '@/components/ui/tutorial/OnboardingScreen.vue'
 import StickyTitleBar from '@/components/ui/tutorial/StickyTitleBar.vue'
 import OnboardingScreen from '@/components/ui/tutorial/OnboardingScreen.vue'
 
 const themeStore = useTheming()
 const urlModal = ref(null)
 const isLoading = ref(true)
+const offline = ref(false)
+
 const videoPlaying = ref(true)
 const showOnboarding = ref(false)
 
@@ -58,11 +64,11 @@ defineExpose({
     themeStore.collapsedNavigation = collapsed_navigation
     themeStore.advancedRendering = advanced_rendering
 
-    mixpanel.init('014c7d6a336d0efaefe3aca91063748d', { debug: dev, persistence: 'localStorage' })
+    mixpanel_init('014c7d6a336d0efaefe3aca91063748d', { debug: dev, persistence: 'localStorage' })
     if (opt_out_analytics) {
-      mixpanel.opt_out_tracking()
+      mixpanel_opt_out_tracking()
     }
-    mixpanel.track('Launched', { version, dev, onboarded_new })
+    mixpanel_track('Launched', { version, dev, onboarded_new })
 
     if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault())
 
@@ -72,6 +78,11 @@ defineExpose({
       document.getElementsByTagName('html')[0].classList.add('windows')
     }
 
+    offline.value = await isOffline()
+    await offline_listener((b) => {
+      offline.value = b
+    })
+
     await warning_listener((e) =>
       notificationsWrapper.value.addNotification({
         title: 'Warning',
@@ -121,8 +132,8 @@ TauriWindow.getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {
 
 const router = useRouter()
 router.afterEach((to, from, failure) => {
-  if (mixpanel.__loaded) {
-    mixpanel.track('PageView', { path: to.path, fromPath: from.path, failed: failure })
+  if (mixpanel_is_loaded()) {
+    mixpanel_track('PageView', { path: to.path, fromPath: from.path, failed: failure })
   }
 })
 const route = useRoute()
@@ -214,6 +225,7 @@ command_listener((e) => {
         <Button
           class="sleek-primary collapsed-button"
           icon-only
+          :disabled="offline"
           @click="() => $refs.installationModal.show()"
         >
           <PlusIcon />

theseus_gui/src/components/RowDisplay.vue

@@ -31,7 +31,7 @@ import { showProfileInFolder } from '@/helpers/utils.js'
 import { useFetch } from '@/helpers/fetch.js'
 import { install as pack_install } from '@/helpers/pack.js'
 import { useTheming } from '@/store/state.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 
 const router = useRouter()
 
@@ -125,7 +125,7 @@ const handleOptionsClick = async (args) => {
   switch (args.option) {
     case 'play':
       await run(args.item.path).catch(handleError)
-      mixpanel.track('InstanceStart', {
+      mixpanel_track('InstanceStart', {
         loader: args.item.metadata.loader,
         game_version: args.item.metadata.game_version,
       })
@@ -134,7 +134,7 @@ const handleOptionsClick = async (args) => {
       for (const u of await get_uuids_by_profile_path(args.item.path).catch(handleError)) {
         await kill_by_uuid(u).catch(handleError)
       }
-      mixpanel.track('InstanceStop', {
+      mixpanel_track('InstanceStop', {
         loader: args.item.metadata.loader,
         game_version: args.item.metadata.game_version,
       })

theseus_gui/src/components/ui/AccountsCard.vue

@@ -78,7 +78,7 @@ import {
 import { get, set } from '@/helpers/settings'
 import { WebviewWindow } from '@tauri-apps/api/window'
 import { handleError } from '@/store/state.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 
 defineProps({
   mode: {
@@ -127,7 +127,7 @@ async function login() {
   await setAccount(loggedIn)
   await refreshValues()
   await window.close()
-  mixpanel.track('AccountLogIn')
+  mixpanel_track('AccountLogIn')
 }
 
 const logout = async (id) => {
@@ -139,7 +139,7 @@ const logout = async (id) => {
   } else {
     emit('change')
   }
-  mixpanel.track('AccountLogOut')
+  mixpanel_track('AccountLogOut')
 }
 
 let showCard = ref(false)

theseus_gui/src/components/ui/IncompatibilityWarningModal.vue

@@ -59,7 +59,7 @@ import { Button, Modal, XIcon, DownloadIcon, DropdownSelect, formatCategory } fr
 import { add_project_from_version as installMod } from '@/helpers/profile'
 import { ref } from 'vue'
 import { handleError, useTheming } from '@/store/state.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 
 const themeStore = useTheming()
 
@@ -94,7 +94,7 @@ defineExpose({
     incompatibleModal.value.show()
     markInstalled = extMarkInstalled
 
-    mixpanel.track('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+    mixpanel_track('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
   },
 })
 
@@ -105,7 +105,7 @@ const install = async () => {
   markInstalled()
   incompatibleModal.value.hide()
 
-  mixpanel.track('ProjectInstall', {
+  mixpanel_track('ProjectInstall', {
     loader: instance.value.metadata.loader,
     game_version: instance.value.metadata.game_version,
     id: project.value,

theseus_gui/src/components/ui/InstallConfirmModal.vue

@@ -2,7 +2,7 @@
 import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
 import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { useTheming } from '@/store/theme.js'
 import { handleError } from '@/store/state.js'
 
@@ -24,7 +24,7 @@ defineExpose({
     installing.value = false
     confirmModal.value.show()
 
-    mixpanel.track('PackInstallStart')
+    mixpanel_track('PackInstallStart')
   },
 })
 
@@ -38,7 +38,7 @@ async function install() {
     title.value,
     icon.value ? icon.value : null
   ).catch(handleError)
-  mixpanel.track('PackInstall', {
+  mixpanel_track('PackInstall', {
     id: projectId.value,
     version_id: version.value,
     title: title.value,

theseus_gui/src/components/ui/Instance.vue

@@ -16,7 +16,7 @@ import { useFetch } from '@/helpers/fetch.js'
 import { handleError } from '@/store/state.js'
 import { showProfileInFolder } from '@/helpers/utils.js'
 import ModInstallModal from '@/components/ui/ModInstallModal.vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 
 const props = defineProps({
   instance: {
@@ -93,7 +93,7 @@ const install = async (e) => {
       ).catch(handleError)
       modLoading.value = false
 
-      mixpanel.track('PackInstall', {
+      mixpanel_track('PackInstall', {
         id: props.instance.project_id,
         version_id: versions[0].id,
         title: props.instance.title,
@@ -125,7 +125,7 @@ const play = async (e, context) => {
   modLoading.value = false
   playing.value = true
 
-  mixpanel.track('InstancePlay', {
+  mixpanel_track('InstancePlay', {
     loader: props.instance.metadata.loader,
     game_version: props.instance.metadata.game_version,
     source: context,
@@ -145,7 +145,7 @@ const stop = async (e, context) => {
     uuids.forEach(async (u) => await kill_by_uuid(u).catch(handleError))
   } else await kill_by_uuid(uuid.value).catch(handleError) // If we still have the uuid, just kill it
 
-  mixpanel.track('InstanceStop', {
+  mixpanel_track('InstanceStop', {
     loader: props.instance.metadata.loader,
     game_version: props.instance.metadata.game_version,
     source: context,

theseus_gui/src/components/ui/InstanceCreationModal.vue

@@ -215,7 +215,7 @@ import {
 } from '@/helpers/metadata'
 import { handleError } from '@/store/notifications.js'
 import Multiselect from 'vue-multiselect'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { useTheming } from '@/store/state.js'
 import { listen } from '@tauri-apps/api/event'
 import { install_from_file } from '@/helpers/pack.js'
@@ -249,7 +249,7 @@ defineExpose({
     display_icon.value = null
     modal.value.show()
 
-    mixpanel.track('InstanceCreateStart', { source: 'CreationModal' })
+    mixpanel_track('InstanceCreateStart', { source: 'CreationModal' })
   },
 })
 
@@ -314,7 +314,7 @@ const create_instance = async () => {
     icon.value
   ).catch(handleError)
 
-  mixpanel.track('InstanceCreate', {
+  mixpanel_track('InstanceCreate', {
     profile_name: profile_name.value,
     game_version: game_version.value,
     loader: loader.value,
@@ -370,7 +370,7 @@ const openFile = async () => {
   modal.value.hide()
   await install_from_file(newProject).catch(handleError)
 
-  mixpanel.track('InstanceCreate', {
+  mixpanel_track('InstanceCreate', {
     source: 'CreationModalFileOpen',
   })
 }
@@ -379,7 +379,7 @@ listen('tauri://file-drop', async (event) => {
   modal.value.hide()
   if (event.payload && event.payload.length > 0 && event.payload[0].endsWith('.mrpack')) {
     await install_from_file(event.payload[0]).catch(handleError)
-    mixpanel.track('InstanceCreate', {
+    mixpanel_track('InstanceCreate', {
       source: 'CreationModalFileDrop',
     })
   }

theseus_gui/src/components/ui/JavaDetectionModal.vue

@@ -44,7 +44,7 @@ import {
   get_all_jre,
 } from '@/helpers/jre.js'
 import { handleError } from '@/store/notifications.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { useTheming } from '@/store/theme.js'
 
 const themeStore = useTheming()
@@ -79,7 +79,7 @@ const emit = defineEmits(['submit'])
 function setJavaInstall(javaInstall) {
   emit('submit', javaInstall)
   detectJavaModal.value.hide()
-  mixpanel.track('JavaAutoDetect', {
+  mixpanel_track('JavaAutoDetect', {
     path: javaInstall.path,
     version: javaInstall.version,
   })

theseus_gui/src/components/ui/JavaSelector.vue

@@ -49,7 +49,7 @@ import { find_jre_17_jres, get_jre } from '@/helpers/jre.js'
 import { ref } from 'vue'
 import { open } from '@tauri-apps/api/dialog'
 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { handleError } from '@/store/state.js'
 
 const props = defineProps({
@@ -88,7 +88,7 @@ async function testJava() {
   testingJava.value = false
   testingJavaSuccess.value = !!result
 
-  mixpanel.track('JavaTest', {
+  mixpanel_track('JavaTest', {
     path: props.modelValue ? props.modelValue.path : '',
     success: !!result,
   })
@@ -110,7 +110,7 @@ async function handleJavaFileInput() {
         architecture: 'x86',
       }
 
-      mixpanel.track('JavaManualSelect', {
+      mixpanel_track('JavaManualSelect', {
         path: filePath,
         version: props.version,
       })

theseus_gui/src/components/ui/ModInstallModal.vue

@@ -22,7 +22,7 @@ import { open } from '@tauri-apps/api/dialog'
 import { create } from '@/helpers/profile'
 import { installVersionDependencies } from '@/helpers/utils'
 import { handleError } from '@/store/notifications.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { useTheming } from '@/store/theme.js'
 import { useRouter } from 'vue-router'
 import { tauri } from '@tauri-apps/api'
@@ -57,7 +57,7 @@ defineExpose({
 
     profiles.value = await getData()
 
-    mixpanel.track('ProjectInstallStart', { source: 'ProjectInstallModal' })
+    mixpanel_track('ProjectInstallStart', { source: 'ProjectInstallModal' })
   },
 })
 
@@ -88,7 +88,7 @@ async function install(instance) {
   instance.installedMod = true
   instance.installing = false
 
-  mixpanel.track('ProjectInstall', {
+  mixpanel_track('ProjectInstall', {
     loader: instance.metadata.loader,
     game_version: instance.metadata.game_version,
     id: project.value,
@@ -137,7 +137,7 @@ const toggleCreation = () => {
 
   if (!alreadySentCreation.value) {
     alreadySentCreation.value = false
-    mixpanel.track('InstanceCreateStart', { source: 'ProjectInstallModal' })
+    mixpanel_track('InstanceCreateStart', { source: 'ProjectInstallModal' })
   }
 }
 
@@ -186,7 +186,7 @@ const createInstance = async () => {
   const instance = await get(id, true)
   await installVersionDependencies(instance, versions.value)
 
-  mixpanel.track('InstanceCreate', {
+  mixpanel_track('InstanceCreate', {
     profile_name: name.value,
     game_version: versions.value[0].game_versions[0],
     loader: loader,
@@ -195,7 +195,7 @@ const createInstance = async () => {
     source: 'ProjectInstallModal',
   })
 
-  mixpanel.track('ProjectInstall', {
+  mixpanel_track('ProjectInstall', {
     loader: loader,
     game_version: versions.value[0].game_versions[0],
     id: project.value,

theseus_gui/src/components/ui/RunningAppBar.vue

@@ -9,6 +9,12 @@
     >
       <DownloadIcon />
     </Button>
+    <div v-if="offline" class="status">
+      <span class="circle stopped" />
+      <div class="running-text clickable" @click="refreshInternet()">
+        <span> Offline </span>
+      </div>
+    </div>
     <div v-if="selectedProfile" class="status">
       <span class="circle running" />
       <div ref="profileButton" class="running-text">
@@ -107,12 +113,13 @@ import {
   kill_by_uuid as killProfile,
   get_uuids_by_profile_path as getProfileProcesses,
 } from '@/helpers/process'
-import { loading_listener, process_listener } from '@/helpers/events'
+import { loading_listener, process_listener, offline_listener } from '@/helpers/events'
 import { useRouter } from 'vue-router'
 import { progress_bars_list } from '@/helpers/state.js'
+import { refreshOffline, isOffline } from '@/helpers/utils.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { handleError } from '@/store/notifications.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 
 const router = useRouter()
 const card = ref(null)
@@ -126,10 +133,20 @@ const showProfiles = ref(false)
 const currentProcesses = ref(await getRunningProfiles().catch(handleError))
 const selectedProfile = ref(currentProcesses.value[0])
 
+const offline = ref(await isOffline().catch(handleError))
+const refreshInternet = async () => {
+  offline.value = await refreshOffline().catch(handleError)
+}
+
 const unlistenProcess = await process_listener(async () => {
   await refresh()
 })
 
+const unlistenRefresh = await offline_listener(async (b) => {
+  offline.value = b
+  await refresh()
+})
+
 const refresh = async () => {
   currentProcesses.value = await getRunningProfiles().catch(handleError)
   if (!currentProcesses.value.includes(selectedProfile.value)) {
@@ -142,7 +159,7 @@ const stop = async (path) => {
     const processes = await getProfileProcesses(path ?? selectedProfile.value.path)
     await killProfile(processes[0])
 
-    mixpanel.track('InstanceStop', {
+    mixpanel_track('InstanceStop', {
       loader: currentProcesses.value[0].metadata.loader,
       game_version: currentProcesses.value[0].metadata.game_version,
       source: 'AppBar',
@@ -240,6 +257,7 @@ onBeforeUnmount(() => {
   window.removeEventListener('click', handleClickOutsideProfile)
   unlistenProcess()
   unlistenLoading()
+  unlistenRefresh()
 })
 </script>
 

theseus_gui/src/components/ui/SearchCard.vue

@@ -85,7 +85,7 @@ import { install as packInstall } from '@/helpers/pack.js'
 import { installVersionDependencies } from '@/helpers/utils.js'
 import { useFetch } from '@/helpers/fetch.js'
 import { handleError } from '@/store/notifications.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 dayjs.extend(relativeTime)
 
 const props = defineProps({
@@ -165,7 +165,7 @@ async function install() {
         props.project.icon_url
       ).catch(handleError)
 
-      mixpanel.track('PackInstall', {
+      mixpanel_track('PackInstall', {
         id: props.project.project_id,
         version_id: queuedVersionData.id,
         title: props.project.title,
@@ -196,7 +196,7 @@ async function install() {
         await installMod(props.instance.path, queuedVersionData.id).catch(handleError)
         await installVersionDependencies(props.instance, queuedVersionData)
 
-        mixpanel.track('ProjectInstall', {
+        mixpanel_track('ProjectInstall', {
           loader: props.instance.metadata.loader,
           game_version: props.instance.metadata.game_version,
           id: props.project.project_id,

theseus_gui/src/helpers/events.js

@@ -92,3 +92,15 @@ export async function command_listener(callback) {
 export async function warning_listener(callback) {
   return await listen('warning', (event) => callback(event.payload))
 }
+
+/// Payload for the 'offline' event
+/*
+  OfflinePayload {
+    offline: bool, true or false
+  }
+*/
+export async function offline_listener(callback) {
+  return await listen('offline', (event) => {
+    return callback(event.payload)
+  })
+}

theseus_gui/src/helpers/mixpanel.js

@@ -0,0 +1,57 @@
+import mixpanel from 'mixpanel-browser'
+
+// mixpanel_track
+function trackWrapper(originalTrack) {
+  return function (event_name, properties = {}) {
+    try {
+      originalTrack(event_name, properties)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+export const mixpanel_track = trackWrapper(mixpanel.track.bind(mixpanel))
+
+// mixpanel_opt_out_tracking()
+function optOutTrackingWrapper(originalOptOutTracking) {
+  return function () {
+    try {
+      originalOptOutTracking()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+export const mixpanel_opt_out_tracking = optOutTrackingWrapper(
+  mixpanel.opt_out_tracking.bind(mixpanel)
+)
+
+// mixpanel_opt_in_tracking()
+function optInTrackingWrapper(originalOptInTracking) {
+  return function () {
+    try {
+      originalOptInTracking()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+export const mixpanel_opt_in_tracking = optInTrackingWrapper(
+  mixpanel.opt_in_tracking.bind(mixpanel)
+)
+
+// mixpanel_init
+function initWrapper(originalInit) {
+  return function (token, config = {}) {
+    try {
+      originalInit(token, config)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+export const mixpanel_init = initWrapper(mixpanel.init.bind(mixpanel))
+
+export const mixpanel_is_loaded = () => {
+  return mixpanel.__loaded
+}

theseus_gui/src/helpers/utils.js

@@ -77,3 +77,12 @@ export const openLink = (url) => {
     },
   })
 }
+
+export const refreshOffline = async () => {
+  return await invoke('plugin:utils|refresh_offline', {})
+}
+
+// returns true/false
+export const isOffline = async () => {
+  return await invoke('plugin:utils|is_offline', {})
+}

theseus_gui/src/pages/Browse.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, ref, readonly, shallowRef, watch } from 'vue'
+import { computed, nextTick, ref, readonly, shallowRef, watch, onUnmounted } from 'vue'
 import {
   Pagination,
   Checkbox,
@@ -31,10 +31,17 @@ import IncompatibilityWarningModal from '@/components/ui/IncompatibilityWarningM
 import { useFetch } from '@/helpers/fetch.js'
 import { check_installed, get as getInstance } from '@/helpers/profile.js'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { isOffline } from '@/helpers/utils'
+import { offline_listener } from '@/helpers/events'
 
 const router = useRouter()
 const route = useRoute()
 
+const offline = ref(await isOffline())
+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
 const confirmModal = ref(null)
 const modInstallModal = ref(null)
 const incompatibilityWarningModal = ref(null)
@@ -498,10 +505,12 @@ const showLoaders = computed(
       instanceContext.value === null) ||
     ignoreInstanceLoaders.value
 )
+
+onUnmounted(() => unlistenOffline())
 </script>
 
 <template>
-  <div ref="searchWrapper" class="search-container">
+  <div v-if="!offline" ref="searchWrapper" class="search-container">
     <aside class="filter-panel">
       <Card v-if="instanceContext" class="small-instance">
         <router-link :to="`/instance/${encodeURIComponent(instanceContext.path)}`" class="instance">
@@ -695,7 +704,7 @@ const showLoaders = computed(
         class="pagination-before"
         @switch-page="onSearchChange"
       />
-      <SplashScreen v-if="loading" />
+      <SplashScreen v-if="loading || offline" />
       <section v-else class="project-list display-mode--list instance-results" role="list">
         <SearchCard
           v-for="result in results.hits"

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',

theseus_gui/src/pages/Library.vue

@@ -1,14 +1,15 @@
 <script setup>
-import { onUnmounted, shallowRef } from 'vue'
+import { onUnmounted, ref, shallowRef } from 'vue'
 import GridDisplay from '@/components/GridDisplay.vue'
 import { list } from '@/helpers/profile.js'
 import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { profile_listener } from '@/helpers/events.js'
+import { offline_listener, profile_listener } from '@/helpers/events.js'
 import { handleError } from '@/store/notifications.js'
 import { Button, PlusIcon } from 'omorphia'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import { NewInstanceImage } from '@/assets/icons'
+import { isOffline } from '@/helpers/utils'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
@@ -18,11 +19,19 @@ breadcrumbs.setRootContext({ name: 'Library', link: route.path })
 const profiles = await list(true).catch(handleError)
 const instances = shallowRef(Object.values(profiles))
 
-const unlisten = await profile_listener(async () => {
+const offline = ref(await isOffline())
+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
+const unlistenProfile = await profile_listener(async () => {
   const profiles = await list(true).catch(handleError)
   instances.value = Object.values(profiles)
 })
-onUnmounted(() => unlisten())
+onUnmounted(() => {
+  unlistenProfile()
+  unlistenOffline()
+})
 </script>
 
 <template>
@@ -37,7 +46,7 @@ onUnmounted(() => unlisten())
       <NewInstanceImage />
     </div>
     <h3>No instances found</h3>
-    <Button color="primary" @click="$refs.installationModal.show()">
+    <Button color="primary" :disabled="offline" @click="$refs.installationModal.show()">
       <PlusIcon />
       Create new instance
     </Button>

theseus_gui/src/pages/Settings.vue

@@ -5,7 +5,7 @@ import { handleError, useTheming } from '@/store/state'
 import { get, set } from '@/helpers/settings'
 import { get_max_memory } from '@/helpers/jre'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_opt_out_tracking, mixpanel_opt_in_tracking } from '@/helpers/mixpanel'
 
 const pageOptions = ['Home', 'Library']
 
@@ -30,9 +30,9 @@ watch(
     const setSettings = JSON.parse(JSON.stringify(newSettings))
 
     if (setSettings.opt_out_analytics) {
-      mixpanel.opt_out_tracking()
+      mixpanel_opt_out_tracking()
     } else {
-      mixpanel.opt_in_tracking()
+      mixpanel_opt_in_tracking()
     }
 
     if (setSettings.java_globals.JAVA_8?.path === '') {

theseus_gui/src/pages/instance/Index.vue

@@ -86,7 +86,12 @@
       <RouterView v-slot="{ Component }">
         <template v-if="Component">
           <Suspense @pending="loadingBar.startLoading()" @resolve="loadingBar.stopLoading()">
-            <component :is="Component" :instance="instance" :options="options"></component>
+            <component
+              :is="Component"
+              :instance="instance"
+              :options="options"
+              :offline="offline"
+            ></component>
           </Suspense>
         </template>
       </RouterView>
@@ -144,13 +149,13 @@ import {
   get_uuids_by_profile_path,
   kill_by_uuid,
 } from '@/helpers/process'
-import { process_listener, profile_listener } from '@/helpers/events'
+import { offline_listener, process_listener, profile_listener } from '@/helpers/events'
 import { useRoute, useRouter } from 'vue-router'
 import { ref, onUnmounted } from 'vue'
 import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
-import { showProfileInFolder } from '@/helpers/utils.js'
+import { isOffline, showProfileInFolder } from '@/helpers/utils.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { PackageIcon } from '@/assets/icons/index.js'
 import ExportModal from '@/components/ui/ExportModal.vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
@@ -170,6 +175,8 @@ breadcrumbs.setContext({
   query: route.query,
 })
 
+const offline = ref(await isOffline())
+
 const loadingBar = useLoading()
 
 const uuid = ref(null)
@@ -183,7 +190,7 @@ const startInstance = async (context) => {
   loading.value = false
   playing.value = true
 
-  mixpanel.track('InstanceStart', {
+  mixpanel_track('InstanceStart', {
     loader: instance.value.metadata.loader,
     game_version: instance.value.metadata.game_version,
     source: context,
@@ -211,7 +218,7 @@ const stopInstance = async (context) => {
     uuids.forEach(async (u) => await kill_by_uuid(u).catch(handleError))
   } else await kill_by_uuid(uuid.value).catch(handleError)
 
-  mixpanel.track('InstanceStop', {
+  mixpanel_track('InstanceStop', {
     loader: instance.value.metadata.loader,
     game_version: instance.value.metadata.game_version,
     source: context,
@@ -292,9 +299,14 @@ const unlistenProcesses = await process_listener((e) => {
   if (e.event === 'finished' && uuid.value === e.uuid) playing.value = false
 })
 
+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
 onUnmounted(() => {
   unlistenProcesses()
   unlistenProfiles()
+  unlistenOffline()
 })
 </script>
 

theseus_gui/src/pages/instance/Logs.vue

@@ -15,7 +15,7 @@
           <CheckIcon v-else />
           {{ copied ? 'Copied' : 'Copy' }}
         </Button>
-        <Button color="primary" @click="share">
+        <Button color="primary" :disabled="offline" @click="share">
           <ShareIcon />
           Share
         </Button>
@@ -78,6 +78,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  offline: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const logs = ref([])

theseus_gui/src/pages/instance/Mods.vue

@@ -93,6 +93,7 @@
             </Button>
             <Button
               class="transparent update"
+              :disabled="offline"
               @click="updateAll()"
               @mouseover="selectedOption = 'Update'"
             >
@@ -139,7 +140,7 @@
             </Button>
           </section>
           <section v-if="selectedOption === 'Update'" class="options">
-            <Button class="transparent" @click="updateAll()">
+            <Button class="transparent" :disabled="offline" @click="updateAll()">
               <UpdatedIcon />
               Update all
             </Button>
@@ -181,6 +182,7 @@
             <router-link
               v-if="mod.slug"
               :to="{ path: `/project/${mod.slug}/`, query: { i: props.instance.path } }"
+              :disabled="offline"
               class="mod-content"
             >
               <Avatar :src="mod.icon" />
@@ -208,7 +210,7 @@
             <Button
               v-else
               v-tooltip="'Update project'"
-              :disabled="!mod.outdated"
+              :disabled="!mod.outdated || offline"
               icon-only
               @click="updateProject(mod)"
             >
@@ -345,7 +347,7 @@ import {
   update_project,
 } from '@/helpers/profile.js'
 import { handleError } from '@/store/notifications.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { open } from '@tauri-apps/api/dialog'
 import { listen } from '@tauri-apps/api/event'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
@@ -368,6 +370,12 @@ const props = defineProps({
       return {}
     },
   },
+  offline: {
+    type: Boolean,
+    default() {
+      return false
+    },
+  },
 })
 
 const projects = ref([])
@@ -376,8 +384,9 @@ const showingOptions = ref(false)
 
 const initProjects = (initInstance) => {
   projects.value = []
+  if (!initInstance || !initInstance.projects) return
   for (const [path, project] of Object.entries(initInstance.projects)) {
-    if (project.metadata.type === 'modrinth') {
+    if (project.metadata.type === 'modrinth' && !props.offline) {
       let owner = project.metadata.members.find((x) => x.role === 'Owner')
       projects.value.push({
         path,
@@ -442,6 +451,13 @@ watch(
   }
 )
 
+watch(
+  () => props.offline,
+  () => {
+    if (props.instance) initProjects(props.instance)
+  }
+)
+
 const searchFilter = ref('')
 const selectAll = ref(false)
 const selectedProjectType = ref('All')
@@ -576,7 +592,7 @@ const updateAll = async () => {
     projects.value[project].updating = false
   }
 
-  mixpanel.track('InstanceUpdateAll', {
+  mixpanel_track('InstanceUpdateAll', {
     loader: props.instance.metadata.loader,
     game_version: props.instance.metadata.game_version,
     count: setProjects.length,
@@ -601,7 +617,7 @@ const updateProject = async (mod) => {
   mod.version = mod.updateVersion.version_number
   mod.updateVersion = null
 
-  mixpanel.track('InstanceProjectUpdate', {
+  mixpanel_track('InstanceProjectUpdate', {
     loader: props.instance.metadata.loader,
     game_version: props.instance.metadata.game_version,
     id: mod.id,
@@ -628,7 +644,7 @@ const toggleDisableMod = async (mod) => {
     .then((newPath) => {
       mod.path = newPath
       mod.disabled = !mod.disabled
-      mixpanel.track('InstanceProjectDisable', {
+      mixpanel_track('InstanceProjectDisable', {
         loader: props.instance.metadata.loader,
         game_version: props.instance.metadata.game_version,
         id: mod.id,
@@ -649,7 +665,7 @@ const removeMod = async (mod) => {
   await remove_project(props.instance.path, mod.path).catch(handleError)
   projects.value = projects.value.filter((x) => mod.path !== x.path)
 
-  mixpanel.track('InstanceProjectRemove', {
+  mixpanel_track('InstanceProjectRemove', {
     loader: props.instance.metadata.loader,
     game_version: props.instance.metadata.game_version,
     id: mod.id,
@@ -778,7 +794,7 @@ listen('tauri://file-drop', async (event) => {
     }
     initProjects(await get(props.instance.path).catch(handleError))
   }
-  mixpanel.track('InstanceCreate', {
+  mixpanel_track('InstanceCreate', {
     source: 'FileDrop',
   })
 })

theseus_gui/src/pages/instance/Options.vue

@@ -90,7 +90,12 @@
           Allows you to change the mod loader, loader version, or game version of the instance.
         </span>
       </label>
-      <button id="edit-versions" class="btn" @click="$refs.changeVersionsModal.show()">
+      <button
+        id="edit-versions"
+        class="btn"
+        @click="$refs.changeVersionsModal.show()"
+        :disabled="offline"
+      >
         <EditIcon />
         Edit versions
       </button>
@@ -291,7 +296,7 @@
       <button
         id="repair-profile"
         class="btn btn-highlight"
-        :disabled="repairing"
+        :disabled="repairing || offline"
         @click="repairProfile"
       >
         <HammerIcon /> Repair
@@ -308,7 +313,7 @@
       <button
         id="repair-profile"
         class="btn btn-highlight"
-        :disabled="repairing"
+        :disabled="repairing || offline"
         @click="repairModpack"
       >
         <DownloadIcon /> Reinstall
@@ -373,7 +378,7 @@ import { open } from '@tauri-apps/api/dialog'
 import { get_fabric_versions, get_forge_versions, get_quilt_versions } from '@/helpers/metadata.js'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
 import { handleError } from '@/store/notifications.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { useTheming } from '@/store/theme.js'
 
 const router = useRouter()
@@ -383,6 +388,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  offline: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const themeStore = useTheming()
@@ -403,7 +412,7 @@ const availableGroups = ref([
 async function resetIcon() {
   icon.value = null
   await edit_icon(props.instance.path, null).catch(handleError)
-  mixpanel.track('InstanceRemoveIcon')
+  mixpanel_track('InstanceRemoveIcon')
 }
 
 async function setIcon() {
@@ -422,7 +431,7 @@ async function setIcon() {
   icon.value = value
   await edit_icon(props.instance.path, icon.value).catch(handleError)
 
-  mixpanel.track('InstanceSetIcon')
+  mixpanel_track('InstanceSetIcon')
 }
 
 const globalSettings = await get().catch(handleError)
@@ -536,7 +545,7 @@ async function repairProfile() {
   await install(props.instance.path).catch(handleError)
   repairing.value = false
 
-  mixpanel.track('InstanceRepair', {
+  mixpanel_track('InstanceRepair', {
     loader: props.instance.metadata.loader,
     game_version: props.instance.metadata.game_version,
   })
@@ -547,7 +556,7 @@ async function repairModpack() {
   await update_repair_modrinth(props.instance.path).catch(handleError)
   repairing.value = false
 
-  mixpanel.track('InstanceRepair', {
+  mixpanel_track('InstanceRepair', {
     loader: props.instance.metadata.loader,
     game_version: props.instance.metadata.game_version,
   })
@@ -559,7 +568,7 @@ async function removeProfile() {
   await remove(props.instance.path).catch(handleError)
   removing.value = false
 
-  mixpanel.track('InstanceRemove', {
+  mixpanel_track('InstanceRemove', {
     loader: props.instance.metadata.loader,
     game_version: props.instance.metadata.game_version,
   })

theseus_gui/src/pages/project/Gallery.vue

@@ -93,7 +93,7 @@ import {
   Button,
 } from 'omorphia'
 import { ref } from 'vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 
 const props = defineProps({
   project: {
@@ -112,7 +112,7 @@ const nextImage = () => {
     expandedGalleryIndex.value = 0
   }
   expandedGalleryItem.value = props.project.gallery[expandedGalleryIndex.value]
-  mixpanel.track('GalleryImageNext', {
+  mixpanel_track('GalleryImageNext', {
     project_id: props.project.id,
     url: expandedGalleryItem.value.url,
   })
@@ -124,7 +124,7 @@ const previousImage = () => {
     expandedGalleryIndex.value = props.project.gallery.length - 1
   }
   expandedGalleryItem.value = props.project.gallery[expandedGalleryIndex.value]
-  mixpanel.track('GalleryImagePrevious', {
+  mixpanel_track('GalleryImagePrevious', {
     project_id: props.project.id,
     url: expandedGalleryItem.value,
   })
@@ -135,7 +135,7 @@ const expandImage = (item, index) => {
   expandedGalleryIndex.value = index
   zoomedIn.value = false
 
-  mixpanel.track('GalleryImageExpand', {
+  mixpanel_track('GalleryImageExpand', {
     project_id: props.project.id,
     url: item.url,
   })

theseus_gui/src/pages/project/Index.vue

@@ -267,7 +267,7 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useRoute } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
-import { installVersionDependencies } from '@/helpers/utils'
+import { installVersionDependencies, isOffline } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import ModInstallModal from '@/components/ui/ModInstallModal.vue'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
@@ -276,7 +276,7 @@ import { useFetch } from '@/helpers/fetch.js'
 import { handleError } from '@/store/notifications.js'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
@@ -297,6 +297,8 @@ const instance = ref(null)
 const installed = ref(false)
 const installedVersion = ref(null)
 
+const offline = ref(await isOffline())
+
 async function fetchProjectData() {
   ;[
     data.value,
@@ -325,7 +327,7 @@ async function fetchProjectData() {
     : null
 }
 
-await fetchProjectData()
+if (!offline.value) await fetchProjectData()
 
 watch(
   () => route.params.id,
@@ -392,7 +394,7 @@ async function install(version) {
         data.value.icon_url
       ).catch(handleError)
 
-      mixpanel.track('PackInstall', {
+      mixpanel_track('PackInstall', {
         id: data.value.id,
         version_id: queuedVersionData.id,
         title: data.value.title,
@@ -434,7 +436,7 @@ async function install(version) {
           await installMod(instance.value.path, selectedVersion.id).catch(handleError)
           await installVersionDependencies(instance.value, queuedVersionData)
           installedVersion.value = selectedVersion.id
-          mixpanel.track('ProjectInstall', {
+          mixpanel_track('ProjectInstall', {
             loader: instance.value.metadata.loader,
             game_version: instance.value.metadata.game_version,
             id: data.value.id,
@@ -458,7 +460,7 @@ async function install(version) {
           await installMod(instance.value.path, queuedVersionData.id).catch(handleError)
           await installVersionDependencies(instance.value, queuedVersionData)
           installedVersion.value = queuedVersionData.id
-          mixpanel.track('ProjectInstall', {
+          mixpanel_track('ProjectInstall', {
             loader: instance.value.metadata.loader,
             game_version: instance.value.metadata.game_version,
             id: data.value.id,

theseus_gui/src/store/notifications.js

@@ -23,3 +23,7 @@ export const handleError = (err) => {
   })
   console.error(err)
 }
+
+export const handleMixpanelError = (err) => {
+  console.error(err)
+}