From c7d8ed433dc11093233e7cf070cc0508716952ff Mon Sep 17 00:00:00 2001
From: TadiosT <tadios.temesgen@gmail.com>
Date: Thu, 5 Jun 2025 23:57:00 +0100
Subject: [PATCH] feat: Added checkboxes for properties of a study space on the
 upload page.

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

diff --git a/src/routes/space/+page.svelte b/src/routes/space/+page.svelte
index 8c3267d..9fcbcd1 100644
--- a/src/routes/space/+page.svelte
+++ b/src/routes/space/+page.svelte
@@ -7,6 +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/index"
 
     const { data } = $props();
     const { supabase } = $derived(data);
@@ -62,6 +63,17 @@
             invalidate: ["db:study_spaces"]
         });
     }
+
+    let selectedTags = $state<string[]>([]);
+
+    function toggleTag(tag: string) {
+        if (selectedTags.includes(tag)) {
+        selectedTags = selectedTags.filter(t => t !== tag);
+        } else {
+            selectedTags = [...selectedTags, tag];
+        }
+    }
+
 </script>
 
 <Navbar>
@@ -86,6 +98,22 @@
         required
     />
 
+    <fieldset>
+        <legend>Select applicable tags:</legend>
+        <div class="tag-list">
+            {#each availableStudySpaceTags as tag}
+                <label class="tag-checkbox">
+                    <input
+                        type="checkbox"
+                        checked={selectedTags.includes(tag)}
+                        onchange={() => toggleTag(tag)}
+                    />
+                    {tag}
+                </label>
+            {/each}
+        </div>
+    </fieldset>
+
     <label for="description">Add a description:</label>
     <Textarea
         name="description"
@@ -117,6 +145,99 @@
 </form>
 
 <style>
+    /* .tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    }
+
+    .tag-checkbox {
+        background: #2e4653;
+        color: white;
+        border-radius: 0.5rem;
+        padding: 0.25rem 0.75rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        font-size: 1rem;
+    }
+
+    input[type="checkbox"] {
+        accent-color: #49bd85;
+    } */
+
+
+    fieldset {
+    border: none;
+    padding: 0;
+    margin-top: 1rem;
+    }
+
+    legend {
+        font-size: 1rem;
+        color: #ffffff;
+        margin-bottom: 0.5rem;
+    }
+
+    .tag-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .tag-checkbox {
+        display: flex;
+        align-items: center;
+        background-color: #2e4653;
+        color: #ffffff;
+        padding: 0.4rem 0.8rem;
+        border-radius: 9999px; /* pill shape */
+        font-size: 0.85rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background-color 0.2s ease, transform 0.1s ease;
+    }
+
+    .tag-checkbox:hover {
+        background-color: #3a5b56;
+        transform: scale(1.03);
+    }
+
+    .tag-checkbox input[type="checkbox"] {
+        appearance: none;
+        width: 1rem;
+        height: 1rem;
+        margin-right: 0.5rem;
+        border-radius: 0.25rem;
+        border: 2px solid #49bd85;
+        background-color: transparent;
+        position: relative;
+    }
+
+    .tag-checkbox input[type="checkbox"]:checked {
+        background-color: #49bd85;
+        border-color: #49bd85;
+    }
+
+    .tag-checkbox input[type="checkbox"]::after {
+        content: "";
+        display: block;
+        width: 0.25rem;
+        height: 0.5rem;
+        border: solid #1f2a2f;
+        border-width: 0 0.125rem 0.125rem 0;
+        transform: rotate(45deg);
+        position: absolute;
+        top: 0.15rem;
+        left: 0.32rem;
+        opacity: 0;
+    }
+
+    .tag-checkbox input[type="checkbox"]:checked::after {
+        opacity: 1;
+    }
     form {
         display: flex;
         flex-direction: column;