Merge branch 'preview' into time-tooltips

4 files changed, 135 insertions, 43 deletions

diff --git a/src/content/dependencies/generateAdditionalNamesBox.js b/src/content/dependencies/generateAdditionalNamesBox.js
index f7fa3b00..63427c58 100644
--- a/src/content/dependencies/generateAdditionalNamesBox.js
+++ b/src/content/dependencies/generateAdditionalNamesBox.js
@@ -1,48 +1,20 @@
-import {stitchArrays} from '#sugar';
-
 export default {
-  contentDependencies: ['transformContent'],
+  contentDependencies: ['generateAdditionalNamesBoxItem'],
   extraDependencies: ['html', 'language'],
 
   relations: (relation, additionalNames) => ({
-    names:
-      additionalNames.map(({name}) =>
-        relation('transformContent', name)),
-
-    annotations:
-      additionalNames.map(({annotation}) =>
-        (annotation
-          ? relation('transformContent', annotation)
-          : null)),
+    items:
+      additionalNames
+        .map(entry => relation('generateAdditionalNamesBoxItem', entry)),
   }),
 
-  generate: (relations, {html, language}) => {
-    const names =
-      relations.names.map(name =>
-        html.tag('span', {class: 'additional-name'},
-          name.slot('mode', 'inline')));
-
-    const annotations =
-      relations.annotations.map(annotation =>
-        (annotation
-          ? html.tag('span', {class: 'annotation'},
-              language.$('misc.additionalNames.item.annotation', {
-                annotation:
-                  annotation.slot('mode', 'inline'),
-              }))
-          : null));
-
-    return html.tag('div', {id: 'additional-names-box'}, [
+  generate: (relations, {html, language}) =>
+    html.tag('div', {id: 'additional-names-box'}, [
       html.tag('p',
         language.$('misc.additionalNames.title')),
 
       html.tag('ul',
-        stitchArrays({name: names, annotation: annotations})
-          .map(({name, annotation}) =>
-            html.tag('li',
-              (annotation
-                ? language.$('misc.additionalNames.item.withAnnotation', {name, annotation})
-                : language.$('misc.additionalNames.item', {name}))))),
-    ]);
-  },
+        relations.items
+          .map(item => html.tag('li', item))),
+    ]),
 };
