ConnectionInfo and the db ConnectionRow types are now completely seperate things. Started on audio fetching yay!

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

@@ -1,9 +1,10 @@
 <script lang="ts">
-    import { pageWidth } from '$lib/stores'
     import SearchBar from '$lib/components/util/searchBar.svelte'
     import type { LayoutData } from './$types'
+    import { currentlyPlaying } from '$lib/stores'
     import NavTab from '$lib/components/navbar/navTab.svelte'
     import PlaylistTab from '$lib/components/navbar/playlistTab.svelte'
+    import MediaPlayer from '$lib/components/media/mediaPlayer.svelte'
 
     export let data: LayoutData
 
@@ -21,50 +22,32 @@
     }
 </script>
 
-{#if $pageWidth >= 768}
-    <div class="h-full overflow-hidden">
-        <div class="no-scrollbar fixed left-0 top-0 z-10 grid h-full w-20 grid-cols-1 grid-rows-[min-content_auto] gap-5 px-3 py-12">
-            <div class="flex flex-col gap-4">
-                {#each data.navTabs as nav}
-                    <NavTab {nav} disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)} />
-                {/each}
-            </div>
-            <div class="no-scrollbar flex flex-col gap-5 overflow-y-scroll px-1.5">
-                {#each data.playlistTabs as playlist}
-                    <PlaylistTab {playlist} on:mouseenter={(event) => setTooltip(event.detail.x, event.detail.y, event.detail.content)} on:mouseleave={() => (playlistTooltip.style.display = 'none')} />
-                {/each}
-            </div>
-            <div bind:this={playlistTooltip} class="absolute hidden max-w-48 -translate-y-1/2 translate-x-10 whitespace-nowrap rounded bg-neutral-800 px-2 py-1.5 text-sm">
-                <div class="overflow-clip text-ellipsis">PLAYLIST_NAME</div>
-                <div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
-            </div>
+<div class="h-full overflow-hidden">
+    <div class="no-scrollbar fixed left-0 top-0 z-10 grid h-full w-20 grid-cols-1 grid-rows-[min-content_auto] gap-5 px-3 py-12">
+        <div class="flex flex-col gap-4">
+            {#each data.navTabs as nav}
+                <NavTab {nav} disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)} />
+            {/each}
+        </div>
+        <div class="no-scrollbar flex flex-col gap-5 overflow-y-scroll px-1.5">
+            {#each data.playlistTabs as playlist}
+                <PlaylistTab {playlist} on:mouseenter={(event) => setTooltip(event.detail.x, event.detail.y, event.detail.content)} on:mouseleave={() => (playlistTooltip.style.display = 'none')} />
+            {/each}
+        </div>
+        <div bind:this={playlistTooltip} class="absolute hidden max-w-48 -translate-y-1/2 translate-x-10 whitespace-nowrap rounded bg-neutral-800 px-2 py-1.5 text-sm">
+            <div class="overflow-clip text-ellipsis">PLAYLIST_NAME</div>
+            <div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
         </div>
-        <section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)]">
-            <div class="my-6 max-w-xl">
-                <SearchBar />
-            </div>
-            <slot />
-        </section>
-        <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
-            <!-- <MiniPlayer displayMode={'horizontal'} /> -->
-        </footer>
     </div>
