Wire up homepage & library

.cargo/config.toml

@@ -1,3 +1,3 @@
 # Windows has stack overflows when calling from Tauri, so we increase compiler size
 [target.'cfg(windows)']
-rustflags = ["-C", "link-args=/STACK:8388608"]
+rustflags = ["-C", "link-args=/STACK:16777220"]

theseus_gui/src/App.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+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 AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { list } from '@/helpers/profile'
 import { get } from '@/helpers/settings'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
@@ -17,16 +16,6 @@ onMounted(async () => {
   themeStore.setThemeState(settings)
   themeStore.collapsedNavigation = collapsed_navigation
 })
-
-const installedMods = ref(0)
-list().then(
-  (profiles) =>
-    (installedMods.value = Object.values(profiles).reduce(
-      (acc, val) => acc + Object.keys(val.projects).length,
-      0
-    ))
-)
-// TODO: add event when profiles update to update installed mods count
 </script>
 
 <template>
@@ -117,9 +106,13 @@ list().then(
         </section>
       </div>
       <div class="router-view">
-        <Suspense>
-          <RouterView />
-        </Suspense>
+        <RouterView v-slot="{ Component }">
+          <template v-if="Component">
+            <Suspense>
+              <component :is="Component"></component>
+            </Suspense>
+          </template>
+        </RouterView>
       </div>
     </div>
   </div>
@@ -133,10 +126,10 @@ list().then(
   overflow: hidden;
 
   .view {
-    width: calc(100% - 5rem);
+    width: var(--view-width);
 
     &.expanded {
-      width: calc(100% - 12rem);
+      width: var(--expanded-view-width);
     }
 
     .appbar {

theseus_gui/src/assets/stylesheets/global.scss

@@ -3,6 +3,8 @@
 :root {
   font-family: var(--font-standard);
   color-scheme: dark;
+  --view-width: calc(100% - 5rem);
+  --expanded-view-width: calc(100% - 13rem);
 }
 
 * {

theseus_gui/src/components/RowDisplay.vue

@@ -23,23 +23,34 @@ const props = defineProps({
   },
   canPaginate: Boolean,
 })
+
 const allowPagination = ref(false)
 const modsRow = ref(null)
 const newsRow = ref(null)
-// Remove after state is populated with real data
+
 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
-  const children = parentsRow.children
-  const lastChild = children[children.length - 1]
-  const childBox = lastChild.getBoundingClientRect()
-  if (childBox.x + childBox.width > window.innerWidth) allowPagination.value = true
-  else allowPagination.value = false
+
+  // 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
+  // wait-time for the below expressions has not failed thus-far.
+  setTimeout(() => {
+    const children = parentsRow.children
+    const lastChild = children[children.length - 1]
+    const childBox = lastChild?.getBoundingClientRect()
+
+    if (childBox?.x + childBox?.width > window.innerWidth && props.canPaginate)
+      allowPagination.value = true
+    else allowPagination.value = false
+  }, 300)
 }
+
 onMounted(() => {
   if (props.canPaginate) window.addEventListener('resize', handlePaginationDisplay)
   // Check if pagination should be rendered on mount
@@ -48,6 +59,7 @@ onMounted(() => {
 onUnmounted(() => {
   if (props.canPaginate) window.removeEventListener('resize', handlePaginationDisplay)
 })
+
 const handleLeftPage = () => {
   if (shouldRenderNormalInstances) modsRow.value.scrollLeft -= 170
   else if (shouldRenderNews) newsRow.value.scrollLeft -= 170
@@ -58,7 +70,7 @@ const handleRightPage = () => {
 }
 </script>
 <template>
-  <div class="row">
+  <div v-if="props.instances.length > 0" class="row">
     <div class="header">
       <p>{{ props.label }}</p>
       <hr aria-hidden="true" />
@@ -70,7 +82,7 @@ const handleRightPage = () => {
     <section v-if="shouldRenderNormalInstances" ref="modsRow" class="instances">
       <Instance
         v-for="instance in props.instances"
-        :key="instance.id"
+        :key="instance?.project_id || instance?.id"
         display="card"
         :instance="instance"
         class="row-instance"

theseus_gui/src/components/ui/AccountsCard.vue

@@ -8,7 +8,7 @@
     <Avatar :size="expanded ? 'xs' : 'sm'" :src="selectedAccount?.profile_picture ?? ''" />
     <div v-show="expanded" class="avatar-text">
       <div class="text no-select">
-        {{ selectedAccount.username }}
+        {{ selectedAccount ? selectedAccount.username : 'Offline' }}
       </div>
       <p class="no-select">
         <UsersIcon />