music_library/lib/music_library_web/live/collection_live/index.html.heex

<div>
  <header class="gap-6 mb-2">
    <div class="flex items-center justify-between gap-6 mb-2 mt-2">
      <.search_form query={@record_list_params.query} />
      <nav class="mt-2 isolate inline-flex rounded-md shadow-xs">
        <.link
          class={[
            "relative inline-flex items-center rounded-l-md",
            "px-3 py-2 text-xs sm:text-sm font-semibold",
            "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
            "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
            "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
            "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
          ]}
          patch={~p"/collection/import"}
        >
          <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
          {gettext("Add")}
        </.link>
        <.link
          class={[
            "relative -ml-px inline-flex items-center rounded-r-md",
            "px-3 py-2 text-xs sm:text-sm font-semibold",
            "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
            "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
            "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
            "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
          ]}
          patch={~p"/collection/scan"}
        >
          <svg
            class="mr-2 fill-current"
            aria-hidden="true"
            data-slot="icon"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1"
            width="16"
            height="16"
            viewBox="0 0 256 256"
            xml:space="preserve"
          >
            <g
              style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
              transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
            >
              <polygon
                points="90,79.14 56.12,79.14 56.12,73.14 84,73.14 84,54.67 90,54.67 "
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform="  matrix(1 0 0 1 0 0) "
              />
              <polygon
                points="33.88,79.14 0,79.14 0,54.67 6,54.67 6,73.14 33.88,73.14 "
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform="  matrix(1 0 0 1 0 0) "
              />
              <polygon
                points="6,35.33 0,35.33 0,10.86 33.88,10.86 33.88,16.86 6,16.86 "
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform="  matrix(1 0 0 1 0 0) "
              />
              <polygon
                points="90,35.33 84,35.33 84,16.86 56.12,16.86 56.12,10.86 90,10.86 "
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform="  matrix(1 0 0 1 0 0) "
              />
              <rect
                x="36.27"
                y="26.31"
                rx="0"
                ry="0"
                width="6"
                height="37.39"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
              <rect
                x="13.36"
                y="26.31"
                rx="0"
                ry="0"
                width="6"
                height="37.39"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
              <rect
                x="59.18"
                y="26.31"
                rx="0"
                ry="0"
                width="6"
                height="24.02"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
              <rect
                x="59.18"
                y="56.85"
                rx="0"
                ry="0"
                width="6"
                height="6.84"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
              <rect
                x="24.82"
                y="26.31"
                rx="0"
                ry="0"
                width="6"
                height="24.02"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
              <rect
                x="24.82"
                y="56.85"
                rx="0"
                ry="0"
                width="6"
                height="6.84"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
              <rect
                x="70.64"
                y="26.31"
                rx="0"
                ry="0"
                width="6"
                height="24.02"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
              <rect
                x="70.64"
                y="56.85"
                rx="0"
                ry="0"
                width="6"
                height="6.84"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
              <rect
                x="47.73"
                y="26.31"
                rx="0"
                ry="0"
                width="6"
                height="37.39"
                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
                transform=" matrix(1 0 0 1 0 0) "
              />
            </g>
          </svg>
          {gettext("Scan")}
        </.link>
      </nav>
    </div>
  </header>

  <div class="flex items-end justify-between gap-6 mt-8">
    <span class="isolate inline-flex rounded-md shadow-xs">
      <.link
        patch={order_path(@record_list_params, :alphabetical)}
        class={[
          "relative inline-flex items-center rounded-l-md",
          "px-3 py-2 text-xs sm:text-sm font-semibold",
          "ring-1 ring-inset focus:z-10",
          "bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 ring-zinc-300",
          @record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
        ]}
      >
        <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
        {gettext("A->Z")}
      </.link>
      <.link
        patch={order_path(@record_list_params, :purchase)}
        class={[
          "relative -ml-px inline-flex items-center rounded-r-md",
          "px-3 py-2 text-xs sm:text-sm font-semibold",
          "ring-1 ring-inset focus:z-10",
          "bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 ring-zinc-300",
          @record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
        ]}
      >
        <.icon
          name="hero-banknotes-solid"
          class="mr-1 h-4 w-4"
          aria-hidden="true"
          data-slot="icon"
        />
        {gettext("Purchase")}
      </.link>
    </span>

    <p class="text-right text-sm max-sm:text-xs text-zinc-900 dark:text-zinc-400">
      {gettext(
        "Showing <b>%{visible}</b> of <b>%{total}</b> records",
        %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
      )
      |> raw()}
    </p>
  </div>
</div>

<.record_list
  records={@streams.records}
  record_show_path={fn record -> ~p"/collection/#{record}" end}
  record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
/>

<.modal
  :if={@live_action == :edit}
  id="record-modal"
  show
  on_cancel={JS.patch(back_path(@record_list_params))}
>
  <.live_component
    module={MusicLibraryWeb.FormComponent}
    id={@record.id}
    action={@live_action}
    show_purchased_at={true}
    record={@record}
    patch={back_path(@record_list_params)}
  />
</.modal>

<.modal
  :if={@live_action == :import}
  id="record-modal"
  show
  on_cancel={JS.patch(back_path(@record_list_params))}
>
  <.live_component
    module={MusicLibraryWeb.ImportComponent}
    id={:search}
    title={@page_title}
    action={@live_action}
    record={@record}
    patch={back_path(@record_list_params)}
    initial_query=""
    icon_name="hero-plus"
  />
</.modal>

<.modal
  :if={@live_action == :barcode_scan}
  id="barcode-scanner-modal"
  show
  on_cancel={JS.patch(back_path(@record_list_params))}
>
  <.live_component
    module={MusicLibraryWeb.BarcodeScannerComponent}
    id={:barcode_scanner}
    title={@page_title}
    action={@live_action}
    patch={back_path(@record_list_params)}
  />
</.modal>

<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />