src/routes/+page.svelte

@@ -3,7 +3,7 @@
     import defaultImg from "$lib/assets/study_space.png";
     import crossUrl from "$lib/assets/cross.svg";
     import Navbar from "$lib/components/Navbar.svelte";
-    import { allTags } from "$lib";
+    import { allTags, volumeTags, wifiTags, powerOutletTags } from "$lib";
 
     const { data } = $props();
     const { studySpaces, supabase } = $derived(data);
@@ -11,10 +11,24 @@
     let selectedTags = $state<string[]>([]);
     let tagFilter = $state("");
     let tagFilterElem = $state<HTMLInputElement>();
+
+    function categorySelected(category: string[]) {
+        return category.some(tag => selectedTags.includes(tag));
+    }
+    
     let filteredTags = $derived(
         allTags
             .filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
-            .filter((tag) => allTags.includes(tag))
+            .filter((tag) => !selectedTags.includes(tag))
+            .filter((tag) => {
+                if (selectedTags.includes(tag)) return false;
+
+                if (categorySelected(volumeTags) && volumeTags.includes(tag)) return false;
+                if (categorySelected(wifiTags) && wifiTags.includes(tag)) return false;
+                if (categorySelected(powerOutletTags) && powerOutletTags.includes(tag)) return false;
+
+                return true;
+            })
     );
 
     let filteredStudySpaces = $derived(
@@ -174,8 +188,8 @@
         font-size: 1rem;
     }
     .tagInput {
-        width: 100%;
-        height: 100%;
+        flex: 1 1 100%;
+        min-width: 10rem;
         background: none;
         color: #eaffeb;
         font-size: 1rem;