content: gAIPAdditionalFilesChunkItem: model more like listing

4 files changed, 121 insertions, 96 deletions

diff --git a/src/content/dependencies/generateArtistInfoPageAdditionalFilesChunkItem.js b/src/content/dependencies/generateArtistInfoPageAdditionalFilesChunkItem.js
index 8352edba..c1dc8787 100644
--- a/src/content/dependencies/generateArtistInfoPageAdditionalFilesChunkItem.js
+++ b/src/content/dependencies/generateArtistInfoPageAdditionalFilesChunkItem.js
@@ -1,3 +1,5 @@
+import {stitchArrays} from '#sugar';
+
 export default {
   query(_artist, contribs) {
     const query = {};
@@ -27,6 +29,11 @@ export default {
       relation('generateArtistCredit',
         query.additionalFile.artistContribs,
         [artist.mockSimpleContribution]),
+
+    fileLinks:
+      query.additionalFile.filenames
+        .map(filename =>
+          relation('linkAdditionalFile', query.additionalFile, filename)),
   }),
 
   data: (query, _artist, contribs) => ({
@@ -38,8 +45,8 @@ export default {
     title:
       query.additionalFile.title,
 
-    files:
-      query.additionalFile.filenames.length,
+    filenames:
+      query.additionalFile.filenames,
 
     contribAnnotationParts:
       contribs.flatMap(contrib => contrib.annotationParts),
@@ -57,59 +64,75 @@ export default {
     },
   },
 
-  generate: (data, relations, slots, {html, language}) =>
-    relations.template.slots({
+  generate(data, relations, slots, {html, language}) {
+    const numFiles = data.filenames.length;
+    const capsule =
+      language.encapsulate(
+        'artistPage.creditList.entry', data.for, slots.string);
+
+    relations.template.setSlots({
       annotation:
-        (data.contribAnnotationParts
-          ? language.formatUnitList(data.contribAnnotationParts)
-          : html.blank()),
-
-      content:
-        language.encapsulate('artistPage.creditList.entry', entryCapsule => {
-          let workingCapsule = entryCapsule;
-          let workingOptions = {};
-
-          workingCapsule += '.' + data.for + '.' + slots.string;
-
-          const additionalFileCapsule = workingCapsule;
-
-          if (data.for === 'track') {
-            workingOptions.track =
-              relations.trackLink;
-          }
-
-          if (data.title) {
-            relations.artistCredit.setSlots({
-              normalStringKey:
-                additionalFileCapsule + '.credit.alongsideTitle',
-            });
-          } else if (data.files && !slots.disableStandaloneWithFiles) {
-            relations.artistCredit.setSlots({
-              normalStringKey:
-                additionalFileCapsule + '.credit.standaloneWithFiles',
-
-              additionalStringOptions: {
-                files: language.countFiles(data.files, {unitOnly: true}),
-              },
-            });
-          } else {
-            relations.artistCredit.setSlots({
-              normalStringKey:
-                additionalFileCapsule + '.credit',
-            });
-          }
-
-          if (!html.isBlank(relations.artistCredit)) {
-            workingCapsule += '.withCredit';
-            workingOptions.credit = relations.artistCredit;
-          }
-
-          if (data.title) {
-            workingCapsule += '.withTitle';
-            workingOptions.title = language.sanitize(data.title);
-          }
-
-          return language.$(workingCapsule, workingOptions);
-        }),
-    }),
+        language.formatUnitList(data.contribAnnotationParts),
+    });
+
+    const titleLine =
+      language.encapsulate(capsule, workingCapsule => {
+        const workingOptions = {};
+
+        const titlePart =
+          (data.title
+            ? language.sanitize(data.title)
+            : language.$(capsule, 'placeholderTitle'));
+
+        workingOptions.title =
+          (numFiles <= 1
+            ? relations.fileLinks[0].slot('content', titlePart)
+            : html.tag('b', titlePart));
+
+        if (data.for === 'track') {
+          workingOptions.track = relations.trackLink;
+        }
+
+        relations.artistCredit.setSlots({
+          normalStringKey: capsule + '.credit',
+        });
+
+        if (!html.isBlank(relations.artistCredit)) {
+          workingCapsule += '.withCredit';
+          workingOptions.credit = relations.artistCredit;
+        }
+
+        if (numFiles === 0) {
+          workingCapsule += '.withNoFiles';
+        } else if (numFiles >= 2) {
+          workingCapsule += '.withMultipleFiles';
+          workingOptions.files =
+            language.countFiles(numFiles, {unit: true});
+        }
+
+        return language.$(workingCapsule, workingOptions);
+      });
+
+    if (relations.fileLinks.length <= 1) {
+      relations.template.setSlot('content', titleLine);
+    } else {
+      const summary =
+        html.tag('summary',
+          html.tag('span', titleLine));
+
+      const list =
+        html.tag('ul',
+          stitchArrays({
+            link: relations.fileLinks,
+            filename: data.filenames,
+          }).map(({link, filename}) =>
+              html.tag('li',
+                link.slot('content', language.sanitize(filename)))));
+
+      const details = html.tag('details', [summary, list]);
+      relations.template.setSlot('content', details);
+    }
+
+    return relations.template;
+  },
 };
diff --git a/src/content/dependencies/generateListAllAdditionalFilesChunk.js b/src/content/dependencies/generateListAllAdditionalFilesChunk.js
index fea565cb..dff652f6 100644
--- a/src/content/dependencies/generateListAllAdditionalFilesChunk.js
+++ b/src/content/dependencies/generateListAllAdditionalFilesChunk.js
@@ -114,7 +114,7 @@ export default {
                             }))));
 
                     return (
-                      html.tag('li', {class: 'has-details'},
+                      html.tag('li',
                         html.tag('details', [summary, list]))
                     );
                   })))),
