2 files changed, 79 insertions, 27 deletions

diff --git a/src/content/dependencies/generateTrackListDividedByGroups.js b/src/content/dependencies/generateTrackListDividedByGroups.js
index e070ac35..a9326205 100644
--- a/src/content/dependencies/generateTrackListDividedByGroups.js
+++ b/src/content/dependencies/generateTrackListDividedByGroups.js
@@ -1,12 +1,24 @@
-import {empty} from '#sugar';
+import {empty, stitchArrays} from '#sugar';
 
 import groupTracksByGroup from '../util/groupTracksByGroup.js';
 
 export default {
-  contentDependencies: ['generateTrackList', 'linkGroup'],
+  contentDependencies: [
+    'generateContentHeading',
+    'generateTrackList',
+    'linkGroup',
+  ],
+
   extraDependencies: ['html', 'language'],
 
-  relations(relation, tracks, groups) {
+  query: (tracks, groups) => ({
+    lists:
+      (empty(groups)
+        ? []
+        : groupTracksByGroup(tracks, groups)),
+  }),
+
+  relations(relation, query, tracks, groups) {
     if (empty(tracks)) {
       return {};
     }
@@ -18,36 +30,77 @@ export default {
       };
     }
 
-    const lists = groupTracksByGroup(tracks, groups);
-
     return {
+      contentHeading:
+        relation('generateContentHeading'),
+
       groupedLists:
-        Array.from(lists.entries()).map(([groupOrOther, tracks]) => ({
-          ...(groupOrOther === 'other'
-                ? {other: true}
-                : {groupLink: relation('linkGroup', groupOrOther)}),
-
-          list:
-            relation('generateTrackList', tracks),
-        })),
+        Array.from(query.lists.entries())
+          .map(([groupOrOther, tracks]) => ({
+            ...(groupOrOther === 'other'
+                  ? {other: true}
+                  : {groupLink: relation('linkGroup', groupOrOther)}),
+
+            list:
+              relation('generateTrackList', tracks),
+          })),
     };
   },
 
-  generate(relations, {html, language}) {
+  data: (query) => ({
+    groupNames:
+      Array.from(query.lists.keys())
+        .map(groupOrOther =>
+          (groupOrOther === 'group'
+            ? null
+            : groupOrOther.name)),
+  }),
+
+  slots: {
+    headingString: {
+      type: 'string',
+    },
+  },
+
+  generate(data, relations, slots, {html, language}) {
     if (relations.flatList) {
       return relations.flatList;
     }
 
     return html.tag('dl',
-      relations.groupedLists.map(({other, groupLink, list}) => [
-        html.tag('dt',
-          (other
-            ? language.$('trackList.group.fromOther')
-            : language.$('trackList.group', {
-                group: groupLink
-              }))),
-
-        html.tag('dd', list),
-      ]));
+      stitchArrays({
+        groupName: data.groupNames,
+        listEntry: relations.groupedLists
+      }).map(({
+          groupName,
+          listEntry: {other, groupLink, list},
+        }) => [
+          (slots.headingString
+            ? relations.contentHeading.clone().slots({
+                tag: 'dt',
+
+                title:
+                  (other
+                    ? language.$('trackList.fromOther')
+                    : language.$('trackList.fromGroup', {
+                        group: groupLink
+                      })),
+
+                stickyTitle:
+                  (other
+                    ? language.$(slots.headingString, 'sticky', 'fromOther')
+                    : language.$(slots.headingString, 'sticky', 'fromGroup', {
+                        group: groupName,
+                      })),
+              })
+            : html.tag('dt',
+                (other
+                  ? language.$('trackList.fromOther')
+                  : language.$('trackList.fromGroup', {
+                      group: groupLink
+                    })))),
+
+          html.tag('dd', list),
+        ]));
   },
 };
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 1d8c3d84..359e8854 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -377,9 +377,8 @@ trackList:
     withDuration: "{SECTION}: ({DURATION})"
     sticky: "{SECTION}:"
 
-  group:
-    _: "From {GROUP}:"
-    fromOther: "From somewhere else:"
+  fromGroup: "From {GROUP}:"
+  fromOther: "From somewhere else:"
 
   item:
     _: "{TRACK}"