From e744d4a6368e627e7d7085cbb2ce660feec9ec59 Mon Sep 17 00:00:00 2001
From: HighImKevin <kevinjohncampbell@gmail.com>
Date: Mon, 5 Oct 2026 04:30:33 -0400
Subject: [PATCH] Add support for section descriptions

---
 configuration/homeScreen-configuration.js | 65 ++++++++++-------------
 configuration/homeScreenAdvancedEditor.js | 11 ++++
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/configuration/homeScreen-configuration.js b/configuration/homeScreen-configuration.js
index b140bc4..ec43f65 100644
--- a/configuration/homeScreen-configuration.js
+++ b/configuration/homeScreen-configuration.js
@@ -4021,21 +4021,18 @@ window.KefinTweaksConfig = ${JSON.stringify(configToBackup, null, 2)};`;
         // Community Collections tab setup
         setupCommunityCollectionsTab(dialog);
 
-        // Export Sections button
-        const exportSectionsBtn = dialog.querySelector('.export-sections-btn');
-        if (exportSectionsBtn) {
-            exportSectionsBtn.addEventListener('click', () => {
+        // Import / Export — delegated so buttons survive refreshMainModal content swaps
+        dialog.addEventListener('click', (e) => {
+            if (e.target.closest('.export-sections-btn')) {
+                e.preventDefault();
                 showExportDialog();
-            });
-        }
-
-        // Import Sections button
-        const importSectionsBtn = dialog.querySelector('.import-sections-btn');
-        if (importSectionsBtn) {
-            importSectionsBtn.addEventListener('click', () => {
+                return;
+            }
+            if (e.target.closest('.import-sections-btn')) {
+                e.preventDefault();
                 showImportDialog();
-            });
-        }
+            }
+        });
     }
 
     /**
@@ -4618,8 +4615,12 @@ window.KefinTweaksConfig = ${JSON.stringify(configToBackup, null, 2)};`;
             return;
         }
 
+        const collectionDesc = collection.description
+            ? `<div class="listItemBodyText secondary" style="margin-bottom: 0.75em;">${escapeHtml(String(collection.description))}</div>`
+            : '';
         const content = document.createElement('div');
         content.innerHTML = `
+            ${collectionDesc}
             <div class="listItemBodyText secondary" style="margin-bottom: 1em;">Select sections to import from this collection.</div>
             <div id="communitySectionsContainer">
                 <div id="communitySectionsList"></div>
@@ -4724,12 +4725,21 @@ window.KefinTweaksConfig = ${JSON.stringify(configToBackup, null, 2)};`;
 
         sectionsList.innerHTML = `
             <div style="background: rgba(0,0,0,0.2); border-radius: 4px; padding: 0.5em;">
-                ${collection.sections.map((s, i) => `
-                    <label class="checkboxContainer" style="display: flex; align-items: center; padding: 0.5em; margin-bottom: 0.25em;">
-                        <input type="checkbox" class="import-community-check" data-index="${i}" checked>
-                        <span class="listItemBodyText" style="margin-left: 0.5em;">${s.name || 'Unnamed'}</span>
+                ${collection.sections.map((s, i) => {
+                    const name = escapeHtml(s.name || 'Unnamed');
+                    const desc = s.description
+                        ? `<div class="listItemBodyText secondary" style="font-size: 0.85em; margin-top: 0.25em;">${escapeHtml(String(s.description))}</div>`
+                        : '';
+                    return `
+                    <label class="checkboxContainer" style="display: flex; align-items: flex-start; padding: 0.5em; margin-bottom: 0.25em;">
+                        <input type="checkbox" class="import-community-check" data-index="${i}" checked style="margin-top: 0.2em;">
+                        <div style="margin-left: 0.5em; flex: 1; min-width: 0;">
+                            <span class="listItemBodyText">${name}</span>
+                            ${desc}
+                        </div>
                     </label>
-                `).join('')}
+                `;
+                }).join('')}
             </div>
         `;
 
@@ -5290,25 +5300,6 @@ window.KefinTweaksConfig = ${JSON.stringify(configToBackup, null, 2)};`;
                 });
             }
         });
-
-        // Community Collections tab setup
-        setupCommunityCollectionsTab(dialog);
-
-        // Export Sections button
-        const exportSectionsBtn = dialog.querySelector('.export-sections-btn');
-        if (exportSectionsBtn) {
-            exportSectionsBtn.addEventListener('click', () => {
-                showExportDialog();
-            });
-        }
-
-        // Import Sections button
-        const importSectionsBtn = dialog.querySelector('.import-sections-btn');
-        if (importSectionsBtn) {
-            importSectionsBtn.addEventListener('click', () => {
-                showImportDialog();
-            });
-        }
     }
 
     /**
diff --git a/configuration/homeScreenAdvancedEditor.js b/configuration/homeScreenAdvancedEditor.js
index 0e7d8ee..1ae2e9c 100644
--- a/configuration/homeScreenAdvancedEditor.js
+++ b/configuration/homeScreenAdvancedEditor.js
@@ -989,6 +989,7 @@
             endDate: section.endDate || '',
             order: section.order != null ? String(section.order) : '',
             caption: section.caption || '',
+            description: section.description || '',
             renderMode,
             cardFormat: section.cardFormat || 'Poster',
             useRandomQuery: section.useRandomQuery === true,
@@ -1044,6 +1045,8 @@
 
         if (nameEl) state.sectionName = nameEl.value;
         if (captionEl) state.caption = captionEl.value;
+        const descriptionEl = root.querySelector('#section-description');
+        if (descriptionEl) state.description = descriptionEl.value;
         if (groupEl) state.groupSelect = groupEl.value;
         if (groupNewEl) state.groupNew = groupNewEl.value;
         if (visibilityEl) state.sectionVisibility = visibilityEl.value;
@@ -2346,6 +2349,11 @@
                             { hintKey: 'hsae-use-parent-card' }
                         )}
                     </div>
+                    <div class="hsae-field-wrap hsae-section-description" style="margin-top: 1em;">
+                        <label class="listItemBodyText" for="section-description" style="display: block; margin-bottom: 0.25em;">Description</label>
+                        <div class="listItemBodyText secondary" style="margin-bottom: 0.5em; font-size: 0.85em;">Describe the section in more detail, useful when sharing Custom Sections.</div>
+                        <textarea id="section-description" class="fld emby-textarea" rows="3" style="width: 100%; resize: vertical;" placeholder="Optional section description">${escapeHtml(section.description || state.description || '')}</textarea>
+                    </div>
                 </div>
             </details>
         `;
@@ -2578,6 +2586,9 @@
         const captionVal = dialog.querySelector('#section-caption')?.value?.trim() || '';
         if (captionVal) section.caption = captionVal;
         else section.caption = '';
+        const descriptionVal = dialog.querySelector('#section-description')?.value?.trim() || '';
+        if (descriptionVal) section.description = descriptionVal;
+        else section.description = '';
         section.enabled = userEnabledChecked;
         section.userConfigurable = userConfigChecked;