Moved connections to user page, began search functionality

src/lib/components/util/searchBar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { goto } from '$app/navigation'
+
+    let searchBar: HTMLElement, searchInput: HTMLInputElement
+
+    const triggerSearch = (searchQuery: string) => goto(`/search?query=${searchQuery}`)
+</script>
+
+<search role="search" bind:this={searchBar} class="relative flex h-12 w-full items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-2" style="background-color: rgba(82, 82, 82, 0.25);">
+    <button
+        class="aspect-square h-6 transition-colors duration-200 hover:text-lazuli-primary"
+        on:click|preventDefault={() => {
+            if (searchInput.value.trim() !== '') {
+                triggerSearch(searchInput.value)
+            }
+        }}
+    >
+        <i class="fa-solid fa-magnifying-glass" />
+    </button>
+    <input
+        bind:this={searchInput}
+        type="text"
+        name="search"
+        class="w-full bg-transparent outline-none"
+        placeholder="Let's find some music"
+        autocomplete="off"
+        on:keypress={(event) => {
+            if (event.key === 'Enter') triggerSearch(searchInput.value)
+        }}
+    />
+</search>