From 74a2b9bce8173a9c0649fc361878bbf7940e9ff0 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 16 Mar 2026 12:23:59 +0000
Subject: [PATCH] Update and uniform styles for scrobble rules and online
 templates lists

---
 .../live/online_store_template_live/index.ex  | 18 +++++---
 .../live/scrobble_rules_live/index.ex         | 43 +++++++++++--------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/lib/music_library_web/live/online_store_template_live/index.ex b/lib/music_library_web/live/online_store_template_live/index.ex
index a097bfb8..873869c9 100644
--- a/lib/music_library_web/live/online_store_template_live/index.ex
+++ b/lib/music_library_web/live/online_store_template_live/index.ex
@@ -58,12 +58,6 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
                 <p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                   {template.name}
                 </p>
-                <.badge :if={template.enabled} color="success">
-                  {gettext("Enabled")}
-                </.badge>
-                <.badge :if={!template.enabled} color="warning">
-                  {gettext("Disabled")}
-                </.badge>
               </div>
               <div class="mt-1 flex items-center gap-x-2 text-xs text-zinc-500 dark:text-zinc-400">
                 <p class="truncate font-mono">{template.url_template}</p>
@@ -72,7 +66,8 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
                 {template.description}
               </p>
             </div>
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
+              <.status_badge enabled={template.enabled} />
               <.dropdown id={"actions-#{template.id}"} placement="bottom-end">
                 <:toggle>
                   <.button variant="ghost">
@@ -235,4 +230,13 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
 
     {:noreply, push_patch(socket, to: ~p"/online-store-templates?#{qs}")}
   end
+
+  attr :enabled, :boolean, required: true
+
+  defp status_badge(assigns) do
+    ~H"""
+    <.badge :if={@enabled} color="success">{gettext("Enabled")}</.badge>
+    <.badge :if={!@enabled} color="warning">{gettext("Disabled")}</.badge>
+    """
+  end
 end
diff --git a/lib/music_library_web/live/scrobble_rules_live/index.ex b/lib/music_library_web/live/scrobble_rules_live/index.ex
index 560637f9..7937fc6c 100644
--- a/lib/music_library_web/live/scrobble_rules_live/index.ex
+++ b/lib/music_library_web/live/scrobble_rules_live/index.ex
@@ -68,7 +68,11 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
       </div>
 
       <div class="mt-6 space-y-4">
-        <ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
+        <ul
+          phx-update="stream"
+          id="scrobble-rules-list"
+          class="divide-y divide-zinc-100 dark:divide-zinc-300/20"
+        >
           <li
             id="no-scrobble-rules"
             class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
@@ -82,32 +86,31 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
           <li
             :for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
             id={dom_id}
-            class="flex items-center gap-2"
+            class="flex items-center justify-between gap-2 py-5"
           >
-            <div class="grow min-w-0">
-              <div class="lg:flex lg:items-center lg:gap-2">
-                <p class="text-sm text-zinc-900 dark:text-zinc-100">
+            <div class="min-w-0">
+              <div class="flex items-center gap-2">
+                <.type_badge type={scrobble_rule.type} />
+                <p class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate">
                   {scrobble_rule.match_value}
                 </p>
-                <p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-1 lg:mt-0 truncate">
-                  {scrobble_rule.target_musicbrainz_id}
-                </p>
               </div>
+              <p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-1 truncate">
+                {scrobble_rule.target_musicbrainz_id}
+              </p>
               <p
                 :if={scrobble_rule.description}
                 class="text-xs text-zinc-500 dark:text-zinc-400 mt-1 truncate"
               >
                 {scrobble_rule.description}
               </p>
-            </div>
-            <div class="flex flex-col lg:flex-row items-end lg:items-center gap-1 lg:gap-2 shrink-0">
-              <.type_badge type={scrobble_rule.type} />
-              <.status_badge enabled={scrobble_rule.enabled} />
-              <span class="text-xs text-zinc-500 dark:text-zinc-400 text-nowrap">
+              <div class="flex items-center gap-1 mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+                <.icon name="hero-clock" class="h-3.5 w-3.5" aria-hidden="true" />
                 {Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
-              </span>
+              </div>
             </div>
-            <div class="flex items-center shrink-0">
+            <div class="flex items-center gap-2 shrink-0">
+              <.status_badge enabled={scrobble_rule.enabled} />
               <.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
                 <:toggle>
                   <.button variant="ghost">
@@ -338,8 +341,14 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
 
   defp type_badge(assigns) do
     ~H"""
-    <.badge :if={@type == :album} color="danger">{gettext("Album")}</.badge>
-    <.badge :if={@type == :artist} color="info">{gettext("Artist")}</.badge>
+    <.badge :if={@type == :album} color="danger">
+      <.icon name="hero-numbered-list" class="icon" aria-hidden="true" data-slot="icon" />
+      <span class="sr-only">{gettext("Album")}</span>
+    </.badge>
+    <.badge :if={@type == :artist} color="info">
+      <.icon name="hero-user" class="icon" aria-hidden="true" data-slot="icon" />
+      <span class="sr-only">{gettext("Artist")}</span>
+    </.badge>
     """
   end