feat: Added filtering by optional tags in the main page. Created TagFilter component for modularisation.

Co-Authored By: Caspar Asaam <caspar@dyn3159-95.wlan.ic.ac.uk>

src/routes/+page.svelte

@@ -3,19 +3,69 @@
     import defaultImg from "$lib/assets/study_space.png";
     import crossUrl from "$lib/assets/cross.svg";
     import Navbar from "$lib/components/Navbar.svelte";
+    import TagFilter from "$lib/components/inputs/TagFilter.svelte";
+    import {availableStudySpaceTags} from "$lib"
 
     const { data } = $props();
-    const { studySpaces, supabase } = $derived(data);
+    const { studySpaces, supabase } = $derived(data);  
+    
+    let selectedTags = $state<string[]>([])
+    let tagFilter = $state("");
+    let tagFilterElem = $state<HTMLInputElement>()
+    let filteredTags = $derived(
+        availableStudySpaceTags
+            .filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
+            .filter((tag) => availableStudySpaceTags.includes(tag))
+        )
+
+    let filteredStudySpaces = $derived(() =>
+        selectedTags.length == 0
+            ? studySpaces
+            : studySpaces.filter(space =>
+                selectedTags.every(tag =>
+                (space.tags || []).includes(tag)
+                )
+            )
+        );
+
+    let dropdownVisible = $state(false)
+
+    function deleteTag(tagName: string) {
+        return () => {
+            selectedTags = selectedTags.filter((tag) => tag !== tagName);
+        };
+    }
+
+    function addTag(tagName: string) {
+        return () => {
+            if (!selectedTags.includes(tagName)) {
+                selectedTags.push(tagName);
+            }
+            tagFilter = "";
+        };
+    }
 </script>
 
-<Navbar>
+<Navbar>   
     <a href="/space">
         <img src={crossUrl} alt="new" class="new-space" />
-    </a>
+    </a>   
 </Navbar>
 
 <main>
-    {#each studySpaces as studySpace (studySpace.id)}
+    <TagFilter 
+        selectedTags={selectedTags}
+        tagFilter={tagFilter}
+        tagFilterElem={tagFilterElem}
+        filteredTags={filteredTags}
+        dropdownVisible={dropdownVisible}
+        deleteTag={deleteTag}
+        addTag={addTag}
+    />
+    {#each studySpaces.filter(space =>
+    selectedTags.length === 0 ||
+    selectedTags.every(tag => (space.tags || []).includes(tag))
+  ) as studySpace (studySpace.id)}
         {@const imgUrl =
             studySpace.study_space_images.length > 0
                 ? supabase.storage