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,25 @@
     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 +189,8 @@
         font-size: 1rem;
     }
     .tagInput {
-        width: 100%;
+        flex: 1 1 100%;
-        height: 100%;
+        min-width: 10rem;
         background: none;
         color: #eaffeb;
         font-size: 1rem;

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

@@ -20,7 +20,7 @@
     const { supabase } = $derived(data);
 
     const { space, images } = $derived(data);
-    const studySpaceData = $state({
+    const studySpaceData = $derived({
         ...space
     });