Wire up homepage & library (#83)

* Top 10 packs & mods by follows plugged into home page. Modpacks installable.

* Only displays row if packs are present. Confirmation modal added. Displays play or X ctas.

* Fixes attr ordering.

* Rewires library page. Adds loader.

* Updates kill_by_pid to kill_by_uuid.

* Starts loading animation when installing on homepage.

* Changes RowDisplay key. Polish.

* Removes loader. Fixes InstallConfirmModal.

* Removes loader. Polishing.

* Z-index changes.

* Z-index changes.

* Fixes content going off screen.

* Styling changes.

* Filters out projects already installed on the home page.

* Wires up instance.vue, homepage, and appbar to process API.

* Cleans up process handling. App bar partially hooked up.

* Removes scoped in Settings to fix AnimatedLogo. Adds loader to Instance.

* Moves ctas outside of card.

* Adds mouse over to Stop btn.

* Removes unnecessary code. Fixes uuid reset.

* Wires up Instance.vue to process API.

* Removes appbar mod count. Updates code to use new linked_data and updated events.

* Switches load_listener to profile_listener. Unlistens on unmount.

* Cleans up instance card styling.

* Fixes margin with uncollapsed navbar. Ensures RowDisplay has data.

* Updates profile_listener. Increases stack size.

* Provides more margin when navbar is expanded.

* fix proper

* Re-adds calculated width and height. Fixes navbar.

* Increases stack size further. Navbar is not absolute. View width made into var.

* Ensures the specific isntance for a killed process is set to off.

* fix menu when not logged in

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

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"