Working on recommendations

src/lib/components/media/mediaCard.svelte

@@ -35,7 +35,15 @@
 </script>
 
 <div id="card-wrapper" class="w-52 flex-shrink-0">
-    <div bind:this={card} id="card" class="relative transition-all duration-200 ease-out grid place-items-center" on:mousemove={(event) => rotateCard(event)} on:mouseleave={() => (card.style.transform = '')} role="menuitem" tabindex="-1">
+    <div
+        bind:this={card}
+        id="card"
+        class="relative grid place-items-center transition-all duration-200 ease-out"
+        on:mousemove={(event) => rotateCard(event)}
+        on:mouseleave={() => (card.style.transform = '')}
+        role="menuitem"
+        tabindex="-1"
+    >
         <button on:click={() => goto(`/details/${mediaItem.type}?id=${mediaItem.id}&connection=${mediaItem.connectionId}`)}>
             {#if mediaItem.thumbnail}
                 <img id="card-image" class="h-full rounded-lg transition-all" src={mediaItem.thumbnail} alt="{mediaItem.name} thumbnail" />
@@ -46,7 +54,7 @@
             {/if}
             <div bind:this={cardGlare} id="card-glare" class="absolute top-0 h-full w-full rounded-lg opacity-0 transition-opacity duration-200 ease-out" />
         </button>
-        <span id="play-button" class="h-12 absolute opacity-0 transition-opacity duration-200 ease-out">
+        <span id="play-button" class="absolute h-12 opacity-0 transition-opacity duration-200 ease-out">
             <IconButton halo={true}>
                 <i slot="icon" class="fa-solid fa-play text-xl" />
             </IconButton>
@@ -54,12 +62,11 @@
     </div>
     <div class="p-2.5 text-sm">
         <div class="overflow-hidden text-ellipsis" title={mediaItem.name}>{mediaItem.name}</div>
-        <div class="flex w-full items-center gap-1.5 overflow-hidden text-neutral-400">
-            <span class="overflow-hidden text-ellipsis" style="font-size: 0; line-height: 0;">
+        <div class="flex w-full items-center overflow-hidden text-neutral-400">
             {#if checkSong(mediaItem) || checkAlbum(mediaItem)}
                 {#each mediaItem.artists as artist}
                     {@const listIndex = mediaItem.artists.indexOf(artist)}
-                        <a class="text-sm hover:underline" href="/details/artist?id={artist.id}&connection={mediaItem.connectionId}">{artist.name}</a>
+                    <a class="text-sm hover:underline focus:underline" href="/details/artist?id={artist.id}&connection={mediaItem.connectionId}">{artist.name}</a>
                     {#if listIndex === mediaItem.artists.length - 2}
                         <span class="mx-0.5 text-sm">&</span>
                     {:else if listIndex < mediaItem.artists.length - 2}
@@ -67,11 +74,10 @@
                     {/if}
                 {/each}
             {/if}
-            </span>
-            {#if mediaItem.type}
+            <!-- {#if mediaItem.type}
                 <span>&bull;</span>
                 <i title="Stream from {Services[mediaItem.service.type].displayName}" class="{iconClasses[mediaItem.type]} text-xs" style="color: var({Services[mediaItem.service.type].primaryColor});" />
-            {/if}
+            {/if} -->
         </div>
     </div>
 </div>
@@ -86,6 +92,9 @@
     #card-wrapper:focus-within #card-glare {
         opacity: 1;
     }
+    #card-wrapper:focus-within #play-button {
+        opacity: 1;
+    }
     #card:hover {
         scale: 1.05;
     }

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

@@ -1,9 +1,7 @@
 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 }) => {
+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

src/routes/+layout.server.ts

@@ -1,5 +1,7 @@
 import type { LayoutServerLoad } from './$types'
 
+export const ssr = false
+
 export const load: LayoutServerLoad = ({ url, locals }) => {
     const { pathname, search } = url
     return {

src/routes/settings/connections/connectionProfile.svelte

@@ -3,7 +3,7 @@
     import IconButton from '$lib/components/util/iconButton.svelte'
     import Toggle from '$lib/components/util/toggle.svelte'
     import type { SubmitFunction } from '@sveltejs/kit'
-    import { fly } from 'svelte/transition'
+    import { fly, scale } from 'svelte/transition'
     import { enhance } from '$app/forms'
 
     export let connection: Connection
@@ -31,7 +31,13 @@
                 <i slot="icon" class="fa-solid fa-link-slash" />
             </IconButton>
             {#if showUnlinkModal}
-                <form use:enhance={submitFunction} action="?/deleteConnection" method="post" class="absolute right-full top-0 flex -translate-x-3 flex-col items-center justify-center gap-3 rounded-md bg-neutral-925 p-4">
+                <form
+                    transition:scale={{ start: 0.5 }}
+                    use:enhance={submitFunction}
+                    action="?/deleteConnection"
+                    method="post"
+                    class="absolute right-full top-0 flex -translate-x-3 flex-col items-center justify-center gap-3 rounded-md bg-neutral-925 p-4"
+                >
                     <span class="whitespace-nowrap">Delete Connection</span>
                     <div class="flex gap-4">
                         <button class="w-20 rounded-md bg-red-500 px-2 py-1">Confirm</button>