diff --git a/src/static/css/miscellany.css b/src/static/css/miscellany.css
index 0f4cf1a9..1f2cf890 100644
--- a/src/static/css/miscellany.css
+++ b/src/static/css/miscellany.css
@@ -103,8 +103,7 @@
     line-height: 1.1;
   }
 
-  /* "has-details" means a "has a <details> element" here. */
-  ul > li.has-details {
+  ul > li:has(> details) {
     list-style-type: none;
     margin-left: -17px;
   }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 2f50fe9b..96379441 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -1797,66 +1797,69 @@ artistPage:
 
       track.miscellaneousAdditionalFile:
         _: >-
-          {TRACK}
-
-        withTitle: >-
-          {TRACK} — {TITLE}
+          {TITLE}: {TRACK}
 
         withCredit: >-
-          {TRACK}: {CREDIT}
+          {TITLE} ({CREDIT}): {TRACK}
 
-        withCredit.withTitle: >-
-          {TRACK}: {TITLE} {CREDIT}
+        withMultipleFiles: >-
+          {TITLE}: {TRACK} ({FILES})
 
-        credit: >-
-          files by {ARTISTS}
+        withNoFiles: >-
+          {TITLE}: {TRACK} (no files)
 
-        credit.standaloneWithFiles: >-
-          {FILES} by {ARTISTS}
+        withCredit.withMultipleFiles: >-
+          {TITLE} ({CREDIT}): {TRACK} ({FILES})
 
-        credit.alongsideTitle: >-
-          by {ARTISTS}
+        withCredit.withNoFiles: >-
+          {TITLE} ({CREDIT}): {TRACK} (no files)
+
+        placeholderTitle: "Additional file"
+        credit: "by {ARTISTS}"
 
       track.sheetMusicFile:
         _: >-
-          {TRACK}
-
-        withTitle: >-
-          {TRACK} — {TITLE}
+          {TITLE}: {TRACK}
 
         withCredit: >-
-          {TRACK}: {CREDIT}
+          {TITLE} ({CREDIT}): {TRACK}
 
-        withCredit.withTitle: >-
-          {TRACK}: {TITLE} {CREDIT}
+        withMultipleFiles: >-
+          {TITLE}: {TRACK} ({FILES})
 
-        credit: >-
-          sheet music by {ARTISTS}
+        withNoFiles: >-
+          {TITLE}: {TRACK} (no files)
 
-        credit.alongsideTitle: >-
-          by {ARTISTS}
+        withCredit.withMultipleFiles: >-
+          {TITLE} ({CREDIT}): {TRACK} ({FILES})
+
+        withCredit.withNoFiles: >-
+          {TITLE} ({CREDIT}): {TRACK} (no files)
+
+        placeholderTitle: "Sheet music"
+        credit: "by {ARTISTS}"
 
       track.midiProjectFile:
         _: >-
-          {TRACK}
-
-        withTitle: >-
-          {TRACK} — {TITLE}
+          {TITLE}: {TRACK}
 
         withCredit: >-
-          {TRACK}: {CREDIT}
+          {TITLE} ({CREDIT}): {TRACK}
 
-        withCredit.withTitle: >-
-          {TRACK}: {TITLE} {CREDIT}
+        withMultipleFiles: >-
+          {TITLE}: {TRACK} ({FILES})
 
-        credit: >-
-          files by {ARTISTS}
+        withNoFiles: >-
+          {TITLE}: {TRACK} (no files)
 
-        credit.standaloneWithFiles: >-
-          {FILES} by {ARTISTS}
+        withCredit.withMultipleFiles: >-
+          {TITLE} ({CREDIT}): {TRACK} ({FILES})
 
-        credit.alongsideTitle: >-
-          by {ARTISTS}
+        withCredit.withNoFiles: >-
+          {TITLE} ({CREDIT}): {TRACK} (no files)
+
+        placeholderTitle: "MIDI or project music"
+        credit: "by {ARTISTS}"
 
       # album:
       #   The artist info page doesn't display if the artist is