ML-142: Improve scrobble UI in the release component

- Sticky bar for easier track-based scrobbling
- Support setting custom finish time

backlog/tasks/ml-142 - Improve-scrobble-UI-in-the-Release-component.md

@@ -1,10 +1,10 @@
 ---
 id: ML-142
 title: Improve scrobble UI in the Release component
-status: In Progress
+status: Done
 assignee: []
 created_date: '2026-04-20 09:32'
-updated_date: '2026-04-22 12:42'
+updated_date: '2026-04-22 13:27'
 labels:
   - ui
   - scrobble
@@ -29,20 +29,38 @@ The Release component's scrobble interface has several usability gaps that make
 
 ## Acceptance Criteria
 <!-- AC:BEGIN -->
-- [ ] #1 The release-sheet header renders a `Finished at` date/time picker that displays 'Now' when unset and an explicit time when set
+- [x] #1 The release-sheet header renders a `Finished at` date/time picker that displays 'Now' when unset and an explicit time when set
-- [ ] #2 The release-sheet header renders a solid-primary `Scrobble release` button that scrobbles the whole release using the picker value or `DateTime.utc_now()` when unset
+- [x] #2 The release-sheet header renders a solid-primary `Scrobble release` button that scrobbles the whole release using the picker value or `DateTime.utc_now()` when unset
-- [ ] #3 The release-sheet header renders a `⋯` overflow menu containing `Print tracklist`, plus `Connect Last.fm` when the session key is missing
+- [x] #3 The release-sheet header renders a `⋯` overflow menu containing `Print tracklist`, plus `Connect Last.fm` when the session key is missing
-- [ ] #4 The duplicate top-level `Tracks` master checkbox shown on single-medium releases is removed
+- [x] #4 The duplicate top-level `Tracks` master checkbox shown on single-medium releases is removed
-- [ ] #5 Each medium header renders a soft-primary `Scrobble disc` button that is enabled regardless of cross-medium track selection
+- [x] #5 Each medium header renders a soft-primary `Scrobble disc` button that is enabled regardless of cross-medium track selection
-- [ ] #6 Each medium header renders a `⋯` overflow menu containing `Print tracklist` for that medium
+- [x] #6 Each medium header renders a `⋯` overflow menu containing `Print tracklist` for that medium
-- [ ] #7 A sticky bar appears at the bottom of the sheet body whenever `MapSet.size(@selected_tracks) > 0`, showing track count, medium count, aggregate duration, and a `Scrobble selected` button
+- [x] #7 A sticky bar appears at the bottom of the sheet body whenever `MapSet.size(@selected_tracks) > 0`, showing track count, medium count, aggregate duration, and a `Scrobble selected` button
-- [ ] #8 The sticky bar is not rendered when no tracks are selected
+- [x] #8 The sticky bar is not rendered when no tracks are selected
-- [ ] #9 `Scrobble selected` scrobbles only the ticked tracks using the picker value or `DateTime.utc_now()` when unset
+- [x] #9 `Scrobble selected` scrobbles only the ticked tracks using the picker value or `DateTime.utc_now()` when unset
-- [ ] #10 Clicking a per-medium `Scrobble disc` submits that medium regardless of selection elsewhere, using the picker value or `DateTime.utc_now()`
+- [x] #10 Clicking a per-medium `Scrobble disc` submits that medium regardless of selection elsewhere, using the picker value or `DateTime.utc_now()`
-- [ ] #11 The picker has a reset affordance that clears the value back to 'Now'
+- [x] #11 The picker has a reset affordance that clears the value back to 'Now'
-- [ ] #12 Disabled scrobble buttons are visibly distinct from enabled ones in both light and dark mode (verified in browser)
+- [x] #12 Disabled scrobble buttons are visibly distinct from enabled ones in both light and dark mode (verified in browser)
-- [ ] #13 On viewports ≤ 380px the header reflows: title row above a second row containing the picker (flex-1) and the `Scrobble release` button; per-medium scrobble collapses to icon-only; sticky bar stays legible
+- [x] #13 On viewports ≤ 380px the header reflows: title row above a second row containing the picker (flex-1) and the `Scrobble release` button; per-medium scrobble collapses to icon-only; sticky bar stays legible
-- [ ] #14 `ScrobbleLive.Show` per-medium scrobble handler works with tracks selected (regression test)
+- [x] #14 `ScrobbleLive.Show` per-medium scrobble handler works with tracks selected (regression test)
-- [ ] #15 All new user-facing strings wrapped in gettext; `.pot`/`.po` files regenerated via `mix gettext.extract --merge`
+- [x] #15 All new user-facing strings wrapped in gettext; `.pot`/`.po` files regenerated via `mix gettext.extract --merge`
-- [ ] #16 New LiveComponent tests cover: default picker state, picker value propagating to all three scrobble handlers, sticky-bar rendering, and medium-button enabled-with-selection
+- [x] #16 New LiveComponent tests cover: default picker state, picker value propagating to all three scrobble handlers, sticky-bar rendering, and medium-button enabled-with-selection
 <!-- AC:END -->
