From 0b396f3223db6476e78759cd2a30cc29d288e5b0 Mon Sep 17 00:00:00 2001
From: mignot <garcia.andreas.1991@gmail.com>
Date: Fri, 11 Sep 2026 00:36:22 +0200
Subject: [PATCH 1/2] fix(genre-tree): always render the Summary field in the
 info panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Summary field was hidden entirely when a genre had no summary set,
inconsistent with the other core fields (song count, side) which
always render. Show it as a labeled field with a "—" placeholder when
there is no value, and only conditionally render the essential tracks
and archived count sections below it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md                                           | 3 ++-
 packages/app-kit/src/genre-tree/GenreTreeView.test.tsx | 6 ++++--
 packages/app-kit/src/genre-tree/GenreTreeView.tsx      | 8 ++++----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8e36eb..b9c22f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,8 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
   removed along with its export from `@behindthemusictree/app-kit`.
 - **genre-tree**: `CriteriaDetailed` now includes `summary` (nullable string), matching the
   backend's detail genre response, and `GenreTreeView`'s `renderExtraDetails` now displays it
-  above the essential tracks list when present.
+  as a labeled "Summary" field above the essential tracks list, showing "—" when there is no
+  value, consistent with the always-visible core fields.
 
 ### Fixed
 
diff --git a/packages/app-kit/src/genre-tree/GenreTreeView.test.tsx b/packages/app-kit/src/genre-tree/GenreTreeView.test.tsx
index 86bce48..47502d5 100644
--- a/packages/app-kit/src/genre-tree/GenreTreeView.test.tsx
+++ b/packages/app-kit/src/genre-tree/GenreTreeView.test.tsx
@@ -839,7 +839,7 @@ describe("GenreTreeView", () => {
       expect(output).toBeNull();
     });
 
-    it("returns null when there is no summary, no essential tracks, and nothing archived", () => {
+    it("renders a blank summary placeholder when there is no summary, no essential tracks, and nothing archived", () => {
       useListFullGenrePlaylistsMock.mockReturnValue({
         data: { results: [makePlaylist({ uuid: "gp1", criteria: { uuid: "c1", name: "Jazz" } })] },
         isPending: false,
@@ -867,8 +867,10 @@ describe("GenreTreeView", () => {
       const output = treeWheelPropsMock.mock.calls.at(-1)?.[0].renderExtraDetails({
         id: "gp1",
       });
+      render(<>{output}</>);
 
-      expect(output).toBeNull();
+      expect(screen.getByText("Summary")).toBeInTheDocument();
+      expect(screen.getByText("—")).toBeInTheDocument();
     });
   });
 });
diff --git a/packages/app-kit/src/genre-tree/GenreTreeView.tsx b/packages/app-kit/src/genre-tree/GenreTreeView.tsx
index 2017aaf..046857e 100644
--- a/packages/app-kit/src/genre-tree/GenreTreeView.tsx
+++ b/packages/app-kit/src/genre-tree/GenreTreeView.tsx
@@ -108,13 +108,13 @@ export function GenreTreeView<T extends TrackBase>({
       }
 
       const { summary, essentialTracks, tracksArchivedCount } = selectedGenreDetail;
-      if (!summary && essentialTracks.length === 0 && tracksArchivedCount === 0) {
-        return null;
-      }
 
       return (
         <div className="flex flex-col gap-3 text-sm text-gray-700">
-          {summary && <p>{summary}</p>}
+          <div>
+            <div className="font-semibold mb-1">Summary</div>
+            <p>{summary ?? "—"}</p>
+          </div>
           {tracksArchivedCount > 0 && (
             <div>
               <span className="font-semibold">Archived tracks: </span>

From 5a31020e4b0fd1fde76630cdbd0abb38a2031853 Mon Sep 17 00:00:00 2001
From: mignot <garcia.andreas.1991@gmail.com>
Date: Fri, 11 Sep 2026 00:54:59 +0200
Subject: [PATCH 2/2] fix: match extra-details field style to base info-panel
 fields

Reuse gtv-info-panel-children / gtv-info-panel-children-title classes
from @behindthemusictree/genre-tree-view so Summary, Archived tracks,
and Essential tracks look consistent with Song count, Side, Children,
etc. instead of using ad-hoc Tailwind classes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../app-kit/src/genre-tree/GenreTreeView.tsx  | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/app-kit/src/genre-tree/GenreTreeView.tsx b/packages/app-kit/src/genre-tree/GenreTreeView.tsx
index 046857e..a029921 100644
--- a/packages/app-kit/src/genre-tree/GenreTreeView.tsx
+++ b/packages/app-kit/src/genre-tree/GenreTreeView.tsx
@@ -110,20 +110,24 @@ export function GenreTreeView<T extends TrackBase>({
       const { summary, essentialTracks, tracksArchivedCount } = selectedGenreDetail;
 
       return (
-        <div className="flex flex-col gap-3 text-sm text-gray-700">
-          <div>
-            <div className="font-semibold mb-1">Summary</div>
+        <>
+          <div className="gtv-info-panel-children">
+            <span className="gtv-info-panel-children-title">Summary</span>
             <p>{summary ?? "—"}</p>
           </div>
           {tracksArchivedCount > 0 && (
-            <div>
-              <span className="font-semibold">Archived tracks: </span>
-              {tracksArchivedCount}
+            <div className="gtv-info-panel-children">
+              <span className="gtv-info-panel-children-title">
+                Archived tracks
+              </span>
+              <p>{tracksArchivedCount}</p>
             </div>
           )}
           {essentialTracks.length > 0 && (
-            <div>
-              <div className="font-semibold mb-1">Essential tracks</div>
+            <div className="gtv-info-panel-children">
+              <span className="gtv-info-panel-children-title">
+                Essential tracks
+              </span>
               <ul className="list-disc pl-5">
                 {essentialTracks.map((track) => (
                   <li key={track.uuid}>{track.title}</li>
@@ -131,7 +135,7 @@ export function GenreTreeView<T extends TrackBase>({
               </ul>
             </div>
           )}
-        </div>
+        </>
       );
     },
     [