Use responsive list for scrobble rules list

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

@@ -32,29 +32,35 @@
 </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>
-      <:col></:col>
-    </.table_head>
-    <.table_body phx-update="stream" id="scrobble-rules">
-      <.table_row :for={{dom_id, scrobble_rule} <- @streams.scrobble_rules} id={dom_id}>
-        <:cell>
         <.type_badge type={scrobble_rule.type} />
-        </:cell>
+      </div>
-        <:cell>{scrobble_rule.match_value}</:cell>
+      <div class="grow p-2">
-        <:cell class="whitespace-nowrap font-mono">{scrobble_rule.target_musicbrainz_id}</:cell>
+        <p class="text-sm text-zinc-900 dark:text-zinc-100">
-        <:cell>
+          {scrobble_rule.match_value}
+        </p>
+        <p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2">
+          {scrobble_rule.target_musicbrainz_id}
+        </p>
+        <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
+          {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>
+      </div>
+      <div class="flex items-center">
         <.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
           <:toggle>
             <div>
@@ -91,10 +97,9 @@
             {gettext("Delete")}
           </.dropdown_button>
         </.dropdown>
-        </:cell>
+      </div>
-      </.table_row>
+    </li>
-    </.table_body>
+  </ul>
-  </.table>
 </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 ""