feat: Implemented Favouriting for a user

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

src/routes/+page.svelte

@@ -7,18 +7,46 @@
     import Button from "$lib/components/Button.svelte";
 
     const { data } = $props();
-    const { studySpaces, supabase, session, adminMode } = $derived(data);
+    const {
+        studySpaces,
+        supabase,
+        session,
+        adminMode,
+        favouriteIds: initialFavourites = []
+    } = $derived(data);
 
     let selectedTags = $state<string[]>([]);
     let tagFilter = $state("");
+    let tagFilterElem = $state<HTMLInputElement>();
+
     let openingFilter = $state("");
     let closingFilter = $state("");
-    let tagFilterElem = $state<HTMLInputElement>();
+
+    let favouriteIds = $derived<string[]>(initialFavourites);
+    let showFavourites = $state(false);
 
     function categorySelected(category: string[]) {
         return category.some((tag) => selectedTags.includes(tag));
     }
 
+    // Toggle a space in/out of favourites
+    async function handleToggleFavourite(id: string) {
+        if (!session?.user) return;
+        const already = favouriteIds.includes(id);
+        if (already) {
+            await supabase
+                .from("favourite_study_spaces")
+                .delete()
+                .match({ user_id: session.user.id, study_space_id: id });
+            favouriteIds = favouriteIds.filter((x) => x !== id);
+        } else {
+            await supabase
+                .from("favourite_study_spaces")
+                .insert([{ user_id: session.user.id, study_space_id: id }]);
+            favouriteIds = [...favouriteIds, id];
+        }
+    }
+
     let filteredTags = $derived(
         allTags
             .filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
@@ -44,6 +72,8 @@
     // Combine tag and time filtering
     let filteredStudySpaces = $derived(
         studySpaces
+            // only include favourites when showFavourites===true
+            .filter((space) => !showFavourites || favouriteIds?.includes(space.id))
             // tag filtering
             .filter((space) => {
                 if (selectedTags.length === 0) return true;
@@ -114,6 +144,9 @@
         <a href="/space/new/edit">
             <img src={crossUrl} alt="new" class="new-space" />
         </a>
+        <button class="fav-button" onclick={() => (showFavourites = !showFavourites)} type="button">
+            {showFavourites ? "All spaces" : "My favourites"}
+        </button>
     {/if}
 </Navbar>
 
@@ -198,6 +231,8 @@
             imgSrc={imgUrl}
             space={studySpace}
             hours={studySpace.study_space_hours}
+            isFavourite={favouriteIds.includes(studySpace.id)}
+            onToggleFavourite={() => handleToggleFavourite(studySpace.id)}
         />
     {/each}
 </main>
@@ -356,6 +391,18 @@
         font-size: 1.2rem;
     }
 
+    .fav-button {
+        background: none;
+        border: none;
+        color: #eaffeb;
+        font-size: 1rem;
+        margin-right: 1rem;
+        cursor: pointer;
+    }
+    .fav-button:hover {
+        text-decoration: underline;
+    }
+
     @media (max-width: 20rem) {
         main {
             grid-template-columns: 1fr;