team-1/frontend/src/lib/components/SuggestionList.svelte

<script lang="ts">
    import type { Suggestion } from "$lib/types"
    import { ThumbsUp, ThumbsDown } from "@lucide/svelte"
    import { onMount } from "svelte"

    let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()

    let picked_suggestions: string[] = $state([])

    async function vote(amount: number, songId: string) {
        if (picked_suggestions.includes(songId)) return console.log("rejecting vote")
        await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
        picked_suggestions.push(songId)
        console.log("accepted vote")
        sessionStorage.setItem("picked_suggestions", JSON.stringify(picked_suggestions))
    }

    onMount(() => {
        picked_suggestions = JSON.parse(sessionStorage.getItem("picked_suggestions") ?? "[]")
    })
</script>

<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
    {#if suggestions.length == 0}
        <p>No suggestions yet! Try to add a new one using the Add button</p>
    {/if}

    {#each suggestions as sug}
        <div
            class="flex h-[80px] w-full flex-row gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay p-2 shadow-md duration-100 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
        >
            <div class="flex w-3/4 flex-row items-center gap-2">
                <img
                    class="w-[60px] min-w-[60px] rounded"
                    alt="Song cover"
                    src={sug.image_id != ""
                        ? `https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`
                        : "https://s2.qwant.com/thumbr/474x474/f/6/b50687db1ebb262ac78b98a8f3c56a1e62235aaeebe0346dd27d4fbf1edec8/OIP.kXN41HyriW5dLTkjm0QQoAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.kXN41HyriW5dLTkjm0QQoAHaHa%3Fpid%3DApi&q=0&b=1&p=0&a=0"}
                />
                <div class="h-fit w-fit flex-col text-white">
                    <b>{sug.title}</b>
                    <p>{sug.artist}</p>
                </div>
            </div>
            <div class="flex w-1/4 flex-row items-center justify-center gap-2">
                <button
                    class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-green duration-100 hover:scale-150 dark:text-dark-pine-green" : "text-light-pine-muted dark:text-dark-pine-muted"}
                    disabled={!!picked_suggestions.includes(sug.uuid)}
                    onclick={async () => {
                        await vote(1, sug.uuid)
                    }}><ThumbsUp /></button
                >
                <p class="font-semibold text-light-pine-text dark:text-dark-pine-text">{sug.upvote}</p>
                <button
                    class={!picked_suggestions.includes(sug.uuid) ? "text-light-pine-red duration-100 hover:scale-150 dark:text-dark-pine-red" : "text-light-pine-muted dark:text-dark-pine-muted"}
                    disabled={!!picked_suggestions.includes(sug.uuid)}
                    onclick={async () => {
                        await vote(-1, sug.uuid)
                    }}><ThumbsDown /></button
                >
            </div>
        </div>
    {/each}
</div>