How did I ever live without interfaces

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

@@ -7,7 +7,7 @@ export const GET: RequestHandler = async ({ params }) => {
     const userId = params.userId as string
 
     const connections = Connections.getUserConnections(userId)
-    return new Response(JSON.stringify(connections))
+    return Response.json(connections)
 }
 
 // This schema should be identical to the Connection Data Type but without the id and userId
@@ -30,7 +30,7 @@ export const POST: RequestHandler = async ({ params, request }) => {
 
     const { service, accessToken } = connection
     const newConnection = Connections.addConnection(userId, service, accessToken)
-    return new Response(JSON.stringify(newConnection))
+    return Response.json(newConnection)
 }
 
 export const DELETE: RequestHandler = async ({ request }) => {

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

@@ -0,0 +1,34 @@
+import type { RequestHandler } from '@sveltejs/kit'
+import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
+
+// This is temporary functionally for the sake of developing the app.
+// In the future will implement more robust algorith 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 = []
+
+    for (const connection of userConnections) {
+        const { service, accessToken } = connection
+
+        switch (service.type) {
+            case 'jellyfin':
+                const mostPlayedSongsSearchParams = new URLSearchParams({
+                    SortBy: 'PlayCount',
+                    SortOrder: 'Descending',
+                    IncludeItemTypes: 'Audio',
+                    Recursive: 'true',
+                    limit: '10',
+                })
+
+                const mostPlayedSongsURL = new URL(`/Users/${service.userId}/Items?${mostPlayedSongsSearchParams.toString()}`, service.urlOrigin).href
+                const requestHeaders = new Headers({ Authorization: `MediaBrowser Token="${accessToken}"` })
+
+                const mostPlayedResponse = await fetch(mostPlayedSongsURL, { headers: requestHeaders })
+                const mostPlayedData = await mostPlayedResponse.json()
+        }
+    }
+}

src/routes/settings/connections/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { fly } from 'svelte/transition'
     import Services from '$lib/services.json'
     import JellyfinAuthBox from './jellyfinAuthBox.svelte'
     import { newestAlert } from '$lib/stores.js'
@@ -38,26 +37,25 @@
         }
 
         return async ({ result }) => {
-            switch (result.type) {
-                case 'failure':
-                    return ($newestAlert = ['warning', result.data?.message])
-                case 'success':
-                    if (result.data?.newConnection) {
-                        const newConnection: Connection = result.data.newConnection
-                        connections = [newConnection, ...connections]
+            if (result.type === 'failure') {
+                return ($newestAlert = ['warning', result.data?.message])
+            } else if (result.type === 'success') {
+                if (result.data?.newConnection) {
+                    const newConnection: Connection = result.data.newConnection
+                    connections = [newConnection, ...connections]
 
-                        newConnectionModal = null
-                        return ($newestAlert = ['success', `Added ${Services[newConnection.service.type].displayName}`])
-                    } else if (result.data?.deletedConnectionId) {
-                        const id = result.data.deletedConnectionId
-                        const indexToDelete = connections.findIndex((connection) => connection.id === id)
-                        const serviceType = connections[indexToDelete].service.type
+                    newConnectionModal = null
+                    return ($newestAlert = ['success', `Added ${Services[newConnection.service.type].displayName}`])
+                } else if (result.data?.deletedConnectionId) {
+                    const id = result.data.deletedConnectionId
+                    const indexToDelete = connections.findIndex((connection) => connection.id === id)
+                    const serviceType = connections[indexToDelete].service.type
 
-                        connections.splice(indexToDelete, 1)
-                        connections = connections
+                    connections.splice(indexToDelete, 1)
+                    connections = connections
 
-                        return ($newestAlert = ['success', `Deleted ${Services[serviceType].displayName}`])
-                    }
+                    return ($newestAlert = ['success', `Deleted ${Services[serviceType].displayName}`])
+                }
             }
         }
     }
@@ -82,7 +80,9 @@
             <ConnectionProfile {connection} submitFunction={submitCredentials} />
         {/each}
     </div>
-    <svelte:component this={newConnectionModal} submitFunction={submitCredentials} on:close={() => (newConnectionModal = null)} />
+    {#if newConnectionModal !== null}
+        <svelte:component this={newConnectionModal} submitFunction={submitCredentials} on:close={() => (newConnectionModal = null)} />
+    {/if}
 </main>
 
 <style>

src/routes/settings/connections/jellyfinAuthBox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { SubmitFunction } from '@sveltejs/kit'
+    import { scale } from 'svelte/transition'
     import { createEventDispatcher } from 'svelte'
     import { enhance } from '$app/forms'
 
@@ -8,7 +9,7 @@
     const dispatch = createEventDispatcher()
 </script>
 
-<form method="post" use:enhance={submitFunction} class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+<form method="post" use:enhance={submitFunction} class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" transition:scale>
     <div id="main-box" class="relative flex aspect-video w-screen max-w-2xl flex-col justify-center gap-9 rounded-xl bg-neutral-925 px-8">
         <h1 class="text-center text-4xl">Jellyfin Sign In</h1>
         <div class="flex w-full flex-col gap-5">