From d88cb847669ce5c39fba137d603b50618985511b Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sun, 9 Nov 2025 21:22:21 +0000
Subject: [PATCH] Simplify markup of similar records

---
 .../components/record_components.ex           | 29 +++++++------------
 priv/gettext/default.pot                      |  1 -
 priv/gettext/en/LC_MESSAGES/default.po        |  1 -
 3 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
index 56c3fdda..3df7f755 100644
--- a/lib/music_library_web/components/record_components.ex
+++ b/lib/music_library_web/components/record_components.ex
@@ -425,26 +425,17 @@ defmodule MusicLibraryWeb.RecordComponents do
       >
         <li
           :for={%{record: record, similarity: similarity} <- @similar_records}
-          class="relative group"
+          class="relative"
+          phx-click={JS.navigate(@record_show_path.(record))}
         >
-          <div class="overflow-hidden rounded-lg bg-zinc-100 focus-within:ring-2 focus-within:ring-zinc-500 focus-within:ring-offset-2 focus-within:ring-offset-zinc-100">
-            <.record_cover
-              record={record}
-              class="pointer-events-none aspect-square object-cover group-hover:opacity-75 transition-opacity"
-              width={300}
-            />
-            <button
-              type="button"
-              class="absolute inset-0 focus:outline-hidden"
-              phx-click={JS.navigate(@record_show_path.(record))}
-            >
-              <span class="sr-only">{gettext("View details")}</span>
-            </button>
-
-            <span class="absolute top-2 right-2 rounded-full px-2 py-0.5 text-xs font-medium bg-zinc-900/75 text-white backdrop-blur-sm">
-              {Float.round(100 - similarity * 100, 0)}%
-            </span>
-          </div>
+          <.record_cover
+            record={record}
+            class="aspect-square rounded-lg hover:opacity-85"
+            width={300}
+          />
+          <span class="absolute top-2 right-2 rounded-full px-2 py-0.5 text-xs font-medium bg-zinc-900/75 text-white backdrop-blur-sm">
+            {Float.round(100 - similarity * 100, 0)}%
+          </span>
 
           <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
             {record.title}
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index b41c747d..3fc7b093 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -334,7 +334,6 @@ msgstr ""
 msgid "Made by"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex
 #: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "View details"
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index cefe4323..5398091d 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -334,7 +334,6 @@ msgstr ""
 msgid "Made by"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex
 #: lib/music_library_web/live/artist_live/show.ex
 #, elixir-autogen, elixir-format
 msgid "View details"