cozy/src/components/AddressBar.astro

---
import Icon from "astro-iconify";
import SettingsPopover from "./SettingsPopover.astro";

export interface Props {
  url: string | null;
}

const placeholder = "Type the article URL here";
const { url } = Astro.props;
---

<div class="address-bar">
  <form>
    <button
      aria-label="Back"
      class="btn left-buttons"
      type="button"
      id="app-back"
      name="app-back"
      onclick="history.go(-1); return false;"
    >
      <Icon name="ic:round-arrow-back-ios" />
    </button>
    <input
      type="url"
      id="app-url"
      name="url"
      value={url ?? ""}
      placeholder={placeholder}
      required
    />
    <button
      aria-label="Submit"
      class="btn right-buttons"
      type="submit"
      id="submit"
    >
      <Icon name="ri:ai-generate" />
    </button>
    <a
      aria-label="Home"
      class="btn right-buttons"
      type="button"
      id="app-home"
      href="/"
    >
      <Icon name="mdi:home" />
    </a>
    <div aria-label="Settings" id="app-settings" class="btn right-buttons">
      <input type="checkbox" id="settings-toggle" hidden />
      <label for="settings-toggle"><Icon name="mdi:cog" /></label>
    </div>
  </form>
  <SettingsPopover toggle="settings-toggle" />
</div>

<script>
  import { deserialize } from "@ayco/astro-resume";
  import type { AppConfig } from "../pages/index.astro";
  import { renderPost } from "../utils/library";
  const backLink = document.querySelector<HTMLButtonElement>("#app-back");
  const submitBtn = document.querySelector<HTMLButtonElement>("#submit");
  const urlInput = document.querySelector<HTMLInputElement>("#app-url");
  const settings = document.querySelector<HTMLDivElement>("#app-settings");
  const homeLink = document.querySelector<HTMLAnchorElement>("#app-home");
  const { routerOutlet } = deserialize<AppConfig>('app-config');

  homeLink?.addEventListener('click', (e) => {
    e.preventDefault();
    renderPost(null, '/', routerOutlet)
  })

  // if js is enabled, show the back and settings button
  backLink?.setAttribute("style", "display: block");
  settings?.setAttribute("style", "display: block");

  if (urlInput?.value === "") {
    backLink?.setAttribute("disabled", "true");
    submitBtn?.setAttribute("disabled", "true");
  }

  urlInput?.addEventListener("input", (e) => {
    const target = e.target as HTMLInputElement;
    if (target.value === "") {
      submitBtn?.setAttribute("disabled", "true");
    } else {
      submitBtn?.removeAttribute("disabled");
    }
  });
</script>

<style lang="scss">
  .address-bar {
    width: 100%;
    position: relative;
  }

  form {
    width: 100%;
    border: 0px;
    padding: 0.5rem;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    box-shadow: 0 1px 3px 1px #eee;
    display: flex;

    input[type="url"] {
      flex: 3;
      background-color: white;
      border-radius: 5px;
      border: 1px solid #eee;
      font-size: normal;
      padding: 0.5rem;
      color: #555;
    }

    #app-back,
    #app-settings {
      display: none;
    }

    .btn {
      display: block;
      border: 0px;
      height: 100%;
      vertical-align: middle;
      background-color: transparent;
      padding: 0.5rem 0;
      color: black;

      svg {
        border: 0px;
        background-color: transparent;
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }

    .left-buttons {
      margin-right: 0.5rem;
    }
    .right-buttons {
      margin-left: 0.5rem;
    }

    .btn svg:hover {
      color: blue !important;
    }

    .btn[disabled="true"] svg {
      color: #ccc !important;
      cursor: default !important;
    }
  }
</style>