Render external links with summary

lib/music_library_web/components/core_components.ex

@@ -140,13 +140,11 @@ 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>
-    <dd class="mt-4 space-y-2">
         <Fluxon.Components.Button.button
           :for={external_link <- @external_links}
           href={external_link.url}
@@ -166,7 +164,8 @@ defmodule MusicLibraryWeb.CoreComponents do
             {external_link.name}
           </span>
         </Fluxon.Components.Button.button>
-    </dd>
+      </div>
+    </details>
     """
   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 ""