From 050960845276a628e3684c3d5f2e1c79f02612e1 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Thu, 2 Oct 2025 17:28:42 +0300
Subject: [PATCH] Render external links with summary

---
 .../components/core_components.ex             | 53 +++++++++----------
 priv/gettext/default.pot                      |  2 +-
 priv/gettext/en/LC_MESSAGES/default.po        |  4 +-
 3 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index cb47548c..54ffcdbd 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -140,33 +140,32 @@ defmodule MusicLibraryWeb.CoreComponents do
 
   def external_links(assigns) do
     ~H"""
-    <dt
-      :if={@external_links != []}
-      class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
-    >
-      {gettext("External links")}
-    </dt>
-    <dd class="mt-4 space-y-2">
-      <Fluxon.Components.Button.button
-        :for={external_link <- @external_links}
-        href={external_link.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        variant="ghost"
-        size="sm"
-        class="ml-2 first:ml-0"
-      >
-        <img
-          class="mr-2"
-          src={favicon_url(external_link.url)}
-          alt={external_link.name}
-          loading="lazy"
-        />
-        <span class="text-sm font-medium text-zinc-900 dark:text-white">
-          {external_link.name}
-        </span>
-      </Fluxon.Components.Button.button>
-    </dd>
+    <details class="mt-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
+      <summary class="text-xs sm:text-sm font-medium cursor-pointer">
+        {gettext("External Links")}
+      </summary>
+      <div class="mt-4 space-y-2">
+        <Fluxon.Components.Button.button
+          :for={external_link <- @external_links}
+          href={external_link.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          variant="ghost"
+          size="sm"
+          class="ml-2 first:ml-0"
+        >
+          <img
+            class="mr-2"
+            src={favicon_url(external_link.url)}
+            alt={external_link.name}
+            loading="lazy"
+          />
+          <span class="text-sm font-medium text-zinc-900 dark:text-white">
+            {external_link.name}
+          </span>
+        </Fluxon.Components.Button.button>
+      </div>
+    </details>
     """
   end
 
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index fdee2503..897373eb 100644
--- a/priv/gettext/default.pot
+++ b/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 ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index d4941238..03abcecb 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/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
-msgid "External links"
+#, elixir-autogen, elixir-format, fuzzy
+msgid "External Links"
 msgstr ""