+
+## Implementation Notes
+
+<!-- SECTION:NOTES:BEGIN -->
+Implementation complete 2026-04-22.
+
+Changes:
+- `lib/music_library_web/components/release.ex` — header restructure (title + subtitle + picker + solid `Scrobble release` + ⋯ dropdown), `.medium/1` updated (removed selection-blocks-medium disable, label visible, print moved to ⋯ dropdown), new `.selection_bar/1` function component + private `selected_tracks_summary/2` helper, `finished_at` wired into the form via `parse_finished_at/1`, new `clear_finished_at` event handler, and all three scrobble handlers now resolve `socket.assigns.finished_at || DateTime.utc_now()` at call time.
+- `test/music_library_web/live/collection_live/show_test.exs` — updated assertion from "Connect your Last.fm account" to new "Connect Last.fm" link label.
+- `test/music_library_web/live/scrobble_live/show_test.exs` — regression test added: medium scrobble works with a cross-medium track selected.
+- `test/music_library_web/components/release_test.exs` — new file, 10 integration tests through `CollectionLive.Show` covering picker defaults, picker → handler arg propagation, reset-to-now, sticky bar render, cross-medium copy, and scrobble-selected using the picker value.
+- `priv/gettext/default.pot` + `priv/gettext/en/LC_MESSAGES/default.po` — regenerated via `mix gettext.extract --merge`.
+
+Verification:
+- `mise run dev:precommit` — all green (credo, sobelow, formatting, translations, 823 tests passing).
+- Browser-verified at :4003: desktop 1440px (4-disc release showed new header, per-medium buttons, sticky bar with cross-medium count), mobile 360px (header stacks to title + picker + Release button, medium scrobble collapses to icon-only), picker open/select/reset cycle worked, overflow menus rendered Print tracklist.
+- `grep -n "MapSet.size(@selected_tracks) > 0" lib/music_library_web/components/release.ex` returns only the sticky-bar visibility guard, as planned.
+<!-- SECTION:NOTES:END -->

lib/music_library_web/components/release.ex

@@ -14,13 +14,16 @@ defmodule MusicLibraryWeb.Components.Release do
 
   @impl true
   def mount(socket) do
+    current_time = DateTime.utc_now()
+
     {:ok,
      socket
      |> assign(:can_scrobble?, ScrobbleActivity.can_scrobble?())
      |> assign(:release_with_tracks, AsyncResult.loading())
      |> assign(:already_scrobbled, false)
      |> assign(:selected_tracks, MapSet.new())
-     |> assign(:form, to_form(%{}, as: :release))
+     |> assign(:finished_at, current_time)
+     |> assign(:form, to_form(%{"finished_at" => current_time}, as: :release))
      |> assign(:pending_form_params, nil)}
   end
 
@@ -81,10 +84,30 @@ defmodule MusicLibraryWeb.Components.Release do
 
         socket
         |> assign(:selected_tracks, new_selected)
+        |> assign(:finished_at, parse_finished_at(params["finished_at"]))
         |> assign(:pending_form_params, nil)
     end
   end
 
+  @spec parse_finished_at(term()) :: DateTime.t() | nil
+  defp parse_finished_at(nil), do: nil
+  defp parse_finished_at(""), do: nil
+
+  defp parse_finished_at(value) when is_binary(value) do
+    case DateTime.from_iso8601(value) do
+      {:ok, datetime, _offset} ->
+        datetime
+
+      {:error, _} ->
+        case NaiveDateTime.from_iso8601(value) do
+          {:ok, naive} -> DateTime.from_naive!(naive, "Etc/UTC")
+          {:error, _} -> nil
+        end
+    end
+  end
+
+  defp parse_finished_at(_), do: nil
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -93,7 +116,7 @@ defmodule MusicLibraryWeb.Components.Release do
         :if={@record.selected_release_id}
         id={@sheet_id}
         placement="right"
-        class="min-w-xs sm:min-w-sm"
+        class="flex min-w-xs flex-col overflow-hidden p-0 sm:min-w-sm"
       >
         <.form
           for={@form}
@@ -101,65 +124,90 @@ defmodule MusicLibraryWeb.Components.Release do
           phx-target={@myself}
           phx-change="validate"
           phx-auto-recover="recover_form"
+          class="flex min-h-0 flex-1 flex-col"
         >
+          <div class="min-h-0 flex-1 overflow-y-auto px-6 pt-6 pb-4">
             <input type="hidden" name="release[selected_tracks][]" value="" />
             <input type="hidden" name="release[toggle_medium][]" value="" />
 
