feat: added tags on upload and view tweaked navbar

src/routes/space/+page.svelte

@@ -7,7 +7,7 @@
     import Button from "$lib/components/Button.svelte";
     import Images from "$lib/components/inputs/Images.svelte";
     import type { Table } from "$lib";
-
+    import { availableStudySpaceTags } from "$lib";
     const { data } = $props();
     const { supabase } = $derived(data);
 
@@ -16,7 +16,8 @@
     let studySpaceData = $state<Omit<Table<"study_spaces">, "id" | "created_at" | "updated_at">>({
         description: "",
         building_location: "",
-        location: ""
+        location: "",
+        tags: []
     });
 
     async function uploadStudySpace() {
@@ -63,6 +64,35 @@
             invalidate: ["db:study_spaces"]
         });
     }
+
+    // Tag
+    let filteredTags = $state(availableStudySpaceTags);
+    let dropdownVisible = $state(false);
+
+    function deleteTag(tagName: string) {
+        return () => {
+            studySpaceData.tags = studySpaceData.tags.filter((tag) => tag !== tagName);
+        };
+    }
+
+    function filterTags() {
+        const input = document.querySelector(".tagInput") as HTMLInputElement;
+        const filter = input.value.toLowerCase();
+        filteredTags = availableStudySpaceTags
+            .filter((tag) => tag.toLowerCase().includes(filter))
+            .filter((tag) => !studySpaceData.tags.includes(tag));
+    }
+
+    function addTag(tagName: string) {
+        return () => {
+            if (!studySpaceData.tags.includes(tagName)) {
+                studySpaceData.tags.push(tagName);
+            }
+            const input = document.querySelector(".tagInput") as HTMLInputElement;
+            input.value = "";
+            filterTags();
+        };
+    }
 </script>
 
 <Navbar>
@@ -89,13 +119,46 @@
         required
     />
 
-    <label for="description">Add a description:</label>
+    <label for="tags">Add tags:</label>
+    <div class="tagDisplay">
+        {#each studySpaceData.tags as tagName (tagName)}
+            <button class="tag" onclick={deleteTag(tagName)} type="button">
+                {tagName}
+                <img src={crossUrl} alt="delete" /></button
+            >
+        {/each}
+        <input
+            type="text"
+            name="tagInput"
+            class="tagInput"
+            oninput={filterTags}
+            onfocus={() => {
+                dropdownVisible = true;
+            }}
+            onblur={() => {
+                setTimeout(() => {
+                    dropdownVisible = false;
+                }, 100); // Delay to allow click on tag
+            }}
+            placeholder="Add tags..."
+        />
+        {#if dropdownVisible}
+            <div class="tagDropdown">
+                {#each filteredTags as avaliableTag (avaliableTag)}
+                    <button class="avaliableTag" onclick={addTag(avaliableTag)} type="button">
+                        {avaliableTag}</button
+                    >
+                {/each}
+            </div>
+        {/if}
+    </div>
+
+    <label for="description">Optional brief description:</label>
     <Textarea
         name="description"
         bind:value={studySpaceData.description}
-        placeholder="A quiet and well-lit, but small space..."
-        rows={5}
-        required
+        placeholder="A quiet room with a lovely view of the park."
+        rows={2}
     />
 
     <label for="building-location">Add the building location:</label>
@@ -111,7 +174,7 @@
             type="submit"
             disabled={(spaceImgs?.length || 0) === 0 ||
                 !studySpaceData.location ||
-                !studySpaceData.description ||
+                studySpaceData.tags.length === 0 ||
                 !studySpaceData.building_location ||
                 uploading}
         >
@@ -143,4 +206,75 @@
         margin-left: -0.5rem;
         width: calc(100% + 1rem);
     }
+    .tagDisplay {
+        display: flex;
+        gap: 0.4rem;
+        flex-wrap: wrap;
+        align-items: left;
+        justify-content: left;
+        position: relative;
+        width: 100%;
+        height: auto;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 1rem;
+    }
+    .tagInput {
+        width: 100%;
+        height: 100%;
+        background: none;
+        color: #eaffeb;
+        font-size: 1rem;
+        border: none;
+        outline: none;
+    }
+    ::placeholder {
+        color: #859a90;
+        opacity: 1;
+    }
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        cursor: pointer;
+        border-width: 0rem;
+    }
+    .tag img {
+        width: 1rem;
+        height: 1rem;
+        margin-left: 0.2rem;
+    }
+
+    .tagDropdown {
+        width: 100%;
+        display: flex;
+        gap: 0.4rem;
+        flex-wrap: wrap;
+        position: absolute;
+        background-color: #2e4653;
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+        overflow-y: auto;
+        max-height: 10rem;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .avaliableTag {
+        width: 100%;
+        text-align: left;
+        background: none;
+        border: none;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        margin: 0%;
+        padding: 0%;
+    }
 </style>