feat: make the top search work for all tabs

frontend/src/lib/customStores.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const searchBy = writable("");

frontend/src/routes/Header.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
  import logo from "$lib/images/logo.svg";
- import { HomeOutline, UploadOutline } from "flowbite-svelte-icons";
+ import {
+ HomeOutline,
+ UploadOutline,
+ UserOutline,
+ } from "flowbite-svelte-icons";
  import { Search, Button } from "flowbite-svelte";
+ import { searchBy } from "$lib/customStores";
 </script>
 
-<header>
+<header class="flex justify-between">
  <div class="nav-container">
  <div id="logo">
  <a href="/">
@@ -19,16 +24,26 @@
  <UploadOutline size="sm" />Upload</a
  >
  </div>
- <form id="search-bar">
+ <form
+ id="search-bar"
+ on:submit={() => {
+ window.location.href = `/search?name=${$searchBy}`;
+ }}
+ >
  <Search
- size="md"
+ size="lg"
  type="text"
  class="flex gap-2 items-center"
  placeholder="Enter search..."
+ bind:value={$searchBy}
  />
- <Button type="submit" size="xs">Search</Button>
+ <Button type="submit" size="sm">Search</Button>
  </form>
  </div>
+
+ <a href="/login" class="flex items-center gap-1 mr-5">
+ <UserOutline size="sm" />Login</a
+ >
 </header>
 
 <style>
@@ -48,8 +63,9 @@
 
  #search-bar {
  display: flex;
- width: 400px;
+ min-width: 500px;
  gap: 5px;
+ margin-left: 20px;
  }
 
  .nav-container {

frontend/src/routes/search/+page.svelte

@@ -3,18 +3,16 @@
  import { Backend } from "$lib/backend";
  import type { ProteinEntry } from "$lib/backend";
  import ListProteins from "$lib/ListProteins.svelte";
- import { Search, Button } from "flowbite-svelte";
  import { page } from "$app/stores";
- import { writableUrlParams } from "$lib/format";
+ import { searchBy } from "$lib/customStores";
 
- const nameSearch = writableUrlParams($page.url.searchParams, "name");
- let searchBy = $nameSearch;
+ $searchBy = $page.url.searchParams.get("name") ?? "";
 
  let allEntries: ProteinEntry[] | null = null;
  onMount(async () => {
  // if user provided a name like /search?name=abc, parse it
- if (searchBy) {
- allEntries = await Backend.searchEntries(searchBy);
+ if ($searchBy) {
+ allEntries = await Backend.searchEntries($searchBy);
  } else {
  allEntries = await Backend.getAllEntries();
  }
@@ -26,26 +24,5 @@
 </svelte:head>
 
 <section>
- <form
- class="flex gap-2"
- style="width: 500px;"
- on:submit={async () => {
- if (searchBy) {
- allEntries = await Backend.searchEntries(searchBy);
- $nameSearch = searchBy; // update url param
- } else {
- allEntries = await Backend.getAllEntries();
- }
- }}
- >
- <Search
- size="md"
- type="text"
- class="flex gap-2 items-center"
- placeholder="Enter protein name..."
- bind:value={searchBy}
- />
- <Button type="submit">Search</Button>
- </form>
  <ListProteins {allEntries} />
 </section>