Screwed around with the layout a bit

src/routes/+layout.svelte

@@ -21,25 +21,30 @@
     onMount(() => (loaded = true))
 </script>
 
-{#if $page.url.pathname === '/api'}
-    <slot />
-{:else}
-    <main class="h-screen font-notoSans text-white">
-        {#if $page.url.pathname !== '/login'}
-            <Navbar />
+<main class="h-screen font-notoSans text-white">
+    <div class="fixed isolate -z-10 h-full w-full bg-black">
+        <!-- This whole bg is a complete copy of ytmusic, design own at some point (Place for customization w/ album art etc?) (EDIT: Ok, it looks SICK with album art!) -->
+        <div id="background-gradient" class="absolute z-10 h-1/2 w-full bg-cover" />
+        {#if loaded}
+            <!-- May want to add a small blur filter in the event that the album/song image is below a certain resolution -->
+            <img id="background-image" src={backgroundImage} alt="" class="h-1/2 w-full object-cover blur-xl" in:fade={{ duration: 1000 }} />
         {/if}
-        <div class="fixed isolate -z-10 h-full w-full bg-black">
-            <!-- This whole bg is a complete copy of ytmusic, design own at some point (Place for customization w/ album art etc?) (EDIT: Ok, it looks SICK with album art!) -->
-            <div id="background-gradient" class="absolute z-10 h-1/2 w-full bg-cover" />
-            {#if loaded}
-                <!-- May want to add a small blur filter in the event that the album/song image is below a certain resolution -->
-                <img id="background-image" src={backgroundImage} alt="" class="h-1/2 w-full object-cover blur-xl" in:fade={{ duration: 1000 }} />
-            {/if}
-        </div>
+    </div>
+    {#if $page.url.pathname === '/login'}
         <slot />
+    {:else}
+        <div class="grid h-full grid-cols-[5rem_auto]">
+            <div class="h-full bg-slate-600" />
+            <div class="grid h-full grid-rows-[4rem_auto] gap-8">
+                <Navbar />
+                <div class="no-scrollbar overflow-y-scroll">
+                    <slot />
+                </div>
+            </div>
+        </div>
         <AlertBox bind:this={alertBox} />
-    </main>
-{/if}
+    {/if}
+</main>
 
 <style>
     #background-gradient {

src/routes/+page.svelte

@@ -25,7 +25,7 @@
         <p class="text-neutral-400">Click the menu in the top left corner and go to Settings &gt; Connections to link to your accounts</p>
     </main>
 {:else}
-    <main id="recommendations-wrapper" class="pt-24">
+    <main id="recommendations-wrapper" class="h-screen px-8">
         <ScrollableCardMenu header={'Listen Again'} cardDataList={data.recommendations} />
     </main>
 {/if}

src/routes/artist/+page.server.js

@@ -0,0 +1,8 @@
+export async function load({ url }) {
+    const { id, service } = Object.fromEntries(url.searchParams)
+
+    return {
+        artistId: id,
+        connectionId: service,
+    }
+}

src/routes/artist/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+    export let data
+</script>
+
+<section>
+    <div>This is the page for artist: {data.artistId}</div>
+    <div>From connection: {data.connectionId}</div>
+</section>

src/routes/artist/[id]/+page.server.js

@@ -1,10 +0,0 @@
-export async function load({ params, fetch }) {
-    const artistId = params.id
-    const response = await fetch(`/api/jellyfin/artist?artistId=${artistId}`)
-    const responseData = await response.json()
-
-    return {
-        id: artistId,
-        artistItems: responseData,
-    }
-}

src/routes/artist/[id]/+page.svelte

@@ -1,32 +0,0 @@
-<script>
-    import AlbumCard from '$lib/albumCard.svelte';
-    export let data;
-
-    const artistItems = data.artistItems
-</script>
-
-<div class="grid">
-    { #each artistItems.albums as item }
-        <AlbumCard {item} cardType="albums"/>
-    { /each }
-</div>
-<div class="grid">
-    { #each artistItems.singles as item }
-        <AlbumCard {item} cardType="singles"/>
-    { /each }
-</div>
-<div class="grid">
-    { #each artistItems.appearances as item }
-        <AlbumCard  {item} cardType="appearances"/>
-    { /each }
-</div>
-<div>
-    Test
-</div>
-
-<style>
-    .grid {
-        display: grid;
-        grid-template-columns: repeat(9, 200px);
-    }
-</style>

src/routes/song/[id]/+page.server.js

@@ -1,10 +0,0 @@
-export async function load ({ params, fetch }) {
-    const songId = params.id
-    const response = await fetch(`/api/jellyfin/song?songId=${songId}`)
-    const responseData = await response.json()
-
-    return {
-        id: songId,
-        songData: responseData
-    }
-}

src/routes/song/[id]/+page.svelte

@@ -1,9 +0,0 @@
-<script>
-    export let data;
-
-    const songData = data.songData
-</script>
-
-<div>
-    <p>{songData.Name}</p>
-</div>