I'm tired

src/routes/(app)/+layout.svelte

@@ -38,7 +38,7 @@
                 <div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
             </div>
         </div>
-        <section class="no-scrollbar overflow-y-scroll px-[max(7rem,_5vw)] pt-16">
+        <section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)] pt-16">
             <slot />
         </section>
         <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">

src/routes/(app)/+page.server.ts

@@ -0,0 +1,12 @@
+import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
+import type { PageServerLoad } from './$types'
+
+export const prerender = false
+
+export const load: PageServerLoad = async ({ locals, fetch, url }) => {
+    const recommendationResponse = await fetch(`/api/users/${locals.user.id}/recommendations`, { headers: { apikey: SECRET_INTERNAL_API_KEY } })
+    const recommendationData = await recommendationResponse.json()
+    const { recommendations } = recommendationData
+
+    return { recommendations }
+}

src/routes/(app)/+page.svelte

@@ -1,7 +1,10 @@
-<div id="test-box" class="h-[200vh]"></div>
+<script lang="ts">
+    import ScrollableCardMenu from '$lib/components/media/scrollableCardMenu.svelte'
+    import type { PageData } from './$types'
 
-<!-- <style>
-    #test-box {
-        background: linear-gradient(to bottom, white, black);
-    }
-</style> -->
+    export let data: PageData
+</script>
+
+<div id="main">
+    <ScrollableCardMenu header={'Listen Again'} cardDataList={data.recommendations} />
+</div>

src/routes/api/users/[userId]/recommendations/+server.ts

@@ -1,15 +1,16 @@
 import type { RequestHandler } from '@sveltejs/kit'
 import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
+import { Jellyfin } from '$lib/service-managers/jellyfin'
 
 // This is temporary functionally for the sake of developing the app.
-// In the future will implement more robust algorith for offering recommendations
+// In the future will implement more robust algorithm for offering recommendations
 export const GET: RequestHandler = async ({ params, fetch }) => {
     const userId = params.userId as string
 
     const connectionsResponse = await fetch(`/api/users/${userId}/connections`, { headers: { apikey: SECRET_INTERNAL_API_KEY } })
     const userConnections: Connection[] = await connectionsResponse.json()
 
-    const recommendations = []
+    const recommendations: Song[] = []
 
     for (const connection of userConnections) {
         const { service, accessToken } = connection
@@ -29,6 +30,11 @@ export const GET: RequestHandler = async ({ params, fetch }) => {
 
                 const mostPlayedResponse = await fetch(mostPlayedSongsURL, { headers: requestHeaders })
                 const mostPlayedData = await mostPlayedResponse.json()
+
+                mostPlayedData.Items.forEach((song: Jellyfin.Song) => recommendations.push(Jellyfin.songFactory(song, connection as Jellyfin.JFConnection)))
+                break
         }
     }
+
+    return Response.json({ recommendations })
 }