feat: Implemented Favouriting for a user

Co-Authored-By: Tadios Temesgen <tt2022@ic.ac.uk>

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

@@ -9,6 +9,7 @@
     import { onMount } from "svelte";
     import { gmapsLoader, daysOfWeek, formatTime, type Table } from "$lib";
     import Button from "$lib/components/Button.svelte";
+    import Favourite from "$lib/components/Favourite.svelte";
 
     const { data } = $props();
     const { space, supabase, adminMode } = $derived(data);
@@ -65,6 +66,40 @@
     for (const entry of space.study_space_hours) {
         timingsPerDay[entry.day_of_week].push(entry);
     }
+
+    let isFavourite = $state(false);
+    onMount(async () => {
+        const {
+            data: { session }
+        } = await supabase.auth.getSession();
+        if (!session?.user) return;
+        const { data: fav } = await supabase
+            .from("favourite_study_spaces")
+            .select("study_space_id")
+            .match({ user_id: session.user.id, study_space_id: space.id })
+            .single();
+        isFavourite = !!fav;
+    });
+
+    // Toggle a space in/out of favourites
+    async function handleToggleFavourite() {
+        const {
+            data: { session }
+        } = await supabase.auth.getSession();
+        if (!session?.user) return;
+        if (isFavourite) {
+            await supabase
+                .from("favourite_study_spaces")
+                .delete()
+                .match({ user_id: session.user.id, study_space_id: space.id });
+            isFavourite = false;
+        } else {
+            await supabase
+                .from("favourite_study_spaces")
+                .insert([{ user_id: session.user.id, study_space_id: space.id }]);
+            isFavourite = true;
+        }
+    }
 </script>
 
 <Navbar>
@@ -87,8 +122,11 @@
 {/if}
 <main>
     <Carousel urls={imgUrls} />
-    <div class="nameContainer">
-        {space.location}
+    <div class="titleContainer">
+        <div class="nameContainer">{space.location}</div>
+        <div class="title-fav">
+            <Favourite {isFavourite} onToggleFavourite={handleToggleFavourite} />
+        </div>
     </div>
     {#if space.description != null && space.description.length > 0}
         <p class="descContainer">
@@ -300,4 +338,18 @@
         font-family: monospace;
         color: #eaffeb;
     }
+    .titleContainer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: -0.5rem 0 1rem;
+    }
+    .title-fav {
+        font-size: 2rem;
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 50%;
+        padding: 0.25rem;
+        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.7);
+        color: red;
+    }
 </style>

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

@@ -658,34 +658,4 @@
         background-color: #eaffeb;
         border-radius: 5rem;
     }
-    .opening-times {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .opening-time-item {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    .opening-time-item label {
-        margin-top: 0;
-        width: 6rem;
-    }
-
-    .opening-time-item input[type="time"] {
-        padding: 0.5rem;
-        height: 2.5rem;
-        border-radius: 0.5rem;
-        border: 2px solid #eaffeb;
-        background: none;
-        color: #eaffeb;
-    }
-
-    .opening-time-item span {
-        margin: 0 0.5rem;
-        color: #eaffeb;
-    }
 </style>