Render debug information in side sheet with highlighting

lib/music_library_web/components/core_components.ex

@@ -20,6 +20,8 @@ defmodule MusicLibraryWeb.CoreComponents do
   alias Phoenix.LiveView.JS
 
   import Fluxon.Components.Input
+  import Fluxon.Components.Sheet
+  import Fluxon.Components.Tabs
 
   @doc """
   Renders a simple form.
@@ -104,30 +106,47 @@ defmodule MusicLibraryWeb.CoreComponents do
     """
   end
 
-  attr :title, :string, required: true
-  attr :data, :map, required: true
+  attr :id, :string, required: true
+  attr :items, :list, required: true
 
-  def json_viewer(assigns) do
+  def debug_data_sheet(assigns) do
     ~H"""
-    <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">{@title}</summary>
-      <pre><code class="text-xs sm:text-sm">{Jason.encode!(@data, pretty: true)}</code></pre>
-    </details>
+    <.sheet :if={@items != []} id={@id} placement="right" class="w-md sm:min-w-lg lg:min-w-2xl">
+      <h2 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
+        {gettext("Debug data")}
+      </h2>
+      <.tabs id={"#{@id}-tabs"}>
+        <.tabs_list active_tab={hd(@items).name} variant="segmented" size="xs">
+          <:tab :for={item <- @items} name={item.name}>{item.title}</:tab>
+        </.tabs_list>
+        <.tabs_panel :for={item <- @items} name={item.name} active={item == hd(@items)}>
+          <%= if item.type == :json do %>
+            <div class="mt-4 overflow-auto text-xs rounded-lg [&_pre]:p-4 [&_pre]:rounded-lg">
+              {format_debug_data(item)}
+            </div>
+          <% else %>
+            <pre class="mt-4 overflow-auto text-xs font-mono text-zinc-700 dark:text-zinc-300 bg-zinc-50 dark:bg-zinc-800 rounded-lg p-4"><code>{format_debug_data(item)}</code></pre>
+          <% end %>
+        </.tabs_panel>
+      </.tabs>
+    </.sheet>
     """
   end
 
-  attr :title, :string, required: true
-  attr :data, :string, required: true
-
-  def text_viewer(assigns) do
-    ~H"""
-    <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">{@title}</summary>
-      <code class="whitespace-pre-wrap text-xs sm:text-sm">{@data}</code>
-    </details>
-    """
+  defp format_debug_data(%{type: :json, data: data}) do
+    data
+    |> Jason.encode!(pretty: true)
+    |> Lumis.highlight!(
+      language: "json",
+      formatter:
+        {:html_multi_themes,
+         themes: [light: "github_light", dark: "github_dark"], default_theme: "light-dark()"}
+    )
+    |> Phoenix.HTML.raw()
   end
 
+  defp format_debug_data(%{type: :text, data: data}), do: data
+
   attr :id, :string, required: true
   attr :on_close, :any, required: false, default: nil
   attr :open, :boolean, required: false, default: true

lib/music_library_web/live/artist_live/show.ex

@@ -120,6 +120,18 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
                     data-slot="icon"
                   />
                 </.button>
+                <.button
+                  variant="soft"
+                  phx-click={Fluxon.open_dialog("debug-data")}
+                >
+                  <span class="sr-only">{gettext("Debug data")}</span>
+                  <.icon
+                    name="hero-code-bracket"
+                    class="h-5 w-5"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                </.button>
                 <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
                   <:toggle>
                     <.button variant="soft">
@@ -404,22 +416,39 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
           </div>
         </div>
 
-        <.json_viewer
-          :if={@artist_info.musicbrainz_data}
-          title={gettext("MusicBrainz data")}
-          data={@artist_info.musicbrainz_data}
-        />
-
-        <.json_viewer
-          :if={@artist_info.discogs_data}
-          title={gettext("Discogs data")}
-          data={@artist_info.discogs_data}
-        />
-
-        <.json_viewer
-          :if={@artist_info.wikipedia_data != %{}}
-          title={gettext("Wikipedia data")}
-          data={@artist_info.wikipedia_data}
+        <.debug_data_sheet
+          id="debug-data"
+          items={
+            Enum.filter(
+              [
+                if(@artist_info.musicbrainz_data,
+                  do: %{
+                    name: "musicbrainz",
+                    title: gettext("MusicBrainz"),
+                    data: @artist_info.musicbrainz_data,
+                    type: :json
+                  }
+                ),
+                if(@artist_info.discogs_data,
+                  do: %{
+                    name: "discogs",
+                    title: gettext("Discogs"),
+                    data: @artist_info.discogs_data,
+                    type: :json
+                  }
+                ),
+                if(@artist_info.wikipedia_data != %{},
+                  do: %{
+                    name: "wikipedia",
+                    title: gettext("Wikipedia"),
+                    data: @artist_info.wikipedia_data,
+                    type: :json
+                  }
+                )
+              ],
+              & &1
+            )
+          }
         />
       </div>
 

lib/music_library_web/live/collection_live/show.ex

@@ -76,6 +76,18 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
                     data-slot="icon"
                   />
                 </.button>
+                <.button
+                  variant="soft"
+                  phx-click={Fluxon.open_dialog("debug-data")}
+                >
+                  <span class="sr-only">{gettext("Debug data")}</span>
+                  <.icon
+                    name="hero-code-bracket"
+                    class="h-5 w-5"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                </.button>
                 <.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
                   <:toggle>
                     <.button variant="soft">
@@ -371,8 +383,18 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
         section={:collection}
       />
 
-      <.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
-      <.text_viewer title={gettext("Record Embedding")} data={@embedding_text} />
+      <.debug_data_sheet
+        id="debug-data"
+        items={[
+          %{
+            name: "musicbrainz",
+            title: gettext("MusicBrainz"),
+            data: @record.musicbrainz_data,
+            type: :json
+          },
+          %{name: "embedding", title: gettext("Embedding"), data: @embedding_text, type: :text}
+        ]}
+      />
 
       <.live_component
         id="release-with-tracks"

lib/music_library_web/live/wishlist_live/show.ex

@@ -48,6 +48,18 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
                     data-slot="icon"
                   />
                 </.button>
+                <.button
+                  variant="soft"
+                  phx-click={Fluxon.open_dialog("debug-data")}
+                >
+                  <span class="sr-only">{gettext("Debug data")}</span>
+                  <.icon
+                    name="hero-code-bracket"
+                    class="h-5 w-5"
+                    aria-hidden="true"
+                    data-slot="icon"
+                  />
+                </.button>
                 <.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
                   <:toggle>
                     <.button variant="soft">
@@ -347,8 +359,18 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
         </details>
       </div>
 
-      <.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
-      <.text_viewer title={gettext("Record Embedding")} data={@embedding_text} />
+      <.debug_data_sheet
+        id="debug-data"
+        items={[
+          %{
+            name: "musicbrainz",
+            title: gettext("MusicBrainz"),
+            data: @record.musicbrainz_data,
+            type: :json
+          },
+          %{name: "embedding", title: gettext("Embedding"), data: @embedding_text, type: :text}
+        ]}
+      />
 
       <.live_component
         id="record-chat"