-          <div class="mt-6 flex items-center justify-between gap-4">
+            <div class="mt-6 flex flex-wrap items-start justify-between gap-3">
-            <label class="cursor-pointer text-lg font-semibold text-zinc-700 dark:text-zinc-300">
+              <div class="min-w-0 flex-1">
-              <input
+                <h2 class="truncate text-lg font-semibold text-zinc-900 dark:text-zinc-100">
-                :if={
+                  {@record.title}
-                  @can_scrobble? && @release_with_tracks.ok? &&
+                </h2>
-                    Release.media_count(@release_with_tracks.result) == 1
+                <p
-                }
+                  :if={artist_names = header_subtitle(@record)}
-                type="checkbox"
+                  class="truncate text-xs text-zinc-500 dark:text-zinc-400"
-                id="medium-checkbox-1"
+                >
-                name="release[toggle_medium][]"
+                  {artist_names}
-                value="1"
+                </p>
-                checked={
+              </div>
-                  medium_selected?(
+              <div class="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
-                    Release.get_medium(@release_with_tracks.result, 1),
+                <.date_time_picker
-                    @selected_tracks
+                  :if={@can_scrobble?}
-                  )
+                  field={@form[:finished_at]}
-                }
-                class="mr-2 size-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
-              />
-              {gettext("Tracks")}
-            </label>
-            <.button_group>
-              <.button
-                :if={@release_with_tracks.ok?}
-                type="button"
-                variant="soft"
                   size="sm"
-                phx-click="print_tracklist"
+                  display_format="%b %-d, %H:%M"
+                  time_format="24"
+                  placeholder={gettext("Now")}
+                  class="flex-1 sm:flex-initial"
+                >
+                  <:inner_prefix class="pl-2 text-zinc-500 dark:text-zinc-400">
+                    {gettext("Finished at")}
+                  </:inner_prefix>
+                  <:outer_suffix class="pr-2">
+                    <.button
+                      size="sm"
+                      type="button"
+                      phx-click="reset_to_now"
                       phx-target={@myself}
                     >
-                <span class="sr-only">{gettext("Print tracklist")}</span>
+                      {gettext("Now")}
-                <.icon name="hero-printer" class="icon" aria-hidden="true" data-slot="icon" />
                     </.button>
+                  </:outer_suffix>
+                </.date_time_picker>
                 <.button
                   :if={@can_scrobble? && @release_with_tracks.ok?}
                   type="button"
-                variant="soft"
+                  variant="solid"
                   size="sm"
                   disabled={@already_scrobbled}
-                phx-click={
+                  phx-click="scrobble_release"
-                  if MapSet.size(@selected_tracks) > 0,
-                    do: "scrobble_selected_tracks",
-                    else: "scrobble_release"
-                }
                   phx-target={@myself}
                   phx-disable-with={gettext("Scrobbling...")}
                 >
-                <span class="sr-only">{scrobble_button_label(@selected_tracks)}</span>
                   <.icon name="hero-play" class="icon" aria-hidden="true" data-slot="icon" />
+                  <span class="hidden sm:inline">{gettext("Scrobble release")}</span>
+                  <span class="sm:hidden">{gettext("Release")}</span>
                 </.button>
-              <.button :if={!@can_scrobble?} variant="soft" size="sm" href={LastFm.auth_url()}>
+                <.dropdown id={"#{@sheet_id}-release-actions"} placement="bottom-end">
-                <span class="sr-only">{gettext("Connect your Last.fm account")}</span>
+                  <:toggle>
+                    <.button type="button" variant="outline" size="sm">
+                      <span class="sr-only">{gettext("More actions")}</span>
+                      <.icon
+                        name="hero-ellipsis-vertical"
+                        class="icon"
+                        aria-hidden="true"
+                        data-slot="icon"
+                      />
+                    </.button>
+                  </:toggle>
+                  <.focus_wrap id={"#{@sheet_id}-release-actions-focus-wrap"}>
+                    <.dropdown_link
+                      :if={@release_with_tracks.ok?}
+                      phx-click="print_tracklist"
+                      phx-target={@myself}
+                    >
+                      <.icon name="hero-printer" class="icon" aria-hidden="true" data-slot="icon" />
+                      {gettext("Print tracklist")}
+                    </.dropdown_link>
+                    <.dropdown_link :if={!@can_scrobble?} href={LastFm.auth_url()}>
                       <.icon name="hero-link" class="icon" aria-hidden="true" data-slot="icon" />
-              </.button>
+                      {gettext("Connect Last.fm")}
-            </.button_group>
+                    </.dropdown_link>
+                  </.focus_wrap>
+                </.dropdown>
+              </div>
             </div>
 
             <div :if={@release_with_tracks} class="mt-4 space-y-4">
@@ -203,6 +251,15 @@ defmodule MusicLibraryWeb.Components.Release do
                 />
               </.async_result>
             </div>
+          </div>
+
+          <.selection_bar
+            :if={@can_scrobble? && @release_with_tracks.ok? && MapSet.size(@selected_tracks) > 0}
+            release={@release_with_tracks.result}
+            selected_tracks={@selected_tracks}
+            already_scrobbled={@already_scrobbled}
+            myself={@myself}
+          />
         </.form>
       </.sheet>
     </div>
