fix: websockets and vite

frontend/src/lib/components/SuggestionList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Suggestion } from "$lib/types"
 
-    let { suggestions, roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
+    let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()
 
     async function vote(idx: number, amount: number, songId: string) {
         suggestions[idx].upvote += amount
@@ -15,7 +15,7 @@
     {/if}
 
     {#each suggestions as sug, idx}
-        <div class="shadow-md hover:bg-indigo-400 duration-100 bg-indigo-500 flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 p-2">
+        <div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 bg-indigo-500 p-2 shadow-md duration-100 hover:bg-indigo-400">
             <div class="flex w-3/4 flex-row gap-2">
                 <img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
                 <div class="text-white">
@@ -30,9 +30,9 @@
                         vote(idx, 1, sug.uuid)
                     }}>👍</button
                 >
-                <p class="text-white font-semibold">{sug.upvote}</p>
+                <p class="font-semibold text-white">{sug.upvote}</p>
                 <button
-                    class="hover:scale-150 duration-100"
+                    class="duration-100 hover:scale-150"
                     onclick={() => {
                         vote(idx, -1, sug.uuid)
                     }}><div class="rotate-180">👍</div></button

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

@@ -17,7 +17,6 @@
         ;[returnError, songs, index] = await getQueueSongs(data.roomId)
 
         queueSongs = songs
-
         playingIndex = index
     })
 

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

@@ -22,7 +22,6 @@
 
     onMount(async () => {
         // Join the room
-        socket = io("/", { path: "/ws", transports: ["websocket"] })
 
         let sugg, queue, index
         ;[returnError] = await joinRoom(data.roomId)
@@ -42,6 +41,7 @@
         playingIndex = index
 
         // Setup websocket connection
+        socket = io("/", { path: "/ws", transports: ["websocket"] })
         await socket.emitWithAck("join_room", { id: data.roomId })
 
         socket.on("queue_update", async (d) => {

frontend/vite.config.ts

@@ -1,21 +1,22 @@
-import tailwindcss from '@tailwindcss/vite';
+import tailwindcss from "@tailwindcss/vite"
-import { sveltekit } from '@sveltejs/kit/vite';
+import { sveltekit } from "@sveltejs/kit/vite"
-import { defineConfig } from 'vite';
+import { defineConfig } from "vite"
 
 export default defineConfig({
     plugins: [tailwindcss(), sveltekit()],
     server: {
         proxy: {
-            '/api': {
+            "/api": {
                 target: "http://backend:5000",
                 changeOrigin: false,
-                secure: false
+                secure: false,
             },
-            '/ws': {
+            "/ws": {
                 target: "http://backend:5000",
                 changeOrigin: false,
-                secure: false
+                secure: false,
-            }
+                ws: true,
-        }
+            },
-    }
+        },
-});
+    },
+})