@behindthemusictree/app-kit-ui 37.0.0 → 37.1.0

package/dist/genre-tree/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/genre-tree/index.ts
 var genre_tree_exports = {};
 __export(genre_tree_exports, {
+  EntityDetailPanel: () => EntityDetailPanel,
   GenreDetailPanel: () => GenreDetailPanel,
   GenreInfoPanelBody: () => GenreInfoPanelBody,
   GenreNodeActionBand: () => GenreNodeActionBand,
@@ -39,6 +40,7 @@ __export(genre_tree_exports, {
   TrackPositionPlayPause: () => TrackPositionPlayPause,
   searchStatus: () => searchStatus,
   useArtistSearchGroup: () => useArtistSearchGroup,
+  useEntityPanel: () => useEntityPanel,
   useGenrePlaylistPlayback: () => useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup: () => useGenreRemoteSearchGroup,
   useSongSearchGroup: () => useSongSearchGroup
@@ -2410,15 +2412,8 @@ function SongHistory({ uuid, getBackendBaseUrl }) {
     }
   );
 }
-function SongPanelContent({
-  song,
-  scope,
-  getBackendBaseUrl,
-  shareUrl,
-  renderArtistLink,
-  genrePath,
-  onSelectGenre
-}) {
+function SongPanelContent(props) {
+  const { song, scope, getBackendBaseUrl, shareUrl, renderArtistLink } = props;
   const { playNewTrackListFromTrackUuid } = (0, import_genre_tree26.useTrackList)();
   const { playerTrackObject, playState, handlePlayPauseAction } = (0, import_player11.usePlayer)();
   const unplayableReason = (0, import_genre_tree26.songUnplayableReason)(song);
@@ -2428,12 +2423,14 @@ function SongPanelContent({
   const musicBrainzUrl = (0, import_genre_tree26.musicBrainzRecordingUrl)(song);
   const fields = [];
   if (song.genre) {
-    const path = genrePath.length > 0 ? genrePath : null;
+    const path = props.genrePath && props.genrePath.length > 0 ? props.genrePath : null;
+    const { onSelectGenre } = props;
+    const genre = song.genre;
     fields.push({
       label: "Genre",
-      value: path ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
+      value: onSelectGenre ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", onClick: () => onSelectGenre(genre), className: "hover:underline", children: genre.name }) : path ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex flex-wrap items-center gap-x-1", children: path.map((genrePlaylist, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
         index > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": "true", children: "\u203A " }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", onClick: () => onSelectGenre(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", onClick: () => props.onSelectGenrePlaylist?.(genrePlaylist), className: "hover:underline", children: genrePlaylist.name })
       ] }, genrePlaylist.uuid)) }) : song.genre.name
     });
   } else {
@@ -2499,11 +2496,10 @@ function useSongPanel({
   getBackendBaseUrl,
   getShareUrl,
   renderArtistLink,
-  getGenrePath,
-  onSelectGenre,
   expanded,
   onExpandedChange,
-  onClose
+  onClose,
+  ...navigation
 }) {
   const result = (0, import_genre_tree27.useSong)(uuid, getBackendBaseUrl);
   const panel = { expanded, onExpandedChange, onClose };
@@ -2547,8 +2543,10 @@ function useSongPanel({
             getBackendBaseUrl,
             shareUrl: shareUrl ?? void 0,
             renderArtistLink,
-            genrePath: song.genre ? getGenrePath(song.genre) : [],
-            onSelectGenre
+            ...navigation.getGenrePath ? {
+              genrePath: song.genre ? navigation.getGenrePath(song.genre) : [],
+              onSelectGenrePlaylist: navigation.onSelectGenrePlaylist
+            } : { onSelectGenre: navigation.onSelectGenre }
           }
         )
       };
@@ -2556,6 +2554,37 @@ function useSongPanel({
   }
 }
 
+// src/genre-tree/useEntityPanel.tsx
+function useEntityPanel({
+  scope,
+  getBackendBaseUrl,
+  getArtistBackendBaseUrl,
+  getShareUrl,
+  renderArtistLink,
+  renderSongLink,
+  song,
+  artist,
+  ...navigation
+}) {
+  const songPanel = useSongPanel({
+    ...song,
+    scope,
+    getBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink,
+    ...navigation
+  });
+  const artistPanel = useArtistPanel({
+    ...artist,
+    scope,
+    getBackendBaseUrl: getArtistBackendBaseUrl ?? getBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink,
+    renderSongLink
+  });
+  return songPanel ?? artistPanel;
+}
+
 // src/genre-tree/SizeMetricToggle.tsx
 var import_md = require("react-icons/md");
 var import_ui16 = require("@behindthemusictree/ui");
@@ -2738,20 +2767,6 @@ function GenreTreeView({
   const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react18.useState)(null);
   const artistBaseUrl = artistSearchBaseUrl ?? getBackendBaseUrl;
   const songBaseUrl = getBackendBaseUrl;
-  const artistPanel = useArtistPanel({
-    uuid: artistUuid,
-    scope,
-    getBackendBaseUrl: artistBaseUrl,
-    getShareUrl: getShareUrlRef.current,
-    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name })),
-    expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
-    onExpandedChange: (on) => {
-      if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
-      onArtistExpandedChange?.(on);
-    },
-    renderSongLink: resolvedRenderSongLink,
-    onClose: () => changeArtist(null)
-  });
   const resolvedRenderArtistLink = renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", onClick: () => openArtist(artist.uuid), className: "hover:underline", children: artist.name }));
   const getGenrePath = (genre) => {
     const path = [];
@@ -2763,27 +2778,38 @@ function GenreTreeView({
     }
     return path;
   };
-  const songPanel = useSongPanel({
-    uuid: songUuid,
+  const entityPanel = useEntityPanel({
     scope,
     getBackendBaseUrl: songBaseUrl,
+    getArtistBackendBaseUrl: artistBaseUrl,
     getShareUrl: getShareUrlRef.current,
     renderArtistLink: resolvedRenderArtistLink,
+    renderSongLink: resolvedRenderSongLink,
+    song: {
+      uuid: songUuid,
+      expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
+      onExpandedChange: (on) => {
+        if (controlledSongExpanded === void 0) setExpandedSongUuid(on ? songUuid : null);
+        onSongExpandedChange?.(on);
+      },
+      onClose: () => changeSong(null)
+    },
+    artist: {
+      uuid: artistUuid,
+      expanded: controlledArtistExpanded ?? (artistUuid !== null && expandedArtistUuid === artistUuid),
+      onExpandedChange: (on) => {
+        if (controlledArtistExpanded === void 0) setExpandedArtistUuid(on ? artistUuid : null);
+        onArtistExpandedChange?.(on);
+      },
+      onClose: () => changeArtist(null)
+    },
     getGenrePath,
-    onSelectGenre: (genrePlaylist2) => {
+    onSelectGenrePlaylist: (genrePlaylist2) => {
       changeSong(null);
       selectGenrePlaylist(genrePlaylist2);
-    },
-    expanded: controlledSongExpanded ?? (songUuid !== null && expandedSongUuid === songUuid),
-    onExpandedChange: (on) => {
-      if (controlledSongExpanded === void 0) setExpandedSongUuid(on ? songUuid : null);
-      onSongExpandedChange?.(on);
-    },
-    onClose: () => changeSong(null)
+    }
   });
-  const builtInSongPanel = overlayPanel || selectedGenreUuid !== null ? void 0 : songPanel;
-  const builtInArtistPanel = overlayPanel || selectedGenreUuid !== null || builtInSongPanel ? void 0 : artistPanel;
-  const builtInPanel = builtInSongPanel ?? builtInArtistPanel;
+  const builtInPanel = overlayPanel || selectedGenreUuid !== null ? void 0 : entityPanel;
   const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, import_react18.useState)(false);
   const [uncontrolledExpanded, setUncontrolledExpanded] = (0, import_react18.useState)(false);
   const isCollapsed = collapsed ?? uncontrolledCollapsed;
@@ -3652,8 +3678,72 @@ function Rating({ rating, handleChange }) {
     ) })
   ] }, i)) });
 }