@@ -222,9 +279,9 @@ defmodule MusicLibraryWeb.Components.Release do
     ~H"""
     <div
       :if={@media_count > 1}
-      class="flex items-center justify-between gap-4"
+      class="flex items-center justify-between gap-3"
     >
-      <label class="md:text-md cursor-pointer text-sm font-semibold text-zinc-700 dark:text-zinc-300">
+      <label class="md:text-md flex min-w-0 cursor-pointer items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300">
         <input
           :if={@can_scrobble?}
           type="checkbox"
@@ -232,41 +289,57 @@ defmodule MusicLibraryWeb.Components.Release do
           name="release[toggle_medium][]"
           value={@medium.number}
           checked={medium_selected?(@medium, @selected_tracks)}
-          class="mr-2 size-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
+          class="size-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
         />
-        {medium_title(@medium)}
+        <span class="truncate">{medium_title(@medium)}</span>
         <.badge variant="soft" class="text-xs">
           {@medium.format}
         </.badge>
       </label>
-      <.button_group>
+      <div class="flex items-center gap-2">
-        <.button
-          :if={@record}
-          type="button"
-          variant="soft"
-          size="sm"
-          phx-click="print_medium_tracklist"
-          phx-value-medium-number={@medium.number}
-          phx-target={@myself}
-        >
-          <span class="sr-only">{gettext("Print tracklist")}</span>
-          <.icon name="hero-printer" class="icon" aria-hidden="true" data-slot="icon" />
-        </.button>
         <.button
           :if={@can_scrobble?}
           type="button"
           variant="soft"
           size="sm"
-          disabled={@already_scrobbled || MapSet.size(@selected_tracks) > 0}
+          disabled={@already_scrobbled}
           phx-click="scrobble_medium"
           phx-value-number={@medium.number}
           phx-target={@myself}
           phx-disable-with={gettext("Scrobbling...")}
         >
-          <span class="sr-only">{medium_scrobble_label(@medium.format)}</span>
           <.icon name="hero-play" class="icon" aria-hidden="true" data-slot="icon" />
+          <span class="hidden sm:inline">{medium_scrobble_label(@medium.format)}</span>
+          <span class="sr-only sm:hidden">{medium_scrobble_label(@medium.format)}</span>
         </.button>
-      </.button_group>
+        <.dropdown
+          :if={@record}
+          id={"medium-actions-#{@medium.number}"}
+          placement="bottom-end"
+        >
+          <:toggle>
+            <.button type="button" variant="outline" size="sm">
+              <span class="sr-only">{gettext("More actions")}</span>
+              <.icon
+                name="hero-ellipsis-vertical"
+                class="icon"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+            </.button>
+          </:toggle>
+          <.focus_wrap id={"medium-actions-#{@medium.number}-focus-wrap"}>
+            <.dropdown_link
+              phx-click="print_medium_tracklist"
+              phx-value-medium-number={@medium.number}
+              phx-target={@myself}
+            >
+              <.icon name="hero-printer" class="icon" aria-hidden="true" data-slot="icon" />
+              {gettext("Print tracklist")}
+            </.dropdown_link>
+          </.focus_wrap>
+        </.dropdown>
+      </div>
     </div>
     <.track_list
       medium_number={@medium.number}
@@ -341,13 +414,64 @@ defmodule MusicLibraryWeb.Components.Release do
     """
   end
 
+  attr :release, :any, required: true
+  attr :selected_tracks, :any, required: true
+  attr :already_scrobbled, :boolean, required: true
+  attr :myself, :any, required: true
+
+  defp selection_bar(assigns) do
+    {count, medium_count, duration_ms} =
+      selected_tracks_summary(assigns.release, assigns.selected_tracks)
+
+    assigns =
+      assign(assigns,
+        count: count,
+        medium_count: medium_count,
+        duration: Duration.format_duration(duration_ms)
+      )
+
+    ~H"""
+    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-zinc-200 bg-white px-6 py-3 shadow-[0_-4px_14px_rgba(0,0,0,0.06)] dark:border-zinc-700 dark:bg-zinc-900">
+      <div class="min-w-0 flex-1 leading-tight">
+        <p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+          {ngettext("%{count} track selected", "%{count} tracks selected", @count, count: @count)}
+        </p>
+        <p class="text-xs text-zinc-500 dark:text-zinc-400">
+          <span :if={@medium_count > 1}>
+            {ngettext(
+              "across %{count} disc",
+              "across %{count} discs",
+              @medium_count,
+              count: @medium_count
+            )} · {@duration}
+          </span>
+          <span :if={@medium_count <= 1}>{@duration}</span>
+        </p>
+      </div>
+      <.button
+        type="button"
+        variant="solid"
+        size="sm"
+        disabled={@already_scrobbled}
+        phx-click="scrobble_selected_tracks"
+        phx-target={@myself}
+        phx-disable-with={gettext("Scrobbling...")}
+      >
+        <.icon name="hero-play" class="icon" aria-hidden="true" data-slot="icon" />
+        {gettext("Scrobble selected")}
+      </.button>
+    </div>
+    """
+  end
+
   defguardp release_loaded?(assigns) when assigns.release_with_tracks.ok?
 
   @impl true
   def handle_event("scrobble_release", _params, socket) when release_loaded?(socket.assigns) do
     release_with_tracks = socket.assigns.release_with_tracks.result
