@ciphore/radiocli 0.2.1 → 0.2.3

package/dist/ui/AdaptiveContent.js

@@ -1,23 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Box, Text } from 'ink';
 import { computeListeningStats } from '../activity/stats.js';
 import { playbackBackendLabel } from '../player/backend-install.js';
 import { visibleWindow } from './list-window.js';
 import { displayWidth, padDisplayEnd, stationLocation, stationTags, stationTech, truncate } from './format.js';
-import { homeItems, settingsItems, settingsSectionFor } from './screen-items.js';
+import { homeItems, settingsGroup, settingsGroups, settingsItemsForPage } from './screen-items.js';
 import { screenTitle } from './screen-meta.js';
 import { keyHelpSections, commandHelp } from './help-content.js';
 import { settingLabel, settingValue } from './screens/SettingsScreen.js';
-import { panelBorder, textDim, textMuted, themeAccent } from './theme.js';
+import { exploreMapLand, mapMarker, panelBorder, textDim, textMuted, themeAccent } from './theme.js';
 import { panelBorderStyle, useDisplay } from './display-context.js';
 import { toAsciiSafe } from './ascii.js';
 import { buildVisualizer, visualizerHeight } from './visualizers/receiver-visualizers.js';
 import { Logo } from './components/Logo.js';
