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

<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
  <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} />
        <.button_group>
          <.button
            variant="solid"
            size="sm"
            patch={~p"/collection/import"}
          >
            <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
            {gettext("Add")}
          </.button>
          <.button
            variant="solid"
            size="sm"
            patch={~p"/collection/scan"}
          >
            <.barcode_icon class="icon fill-current" />
            {gettext("Scan")}
          </.button>
        </.button_group>
      </div>
    </header>

    <div class="flex items-end justify-between gap-6 mt-8">
      <.button_group>
        <.button
          patch={order_path(@record_list_params, :purchase)}
          size="sm"
          class={[
            @record_list_params.order == :purchase && "bg-zinc-100! dark:bg-zinc-700!"
          ]}
        >
          <.icon
            name="hero-banknotes-solid"
            class="icon"
            aria-hidden="true"
            data-slot="icon"
          />
          <span class="hidden sm:inline">{gettext("Purchase")}</span>
        </.button>
        <.button
          patch={order_path(@record_list_params, :alphabetical)}
          size="sm"
          class={[
            @record_list_params.order == :alphabetical && "bg-zinc-100! dark:bg-zinc-700!"
          ]}
        >
          <.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
          <span class="hidden sm:inline">{gettext("A->Z")}</span>
        </.button>
      </.button_group>

      <.button_group>
        <.button
          phx-click="set_display"
          phx-value-mode="grid"
          size="sm"
          class={[
            @display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
          ]}
        >
          <.icon
            name="hero-squares-2x2"
            class="icon"
            aria-hidden="true"
            data-slot="icon"
          />
          <span class="hidden sm:inline">
            {gettext("Grid")}
          </span>
        </.button>
        <.button
          phx-click="set_display"
          phx-value-mode="list"
          size="sm"
          class={[
            @display == :list && "bg-zinc-100! dark:bg-zinc-700!"
          ]}
        >
          <.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
          <span class="hidden sm:inline">
            {gettext("List")}
          </span>
        </.button>
      </.button_group>
    </div>
  </div>

  <.record_grid
    :if={@display == :grid}
    id="collection"
    records={@streams.records}
    record_show_path={fn record -> ~p"/collection/#{record}" end}
    record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
    display_artist_names
    density={:high}
  />

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

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

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

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

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