feat: added suggestions & upvoting system

frontend/src/lib/components/SuggestionList.svelte

@@ -1,2 +1,34 @@
 <script lang="ts">
+    import type { Song } from "$lib/types"
+    let { suggestions }: { suggestions: Song[] } = $props()
+
+    let reactiveSugg = $derived(
+        [...suggestions].sort((a, b) => {
+            return b.points - a.points
+        })
+    )
 </script>
+
+<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
+    {#each reactiveSugg as sug}
+        <div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-black p-2">
+            <div class="flex w-3/4 flex-row gap-2">
+                <img class="w-[60px] min-w-[60px] rounded" src={sug.image} alt="Song cover" />
+                <h1>{sug.name}</h1>
+            </div>
+            <div class="flex w-1/4 flex-row items-center justify-center gap-2">
+                <button
+                    onclick={() => {
+                        sug.points += 1
+                    }}>🔥</button
+                >
+                <p>{sug.points}</p>
+                <button
+                    onclick={() => {
+                        sug.points--
+                    }}>💩</button
+                >
+            </div>
+        </div>
+    {/each}
+</div>