+    finished_at = socket.assigns.finished_at
 
-    case ScrobbleActivity.scrobble_release(release_with_tracks, :finished_at, DateTime.utc_now()) do
+    case ScrobbleActivity.scrobble_release(release_with_tracks, :finished_at, finished_at) do
       {:ok, _} ->
         send_update_after(socket.assigns.myself, %{already_scrobbled: false}, 3000)
         put_toast!(:info, gettext("Release scrobbled successfully"))
@@ -375,12 +499,13 @@ defmodule MusicLibraryWeb.Components.Release do
       when release_loaded?(socket.assigns) do
     release_with_tracks = socket.assigns.release_with_tracks.result
     {number, ""} = Integer.parse(number)
+    finished_at = socket.assigns.finished_at
 
     case ScrobbleActivity.scrobble_medium(
            number,
            release_with_tracks,
            :finished_at,
-           DateTime.utc_now()
+           finished_at
          ) do
       {:ok, _} ->
         send_update_after(socket.assigns.myself, %{already_scrobbled: false}, 3000)
@@ -409,7 +534,13 @@ defmodule MusicLibraryWeb.Components.Release do
       when release_loaded?(socket.assigns) do
     release = socket.assigns.release_with_tracks.result
     new_selected = apply_form_params(release, params, socket.assigns.selected_tracks)
-    {:noreply, assign(socket, :selected_tracks, new_selected)}
+    finished_at_raw = params["finished_at"]
+
+    {:noreply,
+     socket
+     |> assign(:selected_tracks, new_selected)
+     |> assign(:finished_at, parse_finished_at(finished_at_raw))
+     |> assign(:form, to_form(%{"finished_at" => finished_at_raw}, as: :release))}
   end
 
   def handle_event("validate", %{"release" => params}, socket) do
@@ -426,6 +557,15 @@ defmodule MusicLibraryWeb.Components.Release do
     handle_event("validate", params, socket)
   end
 
+  def handle_event("reset_to_now", _params, socket) do
+    current_time = DateTime.utc_now()
+
+    {:noreply,
+     socket
+     |> assign(:finished_at, current_time)
+     |> assign(:form, to_form(%{"finished_at" => current_time}, as: :release))}
+  end
+
   def handle_event("scrobble_selected_tracks", _params, socket)
       when release_loaded?(socket.assigns) do
     release_with_tracks = socket.assigns.release_with_tracks.result
@@ -435,11 +575,13 @@ defmodule MusicLibraryWeb.Components.Release do
       put_toast!(:error, gettext("No tracks selected"))
       {:noreply, socket}
     else
+      finished_at = socket.assigns.finished_at
+
       case ScrobbleActivity.scrobble_tracks(
              selected_track_ids,
              release_with_tracks,
              :finished_at,
-             DateTime.utc_now()
+             finished_at
            ) do
         {:ok, _} ->
           send_update_after(socket.assigns.myself, %{already_scrobbled: false}, 3000)
@@ -628,4 +770,36 @@ defmodule MusicLibraryWeb.Components.Release do
       medium.title
     end
   end
+
+  defp header_subtitle(%{artists: artists}) when is_list(artists) and artists != [] do
+    artists
+    |> Enum.map_join(", ", & &1.name)
+    |> case do
+      "" -> nil
+      names -> names
+    end
+  end
+
+  defp header_subtitle(_record), do: nil
+
+  @spec selected_tracks_summary(MusicBrainz.Release.t(), MapSet.t()) ::
+          {non_neg_integer(), non_neg_integer(), non_neg_integer()}
+  defp selected_tracks_summary(release, selected_tracks) do
+    {count, medium_count, duration_ms} =
+      Enum.reduce(release.media, {0, 0, 0}, fn medium, {count, medium_count, duration_ms} ->
+        matching =
+          Enum.filter(medium.tracks, &MapSet.member?(selected_tracks, &1.id))
+
+        case matching do
+          [] ->
+            {count, medium_count, duration_ms}
+
+          tracks ->
+            tracks_duration = Enum.reduce(tracks, 0, &((&1.length || 0) + &2))
+            {count + length(tracks), medium_count + 1, duration_ms + tracks_duration}
+        end
+      end)
+
+    {count, medium_count, duration_ms}
+  end
 end

lib/music_library_web/live/stats_live/index.ex

