Standardize and simplify online store templates list markup

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

@@ -1,87 +1,91 @@
-<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"}>
-      </.button>
+          <.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">
+  <ul
-      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+    role="list"
-        <ul
+    class="divide-y divide-gray-200 dark:divide-gray-800"
-          role="list"
+    phx-update="stream"
-          class="divide-y divide-gray-200 dark:divide-gray-800"
+    id="templates"
-          phx-update="stream"
+  >
-          id="templates"
+    <li
-        >
+      :for={{id, template} <- @streams.templates}
-          <li
+      id={id}
-            :for={{id, template} <- @streams.templates}
+      class="flex items-center justify-between py-5"
-            id={id}
+    >
-            class="flex items-center justify-between gap-x-6 py-5"
+      <div class="min-w-0">
-          >
+        <div class="flex items-start gap-x-3">
-            <div class="min-w-0">
+          <p class="text-sm font-semibold text-gray-900 dark:text-white">
-              <div class="flex items-start gap-x-3">
+            {template.name}
-                <p class="text-sm font-semibold text-gray-900 dark:text-white">
+          </p>
-                  {template.name}
+          <.badge :if={template.enabled} color="green">
-                </p>
+            {gettext("Enabled")}
-                <.badge :if={template.enabled} color="green">
+          </.badge>
-                  {gettext("Enabled")}
+          <.badge :if={!template.enabled} color="yellow">
-                </.badge>
+            {gettext("Disabled")}
-                <.badge :if={!template.enabled} color="yellow">
+          </.badge>
-                  {gettext("Disabled")}
+        </div>
-                </.badge>
+        <div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
-              </div>
+          <p class="truncate">{template.url_template}</p>
-              <div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
+        </div>
-                <p class="truncate">{template.url_template}</p>
+        <p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-              </div>
+          {template.description}
-              <p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+        </p>
-                {template.description}
-              </p>
-            </div>
-            <div class="flex flex-none items-center gap-x-4">
-              <.button
-                phx-click="toggle-enabled"
-                phx-value-id={template.id}
-                color={if template.enabled, do: "orange", else: "green"}
-                variant="ghost"
-                size="sm"
-              >
-                {if template.enabled, do: "Disable", else: "Enable"}
-              </.button>
-              <.button
-                as="link"
-                patch={~p"/online-store-templates/#{template}/edit"}
-                variant="ghost"
-                size="sm"
-              >
-                {gettext("Edit")}
-              </.button>
-              <.button
-                as="link"
-                phx-click={JS.push("delete", value: %{id: template.id})}
-                data-confirm="Are you sure?"
-                color="red"
-                variant="ghost"
-                size="sm"
-              >
-                {gettext("Delete")}
-              </.button>
-            </div>
-          </li>
-        </ul>
       </div>
-    </div>
+      <div class="flex items-center">
-  </div>
+        <.dropdown id={"actions-#{template.id}"} placement="bottom-end">
+          <:toggle>
+            <div>
+              <span class="sr-only">{gettext("Actions")}</span>
+              <.icon
+                name="hero-ellipsis-vertical"
+                class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+            </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"}
+          >
+            {gettext("Edit")}
+          </.dropdown_link>
+          <.separator />
+          <.dropdown_button
+            phx-click="delete"
+            phx-value-id={template.id}
+            data-confirm={gettext("Are you sure?")}
+            class={[
+              "text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
+            ]}
+          >
+            {gettext("Delete")}
+          </.dropdown_button>
+        </.dropdown>
+      </div>
+    </li>
+  </ul>
 </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 ""