From 36707f40e3e3baa57c53ccaa627a3246829a8ed0 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 5 Mar 2025 17:22:38 +0000
Subject: [PATCH] Improve action buttons in wishlist/collection views

- Consistently use links
- Add icons
---
 .../live/collection_live/index.html.heex      | 133 +++++++++++++++++-
 .../live/wishlist_live/index.html.heex        |  15 +-
 priv/gettext/default.pot                      |  14 +-
 3 files changed, 151 insertions(+), 11 deletions(-)

diff --git a/lib/music_library_web/live/collection_live/index.html.heex b/lib/music_library_web/live/collection_live/index.html.heex
index e5b85729..b179e635 100644
--- a/lib/music_library_web/live/collection_live/index.html.heex
+++ b/lib/music_library_web/live/collection_live/index.html.heex
@@ -10,10 +10,11 @@
             "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
             "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
             "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
-            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+            "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           ]}
           patch={~p"/collection/import"}
         >
+          <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
           {gettext("Import")}
         </.link>
         <.link
@@ -23,10 +24,138 @@
             "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
             "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
             "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
-            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+            "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           ]}
           patch={~p"/collection/scan"}
         >
+          <svg
+            class="mr-2 fill-current"
+            aria-hidden="true"
+            data-slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            version="1.1"
+            width="18"
+            height="18"
+            viewBox="0 0 256 256"
+            xml:space="preserve"
+          >
+            <g
+              style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+              transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
+            >
+              <polygon
+                points="90,79.14 56.12,79.14 56.12,73.14 84,73.14 84,54.67 90,54.67 "
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform="  matrix(1 0 0 1 0 0) "
+              />
+              <polygon
+                points="33.88,79.14 0,79.14 0,54.67 6,54.67 6,73.14 33.88,73.14 "
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform="  matrix(1 0 0 1 0 0) "
+              />
+              <polygon
+                points="6,35.33 0,35.33 0,10.86 33.88,10.86 33.88,16.86 6,16.86 "
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform="  matrix(1 0 0 1 0 0) "
+              />
+              <polygon
+                points="90,35.33 84,35.33 84,16.86 56.12,16.86 56.12,10.86 90,10.86 "
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform="  matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="36.27"
+                y="26.31"
+                rx="0"
+                ry="0"
+                width="6"
+                height="37.39"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="13.36"
+                y="26.31"
+                rx="0"
+                ry="0"
+                width="6"
+                height="37.39"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="59.18"
+                y="26.31"
+                rx="0"
+                ry="0"
+                width="6"
+                height="24.02"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="59.18"
+                y="56.85"
+                rx="0"
+                ry="0"
+                width="6"
+                height="6.84"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="24.82"
+                y="26.31"
+                rx="0"
+                ry="0"
+                width="6"
+                height="24.02"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="24.82"
+                y="56.85"
+                rx="0"
+                ry="0"
+                width="6"
+                height="6.84"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="70.64"
+                y="26.31"
+                rx="0"
+                ry="0"
+                width="6"
+                height="24.02"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="70.64"
+                y="56.85"
+                rx="0"
+                ry="0"
+                width="6"
+                height="6.84"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+              <rect
+                x="47.73"
+                y="26.31"
+                rx="0"
+                ry="0"
+                width="6"
+                height="37.39"
+                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+                transform=" matrix(1 0 0 1 0 0) "
+              />
+            </g>
+          </svg>
           {gettext("Scan")}
         </.link>
       </nav>
diff --git a/lib/music_library_web/live/wishlist_live/index.html.heex b/lib/music_library_web/live/wishlist_live/index.html.heex
index 73436ffe..9b4a21bd 100644
--- a/lib/music_library_web/live/wishlist_live/index.html.heex
+++ b/lib/music_library_web/live/wishlist_live/index.html.heex
@@ -2,8 +2,19 @@
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
       <.search_form query={@record_list_params.query} />
-      <.link patch={~p"/wishlist/import"}>
-        <.button>{gettext("Import")}</.button>
+      <.link
+        class={[
+          "relative inline-flex items-center rounded-md",
+          "px-3 py-2 text-xs sm:text-sm font-semibold",
+          "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
+          "disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
+          "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
+          "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+        ]}
+        patch={~p"/wishlist/import"}
+      >
+        <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
+        {gettext("Import")}
       </.link>
     </div>
   </header>
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 31f79ba1..8958a129 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -95,8 +95,8 @@ msgstr ""
 msgid "Hang in there while we get back on track"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:17
-#: lib/music_library_web/live/wishlist_live/index.html.heex:6
+#: lib/music_library_web/live/collection_live/index.html.heex:18
+#: lib/music_library_web/live/wishlist_live/index.html.heex:17
 #, elixir-autogen, elixir-format
 msgid "Import"
 msgstr ""
@@ -164,7 +164,7 @@ msgstr ""
 msgid "Previous"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:67
+#: lib/music_library_web/live/collection_live/index.html.heex:196
 #, elixir-autogen, elixir-format
 msgid "Purchase"
 msgstr ""
@@ -230,8 +230,8 @@ msgstr ""
 msgid "Show"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:72
-#: lib/music_library_web/live/wishlist_live/index.html.heex:12
+#: lib/music_library_web/live/collection_live/index.html.heex:201
+#: lib/music_library_web/live/wishlist_live/index.html.heex:23
 #, elixir-autogen, elixir-format
 msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
 msgstr ""
@@ -485,7 +485,7 @@ msgstr ""
 msgid "Error loading play count"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:49
+#: lib/music_library_web/live/collection_live/index.html.heex:178
 #, elixir-autogen, elixir-format
 msgid "A->Z"
 msgstr ""
@@ -611,7 +611,7 @@ msgstr ""
 msgid "Published releases"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:30
+#: lib/music_library_web/live/collection_live/index.html.heex:159
 #, elixir-autogen, elixir-format
 msgid "Scan"
 msgstr ""