Render external links with summary

lib/music_library_web/components/core_components.ex

@@ -140,33 +140,32 @@ defmodule MusicLibraryWeb.CoreComponents do
 
   def external_links(assigns) do
     ~H"""
-    <dt
+    <details class="mt-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
-      :if={@external_links != []}
+      <summary class="text-xs sm:text-sm font-medium cursor-pointer">
-      class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
+        {gettext("External Links")}
-    >
+      </summary>
-      {gettext("External links")}
+      <div class="mt-4 space-y-2">
-    </dt>
+        <Fluxon.Components.Button.button
-    <dd class="mt-4 space-y-2">
+          :for={external_link <- @external_links}
-      <Fluxon.Components.Button.button
+          href={external_link.url}
-        :for={external_link <- @external_links}
+          target="_blank"
-        href={external_link.url}
+          rel="noopener noreferrer"
-        target="_blank"
+          variant="ghost"
-        rel="noopener noreferrer"
+          size="sm"
-        variant="ghost"
+          class="ml-2 first:ml-0"
-        size="sm"
+        >
-        class="ml-2 first:ml-0"
+          <img
-      >
+            class="mr-2"
-        <img
+            src={favicon_url(external_link.url)}
-          class="mr-2"
+            alt={external_link.name}
-          src={favicon_url(external_link.url)}
+            loading="lazy"
-          alt={external_link.name}
+          />
-          loading="lazy"
+          <span class="text-sm font-medium text-zinc-900 dark:text-white">
-        />
+            {external_link.name}
-        <span class="text-sm font-medium text-zinc-900 dark:text-white">
+          </span>
-          {external_link.name}
+        </Fluxon.Components.Button.button>
-        </span>
+      </div>
-      </Fluxon.Components.Button.button>
+    </details>
-    </dd>
     """
   end
 

priv/gettext/default.pot

@@ -1471,5 +1471,5 @@ msgstr ""
 
 #: lib/music_library_web/components/core_components.ex
 #, elixir-autogen, elixir-format
-msgid "External links"
+msgid "External Links"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -1470,6 +1470,6 @@ msgid "You need to connect your Last.fm account to scrobble. Please set up your
 msgstr ""
 
 #: lib/music_library_web/components/core_components.ex
-#, elixir-autogen, elixir-format
+#, elixir-autogen, elixir-format, fuzzy
-msgid "External links"
+msgid "External Links"
 msgstr ""