-{:else}
-    <div class="h-full overflow-hidden">
-        <section class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-16">
-            <slot />
-        </section>
-        <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
-            <!-- <MiniPlayer displayMode={'vertical'} /> -->
-            <!-- <NavbarFoot
-                {currentPathname}
-                transitionTime={pageTransitionTime}
-                on:navigate={(event) => {
-                    event.detail.direction === 'right' ? (directionMultiplier = 1) : (directionMultiplier = -1)
-                    currentPathname = event.detail.pathname
-                    goto(currentPathname)
-                }}
-            /> -->
-        </footer>
-    </div>
-{/if}
+    <section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)]">
+        <div class="my-6 max-w-xl">
+            <SearchBar />
+        </div>
+        <slot />
+    </section>
+    <section class="absolute bottom-0 z-40 max-h-full w-full">
+        {#if $currentlyPlaying}
+            <MediaPlayer currentlyPlaying={$currentlyPlaying} />
+        {/if}
+    </section>
+</div>

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

@@ -2,9 +2,11 @@ import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
 import type { PageServerLoad } from './$types'
 
 export const load: PageServerLoad = async ({ locals, fetch }) => {
-    const recommendationResponse = await fetch(`/api/users/${locals.user.id}/recommendations`, { headers: { apikey: SECRET_INTERNAL_API_KEY } })
-    const recommendationData = await recommendationResponse.json()
-    const { recommendations } = recommendationData
+    const recommendationResponse = await fetch(`/api/users/${locals.user.id}/recommendations`, {
+        headers: { apikey: SECRET_INTERNAL_API_KEY },
+    }).then((response) => response.json())
+
+    const recommendations: (Song | Album | Artist | Playlist)[] = recommendationResponse.recommendations
 
     return { recommendations }
 }

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

@@ -1,6 +1,5 @@
 <script lang="ts">
     import ScrollableCardMenu from '$lib/components/media/scrollableCardMenu.svelte'
-    import MediaCard from '$lib/components/media/mediaCard.svelte'
     import type { PageData } from './$types'
 
     export let data: PageData

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

@@ -4,7 +4,6 @@ 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 }) => {
@@ -29,7 +28,7 @@ export const actions: Actions = {
 
         if (authData instanceof JellyfinFetchError) return fail(authData.httpCode, { message: authData.message })
 
-        const newConnectionId = DB.addConnectionInfo({ userId: locals.user.id, type: 'jellyfin', service: { 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, serverUrl: serverUrl.toString() }, tokens: { accessToken: authData.AccessToken } })
 
         const response = await fetch(`/api/connections?ids=${newConnectionId}`, {
             method: 'GET',

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

@@ -134,15 +134,8 @@
             </div>
         </section>
         <div id="connection-profile-grid" class="grid gap-8">
-            {#each connections as connection}
-                <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 connections as connectionInfo}
+                <ConnectionProfile {connectionInfo} submitFunction={profileActions} />
             {/each}
         </div>
         {#if newConnectionModal !== null}

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

@@ -6,26 +6,32 @@
     import { fly } from 'svelte/transition'
     import { enhance } from '$app/forms'
 
-    export let id: string, type: 'jellyfin' | 'youtube-music', username: string | undefined, profilePicture: string | undefined, serverName: string | undefined
+    export let connectionInfo: ConnectionInfo
     export let submitFunction: SubmitFunction
 
-    $: serviceData = Services[type]
+    $: serviceData = Services[connectionInfo.type]
 
     let showModal = false
 
-    const subHeaderItems = [username, serverName]
+    const subHeaderItems: string[] = []
+    if ('username' in connectionInfo) {
+        subHeaderItems.push(connectionInfo.username)
+    }
+    if ('serverName' in connectionInfo) {
+        subHeaderItems.push(connectionInfo.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}
-                <img src={profilePicture} alt="" class="absolute bottom-0 right-0 aspect-square h-5 rounded-full" />
+            {#if 'profilePicture' in connectionInfo}
+                <img src={connectionInfo.profilePicture} alt="" class="absolute bottom-0 right-0 aspect-square h-5 rounded-full" />
             {/if}
         </div>
         <div>
-            <div>{serviceData.displayName}</div>
+            <div>{serviceData.displayName} - {connectionInfo.id}</div>
             <div class="text-sm text-neutral-500">
                 {subHeaderItems.join(' - ')}
             </div>
@@ -40,7 +46,7 @@
                         <i class="fa-solid fa-link-slash mr-1" />
                         Delete Connection
                     </button>
-                    <input type="hidden" value={id} name="connectionId" />
+                    <input type="hidden" value={connectionInfo.id} name="connectionId" />
                 </form>
             {/if}
         </div>