diff --git a/src/content/dependencies/generateAdditionalNamesBoxItem.js b/src/content/dependencies/generateAdditionalNamesBoxItem.js
new file mode 100644
index 00000000..bb4c8477
--- /dev/null
+++ b/src/content/dependencies/generateAdditionalNamesBoxItem.js
@@ -0,0 +1,68 @@
+import {stitchArrays} from '#sugar';
+
+export default {
+  contentDependencies: ['linkTrack', 'transformContent'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, entry) => ({
+    nameContent:
+      relation('transformContent', entry.name),
+
+    annotationContent:
+      (entry.annotation
+        ? relation('transformContent', entry.annotation)
+        : null),
+
+    trackLinks:
+      (entry.from
+        ? entry.from.map(track => relation('linkTrack', track))
+        : null),
+  }),
+
+  data: (entry) => ({
+    albumNames:
+      (entry.from
+        ? entry.from.map(track => track.album.name)
+        : null),
+  }),
+
+  generate: (data, relations, {html, language}) => {
+    const prefix = 'misc.additionalNames.item';
+
+    const itemParts = [prefix];
+    const itemOptions = {};
+
+    itemOptions.name =
+      html.tag('span', {class: 'additional-name'},
+        relations.nameContent.slot('mode', 'inline'));
+
+    const accentParts = [prefix, 'accent'];
+    const accentOptions = {};
+
+    if (relations.annotationContent) {
+      accentParts.push('withAnnotation');
+      accentOptions.annotation =
+        relations.annotationContent.slot('mode', 'inline');
+    }
+
+    if (relations.trackLinks) {
+      accentParts.push('withAlbums');
+      accentOptions.albums =
+        language.formatConjunctionList(
+          stitchArrays({
+            trackLink: relations.trackLinks,
+            albumName: data.albumNames,
+          }).map(({trackLink, albumName}) =>
+              trackLink.slot('content', albumName)));
+    }
+
+    if (accentParts.length > 2) {
+      itemParts.push('withAccent');
+      itemOptions.accent =
+        html.tag('span', {class: 'accent'},
+          language.$(...accentParts, accentOptions));
+    }
+
+    return language.$(...itemParts, itemOptions);
+  },
+};
diff --git a/src/content/dependencies/generateTrackAdditionalNamesBox.js b/src/content/dependencies/generateTrackAdditionalNamesBox.js
new file mode 100644
index 00000000..bad04b74
--- /dev/null
+++ b/src/content/dependencies/generateTrackAdditionalNamesBox.js
@@ -0,0 +1,53 @@
+import {empty} from '#sugar';
+
+export default {
+  contentDependencies: ['generateAdditionalNamesBox'],
+  extraDependencies: ['html'],
+
+  query: (track) => {
+    const {
+      additionalNames: own,
+      sharedAdditionalNames: shared,
+      inferredAdditionalNames: inferred,
+    } = track;
+
+    if (empty(own) && empty(shared) && empty(inferred)) {
+      return {combinedList: []};
+    }
+
+    const firstFilter =
+      (empty(own)
+        ? new Set()
+        : new Set(own.map(({name}) => name)));
+
+    const sharedFiltered =
+      shared.filter(({name}) => !firstFilter.has(name))
+
+    const secondFilter =
+      new Set([
+        ...firstFilter,
+        ...sharedFiltered.map(({name}) => name),
+      ]);
+
+    const inferredFiltered =
+      inferred.filter(({name}) => !secondFilter.has(name));
+
+    return {
+      combinedList: [
+        ...own,
+        ...sharedFiltered,
+        ...inferredFiltered,
+      ],
+    };
+  },
+
+  relations: (relation, query) => ({
+    box:
+      (empty(query.combinedList)
+        ? null
+        : relation('generateAdditionalNamesBox', query.combinedList)),
+  }),
+
+  generate: (relations, {html}) =>
+    relations.box ?? html.blank(),
+};
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 11fb2b9c..041f6bbc 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -7,7 +7,6 @@ export default {
   contentDependencies: [
     'generateAbsoluteDatetimestamp',
     'generateAdditionalFilesShortcut',
-    'generateAdditionalNamesBox',
     'generateAlbumAdditionalFilesList',
     'generateAlbumNavAccent',
     'generateAlbumSidebar',
@@ -19,6 +18,7 @@ export default {
     'generateContributionList',
     'generatePageLayout',
     'generateRelativeDatetimestamp',
+    'generateTrackAdditionalNamesBox',
     'generateTrackCoverArtwork',
     'generateTrackList',
     'generateTrackListDividedByGroups',
@@ -111,10 +111,9 @@ export default {
       list: relation('generateAlbumAdditionalFilesList', album, additionalFiles),
     });
 
-    if (!empty(track.additionalNames)) {
-      relations.additionalNamesBox =
-        relation('generateAdditionalNamesBox', track.additionalNames);
-    }
+    // This'll take care of itself being blank if there's nothing to show here.
+    relations.additionalNamesBox =
+      relation('generateTrackAdditionalNamesBox', track);
 
     if (track.hasUniqueCoverArt || album.hasCoverArt) {
       relations.cover =
@@ -331,7 +330,7 @@ export default {
         title: language.$('trackPage.title', {track: data.name}),
         headingMode: 'sticky',
 
-        additionalNames: relations.additionalNamesBox ?? null,
+        additionalNames: relations.additionalNamesBox,
 
         color: data.color,
         styleRules: [relations.albumStyleRules],