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/pages/Index.vue

@@ -1,24 +1,66 @@
 <script setup>
-import RowDisplay from '@/components/RowDisplay.vue'
-import { shallowRef } from 'vue'
-import { list } from '@/helpers/profile.js'
+import { ref, shallowRef, onUnmounted } from 'vue'
+import { ofetch } from 'ofetch'
 import { useRoute } from 'vue-router'
+import RowDisplay from '@/components/RowDisplay.vue'
+import { list } from '@/helpers/profile.js'
+import { profile_listener } from '@/helpers/events'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
+const featuredModpacks = ref({})
+const featuredMods = ref({})
+const filter = ref('')
+
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 
-const profiles = await list()
-const recentInstances = shallowRef(Object.values(profiles))
-
 breadcrumbs.setRootContext({ name: 'Home', link: route.path })
+
+const recentInstances = shallowRef()
+
+const getInstances = async () => {
+  filter.value = ''
+  const profiles = await list()
+  recentInstances.value = Object.values(profiles)
+
+  const excludeIds = recentInstances.value.map((i) => i.metadata?.linked_data?.project_id)
+  excludeIds.forEach((id, index) => {
+    filter.value += `NOT"project_id"="${id}"`
+    if (index < excludeIds.length - 1) filter.value += ' AND '
+  })
+}
+
+const getFeaturedModpacks = async () => {
+  const response = await ofetch(
+    `https://api.modrinth.com/v2/search?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`
+  )
+  featuredModpacks.value = response.hits
+}
+const getFeaturedMods = async () => {
+  const response = await ofetch(
+    `https://api.modrinth.com/v2/search?facets=[["project_type:mod"]]&limit=10&index=follows&filters=${filter.value}`
+  )
+  featuredMods.value = response.hits
+}
+
+await getInstances()
+await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+
+const unlisten = await profile_listener(async (e) => {
+  if (e.event === 'edited') {
+    await getInstances()
+    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+  }
+})
+
+onUnmounted(() => unlisten())
 </script>
 
 <template>
   <div class="page-container">
     <RowDisplay label="Jump back in" :instances="recentInstances" :can-paginate="false" />
-    <RowDisplay label="Popular packs" :instances="recentInstances" :can-paginate="true" />
-    <RowDisplay label="Test" :instances="recentInstances" :can-paginate="true" />
+    <RowDisplay label="Popular packs" :instances="featuredModpacks" :can-paginate="true" />
+    <RowDisplay label="Popular mods" :instances="featuredMods" :can-paginate="true" />
   </div>
 </template>
 

theseus_gui/src/pages/Library.vue

@@ -1,22 +1,29 @@
 <script setup>
-import GridDisplay from '@/components/GridDisplay.vue'
 import { shallowRef } from 'vue'
-import { list } from '@/helpers/profile'
+import GridDisplay from '@/components/GridDisplay.vue'
+import { list } from '@/helpers/profile.js'
 import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
 
-const profiles = await list()
-const instances = shallowRef(Object.values(profiles))
-
 breadcrumbs.setRootContext({ name: 'Library', link: route.path })
+
+const profiles = await list()
+const instances = shallowRef(
+  Object.values(profiles).filter((prof) => !prof.metadata.linked_project_id)
+)
+const modpacks = shallowRef(
+  Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
+)
 </script>
 
 <template>
   <div>
     <GridDisplay label="Instances" :instances="instances" />
-    <GridDisplay label="Modpacks" :instances="instances" />
+    <GridDisplay label="Modpacks" :instances="modpacks" />
   </div>
 </template>
+
+<style lang="scss" scoped></style>

theseus_gui/src/pages/Settings.vue

@@ -347,7 +347,7 @@ const setJavaInstall = (javaInstall) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .concurrent-downloads {
   width: 80% !important;
 }