+
+// src/genre-tree/EntityDetailPanel.tsx
+var import_react21 = require("react");
+var import_ui19 = require("@behindthemusictree/ui");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function EntityDetailPanel({
+  scope,
+  getBackendBaseUrl,
+  getArtistBackendBaseUrl,
+  getShareUrl,
+  songUuid,
+  onSongUuidChange,
+  artistUuid,
+  onArtistUuidChange,
+  renderArtistLink,
+  renderSongLink,
+  collapsed,
+  edgeTab,
+  ...navigation
+}) {
+  const [expandedSongUuid, setExpandedSongUuid] = (0, import_react21.useState)(null);
+  const [expandedArtistUuid, setExpandedArtistUuid] = (0, import_react21.useState)(null);
+  const panel = useEntityPanel({
+    scope,
+    getBackendBaseUrl,
+    getArtistBackendBaseUrl,
+    getShareUrl,
+    renderArtistLink: renderArtistLink ?? ((artist) => artist.isSpecialPurpose ? artist.name : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { type: "button", onClick: () => onArtistUuidChange(artist.uuid), className: "hover:underline", children: artist.name })),
+    renderSongLink: renderSongLink ?? ((song) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { type: "button", onClick: () => onSongUuidChange(song.uuid), className: "hover:underline", children: song.title })),
+    song: {
+      uuid: songUuid,
+      expanded: songUuid !== null && expandedSongUuid === songUuid,
+      onExpandedChange: (on) => setExpandedSongUuid(on ? songUuid : null),
+      onClose: () => onSongUuidChange(null)
+    },
+    artist: {
+      uuid: artistUuid,
+      expanded: artistUuid !== null && expandedArtistUuid === artistUuid,
+      onExpandedChange: (on) => setExpandedArtistUuid(on ? artistUuid : null),
+      onClose: () => onArtistUuidChange(null)
+    },
+    ...navigation
+  });
+  if (!panel) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_ui19.DetailPanel,
+    {
+      side: "left",
+      title: panel.title,
+      titleInSearch: true,
+      onClose: panel.onClose,
+      collapsed,
+      expanded: panel.expanded,
+      onExpandedChange: panel.onExpandedChange,
+      aside: panel.extraContent,
+      edgeTab,
+      children: panel.extraContent && !panel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+        panel.content,
+        panel.extraContent
+      ] }) : panel.content
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  EntityDetailPanel,
   GenreDetailPanel,
   GenreInfoPanelBody,
   GenreNodeActionBand,
@@ -3673,6 +3763,7 @@ function Rating({ rating, handleChange }) {
   TrackPositionPlayPause,
   searchStatus,
   useArtistSearchGroup,
+  useEntityPanel,
   useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup,
   useSongSearchGroup