From 8e49454b6fa4d9520575dbdcfd37e4996f76c1b1 Mon Sep 17 00:00:00 2001
From: Barf-Vader <47476490+Barf-Vader@users.noreply.github.com>
Date: Thu, 12 Jun 2025 17:28:09 +0100
Subject: [PATCH] refactor: moved search into Navbar component

---
 src/lib/components/Navbar.svelte |   1 -
 src/routes/+layout.svelte        |   1 +
 src/routes/+page.svelte          | 128 ++++++++++++++-----------------
 3 files changed, 59 insertions(+), 71 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 2b8c514..a422bbe 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -28,7 +28,6 @@
         background: linear-gradient(-77deg, #2e4653, #223a37);
         box-shadow: 0rem 0rem 0.5rem #182125;
         align-items: center;
-        overflow: hidden;
         z-index: 100;
     }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3d788ef..1645bee 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -33,6 +33,7 @@
         margin: 0;
         padding: 0;
         width: 100%;
+        overflow-x: hidden;
     }
 
     :global(html) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2c9b3a3..ef2f7b5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -110,19 +110,61 @@
 </script>
 
 <Navbar>
-    {#if session}
+    <div class="navActions">
+        <div class="tagDisplay">
+            {#each selectedTags 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"
+                bind:value={tagFilter}
+                bind:this={tagFilterElem}
+                onfocus={() => {
+                    dropdownVisible = true;
+                }}
+                onblur={() => {
+                    dropdownVisible = false;
+                }}
+                onkeypress={(event) => {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        const tag = filteredTags[0];
+                        if (tag) addTag(tag)();
+                    }
+                }}
+                placeholder="Search by tags..."
+            />
+            {#if dropdownVisible}
+                <div class="tagDropdown">
+                    {#each filteredTags as avaliableTag (avaliableTag)}
+                        <button
+                            class="avaliableTag"
+                            onclick={addTag(avaliableTag)}
+                            onmousedown={(e) => {
+                                // Keep input focused
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}
+                            type="button"
+                        >
+                            {avaliableTag}
+                        </button>
+                    {/each}
+                </div>
+            {/if}
+        </div>
         <a href="/space/new/edit">
             <img src={crossUrl} alt="new" class="new-space" />
         </a>
-    {/if}
+    </div>
 </Navbar>
 
 <main>
-    {#if adminMode}
-        <div class="checkReports">
-            <Button href="/space/reports" type="link" style="red">Check Reports</Button>
-        </div>
-    {/if}
     <div class="time-filter-container">
         <label>
             Open from:
@@ -133,58 +175,7 @@
             <input type="time" bind:value={closingFilter} />
         </label>
     </div>
-    <div class="tag-filter-container">
-        <form>
-            <div class="tagDisplay">
-                {#each selectedTags 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"
-                    bind:value={tagFilter}
-                    bind:this={tagFilterElem}
-                    onfocus={() => {
-                        dropdownVisible = true;
-                    }}
-                    onblur={() => {
-                        dropdownVisible = false;
-                    }}
-                    onkeypress={(event) => {
-                        if (event.key === "Enter") {
-                            event.preventDefault();
-                            const tag = filteredTags[0];
-                            if (tag) addTag(tag)();
-                        }
-                    }}
-                    placeholder="Search by tags..."
-                />
-                {#if dropdownVisible}
-                    <div class="tagDropdown">
-                        {#each filteredTags as avaliableTag (avaliableTag)}
-                            <button
-                                class="avaliableTag"
-                                onclick={addTag(avaliableTag)}
-                                onmousedown={(e) => {
-                                    // Keep input focused
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                }}
-                                type="button"
-                            >
-                                {avaliableTag}
-                            </button>
-                        {/each}
-                    </div>
-                {/if}
-            </div>
-        </form>
-    </div>
-
+    <a href="/space/reports" class="checkReports">Check Reports</a>
     {#each filteredStudySpaces as studySpace (studySpace.id)}
         {@const imgUrl =
             studySpace.study_space_images.length > 0
@@ -235,11 +226,14 @@
         transform: rotate(45deg);
     }
 
-    .tag-filter-container {
-        grid-column: 1 / -1;
+    .navActions {
         display: flex;
-        justify-content: center;
-        margin-bottom: 0.5rem;
+        height: 100%;
+        width: 100%;
+        align-items: center;
+        padding-left: 2rem;
+        gap: 1rem;
+        z-index: 200;
     }
 
     .time-filter-container {
@@ -264,13 +258,6 @@
         color: #eaffeb;
     }
 
-    form {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        max-width: 32rem;
-    }
-
     .tagDisplay {
         display: flex;
         gap: 0.4rem;
@@ -330,6 +317,7 @@
         top: 100%;
         left: 50%;
         transform: translateX(-50%);
+        z-index: 1000;
     }
 
     .avaliableTag {