upend/webui/src/components/layout/Header.svelte

<script lang="ts">
  import { Link, useLocation, useNavigate, useParams } from "svelte-navigator";
  import { useMatch } from "svelte-navigator";
  import { addEmitter } from "../AddModal.svelte";
  import Icon from "../utils/Icon.svelte";
  import Input from "../utils/Input.svelte";
  const navigate = useNavigate();
  const location = useLocation();

  const searchMatch = useMatch("/search/:query");

  let searchQuery = $searchMatch?.params.query || "";
  $: if (!$location.pathname.includes("search")) searchQuery = "";
  function onInput(event: CustomEvent<string>) {
    searchQuery = event.detail;

    if (searchQuery.length > 0) {
      navigate(`/search/${searchQuery}`);
    } else {
      navigate("/");
    }
  }

  let fileInput: HTMLInputElement;
  function onFileChange() {
    if (fileInput.files.length > 0) {
      addEmitter.emit("files", Array.from(fileInput.files));
    }
  }
</script>

<div class="header">
  <h1>
    <Link to="/">
      <img class="logo" src="/assets/upend.svg" alt="UpEnd logo" />
      UpEnd
    </Link>
  </h1>
  <div class="input">
    <Input
      placeholder="Search or add..."
      value={searchQuery}
      on:input={onInput}
    >
      <Icon name="search" slot="prefix" />
    </Input>
  </div>
  <button class="add-button" on:click={() => fileInput.click()}>
    <Icon name="plus-circle" />
    <input type="file" bind:this={fileInput} on:change={onFileChange} />
  </button>
</div>

<style lang="scss">
  .header {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    height: 3.5rem;
    border-bottom: 1px solid var(--foreground);

    background: var(--background);

    h1 {
      font-size: 16pt;
      font-weight: normal;
      margin: 0;

      :global(a) {
        display: flex;
        align-items: center;

        color: var(--foreground-lightest);
        text-decoration: none;
        font-weight: normal;
      }

      img {
        margin-right: 0.5em;
      }
    }

    .logo {
      display: inline-block;
      height: 1.5em;
    }

    .input {
      margin-left: 1em;
      flex-grow: 1;
    }

    .add-button {
      border: 1px solid var(--foreground);
      border-radius: 4px;
      background: var(--background-lighter);
      color: var(--foreground);
      margin: 0 0.5em;
      padding: 0.25em 1em;
      line-height: 1;
      display: block;
      cursor: pointer;

      input {
        display: none;
      }
    }
  }
</style>