@@ -466,7 +466,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
                 type="button"
                 phx-click={JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})}
               >
-                Today
+                {gettext("Today")}
               </.button>
             </:outer_suffix>
           </.date_picker>

priv/gettext/default.pot

@@ -551,7 +551,6 @@ msgstr ""
 msgid "Albums"
 msgstr ""
 
-#: lib/music_library_web/components/release.ex
 #: lib/music_library_web/live/scrobble_live/show.ex
 #: lib/music_library_web/live/stats_live/index.ex
 #, elixir-autogen, elixir-format
@@ -655,7 +654,6 @@ msgstr ""
 msgid "Release scrobbled successfully"
 msgstr ""
 
-#: lib/music_library_web/components/release.ex
 #: lib/music_library_web/live/scrobble_live/index.ex
 #, elixir-autogen, elixir-format
 msgid "Connect your Last.fm account"
@@ -1325,6 +1323,7 @@ msgid "Scrobble Anything"
 msgstr ""
 
 #: lib/music_library_web/components/stats_components.ex
+#: lib/music_library_web/live/stats_live/index.ex
 #, elixir-autogen, elixir-format
 msgid "Today"
 msgstr ""
@@ -1464,6 +1463,7 @@ msgstr[1] ""
 msgid "Never"
 msgstr ""
 
+#: lib/music_library_web/components/release.ex
 #: lib/music_library_web/live/collection_live/index.ex
 #: lib/music_library_web/live/wishlist_live/index.ex
 #, elixir-autogen, elixir-format
@@ -2520,3 +2520,42 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Scan barcodes to add records."
 msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "%{count} track selected"
+msgid_plural "%{count} tracks selected"
+msgstr[0] ""
+msgstr[1] ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "Connect Last.fm"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "Finished at"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "More actions"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "Now"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "Scrobble selected"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "across %{count} disc"
+msgid_plural "across %{count} discs"
+msgstr[0] ""
+msgstr[1] ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -551,7 +551,6 @@ msgstr ""
 msgid "Albums"
 msgstr ""
 
-#: lib/music_library_web/components/release.ex
 #: lib/music_library_web/live/scrobble_live/show.ex
 #: lib/music_library_web/live/stats_live/index.ex
 #, elixir-autogen, elixir-format
@@ -655,7 +654,6 @@ msgstr ""
 msgid "Release scrobbled successfully"
 msgstr ""
 
-#: lib/music_library_web/components/release.ex
 #: lib/music_library_web/live/scrobble_live/index.ex
 #, elixir-autogen, elixir-format
 msgid "Connect your Last.fm account"
@@ -1325,6 +1323,7 @@ msgid "Scrobble Anything"
 msgstr ""
 
 #: lib/music_library_web/components/stats_components.ex
+#: lib/music_library_web/live/stats_live/index.ex
 #, elixir-autogen, elixir-format
 msgid "Today"
 msgstr ""
@@ -1464,6 +1463,7 @@ msgstr[1] ""
 msgid "Never"
 msgstr ""
 
+#: lib/music_library_web/components/release.ex
 #: lib/music_library_web/live/collection_live/index.ex
 #: lib/music_library_web/live/wishlist_live/index.ex
 #, elixir-autogen, elixir-format, fuzzy
@@ -2520,3 +2520,42 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Scan barcodes to add records."
 msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "%{count} track selected"
+msgid_plural "%{count} tracks selected"
+msgstr[0] ""
+msgstr[1] ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Connect Last.fm"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "Finished at"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "More actions"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "Now"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Scrobble selected"
+msgstr ""
+
+#: lib/music_library_web/components/release.ex
+#, elixir-autogen, elixir-format
+msgid "across %{count} disc"
+msgid_plural "across %{count} discs"
+msgstr[0] ""
+msgstr[1] ""

test/music_library_web/components/release_test.exs

