feat: Added feedback feature

src/routes/space/[id]/+page.server.ts

@@ -1,7 +1,8 @@
 import { error } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 
-export const load: PageServerLoad = async ({ params, locals: { supabase } }) => {
+export const load: PageServerLoad = async ({ depends, params, locals: { supabase } }) => {
+    depends("db:study_spaces");
     const { data: space, error: err } = await supabase
         .from("study_spaces")
         .select("*, study_space_images(*)")

src/routes/space/[id]/+page.svelte

@@ -5,6 +5,7 @@
     import Carousel from "$lib/components/Carousel.svelte";
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
     import Report from "$lib/components/Report.svelte";
+    import Feedback from "$lib/components/Feedback.svelte";
     import { onMount } from "svelte";
     import { gmapsLoader } from "$lib";
 
@@ -25,10 +26,15 @@
     );
 
     let isReportVisible = $state(false);
-    function hideFunc() {
+    function hideReport() {
         isReportVisible = false;
     }
 
+    let isFeedbackPromptVisible = $state(false);
+    function hideFeedbackPrompt() {
+        isFeedbackPromptVisible = false;
+    }
+
     let mapElem = $state<HTMLDivElement>();
     onMount(async () => {
         if (!mapElem) return console.error("Map element not found");
@@ -53,7 +59,17 @@
     </a>
 </Navbar>
 
-{#if isReportVisible}<Report {data} studySpaceId={space.id} {hideFunc} />
+{#if isReportVisible}<Report {data} studySpaceId={space.id} hideFunc={hideReport} />
+{/if}
+{#if isFeedbackPromptVisible}
+    <Feedback
+        studySpaceData={{
+            ...space,
+            building_location: place
+        }}
+        {supabase}
+        hideFunc={hideFeedbackPrompt}
+    />
 {/if}
 <main>
     <Carousel urls={imgUrls} />
@@ -87,6 +103,15 @@
         {/each}
     </p>
     <div class="addrMap" bind:this={mapElem}></div>
+
+    <button
+        type="button"
+        class="feedbackButton"
+        onclick={() => {
+            isFeedbackPromptVisible = true;
+        }}>Review the study space?</button
+    >
+
     {#if adminMode}
         <a href={`/space/${space.id}/edit`} class="editButton">Edit</a>
     {:else}
@@ -124,6 +149,7 @@
         border: none;
         margin: 0 auto;
     }
+
     .nameContainer {
         z-index: 10;
         display: block;
@@ -206,7 +232,18 @@
         cursor: pointer;
         margin-top: 1rem;
     }
-
+    .feedbackButton {
+        width: 100%;
+        padding: 0.7rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+        text-align: center;
+    }
     .editButton {
         width: 100%;
         padding: 0.4rem;