Uniform ux/ui of adding a new record to a set

lib/music_library_web/live/record_set_live/show.html.heex

@@ -10,14 +10,6 @@
         </span>
       </div>
       <div class="flex items-center gap-2">
-        <.button
-          variant="solid"
-          size="sm"
-          patch={~p"/record-sets/#{@record_set}/show/add-record"}
-        >
-          <.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
-          {gettext("Add Record")}
-        </.button>
         <.dropdown id="set-actions" placement="bottom-end">
           <:toggle>
             <.button variant="ghost">
@@ -59,18 +51,6 @@
 
     <div class="mt-6">
       <div
-        :if={@record_set.items == []}
-        id="no-records"
-        class="p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
-      >
-        <.icon name="hero-musical-note" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
-        <p class="text-zinc-600 dark:text-zinc-400">
-          {gettext("No records in this set yet")}
-        </p>
-      </div>
-
-      <div
-        :if={@record_set.items != []}
         class="grid grid-cols-3 sm:grid-cols-6 gap-4"
         id="record-set-records"
         phx-hook="SortableList"
@@ -176,6 +156,24 @@
             {Records.Record.format_release_date(item.record.release_date)}
           </p>
         </div>
+        <.link
+          patch={~p"/record-sets/#{@record_set}/show/add-record"}
+          class={[
+            "aspect-square",
+            "border-2 border-dashed border-zinc-300 dark:border-zinc-600",
+            "rounded-lg flex items-center justify-center",
+            "hover:border-zinc-400 dark:hover:border-zinc-500",
+            "hover:bg-zinc-50 dark:hover:bg-zinc-800",
+            "transition-colors cursor-pointer"
+          ]}
+        >
+          <.icon
+            name="hero-plus"
+            class="h-8 w-8 text-zinc-400 dark:text-zinc-500"
+            aria-hidden="true"
+            data-slot="icon"
+          />
+        </.link>
       </div>
     </div>
   </div>

priv/gettext/default.pot

@@ -1686,7 +1686,6 @@ msgstr ""
 
 #: lib/music_library_web/live/record_set_live/index.ex
 #: lib/music_library_web/live/record_set_live/show.ex
-#: lib/music_library_web/live/record_set_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Add Record"
 msgstr ""
@@ -1802,11 +1801,6 @@ msgstr ""
 msgid "Updated"
 msgstr ""
 
-#: lib/music_library_web/live/record_set_live/show.html.heex
-#, elixir-autogen, elixir-format
-msgid "No records in this set yet"
-msgstr ""
-
 #: lib/music_library_web/components/record_form.ex
 #, elixir-autogen, elixir-format
 msgid "Create \"%{genre}\""

priv/gettext/en/LC_MESSAGES/default.po

@@ -1686,7 +1686,6 @@ msgstr ""
 
 #: lib/music_library_web/live/record_set_live/index.ex
 #: lib/music_library_web/live/record_set_live/show.ex
-#: lib/music_library_web/live/record_set_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Add Record"
 msgstr ""
@@ -1802,11 +1801,6 @@ msgstr ""
 msgid "Updated"
 msgstr ""
 
-#: lib/music_library_web/live/record_set_live/show.html.heex
-#, elixir-autogen, elixir-format, fuzzy
-msgid "No records in this set yet"
-msgstr ""
-
 #: lib/music_library_web/components/record_form.ex
 #, elixir-autogen, elixir-format
 msgid "Create \"%{genre}\""

test/music_library_web/live/record_set_live/show_test.exs

@@ -32,12 +32,12 @@ defmodule MusicLibraryWeb.RecordSetLive.ShowTest do
       |> assert_has("h2", text: escape(r2.title))
     end
 
-    test "shows empty state when set has no records", %{conn: conn} do
+    test "shows add record tile when set has no records", %{conn: conn} do
       set = record_set()
 
       conn
       |> visit(~p"/record-sets/#{set}")
-      |> assert_has("p", text: "No records in this set yet")
+      |> assert_has("a[href*='add-record']")
     end
 
     test "renders markdown description as HTML", %{conn: conn} do