Started on search results page

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

@@ -38,8 +38,8 @@
             <div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
         </div>
     </div>
-    <section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)]">
-        <div class="my-6 max-w-xl">
+    <section class="no-scrollbar h-full overflow-y-scroll px-[max(7rem,_7vw)]">
+        <div class="sticky top-0 max-w-xl py-6">
             <SearchBar />
         </div>
         <slot />

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

@@ -7,13 +7,41 @@
 
 {#if data.searchResults}
     {#await data.searchResults then searchResults}
-        {#each searchResults as searchResult}
-            <button
-                on:click={() => {
-                    if (searchResult.type === 'song') $currentlyPlaying = searchResult
-                }}
-                class="block bg-neutral-925">{searchResult.name} - {searchResult.type}</button
-            >
-        {/each}
+        <section class="flex w-full flex-col items-center gap-2">
+            {#each searchResults as searchResult}
+                <div class="flex h-20 w-full max-w-screen-md gap-4 bg-black p-2">
+                    <button
+                        id="searchResult"
+                        on:click={() => {
+                            if (searchResult.type === 'song') $currentlyPlaying = searchResult
+                        }}
+                        class="grid aspect-square h-full place-items-center bg-cover bg-center bg-no-repeat"
+                        style="--thumbnail: url('/api/remoteImage?url={searchResult.thumbnail}')"
+                    >
+                        <i class="fa-solid fa-play opacity-0" />
+                    </button>
+                    <div>
+                        <div>{searchResult.name}</div>
+                        {#if 'artists' in searchResult && searchResult.artists}
+                            <div>{searchResult.artists.map((artist) => artist.name).join(', ')}</div>
+                        {:else if 'createdBy' in searchResult && searchResult.createdBy}
+                            <div>{searchResult.createdBy?.name}</div>
+                        {/if}
+                    </div>
+                </div>
+            {/each}
+        </section>
     {/await}
 {/if}
+
+<style>
+    #searchResult {
+        background-image: var(--thumbnail);
+    }
+    #searchResult:hover {
+        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--thumbnail);
+    }
+    #searchResult:hover > i {
+        opacity: 100%;
+    }
+</style>