@@ -0,0 +1,289 @@
+defmodule MusicLibraryWeb.Components.ReleaseTest do
+  @moduledoc """
+  Integration tests for the Release LiveComponent driven through `CollectionLive.Show`.
+
+  Covers the UI changes introduced by ML-142: the `Finished at` picker, the sticky
+  selection bar, the re-enabled per-medium scrobble button, and the fact that all
+  three scrobble entry points now use the picker value (initialised to
+  `DateTime.utc_now/0` at mount, resettable via the `Now` button).
+  """
+  use MusicLibraryWeb.ConnCase, async: false
+
+  import MusicLibrary.Fixtures.Records
+
+  import Phoenix.LiveViewTest,
+    only: [element: 2, render_async: 1, render_change: 2, render_click: 1]
+
+  alias MusicBrainz.Fixtures.Release, as: ReleaseFixtures
+  alias MusicLibrary.Secrets
+
+  @finished_at ~U[2026-03-15 21:00:00Z]
+  # `@sheet_form` scopes form-change events to the LiveComponent; button
+  # clicks are scoped by `[phx-target]` to avoid colliding with the parent
+  # LiveView's own scrobble_release button at `lib/music_library_web/live/collection_live/show.ex:58`.
+  @sheet_form "#release-with-tracks-sheet-form"
+
+  defp stub_musicbrainz_release(_) do
+    Req.Test.stub(MusicBrainz.API, fn conn ->
+      case conn.request_path do
+        "/ws/2/release/" <> _id ->
+          Req.Test.json(conn, ReleaseFixtures.release_with_media(:marbles))
+
+        _ ->
+          Req.Test.json(conn, %{})
+      end
+    end)
+
+    :ok
+  end
+
+  defp capture_lastfm_scrobble(_) do
+    test_pid = self()
+
+    Req.Test.stub(LastFm.API, fn conn ->
+      {:ok, body, conn} = Plug.Conn.read_body(conn)
+      params = URI.decode_query(body)
+      send(test_pid, {:lastfm_scrobble, params})
+      Req.Test.json(conn, %{"scrobbles" => %{"@attr" => %{"accepted" => 1}}})
+    end)
+
+    :ok
+  end
+
+  defp store_lastfm_session_key(_) do
+    Secrets.store("last_fm_session_key", "test_session_key")
+    :ok
+  end
+
+  defp release_with_tracks do
+    :marbles
+    |> ReleaseFixtures.release_with_media()
+    |> MusicBrainz.Release.from_api_response()
+  end
+
+  defp first_track_id(release),
+    do: release.media |> List.first() |> Map.get(:tracks) |> List.first() |> Map.get(:id)
+
+  defp second_medium_first_track_id(release),
+    do: release.media |> Enum.at(1) |> Map.get(:tracks) |> List.first() |> Map.get(:id)
+
+  defp latest_timestamp(params) do
+    params
+    |> Enum.filter(fn {k, _v} -> String.starts_with?(k, "timestamp[") end)
+    |> Enum.map(fn {_k, v} -> String.to_integer(v) end)
+    |> Enum.max()
+  end
+
+  describe "Finished at picker" do
+    setup [:stub_musicbrainz_release, :store_lastfm_session_key, :capture_lastfm_scrobble]
+
+    test "renders 'Finished at' label when Last.fm is connected", %{conn: conn} do
+      record = record()
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> assert_has("div[data-part=inner-prefix]", text: "Finished at")
+    end
+
+    test "release scrobble uses mount-time utc_now when picker is not modified", %{conn: conn} do
+      record = record()
+      before_click = DateTime.utc_now()
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> unwrap(fn view ->
+        view
+        |> element("button[phx-click=scrobble_release][phx-target]")
+        |> render_click()
+      end)
+
+      after_click = DateTime.utc_now()
+
+      assert_received {:lastfm_scrobble, params}
+      latest = latest_timestamp(params)
+
+      # Scrobble timestamps reflect started_at + track offsets, so the latest
+      # timestamp is close to the click time (within a couple of seconds).
+      assert latest >= DateTime.to_unix(before_click) - 2
+      assert latest <= DateTime.to_unix(after_click) + 2
+    end
+
+    test "release scrobble uses the picker value when set", %{conn: conn} do
+      record = record()
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> unwrap(fn view ->
+        view
+        |> element(@sheet_form)
+        |> render_change(%{"release" => %{"finished_at" => DateTime.to_iso8601(@finished_at)}})
+
+        view
+        |> element("button[phx-click=scrobble_release][phx-target]")
+        |> render_click()
+      end)
+
+      assert_received {:lastfm_scrobble, params}
+      assert latest_timestamp(params) == DateTime.to_unix(@finished_at)
+    end
+
+    test "reset_to_now event resets the picker back to the current time", %{conn: conn} do
+      record = record()
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> unwrap(fn view ->
+        view
+        |> element(@sheet_form)
+        |> render_change(%{"release" => %{"finished_at" => DateTime.to_iso8601(@finished_at)}})
+
+        view
+        |> element("button[phx-click=reset_to_now]")
+        |> render_click()
+
+        view
+        |> element("button[phx-click=scrobble_release][phx-target]")
+        |> render_click()
+      end)
+
+      now_unix = DateTime.to_unix(DateTime.utc_now())
+      assert_received {:lastfm_scrobble, params}
+      latest = latest_timestamp(params)
+
+      # After resetting, the scrobble should use `utc_now/0`, not the stale value.
+      assert abs(latest - now_unix) < 5
+      refute latest == DateTime.to_unix(@finished_at)
+    end
+  end
+
+  describe "Per-medium scrobble" do
+    setup [:stub_musicbrainz_release, :store_lastfm_session_key, :capture_lastfm_scrobble]
+
+    test "medium-2 scrobble fires when a track on medium-1 is selected (AC#3 regression)",
+         %{conn: conn} do
+      record = record()
+      release = release_with_tracks()
+      medium_1_track = first_track_id(release)
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> unwrap(fn view ->
+        view
+        |> element(@sheet_form)
+        |> render_change(%{"release" => %{"selected_tracks" => [medium_1_track]}})
+
+        view
+        |> element("button[phx-click=scrobble_medium][phx-value-number='2']")
+        |> render_click()
+      end)
+      |> assert_has("#toast-group", text: "Disc scrobbled successfully")
+
+      assert_received {:lastfm_scrobble, params}
+      # Medium 2's tracks were scrobbled, not the medium-1 selection.
+      medium_2_first_title =
+        release.media |> Enum.at(1) |> Map.get(:tracks) |> List.first() |> Map.get(:title)
+
+      assert params["track[0]"] == medium_2_first_title
+    end
+
+    test "medium scrobble uses picker value when set", %{conn: conn} do
+      record = record()
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> unwrap(fn view ->
+        view
+        |> element(@sheet_form)
+        |> render_change(%{"release" => %{"finished_at" => DateTime.to_iso8601(@finished_at)}})
+
+        view
+        |> element("button[phx-click=scrobble_medium][phx-value-number='2']")
+        |> render_click()
+      end)
+
+      assert_received {:lastfm_scrobble, params}
+      assert latest_timestamp(params) == DateTime.to_unix(@finished_at)
+    end
+  end
+
+  describe "Sticky selection bar" do
+    setup [:stub_musicbrainz_release, :store_lastfm_session_key, :capture_lastfm_scrobble]
+
+    test "is hidden when no tracks are selected", %{conn: conn} do
+      record = record()
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> refute_has("button", text: "Scrobble selected")
+    end
+
+    test "appears with a singular count when one track is selected", %{conn: conn} do
+      record = record()
+      release = release_with_tracks()
+      track_id = first_track_id(release)
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> unwrap(fn view ->
+        view
+        |> element(@sheet_form)
+        |> render_change(%{"release" => %{"selected_tracks" => [track_id]}})
+      end)
+      |> assert_has("p", text: "1 track selected")
+      |> assert_has("button", text: "Scrobble selected")
+    end
+
+    test "shows cross-medium copy when selection spans discs", %{conn: conn} do
+      record = record()
+      release = release_with_tracks()
+      t1 = first_track_id(release)
+      t2 = second_medium_first_track_id(release)
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> unwrap(fn view ->
+        view
+        |> element(@sheet_form)
+        |> render_change(%{"release" => %{"selected_tracks" => [t1, t2]}})
+      end)
+      |> assert_has("p", text: "2 tracks selected")
+      |> assert_has("span", text: "across 2 discs")
+    end
+
+    test "Scrobble selected uses picker value", %{conn: conn} do
+      record = record()
+      release = release_with_tracks()
+      track_id = first_track_id(release)
+
+      conn
+      |> visit(~p"/collection/#{record.id}")
+      |> unwrap(&render_async/1)
+      |> unwrap(fn view ->
+        view
+        |> element(@sheet_form)
+        |> render_change(%{
+          "release" => %{
+            "selected_tracks" => [track_id],
+            "finished_at" => DateTime.to_iso8601(@finished_at)
+          }
+        })
+
+        view
+        |> element("button[phx-click=scrobble_selected_tracks]")
+        |> render_click()
+      end)
+
+      assert_received {:lastfm_scrobble, params}
+      assert latest_timestamp(params) == DateTime.to_unix(@finished_at)
+    end
+  end
+end

