From 2c8d7e00b5026231aa73869417f52effeb64c0d0 Mon Sep 17 00:00:00 2001
From: TadiosT <tadios.temesgen@gmail.com>
Date: Thu, 12 Jun 2025 00:41:50 +0100
Subject: [PATCH] fix: Search bar on main page no longer overflows. Selected
 tags no longer appear in dropdown. Can no longer filter by contradiction
 tags.

Co-Authored By: Caspar Asaam <caspar@dyn3159-95.wlan.ic.ac.uk>
---
 src/routes/+page.svelte | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8808694..ac60513 100644
--- a/src/routes/+page.svelte
+++ b/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;