Redoing some of the types

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

@@ -4,17 +4,18 @@ import { PUBLIC_YOUTUBE_API_CLIENT_ID } from '$env/static/public'
 import type { PageServerLoad, Actions } from './$types'
 import { DB } from '$lib/server/db'
 import { Jellyfin, JellyfinFetchError } from '$lib/server/jellyfin'
+import type { ConnectionInfo } from '$lib/server/connections'
 import { google } from 'googleapis'
 
 export const load: PageServerLoad = async ({ fetch, locals }) => {
-    const connectionsResponse = await fetch(`/api/users/${locals.user.id}/connections`, {
+    const connectionInfoResponse = await fetch(`/api/users/${locals.user.id}/connections`, {
         method: 'GET',
         headers: { apikey: SECRET_INTERNAL_API_KEY },
-    })
+    }).then((response) => response.json())
 
-    const userConnections = await connectionsResponse.json()
+    const connections: ConnectionInfo[] = connectionInfoResponse.connections
 
-    return { connections: userConnections.connections }
+    return { connections }
 }
 
 export const actions: Actions = {
@@ -28,7 +29,7 @@ export const actions: Actions = {
 
         if (authData instanceof JellyfinFetchError) return fail(authData.httpCode, { message: authData.message })
 
-        const newConnectionId = DB.addConnectionInfo(locals.user.id, { type: 'jellyfin', serviceInfo: { userId: authData.User.Id, urlOrigin: serverUrl.toString() }, tokens: { accessToken: authData.AccessToken } })
+        const newConnectionId = DB.addConnectionInfo({ userId: locals.user.id, type: 'jellyfin', service: { userId: authData.User.Id, urlOrigin: serverUrl.toString() }, tokens: { accessToken: authData.AccessToken } })
 
         const response = await fetch(`/api/connections?ids=${newConnectionId}`, {
             method: 'GET',
@@ -49,9 +50,10 @@ export const actions: Actions = {
         const userChannelResponse = await youtube.channels.list({ mine: true, part: ['id', 'snippet'], access_token: tokens.access_token! })
         const userChannel = userChannelResponse.data.items![0]
 
-        const newConnectionId = DB.addConnectionInfo(locals.user.id, {
+        const newConnectionId = DB.addConnectionInfo({
+            userId: locals.user.id,
             type: 'youtube-music',
-            serviceInfo: { userId: userChannel.id! },
+            service: { userId: userChannel.id! },
             tokens: { accessToken: tokens.access_token!, refreshToken: tokens.refresh_token!, expiry: tokens.expiry_date! },
         })
 

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

@@ -16,7 +16,7 @@
     import { PUBLIC_YOUTUBE_API_CLIENT_ID } from '$env/static/public'
 
     export let data: PageServerData & LayoutData
-    let connections: ConnectionInfo[] = data.connections
+    let connections = data.connections
 
     const authenticateJellyfin: SubmitFunction = ({ formData, cancel }) => {
         const { serverUrl, username, password } = Object.fromEntries(formData)
@@ -39,7 +39,7 @@
             if (result.type === 'failure') {
                 return ($newestAlert = ['warning', result.data?.message])
             } else if (result.type === 'success') {
-                const newConnection: ConnectionInfo = result.data!.newConnection
+                const newConnection = result.data!.newConnection
                 connections = [...connections, newConnection]
 
                 newConnectionModal = null
@@ -72,7 +72,7 @@
             if (result.type === 'failure') {
                 return ($newestAlert = ['warning', result.data?.message])
             } else if (result.type === 'success') {
-                const newConnection: ConnectionInfo = result.data!.newConnection
+                const newConnection = result.data!.newConnection
                 connections = [...connections, newConnection]
                 return ($newestAlert = ['success', 'Added Youtube Music'])
             }
@@ -135,7 +135,14 @@
         </section>
         <div id="connection-profile-grid" class="grid gap-8">
             {#each connections as connection}
-                <ConnectionProfile {connection} submitFunction={profileActions} />
+                <ConnectionProfile
+                    id={connection.id}
+                    type={connection.type}
+                    username={connection.service.username}
+                    profilePicture={'profilePicture' in connection.service ? connection.service.profilePicture : undefined}
+                    serverName={'serverName' in connection.service ? connection.service.serverName : undefined}
+                    submitFunction={profileActions}
+                />
             {/each}
         </div>
         {#if newConnectionModal !== null}

src/routes/(app)/user/connectionProfile.svelte

@@ -6,24 +6,22 @@
     import { fly } from 'svelte/transition'
     import { enhance } from '$app/forms'
 
-    export let connection: ConnectionInfo
+    export let id: string, type: 'jellyfin' | 'youtube-music', username: string | undefined, profilePicture: string | undefined, serverName: string | undefined
     export let submitFunction: SubmitFunction
 
-    $: serviceData = Services[connection.type]
+    $: serviceData = Services[type]
 
     let showModal = false
 
-    const subHeaderItems: string[] = []
-    if ('username' in connection.serviceInfo && connection.serviceInfo.username) subHeaderItems.push(connection.serviceInfo.username)
-    if ('serverName' in connection.serviceInfo && connection.serviceInfo.serverName) subHeaderItems.push(connection.serviceInfo.serverName)
+    const subHeaderItems = [username, serverName]
 </script>
 
 <section class="rounded-lg" style="background-color: rgba(82, 82, 82, 0.25);" transition:fly={{ x: 50 }}>
     <header class="flex h-20 items-center gap-4 p-4">
         <div class="relative aspect-square h-full p-1">
             <img src={serviceData.icon} alt="{serviceData.displayName} icon" />
-            {#if 'profilePicture' in connection.serviceInfo && connection.serviceInfo.profilePicture}
-                <img src={connection.serviceInfo.profilePicture} alt="" class="absolute bottom-0 right-0 aspect-square h-5 rounded-full" />
+            {#if profilePicture}
+                <img src={profilePicture} alt="" class="absolute bottom-0 right-0 aspect-square h-5 rounded-full" />
             {/if}
         </div>
         <div>
@@ -42,7 +40,7 @@
                         <i class="fa-solid fa-link-slash mr-1" />
                         Delete Connection
                     </button>
-                    <input type="hidden" value={connection.id} name="connectionId" />
+                    <input type="hidden" value={id} name="connectionId" />
                 </form>
             {/if}
         </div>

src/routes/api/connections/+server.ts

@@ -1,5 +1,5 @@
 import type { RequestHandler } from '@sveltejs/kit'
-import { Connections } from '$lib/server/connections'
+import { Connections, type ConnectionInfo } from '$lib/server/connections'
 
 export const GET: RequestHandler = async ({ url }) => {
     const ids = url.searchParams.get('ids')?.replace(/\s/g, '').split(',')

src/routes/api/search/+server.ts

@@ -12,7 +12,7 @@ export const GET: RequestHandler = async ({ url }) => {
         await connection
             .search(query)
             .then((results) => searchResults.push(...results))
-            .catch((reason) => console.log(`Failed to search "${query}" from connection ${connection.id}: ${reason}`))
+            .catch((reason) => console.error(`Failed to search "${query}" from connection ${connection.id}: ${reason}`))
     }
 
     return Response.json({ searchResults })

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

@@ -1,5 +1,5 @@
 import type { RequestHandler } from '@sveltejs/kit'
-import { Connections } from '$lib/server/connections'
+import { Connections, type ConnectionInfo } from '$lib/server/connections'
 
 export const GET: RequestHandler = async ({ params }) => {
     const userId = params.userId!

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

@@ -6,7 +6,7 @@ import { Connections } from '$lib/server/connections'
 export const GET: RequestHandler = async ({ params }) => {
     const userId = params.userId!
 
-    const recommendations: (Song | Album | Playlist)[] = []
+    const recommendations: (Song | Album | Artist | Playlist)[] = []
     for (const connection of Connections.getUserConnections(userId)) {
         await connection
             .getRecommendations()