Add button to refresh Scrobble activity

lib/music_library_web/live/stats_live/index.ex

@@ -77,6 +77,11 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     end
   end
 
+  def handle_event("refresh_lastfm_feed", _, socket) do
+    LastFm.Refresh.refresh()
+    {:noreply, socket}
+  end
+
   def handle_info(%{tracks: recent_tracks}, socket) do
     release_ids =
       recent_tracks

lib/music_library_web/live/stats_live/index.html.heex

@@ -62,9 +62,28 @@
 </div>
 
 <div class="flow-root">
-  <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
-    <%= gettext("Scrobble activity") %>
-  </h1>
+  <div class="mt-5 flex justify-between items-center">
+    <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
+      <%= gettext("Scrobble activity") %>
+    </h1>
+    <button
+      type="button"
+      class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
+      phx-click={
+        JS.transition("animate-spin", to: "#refresh-lastfm-feed", time: 1000)
+        |> JS.push("refresh_lastfm_feed")
+      }
+    >
+      <span class="sr-only"><%= gettext("Refresh LastFm Feed") %></span>
+      <.icon
+        id="refresh-lastfm-feed"
+        name="hero-arrow-path"
+        class="-mt-1 h-5 w-5"
+        aria-hidden="true"
+        data-slot="icon"
+      />
+    </button>
+  </div>
   <ul
     id="scrobble-activity"
     role="list"