From e625afd3b4be148a1a9e151c8ea96069e2b618bc Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Thu, 5 Jun 2025 23:10:55 +0100
Subject: [PATCH 1/4] feat: added tags on upload and view tweaked navbar

---
 src/lib/components/Navbar.svelte              |   4 +-
 src/lib/components/inputs/Text.svelte         |   5 +
 src/lib/components/inputs/Textarea.svelte     |   5 +
 src/lib/database.d.ts                         |   3 +
 src/lib/index.ts                              |   3 +-
 src/routes/space/+page.svelte                 | 148 +++++++++++++++++-
 src/routes/space/[id]/+page.svelte            |  40 ++++-
 .../migrations/20250605162005_add_tags.sql    |   3 +
 8 files changed, 196 insertions(+), 15 deletions(-)
 create mode 100644 supabase/migrations/20250605162005_add_tags.sql

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 7cb89ea..2b8c514 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -21,11 +21,11 @@
         display: flex;
         position: sticky;
         width: 100%;
-        height: 4rem;
+        height: 3.5rem;
         top: 0;
         left: 0;
         right: 0;
-        background: linear-gradient(-77deg, #2e4653, #3a5b56);
+        background: linear-gradient(-77deg, #2e4653, #223a37);
         box-shadow: 0rem 0rem 0.5rem #182125;
         align-items: center;
         overflow: hidden;
diff --git a/src/lib/components/inputs/Text.svelte b/src/lib/components/inputs/Text.svelte
index 494a68d..8488479 100644
--- a/src/lib/components/inputs/Text.svelte
+++ b/src/lib/components/inputs/Text.svelte
@@ -22,6 +22,11 @@
         font-size: 1rem;
     }
 
+    ::placeholder {
+        color: #859a90;
+        opacity: 1;
+    }
+
     input:focus {
         border-color: #007bff;
         outline: none;
diff --git a/src/lib/components/inputs/Textarea.svelte b/src/lib/components/inputs/Textarea.svelte
index 9ec4ebf..a167e26 100644
--- a/src/lib/components/inputs/Textarea.svelte
+++ b/src/lib/components/inputs/Textarea.svelte
@@ -25,6 +25,11 @@
         font-size: 1rem;
     }
 
+    ::placeholder {
+        color: #859a90;
+        opacity: 1;
+    }
+
     textarea:focus {
         border-color: #007bff;
         outline: none;
diff --git a/src/lib/database.d.ts b/src/lib/database.d.ts
index b254ea8..ba2f1c3 100644
--- a/src/lib/database.d.ts
+++ b/src/lib/database.d.ts
@@ -70,6 +70,7 @@ export type Database = {
           description: string | null
           id: string
           location: string | null
+          tags: string[]
           updated_at: string | null
         }
         Insert: {
@@ -78,6 +79,7 @@ export type Database = {
           description?: string | null
           id?: string
           location?: string | null
+          tags?: string[]
           updated_at?: string | null
         }
         Update: {
@@ -86,6 +88,7 @@ export type Database = {
           description?: string | null
           id?: string
           location?: string | null
+          tags?: string[]
           updated_at?: string | null
         }
         Relationships: []
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 72ed306..3b12f80 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -23,5 +23,6 @@ export const availableStudySpaceTags = [
     "Hot",
     "Air conditioned",
     "Cold",
-    "Cringe"
+    "Cringe",
+    "PCs"
 ];
diff --git a/src/routes/space/+page.svelte b/src/routes/space/+page.svelte
index af46874..f17fe0c 100644
--- a/src/routes/space/+page.svelte
+++ b/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>
diff --git a/src/routes/space/[id]/+page.svelte b/src/routes/space/[id]/+page.svelte
index b8121e6..d1affc2 100644
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -29,11 +29,21 @@
     <div class="nameContainer">
         {space.location}
     </div>
-    <p class="descContainer">
-        {space.description}
-    </p>
+    {#if space.description != null && space.description.length > 0}
+        <p class="descContainer">
+            {space.description}
+        </p>
+        <hr />
+    {/if}
+    <div class="tagContainer">
+        {#each space.tags as tag}
+            <span class="tag">
+                {tag}
+            </span>
+        {/each}
+    </div>
     <hr />
-    <div class="whereSubtitle">Where it is:</div>
+    <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
         {space.building_location}
     </p>
@@ -87,7 +97,7 @@
         font-size: 1.2rem;
     }
 
-    .whereSubtitle {
+    .subtitle {
         font-size: 1.2rem;
         font-weight: bold;
         color: #ffffff;
@@ -98,4 +108,24 @@
         font-size: 1.2rem;
         padding: 0rem 1.4rem;
     }
+
+    .tagContainer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+        padding: 1.4rem;
+        border-radius: 0.5rem;
+        background: none;
+    }
+
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 1.1rem;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
 </style>
diff --git a/supabase/migrations/20250605162005_add_tags.sql b/supabase/migrations/20250605162005_add_tags.sql
new file mode 100644
index 0000000..bc9c798
--- /dev/null
+++ b/supabase/migrations/20250605162005_add_tags.sql
@@ -0,0 +1,3 @@
+alter table "public"."study_spaces" add column "tags" text[] not null default ARRAY[]::text[];
+
+
-- 
2.49.1


From c4c8834d5071a55c7686b347108d38cba3b8a196 Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Thu, 5 Jun 2025 23:15:28 +0100
Subject: [PATCH 2/4] fix: added key to each block

---
 src/routes/space/[id]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/space/[id]/+page.svelte b/src/routes/space/[id]/+page.svelte
index d1affc2..0c099dd 100644
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -36,7 +36,7 @@
         <hr />
     {/if}
     <div class="tagContainer">
-        {#each space.tags as tag}
+        {#each space.tags as tag (tag)}
             <span class="tag">
                 {tag}
             </span>
-- 
2.49.1


From 1f5054efbb6137a5509b5e36481de6b80c629d8c Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Fri, 6 Jun 2025 02:52:22 +0100
Subject: [PATCH 3/4] feat: enter to select tag, and some fixes

fix: keep tag input focused on tag select (no delay hack)
fix: entire tag button clickable (padding within button rather than menu)
---
 src/routes/space/+page.svelte | 57 +++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/routes/space/+page.svelte b/src/routes/space/+page.svelte
index f17fe0c..4b0f21c 100644
--- a/src/routes/space/+page.svelte
+++ b/src/routes/space/+page.svelte
@@ -66,7 +66,13 @@
     }
 
     // Tag
-    let filteredTags = $state(availableStudySpaceTags);
+    let tagFilter = $state("");
+    let tagFilterElem = $state<HTMLInputElement>();
+    let filteredTags = $derived(
+        availableStudySpaceTags
+            .filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
+            .filter((tag) => !studySpaceData.tags.includes(tag))
+    );
     let dropdownVisible = $state(false);
 
     function deleteTag(tagName: string) {
@@ -75,22 +81,12 @@
         };
     }
 
-    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();
+            tagFilter = "";
         };
     }
 </script>
@@ -131,23 +127,37 @@
             type="text"
             name="tagInput"
             class="tagInput"
-            oninput={filterTags}
+            bind:value={tagFilter}
+            bind:this={tagFilterElem}
             onfocus={() => {
                 dropdownVisible = true;
             }}
             onblur={() => {
-                setTimeout(() => {
-                    dropdownVisible = false;
-                }, 100); // Delay to allow click on tag
+                dropdownVisible = false;
+            }}
+            onkeypress={(event) => {
+                if (event.key === "Enter") {
+                    const tag = filteredTags[0];
+                    if (tag) addTag(tag)();
+                }
             }}
             placeholder="Add tags..."
         />
         {#if dropdownVisible}
             <div class="tagDropdown">
                 {#each filteredTags as avaliableTag (avaliableTag)}
-                    <button class="avaliableTag" onclick={addTag(avaliableTag)} type="button">
-                        {avaliableTag}</button
+                    <button
+                        class="avaliableTag"
+                        onclick={addTag(avaliableTag)}
+                        onmousedown={(e) => {
+                            // Keep input focused
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }}
+                        type="button"
                     >
+                        {avaliableTag}
+                    </button>
                 {/each}
             </div>
         {/if}
@@ -258,8 +268,8 @@
         flex-wrap: wrap;
         position: absolute;
         background-color: #2e4653;
+        box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
         border-radius: 0.5rem;
-        padding: 0.5rem;
         overflow-y: auto;
         max-height: 10rem;
         top: 100%;
@@ -275,6 +285,13 @@
         color: #eaffeb;
         font-size: 0.9rem;
         margin: 0%;
-        padding: 0%;
+        padding: 0 0.8rem 0.4rem;
+    }
+    .avaliableTag:first-child {
+        padding-top: 0.6rem;
+        background-color: hsl(201, 26%, 60%);
+    }
+    .avaliableTag:last-child {
+        padding-bottom: 0.6rem;
     }
 </style>
-- 
2.49.1


From 6f798bc479e99cc96ae261673ac6698e837c3679 Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Fri, 6 Jun 2025 03:03:54 +0100
Subject: [PATCH 4/4] feat: display tags instead of description on main page

---
 src/lib/components/SpaceCard.svelte | 30 +++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index 076eded..0b1626b 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/src/lib/components/SpaceCard.svelte
@@ -15,7 +15,11 @@
     <img src={imgSrc} {alt} />
     <div class="description">
         <h1>{space.location}</h1>
-        <p>{space.description}</p>
+        <div class="tagContainer">
+            {#each space.tags as tag (tag)}
+                <span class="tag">{tag}</span>
+            {/each}
+        </div>
     </div>
 </a>
 
@@ -33,7 +37,6 @@
     .description {
         padding: 0.5rem;
         color: #edebe9;
-        font-size: 0.875rem;
     }
     img {
         width: 100%;
@@ -41,4 +44,27 @@
         aspect-ratio: 1 / 1;
         object-fit: cover;
     }
+
+    h1 {
+        margin-bottom: 0.5rem;
+    }
+
+    .tagContainer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+        border-radius: 0.5rem;
+        background: none;
+    }
+
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 0.875rem;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
 </style>
-- 
2.49.1