Use responsive list for scrobble rules list

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

@@ -32,69 +32,74 @@
 </header>
 
 <div class="mt-6 space-y-4">
-  <.table>
+  <ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
-    <.table_head>
+    <li
-      <:col>{gettext("Type")}</:col>
+      :for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
-      <:col>{gettext("Match Value")}</:col>
+      id={dom_id}
-      <:col>{gettext("Target MusicBrainz ID")}</:col>
+      class="flex justify-between"
-      <:col>{gettext("Status")}</:col>
+    >
-      <:col>{gettext("Description")}</:col>
+      <div class="flex items-center">
-      <:col>{gettext("Created")}</:col>
+        <.type_badge type={scrobble_rule.type} />
-      <:col></:col>
+      </div>
-    </.table_head>
+      <div class="grow p-2">
-    <.table_body phx-update="stream" id="scrobble-rules">
+        <p class="text-sm text-zinc-900 dark:text-zinc-100">
-      <.table_row :for={{dom_id, scrobble_rule} <- @streams.scrobble_rules} id={dom_id}>
+          {scrobble_rule.match_value}
-        <:cell>
+        </p>
-          <.type_badge type={scrobble_rule.type} />
+        <p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2">
-        </:cell>
+          {scrobble_rule.target_musicbrainz_id}
-        <:cell>{scrobble_rule.match_value}</:cell>
+        </p>
-        <:cell class="whitespace-nowrap font-mono">{scrobble_rule.target_musicbrainz_id}</:cell>
+        <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
-        <:cell>
+          {scrobble_rule.description}
+        </p>
+      </div>
+      <div class="flex flex-col justify-center text-right">
+        <span>
           <.status_badge enabled={scrobble_rule.enabled} />
-        </:cell>
+        </span>
-        <:cell>{scrobble_rule.description}</:cell>
+        <span class="text-xs text-zinc-500 dark:text-zinc-400 text-nowrap mt-2">
-        <:cell>{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}</:cell>
+          {Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
-        <:cell>
+        </span>
-          <.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
+      </div>
-            <:toggle>
+      <div class="flex items-center">
-              <div>
+        <.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
-                <span class="sr-only">{gettext("Actions")}</span>
+          <:toggle>
-                <.icon
+            <div>
-                  name="hero-ellipsis-vertical"
+              <span class="sr-only">{gettext("Actions")}</span>
-                  class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
+              <.icon
-                  aria-hidden="true"
+                name="hero-ellipsis-vertical"
-                  data-slot="icon"
+                class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
-                />
+                aria-hidden="true"
-              </div>
+                data-slot="icon"
-            </:toggle>
+              />
-            <.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
+            </div>
-              {gettext("Apply rule")}
+          </:toggle>
-            </.dropdown_button>
+          <.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
-            <.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
+            {gettext("Apply rule")}
-              {if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
+          </.dropdown_button>
-            </.dropdown_button>
+          <.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
-            <.dropdown_link
+            {if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
-              id={"actions-#{scrobble_rule.id}-edit"}
+          </.dropdown_button>
-              patch={~p"/scrobble-rules/#{scrobble_rule}/edit"}
+          <.dropdown_link
-            >
+            id={"actions-#{scrobble_rule.id}-edit"}
-              {gettext("Edit")}
+            patch={~p"/scrobble-rules/#{scrobble_rule}/edit"}
-            </.dropdown_link>
+          >
-            <.separator />
+            {gettext("Edit")}
-            <.dropdown_button
+          </.dropdown_link>
-              phx-click="delete"
+          <.separator />
-              phx-value-id={scrobble_rule.id}
+          <.dropdown_button
-              data-confirm={gettext("Are you sure?")}
+            phx-click="delete"
-              class={[
+            phx-value-id={scrobble_rule.id}
-                "text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
+            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>
+            {gettext("Delete")}
-        </:cell>
+          </.dropdown_button>
-      </.table_row>
+        </.dropdown>
-    </.table_body>
+      </div>
-  </.table>
+    </li>
+  </ul>
 </div>
 
 <.modal

priv/gettext/default.pot

@@ -201,7 +201,6 @@ msgid "Total wishlist"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr ""
@@ -991,16 +990,6 @@ msgstr ""
 msgid "Artist Name"
 msgstr ""
 
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Created"
-msgstr ""
-
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Description"
-msgstr ""
-
 #: lib/music_library_web/live/scrobble_rules_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Description (optional)"
@@ -1027,7 +1016,6 @@ msgid "Error applying rule: %{reason}"
 msgstr ""
 
 #: lib/music_library_web/live/scrobble_rules_live/form_component.ex
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Match Value"
 msgstr ""
@@ -1079,13 +1067,7 @@ msgstr ""
 msgid "Select a rule type"
 msgstr ""
 
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Status"
-msgstr ""
-
 #: lib/music_library_web/live/scrobble_rules_live/form_component.ex
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Target MusicBrainz ID"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -201,7 +201,6 @@ msgid "Total wishlist"
 msgstr ""
 
 #: lib/music_library_web/components/form_component.ex
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr ""
@@ -991,16 +990,6 @@ msgstr ""
 msgid "Artist Name"
 msgstr ""
 
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Created"
-msgstr ""
-
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Description"
-msgstr ""
-
 #: lib/music_library_web/live/scrobble_rules_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Description (optional)"
@@ -1027,7 +1016,6 @@ msgid "Error applying rule: %{reason}"
 msgstr ""
 
 #: lib/music_library_web/live/scrobble_rules_live/form_component.ex
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Match Value"
 msgstr ""
@@ -1079,13 +1067,7 @@ msgstr ""
 msgid "Select a rule type"
 msgstr ""
 
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
-#, elixir-autogen, elixir-format, fuzzy
-msgid "Status"
-msgstr ""
-
 #: lib/music_library_web/live/scrobble_rules_live/form_component.ex
-#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Target MusicBrainz ID"
 msgstr ""