feat: implemented api

frontend/src/routes/room/[id]/+page.svelte

@@ -2,14 +2,17 @@
     import QueueSlider from "$lib/components/QueueSlider.svelte"
     import SuggestionInput from "$lib/components/SuggestionInput.svelte"
     import Error from "$lib/components/Error.svelte"
-    import { parseSong, type Song } from "$lib/types.js"
+    import { parseSong, parseSuggestion, type Suggestion, type Song } from "$lib/types.js"
     import { onMount } from "svelte"
+    import SuggestionList from "$lib/components/SuggestionList.svelte"
 
     let { data } = $props()
 
     let songs = $state<Song[]>([])
     let playing = $state(0)
 
+    let suggestions = $state<Suggestion[]>([])
+
     let error = $state({ code: 0, message: "" })
 
     onMount(async () => {
@@ -23,6 +26,25 @@
 
         // Setup websocket connection
 
+        // Get room suggestions
+
+        resp = await fetch("/api/room/suggestions?room=" + data.roomId)
+
+        if (resp.status != 200) {
+            error = { code: 500, message: "Failed to retrive suggestions" }
+            return
+        }
+
+        let json = await resp.json()
+
+        json["songs"].forEach(async (i: any) => {
+            suggestions.push(await parseSuggestion(i))
+        })
+
+        suggestions = suggestions.sort((a, b) => {
+            return a.upvote - b.upvote
+        })
+
         // Get the room queue
 
         resp = await fetch("/api/queue?room=" + data.roomId)
@@ -30,13 +52,12 @@
             error = { code: 404, message: "Room not found" }
             return
         }
-        let json = await resp.json()
+        json = await resp.json()
 
         json["queue"].forEach(async (i: any) => {
             songs.push(await parseSong(i))
         })
-
-        // Get room suggestions
+        console.log(songs)
     })
 </script>
 
@@ -47,10 +68,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 lg:w-[30vw]">
-            <SuggestionInput />
+            <SuggestionInput roomId={data.roomId} />
         </div>
         <div class="w-full py-6 lg:w-[30vw]">
-            <!-- <SuggestionList suggestions={songs} /> -->
+            <SuggestionList {suggestions} roomId={data.roomId} />
         </div>
     </div>
 {/if}