@behindthemusictree/app-kit-ui 35.0.0 → 37.0.0

package/dist/genre-tree/index.cjs

@@ -722,6 +722,7 @@ function SearchBox({
   groups,
   onPicked,
   onClear,
+  clearLabel,
   leading,
   className: className2,
   onFocus
@@ -753,6 +754,7 @@ function SearchBox({
       status,
       loading,
       onClear,
+      clearLabel,
       leading,
       inputClassName: "focus-visible:ring-0"
     }
@@ -848,6 +850,8 @@ function GenreSearch({
   onSelect,
   selectedName = null,
   onClear,
+  showClear,
+  clearLabel,
   onPrevious,
   placeholder,
   onQueryChange,
@@ -895,7 +899,8 @@ function GenreSearch({
         if (groupKey !== "genres") setQuery("");
         onQueryChange?.("");
       },
-      onClear: canClear ? () => {
+      clearLabel,
+      onClear: showClear ?? canClear ? () => {
         clear();
         onQueryChange?.("");
       } : void 0,
@@ -1417,7 +1422,7 @@ function GenrePlaylistTracks({
   const trackNoun = (0, import_track_noun.useTrackNoun)();
   const uuid = genrePlaylist?.uuid;
   const genreName = selectedGenreName ?? genrePlaylist?.name ?? "Genre";
-  const { fetch } = (0, import_transport3.useFetchWrapper)(getBackendBaseUrl);
+  const { fetchBound } = (0, import_transport3.usePlaybackFetch)(getBackendBaseUrl);
   const playback = (0, import_transport3.usePlaybackContext)();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
     queryKey: [...scope === "me" ? uuid ? import_genre_tree12.genrePlaylistQueryKeys.me.tracks(uuid) : ["missing-personal-genre-playlist", genreUuid] : artist ? [...import_genre_tree13.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : import_genre_tree13.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), ...playback.key ? [playback.key] : []],
@@ -1426,7 +1431,7 @@ function GenrePlaylistTracks({
         if (!uuid) throw new Error("Personal genre has no playlist");
         return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
       }
-      const response = await fetch(
+      const response = await fetchBound(
         import_genre_tree13.libraryEndpoints.reference.songs.list(),
         true,
         false,
@@ -1438,7 +1443,9 @@ function GenrePlaylistTracks({
     },
     initialPageParam: scope === "me" ? 1 : "",
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
-    enabled: playback.ready && (scope !== "me" || uuid !== void 0 && sessionRestored && !!session?.accessToken)
+    enabled: playback.ready && (scope !== "me" || uuid !== void 0 && sessionRestored && !!session?.accessToken),
+    retry: (failureCount, error) => failureCount < 1 && error instanceof DOMException && error.name === "AbortError",
+    retryDelay: 0
   });
   const [sentinel, setSentinel] = (0, import_react12.useState)(null);
   (0, import_react12.useEffect)(() => {
@@ -1757,10 +1764,12 @@ function useGenreDetailContent({
     };
   }, [detail, scope]);
   if (isError) return {
+    name: null,
     title: "Genre unavailable",
     content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." })
   };
   if (isPending || !detail || !view) return {
+    name: null,
     title: "Loading genre\u2026",
     content: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui7.Skeleton, { className: "h-6 w-2/3" }),
@@ -1782,6 +1791,7 @@ function useGenreDetailContent({
   );
   const ancestors = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
   return {
+    name: detail.name,
     title: detail.name,
     headerAccent: { background: view.fill, color: import_genre_tree_view4.ACCENT_TEXT_COLOR },
     aside: expanded ? ancestors : void 0,
@@ -1823,7 +1833,7 @@ function GenreDetailPanel({
   onExpandedChange,
   edgeTab,
   extras,
-  headerClassName
+  titleInSearch
 }) {
   const panel = useGenreDetailContent({
     genreUuid,
@@ -1846,7 +1856,7 @@ function GenreDetailPanel({
       onExpandedChange,
       edgeTab,
       aside: panel.aside,
-      headerClassName,
+      titleInSearch,
       headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui7.IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react8.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react8.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
       children: panel.content
     }
@@ -2214,12 +2224,12 @@ var SORTS = [
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
   const [page, setPage] = (0, import_react16.useState)(1);
   const [ordering, setOrdering] = (0, import_react16.useState)("title");
-  const { fetch } = (0, import_transport7.useFetchWrapper)(getBackendBaseUrl);
   const { playNewTrackListFromArtist } = (0, import_genre_tree24.useTrackList)();
   const { playerTrackObject } = (0, import_player10.usePlayer)();
-  const { data, isPending, isError } = (0, import_transport7.useQueryWithParse)({
+  const { data, isPending, isError } = (0, import_transport7.usePlaybackQuery)({
+    getBackendBaseUrl,
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
-    queryFn: () => fetch(import_genre_tree24.libraryEndpoints.reference.songs.list(), true, false, void 0, {
+    queryFn: (fetchBound) => fetchBound(import_genre_tree24.libraryEndpoints.reference.songs.list(), true, false, void 0, {
       artist: artist.uuid,
       ordering,
       page
@@ -2657,6 +2667,8 @@ function GenreTreeView({
   };
   const {
     isLoading,
+    isError,
+    refetch,
     isFetching: isTreeFetching,
     genrePlaylistByNodeId,
     visibleGenrePlaylists,
@@ -2789,7 +2801,7 @@ function GenreTreeView({
   }, [selectedGenreUuid, artistUuid, songUuid]);
   const [isWheelRevealed, setIsWheelRevealed] = (0, import_react18.useState)(false);
   const usesHandoff = viewMode === "wheel" || viewMode === "pop-core";
-  const isTreeReady = !isLoading && (!usesHandoff || isWheelRevealed);
+  const isTreeReady = !isLoading && !isError && (!usesHandoff || isWheelRevealed);
   const [resolveStyle, setResolveStyle] = (0, import_react18.useState)(null);
   const handleNodeStyleResolverChange = (0, import_react18.useCallback)(
     (resolver) => setResolveStyle(() => resolver),
@@ -2820,7 +2832,6 @@ function GenreTreeView({
     if (node !== null && songUuid !== null) changeSong(null);
     selectNode(node);
   };
-  const handleGenreSearchClear = clearSelection;
   const handleGenreSearchSelect = (genrePlaylist2) => {
     reopenPanel();
     if (songUuid !== null) changeSong(null);
@@ -2903,7 +2914,7 @@ function GenreTreeView({
       expanded: overlayPanel.expanded ?? false,
       onExpandedChange: overlayPanel.onExpandedChange,
       onClose: overlayPanel.onClose,
-      compact: false
+      titleInSearch: false
     };
   } else if (selectedGenreUuid) {
     activePanel = {
@@ -2913,7 +2924,7 @@ function GenreTreeView({
       expanded: isExpanded,
       onExpandedChange: changeExpanded,
       onClose: clearSelection,
-      compact: false,
+      titleInSearch: true,
       headerAccent: relations ? { background: relations.fill, color: relations.textColor } : genreContent.headerAccent
     };
   } else if (builtInPanel) {
@@ -2924,7 +2935,7 @@ function GenreTreeView({
       expanded: builtInPanel.expanded,
       onExpandedChange: builtInPanel.onExpandedChange,
       onClose: builtInPanel.onClose,
-      compact: true
+      titleInSearch: true
     };
   }
   const isPanelShown = activePanel !== null && (selectedGenreUuid !== null || isTreeReady);
@@ -2969,7 +2980,7 @@ function GenreTreeView({
     ] });
   };
   const actions = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    !isLoading && !isError && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       GenreTreeSearch,
       {
         artistBaseUrl,
@@ -2992,17 +3003,19 @@ function GenreTreeView({
           if (songUuid) changeSong(null);
           selectGenre(uuid);
         },
-        selectedName: (selectedGenreUuid ? genreContent.title : null) ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
-        onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
+        selectedName: selectedGenreUuid ? genreContent.name : typeof builtInPanel?.title === "string" ? builtInPanel.title : null,
+        onClear: activePanel?.onClose,
+        showClear: activePanel?.titleInSearch ?? false,
+        clearLabel: "Close panel",
         onPrevious: handlePrevious,
         onQueryChange: onSearchQueryChange,
         onFocus: onSearchFocus,
         extraGroups: extraSearchGroups
       }
     ),
-    !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
+    !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "hidden w-full justify-center max-md:flex", children: renderArtistFilter() }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "contents max-md:flex max-md:w-full max-md:items-center max-md:gap-2 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&>*]:shrink-0", children: [
-      !isLoading && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      !isLoading && !isError && !isControlled && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_ui17.SegmentedControl,
         {
           "aria-label": "Tree view mode",
@@ -3016,7 +3029,7 @@ function GenreTreeView({
           ]
         }
       ),
-      !isLoading && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      !isLoading && !isError && showDisplayOptions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "div",
         {
           className: "flex items-center gap-1",
@@ -3033,7 +3046,7 @@ function GenreTreeView({
           )
         }
       ),
-      !isLoading && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      !isLoading && !isError && !readOnly && showAddRoot && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_ui17.IconTextButton,
         {
           icon: import_lucide_react12.Plus,
@@ -3056,7 +3069,7 @@ function GenreTreeView({
             children: actions
           }
         ),
-        !isLoading && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        !isLoading && !isError && filterArtist && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "div",
           {
             className: `absolute left-1/2 z-30 hidden -translate-x-1/2 md:block ${placement === "regions" ? "top-[calc(var(--layout-gutter)+var(--layout-panel-inset))]" : "top-5"}`,
@@ -3064,8 +3077,12 @@ function GenreTreeView({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "content-container flex-1 min-h-0 flex flex-row gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "tree-view-container relative flex-1 min-w-0 flex flex-col h-full", children: [
-          !isLoading && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
-          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view5.GenreTreeViewSkeleton, { viewMode }) : viewMode === "wheel" ? (
+          !isLoading && !isError && viewMode === "outline" && floatingControlsLeading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute bottom-3 right-3 z-10", children: floatingControlsLeading }),
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view5.GenreTreeViewSkeleton, { viewMode }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { role: "alert", className: "m-auto text-center", children: [
+            "Couldn't load the genre tree.",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: "underline", onClick: refetch, children: "Retry" })
+          ] }) : viewMode === "wheel" ? (
             // The info panel's top edge aligns with the tree's; the search bar floats `--layout-panel-inset` below it,
             // and the header inset (the bar's height plus that inset) extends the header's fill behind the bar,
             // Google Maps style; the 8px bottom padding mirrors the inset above the bar, and the hidden title's height is zeroed.
@@ -3179,8 +3196,7 @@ function GenreTreeView({
               ref: panelRef,
               side: "left",
               title: activePanel?.title ?? "",
-              hideTitle: activePanel?.compact,
-              hideClose: activePanel?.compact,
+              titleInSearch: activePanel?.titleInSearch,
               headerAccent: activePanel?.headerAccent,
               headerActions: expandButton,
               onClose: activePanel?.onClose ?? noop,
@@ -3189,7 +3205,7 @@ function GenreTreeView({
               onExpandedChange: activePanel?.onExpandedChange,
               aside: activePanel?.aside,
               edgeTab: detailTab,
-              headerClassName: "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]",
+              headerClassName: activePanel?.titleInSearch ? void 0 : "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]",
               children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
                 activePanel.content,
                 activePanel.aside