Improve clarity of discovery sections in User > Home by adding the discovery group info

2026-11-05 15:52:47 +01:00 · 2026-10-06 02:18:35 -04:00
parent 3ca3b8a2aa
commit 342f8d3e69
2 changed files with 90 additions and 22 deletions
@@ -2041,24 +2041,55 @@
        return true;
    }

-    async function buildServerSectionsById() {
+    /**
+     * Map discovery section ids → parent group { groupId, groupName } for User > Home badges.
+     * Includes DISCOVERY_SECTION_GROUPS and discoveryEnabled sections in CUSTOM_SECTION_GROUPS.
+     * @param {Object} mergedConfig
+     * @returns {Map<string, { groupId: string, groupName: string }>}
+     */
+    function buildDiscoverySectionGroupMap(mergedConfig) {
        const map = new Map();
-        if (!window.KefinHomeScreen?.getConfig) return map;
+        if (!mergedConfig) return map;
+
+        const stampGroup = (group, discoveryOnly) => {
+            const groupId = String(group?.id || '');
+            const groupName = String(group?.name || groupId || 'Unnamed Group');
+            (group?.sections || []).forEach((section) => {
+                if (!section?.id) return;
+                if (discoveryOnly && section.discoveryEnabled !== true) return;
+                map.set(section.id, { groupId, groupName });
+            });
+        };
+
+        (mergedConfig.DISCOVERY_SECTION_GROUPS || []).forEach((group) => stampGroup(group, false));
+        (mergedConfig.CUSTOM_SECTION_GROUPS || []).forEach((group) => stampGroup(group, true));
+        return map;
+    }
+
+    function buildServerSectionsByIdFromConfig(mergedConfig) {
+        const map = new Map();
+        if (!mergedConfig) return map;
+        const allGroups = [
+            ...(mergedConfig.HOME_SECTION_GROUPS || []),
+            ...(mergedConfig.SEASONAL_SECTION_GROUPS || []),
+            ...(mergedConfig.DISCOVERY_SECTION_GROUPS || []),
+            ...(mergedConfig.CUSTOM_SECTION_GROUPS || [])
+        ];
+        flattenSectionGroups(allGroups).forEach(section => {
+            if (section?.id) map.set(section.id, section);
+        });
+        return map;
+    }
+
+    async function buildServerSectionsById() {
+        if (!window.KefinHomeScreen?.getConfig) return new Map();
        try {
            const mergedConfig = await window.KefinHomeScreen.getConfig();
-            const allGroups = [
-                ...(mergedConfig.HOME_SECTION_GROUPS || []),
-                ...(mergedConfig.SEASONAL_SECTION_GROUPS || []),
-                ...(mergedConfig.DISCOVERY_SECTION_GROUPS || []),
-                ...(mergedConfig.CUSTOM_SECTION_GROUPS || [])
-            ];
-            flattenSectionGroups(allGroups).forEach(section => {
-                if (section?.id) map.set(section.id, section);
-            });
+            return buildServerSectionsByIdFromConfig(mergedConfig);
        } catch (e) {
            WARN('Could not build server sections map:', e);
+            return new Map();
        }
-        return map;
    }

    /**
@@ -2275,8 +2306,15 @@

            // Resolved Kefin sections only (no Jellyfin-native duplicate rows)
            const userConfig = await getConfig();
-            const discoveryFeatureEnabled = window.KefinHomeScreen?.getConfig?.()?.DISCOVERY_SETTINGS?.enabled !== false;
-            const serverSectionsById = await buildServerSectionsById();
+            let mergedHomeConfig = null;
+            try {
+                mergedHomeConfig = await window.KefinHomeScreen?.getConfig?.();
+            } catch (e) {
+                WARN('Could not load merged home config for editor labels:', e);
+            }
+            const discoveryFeatureEnabled = mergedHomeConfig?.DISCOVERY_SETTINGS?.enabled !== false;
+            const serverSectionsById = buildServerSectionsByIdFromConfig(mergedHomeConfig);
+            const discoveryGroupMap = buildDiscoverySectionGroupMap(mergedHomeConfig);

            const filterEditorSection = (s) => {
                if (s.userConfigurable === false) return false;
@@ -2299,13 +2337,32 @@
                    userConfig.enabledDiscoverySections.filter(filterEditorSection),
                    userConfig.homeScreen,
                    { serverSectionsById }
-                );
+                ).map((section) => {
+                    const groupMeta = discoveryGroupMap.get(section.id);
+                    if (!groupMeta) return section;
+                    return {
+                        ...section,
+                        discoveryGroupId: groupMeta.groupId,
+                        discoveryGroupName: groupMeta.groupName
+                    };
+                });
            }

-            let allSections = [...homeSections, ...discoverySections].map((section) => ({
-                ...section,
-                type: normalizeEditorSectionType(section)
-            }));
+            let allSections = [...homeSections, ...discoverySections].map((section) => {
+                const serverSection = serverSectionsById.get(section.id);
+                const caption = section.caption || serverSection?.caption;
+                const groupMeta = discoveryGroupMap.get(section.id);
+                const next = {
+                    ...section,
+                    type: normalizeEditorSectionType(section),
+                    ...(caption != null && caption !== '' ? { caption } : {})
+                };
+                if (groupMeta) {
+                    next.discoveryGroupId = groupMeta.groupId;
+                    next.discoveryGroupName = groupMeta.groupName;
+                }
+                return next;
+            });

            // Sort by order
            allSections.sort((a, b) => (a.order || 0) - (b.order || 0));
@@ -881,8 +881,18 @@
                ? `<span class="listItemBodyText secondary seasonal-tag" style="font-size: 0.8em; background: rgba(255,255,255,0.1); padding: 0.15em 0.45em; border-radius: 3px;">Seasonal · ${escapeHtml(String(section.startDate))} – ${escapeHtml(String(section.endDate))}</span>`
                : `<span class="listItemBodyText secondary seasonal-tag" style="font-size: 0.8em; background: rgba(255,255,255,0.1); padding: 0.15em 0.45em; border-radius: 3px;">Seasonal</span>`)
            : '';
+        const discoveryBadgeLabel = String(
+            section.discoveryGroupName || section.groupName || 'Discovery'
+        ).trim() || 'Discovery';
+        const discoveryBadgeTitle = section.discoveryGroupId
+            ? ` title="${escapeHtml(String(section.discoveryGroupId))}"`
+            : '';
        const discoveryBadge = isDiscovery
-            ? `<span class="listItemBodyText secondary discovery-tag" style="font-size: 0.8em; background: rgba(255,255,255,0.1); padding: 0.15em 0.45em; border-radius: 3px;">Discovery</span>`
+            ? `<span class="listItemBodyText secondary discovery-tag" style="font-size: 0.8em; background: rgba(255,255,255,0.1); padding: 0.15em 0.45em; border-radius: 3px;"${discoveryBadgeTitle}>${escapeHtml(discoveryBadgeLabel)}</span>`
+            : '';
+        const captionText = String(section.caption || '').trim();
+        const captionHtml = captionText
+            ? `<div class="listItemBodyText secondary section-row-caption" style="font-size: 0.85em; margin-top: 0.2em; opacity: 0.85;">${escapeHtml(captionText)}</div>`
            : '';

        return `
@@ -894,11 +904,12 @@
                    dataAttributes: { 'section-id': sectionId }
                })}
                <div class="listItemBody">
-                    <div style="display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap;">
-                        <span>${sectionName.replace(/"/g, '&quot;')}</span>
+                    <div class="section-row-title-line" style="display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap;">
+                        <span>${escapeHtml(sectionName)}</span>
                        ${seasonalBadge}
                        ${discoveryBadge}
                    </div>
+                    ${captionHtml}
                </div>
                <div class="section-row-actions">
                    ${isPinnedSection ? `