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

src/lib/components/media/mediaCard.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-    export let mediaItem: Song | Album | Playlist
+    export let mediaItem: Song | Album | Artist | Playlist
 
     import IconButton from '$lib/components/util/iconButton.svelte'
     import { goto } from '$app/navigation'
+    import { currentlyPlaying } from '$lib/stores'
 
     let image: HTMLImageElement, captionText: HTMLDivElement
+
+    const setCurrentlyPlaying = () => {
+        if (mediaItem.type === 'song') {
+            $currentlyPlaying = mediaItem
+        }
+    }
 </script>
 
 <div id="card-wrapper" class="flex-shrink-0">
@@ -17,7 +24,7 @@
             </div>
         {/if}
         <span id="play-button" class="absolute left-1/2 top-1/2 h-12 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-200 ease-out">
-            <IconButton halo={true}>
+            <IconButton halo={true} on:click={setCurrentlyPlaying}>
                 <i slot="icon" class="fa-solid fa-play text-xl" />
             </IconButton>
         </span>
@@ -39,12 +46,6 @@
 </div>
 
 <style>
-    #thumbnail:focus-within #card-image {
-        filter: brightness(50%);
-    }
-    #thumbnail:focus-within #play-button {
-        opacity: 1;
-    }
     #thumbnail:hover {
         scale: 1.05;
     }