add song cooldonw

frontend/src/lib/components/SuggestionInput.svelte

@@ -1,20 +1,33 @@
 <script lang="ts">
     import { LoaderCircle } from "@lucide/svelte"
 
+    const COOLDOWN_SECS = 30
+
     let { roomId } = $props()
     let input = $state("")
-    let disabled: boolean = $state(false)
+    let loading: boolean = $state(false)
+    let cooldowned: boolean = $state(false)
+
+    $effect(() => {
+        console.log("cooldowned is now", cooldowned)
+    })
 
     async function sendSong() {
-        disabled = true
+        loading = true
         await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
         input = ""
-        disabled = false
+        loading = false
+
+        cooldowned = true
+        setTimeout(() => {
+            cooldowned = false
+            console.log("unset cooldown")
+        }, COOLDOWN_SECS * 1000)
     }
 </script>
 
 <div
-    class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${disabled ? "disabled" : ""}`}
+    class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${loading ? "disabled" : ""}`}
 >
     <input
         type="text"
@@ -26,16 +39,20 @@
                 sendSong()
             }
         }}
-        {disabled}
+        disabled={loading}
     />
-    {#if disabled}
+    {#if loading}
         <span class="animate-spin">
             <LoaderCircle />
         </span>
     {/if}
 
-    <button class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border border-0 font-semibold shadow-xl duration-100 hover:scale-105 active:scale-90 dark:bg-dark-pine-blue" onclick={sendSong}
+    <button
-        >Add</button
+        disabled={cooldowned}
+        class="i-lucide-check h-[40px] w-1/4 rounded font-semibold shadow-xl duration-100 active:scale-90 {!cooldowned
+            ? 'cursor-pointer bg-light-pine-blue hover:scale-105 dark:bg-dark-pine-blue '
+            : 'bg-light-pine-muted dark:bg-light-pine-muted'}"
+        onclick={sendSong}>Add</button
     >
     <span class="i-lucide-chevrons-left"></span>
 </div>