+import { useReceiverPulse } from './receiver-animation.js';
+import { formatExploreCursor } from './app-state.js';
+import { buildCosmoWorldMap } from './cosmo-world-map.js';
+import { adaptiveExploreFrameMetrics, computeAdaptiveExploreLayout } from './adaptive-explore-layout.js';
+import { AdaptiveMarquee } from './components/AdaptiveMarquee.js';
 export function AdaptiveContent(props) {
     return _jsx(AdaptiveContentBody, { ...props });
 }
 function AdaptiveContentBody(props) {
-    const { mode, screen, selected, height, width, theme, playback, playingStation, nowPlaying, stations, countries, airPlayDevices, airPlayCode, searchQuery, editingSearch, countryFilter, loadingCountries, loadingStations, library, diagnostics, backends, updateCheck, favoriteKeys, stationTitle, pulse, } = props;
+    const { mode, screen, settingsPage = 'root', selected, height, width, theme, playback, playingStation, nowPlaying, stations, countries, airPlayDevices, airPlayCode, searchQuery, editingSearch, countryFilter, loadingCountries, loadingStations, exploreCursor, library, diagnostics, backends, updateCheck, appVersion, favoriteKeys, stationTitle, } = props;
     const accent = themeAccent(theme);
     const { ascii } = useDisplay();
     const { bodyRows } = adaptiveFrameMetrics(mode, height);
@@ -27,11 +33,15 @@ function AdaptiveContentBody(props) {
         return (_jsx(AdaptiveHome, { mode: mode, selected: selected, height: height, width: width, theme: theme, library: library }));
     }
     if (screen === 'now-playing') {
-        return (_jsx(AdaptiveNowPlaying, { mode: mode, station: playingStation, playback: playback, metadata: nowPlaying, pulse: pulse, width: width, height: height, ascii: ascii, theme: theme, receiverStyle: library.settings.receiverStyle }));
+        return (_jsx(AdaptiveNowPlaying, { mode: mode, station: playingStation, playback: playback, metadata: nowPlaying, width: width, height: height, ascii: ascii, theme: theme, receiverStyle: library.settings.receiverStyle, reduceMotion: Boolean(library.settings.reduceMotion) }));
+    }
+    if (screen === 'explore') {
+        return (_jsx(AdaptiveExplore, { mode: mode, width: width, height: height, theme: theme, stations: stations, selected: selected, favorites: favoriteKeys, cursor: exploreCursor, loading: loadingStations, error: props.stationError, ascii: ascii, reduceMotion: Boolean(library.settings.reduceMotion) }));
     }
     if (screen === 'search') {
         const rows = adaptiveRows({
             screen,
+            settingsPage,
             stations,
             countries,
             airPlayDevices,
@@ -39,6 +49,7 @@ function AdaptiveContentBody(props) {
             diagnostics,
             backends,
             updateCheck,
+            appVersion,
             favoriteKeys,
             selected,
             width,
@@ -53,9 +64,10 @@ function AdaptiveContentBody(props) {
             loadingCountries,
             loadingStations,
             nearbyEnabled: library.settings.enableNearbyLocation,
-            stationTitle
+            stationTitle,
+            stationError: props.stationError
         });
-        return (_jsx(AdaptiveSearch, { mode: mode, query: searchQuery, editing: editingSearch, loading: loadingStations, rows: rows, empty: empty, selected: selected, height: height, width: width, theme: theme, ascii: ascii }));
+        return (_jsx(AdaptiveSearch, { mode: mode, query: searchQuery, editing: editingSearch, loading: loadingStations, rows: rows, empty: empty, selected: selected, height: height, width: width, theme: theme, ascii: ascii, reduceMotion: Boolean(library.settings.reduceMotion) }));
     }
     if (screen === 'stats') {
         const stats = computeListeningStats(library.activity.sessions);
@@ -78,6 +90,7 @@ function AdaptiveContentBody(props) {
     }
     const rows = adaptiveRows({
         screen,
+        settingsPage,
         stations,
         countries,
         airPlayDevices,
@@ -85,6 +98,7 @@ function AdaptiveContentBody(props) {
         diagnostics,
         backends,
         updateCheck,
+        appVersion,
         favoriteKeys,
         selected,
         width,
@@ -99,9 +113,55 @@ function AdaptiveContentBody(props) {
         loadingCountries,
         loadingStations,
         nearbyEnabled: library.settings.enableNearbyLocation,
-        stationTitle
+        stationTitle,
+        stationError: props.stationError
     });
-    return (_jsx(AdaptiveFrame, { title: title, status: status, mode: mode, height: height, width: width, theme: theme, children: rows.length > 0 ? (_jsx(AdaptiveList, { rows: rows, selected: selected, pageSize: bodyRows, width: width, theme: theme })) : (_jsx(StaticRows, { rows: empty.slice(0, bodyRows), width: width, theme: theme })) }));
+    return (_jsx(AdaptiveFrame, { title: title, status: status, mode: mode, height: height, width: width, theme: theme, children: rows.length > 0 ? (_jsx(AdaptiveList, { rows: rows, selected: selected, pageSize: bodyRows, width: width, theme: theme, reduceMotion: Boolean(library.settings.reduceMotion) })) : (_jsx(StaticRows, { rows: empty.slice(0, bodyRows), width: width, theme: theme })) }));
+}
+function AdaptiveExplore({ mode, width, height, theme, stations, selected, favorites, cursor, loading, error, ascii, reduceMotion }) {
+    const accent = themeAccent(theme);
+    const { headerRows, headerGap, bodyRows } = adaptiveExploreFrameMetrics(mode, height);
+    const layout = computeAdaptiveExploreLayout(mode, width, Math.max(1, bodyRows));
+    const marker = React.useMemo(() => [{ lat: cursor.latitude, lon: cursor.longitude, selected: true }], [cursor.latitude, cursor.longitude]);
+    const map = React.useMemo(() => buildCosmoWorldMap(layout.mapColumns, layout.mapRows, marker), [layout.mapColumns, layout.mapRows, marker]);
+    const coordinate = formatExploreCursor(cursor);
+    const status = `${coordinate} · ${loading ? 'loading' : `${stations.length.toLocaleString()} stations`}`;
+    const title = mode === 'micro' ? `RC / Explore · ${coordinate}` : 'RADIOCLI  Explore';
+    const stationRows = stationAdaptiveRows(stations, favorites, selected, layout.listWidth, ascii);
+    const emptyRows = loading
+        ? [{ key: 'loading', label: 'Loading stations…' }]
+        : error
+            ? [{ key: 'error', label: error }]
+            : [{ key: 'empty', label: 'No stations near this point.' }];
+    const list = (_jsx(AdaptiveList, { rows: stationRows.length > 0 ? stationRows : emptyRows, selected: stationRows.length > 0 ? selected : 0, pageSize: layout.listRows, width: layout.listWidth, theme: theme, reduceMotion: reduceMotion }));
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: truncate(title, width) }), headerRows > 1 ? _jsx(Text, { color: textMuted, children: truncate(status, width) }) : null, headerGap ? _jsx(Box, { height: headerGap, flexShrink: 0 }) : null, bodyRows > 0 ? layout.split ? (_jsxs(Box, { flexDirection: "row", height: bodyRows, width: width, overflow: "hidden", children: [_jsx(AdaptiveCosmoMap, { rows: map, width: layout.mapAreaWidth, height: layout.mapRows, offsetX: layout.mapOffsetX, theme: theme, ascii: ascii }), layout.gap ? _jsx(Box, { width: layout.gap, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", width: layout.listWidth, height: layout.listRows, overflow: "hidden", children: list })] })) : (_jsxs(Box, { flexDirection: "column", height: bodyRows, width: width, overflow: "hidden", children: [_jsx(AdaptiveCosmoMap, { rows: map, width: layout.mapAreaWidth, height: layout.mapRows, offsetX: layout.mapOffsetX, theme: theme, ascii: ascii }), layout.gap ? _jsx(Box, { height: layout.gap, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: layout.listRows, width: layout.listWidth, overflow: "hidden", children: list })] })) : null] }));
+}
+function AdaptiveCosmoMap({ rows, width, height, offsetX, theme, ascii }) {
+    return (_jsx(Box, { flexDirection: "column", width: width, height: height, overflow: "hidden", flexShrink: 0, children: rows.map((row, rowIndex) => {
+            const chunks = [];
+            for (const cell of row.cells) {
+                const previous = chunks.at(-1);
+                if (previous?.kind === cell.kind)
+                    previous.text += cell.char;
+                else
+                    chunks.push({ kind: cell.kind, text: cell.char });
+            }
+            let cellOffset = 0;
+            return (_jsx(Box, { marginLeft: offsetX, children: chunks.map(chunk => {
+                    const key = `${cellOffset}-${chunk.kind}`;
+                    cellOffset += chunk.text.length;
+                    return (_jsx(Text, { color: adaptiveMapColor(chunk.kind, theme), children: ascii ? toAsciiSafe(chunk.text) : chunk.text }, key));
+                }) }, rowIndex));
+        }) }));
+}
+function adaptiveMapColor(kind, theme) {
+    if (kind === 'selected')
+        return themeAccent(theme);
+    if (kind === 'marker')
+        return mapMarker;
+    if (kind === 'land')
+        return exploreMapLand;
+    return undefined;
 }
 function AdaptiveFrame({ title, status, mode, height, width, theme, children }) {
     const accent = themeAccent(theme);
@@ -134,7 +194,7 @@ function AdaptiveHome({ mode, selected, height, width, theme, library }) {
                     return (_jsxs(Text, { color: active ? accent : undefined, bold: active, children: [active ? '> ' : '  ', absoluteIndex + 1, " ", truncate(`${item.label}${detail}`, Math.max(1, width - 4))] }, item.screen));
                 }) }), showSummary ? (_jsx(Text, { color: textMuted, children: truncate(`${library.recent.length} recent · ${library.favorites.length} favorites · ${library.imported.length} imported`, width) })) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
 }
-function AdaptiveList({ rows, selected, pageSize, width, theme }) {
+function AdaptiveList({ rows, selected, pageSize, width, theme, reduceMotion }) {
     const selectedIndex = Math.min(Math.max(selected, 0), Math.max(0, rows.length - 1));
     const window = visibleWindow(rows, selectedIndex, Math.max(1, pageSize));
     const accent = themeAccent(theme);
@@ -143,14 +203,17 @@ function AdaptiveList({ rows, selected, pageSize, width, theme }) {
             const active = absoluteIndex === selectedIndex && !row.heading;
             const prefix = row.heading ? '  ' : active ? '> ' : '  ';
             const detail = row.detail ? `${row.separator ?? ' · '}${row.detail}` : '';
-            return (_jsxs(Text, { color: active ? accent : row.heading ? textMuted : undefined, bold: active || row.heading, children: [prefix, truncate(`${row.label}${detail}`, Math.max(0, width - 2))] }, row.key));
+            const text = `${row.label}${detail}`;
+            const favoriteWidth = row.favoriteGlyph ? 2 : 0;
+            return (_jsxs(Text, { color: active ? accent : row.heading ? textMuted : undefined, bold: active || row.heading, children: [prefix, _jsx(AdaptiveMarquee, { text: text, width: Math.max(0, width - 2 - favoriteWidth), active: active && Boolean(row.marquee), reduceMotion: reduceMotion }), row.favoriteGlyph ? _jsxs(Text, { color: "yellow", children: [" ", row.favoriteGlyph] }) : null] }, row.key));
         }) }));
 }
 function StaticRows({ rows, width, theme }) {
     const accent = themeAccent(theme);
     return (_jsx(Box, { flexDirection: "column", children: rows.map(row => (_jsxs(Text, { color: row.heading ? textMuted : undefined, bold: row.heading, children: [truncate(row.detail ? `${row.label} · ${row.detail}` : row.label, width), row.key === 'activity' ? _jsx(Text, { color: accent }) : null] }, row.key))) }));
 }
-function AdaptiveNowPlaying({ mode, station, playback, metadata, pulse, width, height, ascii, theme, receiverStyle }) {
+function AdaptiveNowPlaying({ mode, station, playback, metadata, width, height, ascii, theme, receiverStyle, reduceMotion }) {
+    const pulse = useReceiverPulse();
     const accent = themeAccent(theme);
     const stationName = station?.name ?? 'No station tuned';
     const showMetadata = mode === 'compact' && height >= 9 && Boolean(metadata?.title);
@@ -164,21 +227,23 @@ function AdaptiveNowPlaying({ mode, station, playback, metadata, pulse, width, h
         ? `${stationName} · ${playback.state}`
         : 'RADIOCLI  Now playing';
     const status = `${stationName}  ${playback.state}${playback.muted ? ' · muted' : ` · vol ${playback.volume}`}`;
-    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: truncate(header, width) }), mode === 'compact' ? _jsx(Text, { color: textMuted, children: truncate(status, width) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: availableVisualRows, overflow: "hidden", children: visualRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: mode === 'micro'
+                    ? _jsx(AdaptiveMarquee, { text: header, width: width, active: true, reduceMotion: reduceMotion })
+                    : truncate(header, width) }), mode === 'compact' ? _jsx(Text, { color: textMuted, children: truncate(status, width) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: availableVisualRows, overflow: "hidden", children: visualRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
                         ? renderAdaptiveSegments(row.segments, ascii)
                         : ascii
                             ? toAsciiSafe(row.text)
-                            : row.text }, index))) }), showMetadata ? _jsx(Text, { color: accent, children: truncate(metadata?.title ?? '', width) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
+                            : row.text }, index))) }), showMetadata ? (_jsx(Text, { color: accent, children: _jsx(AdaptiveMarquee, { text: metadata?.title ?? '', width: width, active: true, reduceMotion: reduceMotion }) })) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
 }
 function renderAdaptiveSegments(segments, ascii) {
     let offset = 0;
     return segments.map(segment => {
-        const key = `${offset}-${segment.color}-${segment.backgroundColor ?? ''}`;
+        const key = offset;
         offset += segment.text.length;
         return (_jsx(Text, { color: segment.color, backgroundColor: segment.backgroundColor, bold: segment.bold, children: ascii ? toAsciiSafe(segment.text) : segment.text }, key));
     });
 }
