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/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 {