5 files changed, 151 insertions, 31 deletions
diff --git a/src/content/dependencies/generateDividedFeaturedInFlashesList.js b/src/content/dependencies/generateDividedFeaturedInFlashesList.js
new file mode 100644
index 00000000..93e29991
--- /dev/null
+++ b/src/content/dependencies/generateDividedFeaturedInFlashesList.js
@@ -0,0 +1,142 @@
+import {empty, filterMultipleArrays, stitchArrays} from '#sugar';
+
+export default {
+  sprawl: ({flashSideData, wikiInfo}) => ({
+    enableFlashesAndGames:
+      wikiInfo.enableFlashesAndGames,
+
+    divideFlashListsBySides:
+      wikiInfo.divideFlashListsBySides,
+
+    allSides:
+      flashSideData,
+  }),
+
+  query(sprawl, features, _contextTrack) {
+    if (!sprawl.enableFlashesAndGames) {
+      return {dividingSides: [], dividedFeatures: []};
+    }
+
+    const {allSides} = sprawl;
+
+    const divisions = new Map();
+    const dividingSideIndices = [];
+    for (const {side, label} of sprawl.divideFlashListsBySides) {
+      divisions.set(side, {label, features: []});
+      dividingSideIndices.push(allSides.indexOf(side));
+    }
+
+    for (const feature of features) {
+      const sideIndex =
+        allSides.indexOf(feature.flash.side);
+
+      const closestDividingSideIndex =
+        dividingSideIndices.findLast(i => i <= sideIndex);
+
+      const closestDividingSide =
+        allSides.at(closestDividingSideIndex);
+
+      if (closestDividingSide) {
+        divisions.get(closestDividingSide).features.push(feature);
+      }
+    }
+
+    const dividingSides = Array.from(divisions.keys());
+    const dividingLabels = Array.from(divisions.values()).map(({label}) => label);
+    const dividedFeatures = Array.from(divisions.values()).map(({features}) => features);
+
+    filterMultipleArrays(
+      dividingSides,
+      dividingLabels,
+      dividedFeatures,
+      (_side, _label, dividedFeatures) => !empty(dividedFeatures));
+
+    return {dividingSides, dividingLabels, dividedFeatures};
+  },
+
+  relations: (relation, query, sprawl, features, contextTrack) => ({
+    flatList:
+      (empty(sprawl.divideFlashListsBySides)
+        ? relation('generateTrackFeaturedInFlashesList', features, contextTrack)
+        : null),
+
+    contentHeading:
+      relation('generateContentHeading'),
+
+    dividingSideLinks:
+      query.dividingSides
+        .map(side => relation('linkFlashSide', side)),
+
+    dividedFlashLists:
+      query.dividedFeatures
+        .map(features => relation('generateTrackFeaturedInFlashesList', features, contextTrack)),
+  }),
+
+  data: (query, _sprawl, _tracks) => ({
+    dividingSideNames:
+      query.dividingSides
+        .map(side => side.name),
+
+    dividingLabels:
+      query.dividingLabels,
+  }),
+
+  slots: {
+    headingString: {
+      type: 'string',
+    },
+  },
+
+  generate(data, relations, slots, {html, language}) {
+    if (relations.flatList) {
+      return relations.flatList;
+    }
+
+    stitchArrays({
+      sideLink: relations.dividingSideLinks,
+      label: data.dividingLabels,
+    }).forEach(({sideLink, label}) => {
+        sideLink.setSlot('color', false);
+
+        if (label) {
+          sideLink.setSlot('content', language.sanitize(label));
+        }
+      });
+
+    return (
+      html.tag('dl', {class: 'division-list'},
+        {[html.onlyIfContent]: true},
+
+        language.encapsulate('flashList', listCapsule =>
+          stitchArrays({
+            sideLink: relations.dividingSideLinks,
+            flashList: relations.dividedFlashLists,
+            sideName: data.dividingSideNames,
+            label: data.dividingLabels,
+          }).map(({sideLink, flashList, sideName, label}) => [
+              language.encapsulate(listCapsule, 'underSide', capsule =>
+                (slots.headingString
+                  ? relations.contentHeading.clone().slots({
+                      tag: 'dt',
+
+                      title:
+                        language.$(capsule, {side: sideLink}),
+
+                      stickyTitle:
+                        language.$(slots.headingString, 'sticky', 'fromGroup', {
+                          side:
+                            (label
+                              ? language.sanitize(label)
+                              : language.sanitize(sideName)),
+                        }),
+                    })
+
+                  : html.tag('dt',
+                      language.$(capsule, {
+                        side: sideLink,
+                      })))),
+
+              html.tag('dd', flashList),
+            ]))));
+  },
+};
diff --git a/src/content/dependencies/generateDividedTrackList.js b/src/content/dependencies/generateDividedTrackList.js
index f255fbaf..ea349ec8 100644
--- a/src/content/dependencies/generateDividedTrackList.js
+++ b/src/content/dependencies/generateDividedTrackList.js
@@ -100,7 +100,7 @@ export default {
 
                     title:
                       language.$(capsule, {
-                        group: groupLink
+                        group: groupLink.slot('color', false),
                       }),
 
                     stickyTitle:
@@ -110,7 +110,7 @@ export default {
                   })
                 : html.tag('dt',
                     language.$(capsule, {
-                      group: groupLink
+                      group: groupLink.slot('color', false),
                     })))),
 
             html.tag('dd', trackList),
