Standardize and simplify online store templates list markup

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

@@ -1,23 +1,22 @@
-<div class="px-4 py-6 sm:px-6 lg:px-8">
+<header class="mb-6">
-  <div class="sm:flex sm:items-center">
+  <div class="flex items-center justify-between">
-    <div class="sm:flex-auto">
+    <div>
-      <h1 class="text-base font-semibold text-gray-900 dark:text-white">
+      <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
         {gettext("Online Store Templates")}
       </h1>
-      <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
-        {gettext("Manage templates for generating links to online record stores.")}
-      </p>
     </div>
-    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+    <div>
-      <.button as="link" patch={~p"/online-store-templates/new"}>
+      <nav class="isolate inline-flex rounded-md shadow-xs">
-        {gettext("Add Template")}
+        <.button variant="solid" as="link" size="sm" patch={~p"/online-store-templates/new"}>
+          <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
+          {gettext("New Template")}
         </.button>
+      </nav>
     </div>
   </div>
+</header>
 
-  <div class="mt-8 flow-root">
+<div class="mt-6 space-y-4">
-    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
   <ul
     role="list"
     class="divide-y divide-gray-200 dark:divide-gray-800"
@@ -27,7 +26,7 @@
     <li
       :for={{id, template} <- @streams.templates}
       id={id}
-            class="flex items-center justify-between gap-x-6 py-5"
+      class="flex items-center justify-between py-5"
     >
       <div class="min-w-0">
         <div class="flex items-start gap-x-3">
@@ -48,40 +47,45 @@
           {template.description}
         </p>
       </div>
-            <div class="flex flex-none items-center gap-x-4">
+      <div class="flex items-center">
-              <.button
+        <.dropdown id={"actions-#{template.id}"} placement="bottom-end">
-                phx-click="toggle-enabled"
+          <:toggle>
-                phx-value-id={template.id}
+            <div>
-                color={if template.enabled, do: "orange", else: "green"}
+              <span class="sr-only">{gettext("Actions")}</span>
-                variant="ghost"
+              <.icon
-                size="sm"
+                name="hero-ellipsis-vertical"
-              >
+                class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
-                {if template.enabled, do: "Disable", else: "Enable"}
+                aria-hidden="true"
-              </.button>
+                data-slot="icon"
-              <.button
+              />
-                as="link"
+            </div>
+          </:toggle>
+          <.dropdown_button phx-click="toggle-enabled" phx-value-id={template.id}>
+            {if template.enabled,
+              do: gettext("Disable template"),
+              else: gettext("Enable template")}
+          </.dropdown_button>
+          <.dropdown_link
+            id={"actions-#{template.id}-edit"}
             patch={~p"/online-store-templates/#{template}/edit"}
-                variant="ghost"
-                size="sm"
           >
             {gettext("Edit")}
-              </.button>
+          </.dropdown_link>
-              <.button
+          <.separator />
-                as="link"
+          <.dropdown_button
-                phx-click={JS.push("delete", value: %{id: template.id})}
+            phx-click="delete"
-                data-confirm="Are you sure?"
+            phx-value-id={template.id}
-                color="red"
+            data-confirm={gettext("Are you sure?")}
-                variant="ghost"
+            class={[
-                size="sm"
+              "text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
+            ]}
           >
             {gettext("Delete")}
-              </.button>
+          </.dropdown_button>
+        </.dropdown>
       </div>
     </li>
   </ul>
-      </div>
-    </div>
-  </div>
 </div>
 
 <.modal

priv/gettext/default.pot

@@ -13,6 +13,7 @@ msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
 #: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
 #: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #: lib/music_library_web/live/wishlist_live/show.html.heex
 #, elixir-autogen, elixir-format
@@ -921,6 +922,7 @@ msgstr ""
 #: lib/music_library_web/components/record_components.ex
 #: lib/music_library_web/live/artist_live/show.html.heex
 #: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
 #: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #: lib/music_library_web/live/wishlist_live/show.html.heex
 #, elixir-autogen, elixir-format
@@ -1256,16 +1258,6 @@ msgstr ""
 msgid "e.g. https://www.amazon.co.uk/s?k={artist}+{title}+vinyl"
 msgstr ""
 
-#: lib/music_library_web/live/online_store_template_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Add Template"
-msgstr ""
-
-#: lib/music_library_web/live/online_store_template_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Manage templates for generating links to online record stores."
-msgstr ""
-
 #: lib/music_library_web/live/online_store_template_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Record format"
@@ -1275,3 +1267,18 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Preview not available"
 msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Disable template"
+msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Enable template"
+msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "New Template"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -13,6 +13,7 @@ msgstr ""
 
 #: lib/music_library_web/components/record_components.ex
 #: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
 #: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #: lib/music_library_web/live/wishlist_live/show.html.heex
 #, elixir-autogen, elixir-format
@@ -921,6 +922,7 @@ msgstr ""
 #: lib/music_library_web/components/record_components.ex
 #: lib/music_library_web/live/artist_live/show.html.heex
 #: lib/music_library_web/live/collection_live/show.html.heex
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
 #: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #: lib/music_library_web/live/wishlist_live/show.html.heex
 #, elixir-autogen, elixir-format
@@ -1256,16 +1258,6 @@ msgstr ""
 msgid "e.g. https://www.amazon.co.uk/s?k={artist}+{title}+vinyl"
 msgstr ""
 
-#: lib/music_library_web/live/online_store_template_live/index.html.heex
-#, elixir-autogen, elixir-format, fuzzy
-msgid "Add Template"
-msgstr ""
-
-#: lib/music_library_web/live/online_store_template_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Manage templates for generating links to online record stores."
-msgstr ""
-
 #: lib/music_library_web/live/online_store_template_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Record format"
@@ -1275,3 +1267,18 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Preview not available"
 msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
+#, elixir-autogen, elixir-format
+msgid "Disable template"
+msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Enable template"
+msgstr ""
+
+#: lib/music_library_web/live/online_store_template_live/index.html.heex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "New Template"
+msgstr ""