feat: added suggestions & upvoting system

frontend/src/lib/components/QueueSlider.svelte

@@ -12,7 +12,7 @@
     <div class="flex w-fit flex-row gap-4">
         {#each displaySongs as song, i}
             {#if song.name != ""}
-                <div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10 mx-2 scale-100" : "z-0  opacity-70"}`}>
+                <div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10" : "z-0 scale-85 opacity-50"}`}>
                     <img
                         class="h-[60vw] max-h-[250px] w-[60vw]
                    max-w-[250px] rounded object-cover transition-all duration-300"
@@ -23,6 +23,8 @@
                         <h1 class="mt-2">{song.name}</h1>
                     {/if}
                 </div>
+            {:else}
+                <div class="h-[60vw] max-h-[250px] w-[60vw] max-w-[250px]"></div>
             {/if}
         {/each}
     </div>

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>

frontend/src/lib/types.ts

@@ -3,6 +3,7 @@ import * as z from "zod"
 export const SongSchema = z.object({
     name: z.string(),
     image: z.string(),
+    points: z.number().optional().default(0),
 })
 
 export type Song = z.infer<typeof SongSchema>

frontend/src/routes/+page.svelte

@@ -1,27 +1,33 @@
 <script lang="ts">
     import QueueSlider from "$lib/components/QueueSlider.svelte"
     import SuggestionInput from "$lib/components/SuggestionInput.svelte"
+    import SuggestionList from "$lib/components/SuggestionList.svelte"
 
     let songs = $state([
         {
-            name: "Prima",
+            name: "Cisco PT - Cantarex",
             image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
+            points: 0,
         },
         {
             name: "Io e i miei banchi - Paul Ham",
             image: "https://i.prcdn.co/img?regionKey=RbtvKb5E1Cv4j1VWm2uGrw%3D%3D",
+            points: 0,
         },
         {
-            name: "Terza",
+            name: "Ragatthi - Bersatetthi",
             image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
+            points: 0,
         },
         {
             name: "Quarta",
             image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
+            points: 0,
         },
         {
             name: "Quinta",
             image: "https://s2.qwant.com/thumbr/474x474/5/9/bcbd0c0aeb1838f6916bf452c557251d7be985a13449e49fccb567a3374d4e/OIP.pmqEiKWv47zViDGgPgbbQAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.pmqEiKWv47zViDGgPgbbQAHaHa%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
+            points: 0,
         },
     ])
 
@@ -30,7 +36,10 @@
 
 <div class="flex w-full flex-col items-center justify-center p-4 lg:p-10">
     <QueueSlider {songs} {playing} />
-    <div class="w-full py-6">
+    <div class="w-full py-6 lg:w-[30vw]">
         <SuggestionInput />
     </div>
+    <div class="w-full py-6 lg:w-[30vw]">
+        <SuggestionList suggestions={songs} />
+    </div>
 </div>