diff --git a/src/content/dependencies/generateTrackInfoPageFeaturedByFlashesList.js b/src/content/dependencies/generateTrackFeaturedInFlashesList.js
index cd7bb014..f13368d1 100644
--- a/src/content/dependencies/generateTrackInfoPageFeaturedByFlashesList.js
+++ b/src/content/dependencies/generateTrackFeaturedInFlashesList.js
@@ -1,36 +1,14 @@
-import {sortFlashesChronologically} from '#sort';
 import {stitchArrays} from '#sugar';
 
 export default {
-  sprawl: ({wikiInfo}) => ({
-    enableFlashesAndGames:
-      wikiInfo.enableFlashesAndGames,
-  }),
-
-  query: (sprawl, track) => ({
-    sortedFeatures:
-      (sprawl.enableFlashesAndGames
-        ? sortFlashesChronologically(
-            track.allReleases.flatMap(track =>
-              track.featuredInFlashes.map(flash => ({
-                flash,
-                track,
-
-                // These properties are only used for the sort.
-                act: flash.act,
-                date: flash.date,
-              }))))
-        : []),
-  }),
-
-  relations: (relation, query, _sprawl, track) => ({
+  relations: (relation, features, track) => ({
     flashLinks:
-      query.sortedFeatures
+      features
         .map(({flash}) => relation('linkFlash', flash)),
 
     trackLinks:
-      query.sortedFeatures
-        .map(({track: directlyFeaturedTrack}) =>
+      features
+        .map(({as: directlyFeaturedTrack}) =>
           (directlyFeaturedTrack === track
             ? null
          : directlyFeaturedTrack.name === track.name
@@ -47,7 +25,7 @@ export default {
         trackLink: relations.trackLinks,
       }).map(({flashLink, trackLink}) => {
           const attributes = html.attributes();
-          const parts = ['releaseInfo.flashesThatFeature.item'];
+          const parts = ['flashList.item'];
           const options = {flash: flashLink};
 
           if (trackLink) {
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 9ff47ec3..5dce680b 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -108,7 +108,7 @@ export default {
         track),
 
     flashesThatFeatureList:
-      relation('generateTrackInfoPageFeaturedByFlashesList', track),
+      relation('generateDividedFeaturedInFlashesList', track.featuredInFlashes, track),
 
     lyricsSection:
       relation('generateLyricsSection', track.lyrics),
diff --git a/src/content/dependencies/listTracksInFlashesByAlbum.js b/src/content/dependencies/listTracksInFlashesByAlbum.js
index db5472db..d1d659af 100644
--- a/src/content/dependencies/listTracksInFlashesByAlbum.js
+++ b/src/content/dependencies/listTracksInFlashesByAlbum.js
@@ -16,7 +16,7 @@ export default {
     const flashes =
       tracks.map(tracks =>
         tracks.map(track =>
-          track.featuredInFlashes));
+          track.ownFeaturedInFlashes));
 
     // Filter out tracks that aren't featured in any flashes.
     // This listing doesn't perform any sorting within albums.