music_library/lib/music_library_web/components/layouts/app.html.heex

<%!-- TODO: replace with OSS version --%>
<nav class="border-b border-slate-900/10 dark:border-slate-300/10" aria-label="Sections">
  <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-16 justify-between">
      <div class="flex">
        <div class="flex space-x-2 md:space-x-4">
          <.nav_link route={~p"/"} section={:stats} current_section={@current_section}>
            <.icon
              name="hero-chart-pie"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Stats")}
          </.nav_link>
          <.nav_link
            route={~p"/collection"}
            section={:collection}
            current_section={@current_section}
          >
            <.icon
              name="hero-circle-stack"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Collection")}
          </.nav_link>
          <.nav_link route={~p"/wishlist"} section={:wishlist} current_section={@current_section}>
            <.icon
              name="hero-star"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Wishlist")}
          </.nav_link>
        </div>
      </div>
      <div class="flex space-x-2 md:space-x-4 items-center">
        <script :type={ColocatedHook} name=".SearchGlobalShortcut">
          export default {
            mounted() {
              const universalSearchButton = document.querySelector("#universal-search-button");

              document.addEventListener("keydown", (event) => {
                switch (event.key) {
                  case "k":
                    if (event.metaKey || event.ctrlKey) {
                      event.preventDefault();
                      universalSearchButton.click();
                    }
                    break;
                  default:
                    break;
                }
              });
            },
          };
        </script>
        <.button
          id="universal-search-button"
          variant="ghost"
          title={gettext("Search (Ctrl+K)")}
          phx-click="open_modal"
          phx-target="#universal-search"
          phx-hook=".SearchGlobalShortcut"
        >
          <span class="sr-only">{gettext("Search (Ctrl+K)")}</span>
          <.icon name="hero-magnifying-glass" class="h-5 w-5" />
        </.button>
        <.dropdown placement="bottom-end">
          <:toggle>
            <button class="flex items-center gap-x-2">
              <div class="text-sm text-zinc-500 hover:text-zinc-700 font-semibold dark:text-zinc-300 dark:hover:text-zinc-200">
                {gettext("More")}
              </div>
              <.icon name="hero-chevron-down" class="h-4 w-4" />
            </button>
          </:toggle>
          <.dropdown_link href={~p"/scrobble-rules"}>
            <.icon
              name="hero-adjustments-horizontal"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Scrobble Rules")}
          </.dropdown_link>
          <.dropdown_link href={~p"/online-store-templates"}>
            <.icon
              name="hero-building-storefront"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Online Store Templates")}
          </.dropdown_link>
          <.dropdown_link href={~p"/backup"}>
            <.icon
              name="hero-archive-box-arrow-down"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Backup")}
          </.dropdown_link>
          <.dropdown_separator />
          <.dropdown_link href={~p"/dev/dashboard"}>
            <.icon name="hero-chart-bar" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
            {gettext("Live Dashboard")}
          </.dropdown_link>
          <.dropdown_link href={~p"/dev/errors"}>
            <.icon
              name="hero-exclamation-circle"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Errors")}
          </.dropdown_link>
          <.dropdown_link href={~p"/dev/oban"}>
            <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
            {gettext("Oban")}
          </.dropdown_link>
          <.dropdown_separator />
          <.dropdown_link href={~p"/login"}>
            <.icon
              name="hero-arrow-left-start-on-rectangle"
              class="h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Logout")}
          </.dropdown_link>
        </.dropdown>
      </div>
    </div>
  </div>
</nav>
<main class="px-4 py-4 max-sm:pb-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-screen-xl">
    <LiveToast.toast_group
      flash={@flash}
      corner={:top_right}
      connected={assigns[:socket] != nil}
      toasts_sync={assigns[:toasts_sync]}
    />
    {@inner_content}
  </div>
</main>

<div>
  {live_render(@socket, MusicLibraryWeb.UniversalSearchLive.Index,
    id: "universal-search",
    session: %{}
  )}
</div>