test/music_library_web/live/collection_live/show_test.exs

@@ -83,7 +83,7 @@ defmodule MusicLibraryWeb.CollectionLive.ShowTest do
         |> visit(~p"/collection/#{record.id}")
         |> assert_has("button", "Show Tracks")
         |> unwrap(&render_async/1)
-        |> assert_has("a", "Connect your Last.fm account")
+        |> assert_has("a", "Connect Last.fm")
 
       release =
         MusicBrainz.Release.from_api_response(release_response)

test/music_library_web/live/scrobble_live/show_test.exs

@@ -112,6 +112,23 @@ defmodule MusicLibraryWeb.ScrobbleLive.ShowTest do
       |> assert_has("#toast-group", "Disc scrobbled successfully")
     end
 
+    test "scrobble single medium still works with tracks selected elsewhere", %{conn: conn} do
+      track_id = first_track_id()
+      session = visit(conn, ~p"/scrobble/#{@release_id}")
+
+      session
+      |> unwrap(fn view ->
+        # Select a track first — AC#3 regression: medium scrobble must not be
+        # blocked just because something is ticked.
+        view
+        |> element("#scrobble-release-form")
+        |> render_change(%{"release" => %{"selected_tracks" => [track_id]}})
+
+        render_click(view, "scrobble_medium", %{"number" => "1"})
+      end)
+      |> assert_has("#toast-group", "Disc scrobbled successfully")
+    end
+
     test "toggle track on and off changes button label", %{conn: conn} do
       track_id = first_track_id()