-function AdaptiveSearch({ mode, query, editing, loading, rows, empty, selected, height, width, theme, ascii }) {
+function AdaptiveSearch({ mode, query, editing, loading, rows, empty, selected, height, width, theme, ascii, reduceMotion }) {
     const accent = themeAccent(theme);
     const { panel: panelBackground } = useDisplay();
     const fieldText = query || 'station, genre, or place';
@@ -186,7 +251,7 @@ function AdaptiveSearch({ mode, query, editing, loading, rows, empty, selected,
     const fieldRows = height >= 4 ? 3 : 1;
     const gapRows = height >= 6 ? 1 : 0;
     const listRows = Math.max(0, height - 1 - fieldRows - gapRows * 2);
-    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: mode === 'micro' ? 'SEARCH' : 'RADIOCLI  Search' }), fieldRows === 3 ? (_jsxs(Box, { borderStyle: panelBorderStyle(ascii, 'single'), borderColor: editing || loading ? accent : panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: width, height: 3, flexShrink: 0, children: [_jsx(Text, { color: editing || loading ? accent : textMuted, children: prefix }), _jsx(Text, { color: query ? accent : textMuted, children: truncate(fieldText, Math.max(1, width - 5)) })] })) : (_jsx(Text, { color: query ? accent : textMuted, children: truncate(`[${prefix}${fieldText}]`, width) })), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: listRows, overflow: "hidden", flexShrink: 0, children: rows.length > 0 ? (_jsx(AdaptiveList, { rows: rows, selected: selected, pageSize: listRows, width: width, theme: theme })) : (_jsx(StaticRows, { rows: empty.slice(0, listRows), width: width, theme: theme })) }), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: mode === 'micro' ? 'SEARCH' : 'RADIOCLI  Search' }), fieldRows === 3 ? (_jsxs(Box, { borderStyle: panelBorderStyle(ascii, 'single'), borderColor: editing || loading ? accent : panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: width, height: 3, flexShrink: 0, children: [_jsx(Text, { color: editing || loading ? accent : textMuted, children: prefix }), _jsx(Text, { color: query ? accent : textMuted, children: truncate(fieldText, Math.max(1, width - 5)) })] })) : (_jsx(Text, { color: query ? accent : textMuted, children: truncate(`[${prefix}${fieldText}]`, width) })), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: listRows, overflow: "hidden", flexShrink: 0, children: rows.length > 0 ? (_jsx(AdaptiveList, { rows: rows, selected: selected, pageSize: listRows, width: width, theme: theme, reduceMotion: reduceMotion })) : (_jsx(StaticRows, { rows: empty.slice(0, listRows), width: width, theme: theme })) }), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
 }
 function adaptiveRows(input) {
     const { screen, stations, countries, airPlayDevices, library, diagnostics, backends, updateCheck, favoriteKeys, selected, width, mode, ascii } = input;
@@ -194,16 +259,20 @@ function adaptiveRows(input) {
         return homeItems.map(item => ({
             key: item.screen,
             label: item.label,
-            detail: mode === 'compact' && width >= 52 ? item.detail : undefined
+            detail: mode === 'compact' && width >= 52 ? item.detail : undefined,
+            separator: '   '
         }));
     }
     if (screen === 'settings') {
-        const labels = settingsItems.map(item => settingLabel(item, updateCheck));
+        const pageItems = settingsItemsForPage(input.settingsPage);
+        const labels = pageItems.map(item => settingLabel(item, updateCheck, input.appVersion));
         const labelWidth = pairedColumnWidth(labels, width, mode);
-        return settingsItems.map((item, index) => ({
+        return pageItems.map((item, index) => ({
             key: item,
-            label: padDisplayEnd(truncate(settingLabel(item, updateCheck), labelWidth), labelWidth),
-            detail: settingValue(item, library.settings, diagnostics, backends, airPlayDevices, updateCheck),
+            label: padDisplayEnd(truncate(settingLabel(item, updateCheck, input.appVersion), labelWidth), labelWidth),
+            detail: input.settingsPage === 'root'
+                ? adaptiveSettingsRootValue(item)
+                : settingValue(item, library.settings, diagnostics, backends, airPlayDevices, updateCheck, input.appVersion),
             separator: '   ',
             index
         }));
@@ -216,6 +285,7 @@ function adaptiveRows(input) {
             label: padDisplayEnd(truncate(`${country.name} (${country.code})`, labelWidth), labelWidth),
             detail: country.stationCount.toLocaleString(),
             separator: '  ',
+            marquee: true,
             index
         }));
     }
@@ -239,14 +309,23 @@ function adaptiveRows(input) {
         }
         return rows;
     }
+    return stationAdaptiveRows(stations, favoriteKeys, selected, width, ascii);
+}
+function adaptiveSettingsRootValue(item) {
+    const group = settingsGroups.find(candidate => candidate.label === item);
+    return group ? `${group.items.length} settings ›` : undefined;
+}
+function stationAdaptiveRows(stations, favoriteKeys, selected, width, ascii) {
     return stations.map((station, index) => {
         const favorite = favoriteKeys.has(`${station.provider}:${station.id}`);
         const standardMetadata = `${stationLocation(station)} · ${stationTech(station)}`;
         const selectedMetadata = station.tags.length > 0 ? stationTags(station) : standardMetadata;
         return {
             key: `${station.provider}:${station.id}`,
-            label: `${station.name}${favorite ? (ascii ? ' *' : ' ★') : ''}`,
-            detail: width >= 42 ? (index === selected ? selectedMetadata : standardMetadata) : undefined,
+            label: station.name,
+            detail: index === selected ? selectedMetadata : width >= 42 ? standardMetadata : undefined,
+            marquee: true,
+            favoriteGlyph: favorite ? (ascii ? '*' : '★') : undefined,
             index
         };
     });
@@ -258,7 +337,7 @@ function pairedColumnWidth(labels, width, mode) {
     return Math.min(longest, cap);
 }
 function adaptiveEmptyState(input) {
-    const { screen, searchQuery, editingSearch, countryFilter, loadingCountries, loadingStations, nearbyEnabled, stationTitle } = input;
+    const { screen, searchQuery, editingSearch, countryFilter, loadingCountries, loadingStations, nearbyEnabled, stationTitle, stationError } = input;
     if ((screen === 'countries' || screen === 'map') && loadingCountries) {
         return [{ key: 'loading', label: 'Loading countries…' }];
     }
@@ -286,13 +365,16 @@ function adaptiveEmptyState(input) {
     if (loadingStations) {
         return [{ key: 'loading', label: 'Loading stations…' }];
     }
+    if (stationError) {
+        return [{ key: 'error', label: stationError }, { key: 'hint', label: 'Try again later or reopen this view.' }];
+    }
     if (screen === 'airplay-settings') {
         return [{ key: 'empty', label: 'No AirPlay receivers found.' }, { key: 'hint', label: 'Press r to scan again.' }];
     }
     return [{ key: 'empty', label: `No stations in ${stationTitle.toLowerCase()}.` }, { key: 'hint', label: 'Try another view or clear filters.' }];
 }
 function adaptiveStatus(props) {
-    const { screen, playback, playingStation, stations, countries, searchQuery, editingSearch, countryFilter, editingCountryFilter, library, filterLabel, selected } = props;
+    const { screen, playback, playingStation, stations, countries, searchQuery, editingSearch, countryFilter, editingCountryFilter, library, filterLabel } = props;
     if (screen === 'home') {
         return `${library.favorites.length} favorites · ${library.recent.length} recent · ${library.imported.length} imported`;
     }
@@ -300,7 +382,10 @@ function adaptiveStatus(props) {
         return `${playbackBackendLabel(playback.backend)} · ${playback.state} · vol ${playback.volume}`;
     }
     if (screen === 'settings') {
-        return `${settingsSectionFor(settingsItems[selected])} · Enter changes the selected setting`;
+        const group = settingsGroup(props.settingsPage ?? 'root');
+        return group
+            ? `${group.label} · Enter changes setting · b categories`
+            : 'Choose a category · Updates are available here';
     }
     if (screen === 'search') {
         const query = searchQuery || (editingSearch ? 'type to search' : 'press / to search');