content: generateArtistInfoPageRereleaseTooltip, etc (wip)

Missing tooltip for first release + link hash target
so this is very much still wip

8 files changed, 133 insertions, 24 deletions

diff --git a/src/content/dependencies/generateArtistInfoPageChunk.js b/src/content/dependencies/generateArtistInfoPageChunk.js
index c16d50f3..16ac8387 100644
--- a/src/content/dependencies/generateArtistInfoPageChunk.js
+++ b/src/content/dependencies/generateArtistInfoPageChunk.js
@@ -102,6 +102,7 @@ export default {
       html.tag('dt', accentedLink),
       html.tag('dd',
         html.tag('ul',
+          {class: 'offset-tooltips'},
           slots.items)),
     ]);
   },
diff --git a/src/content/dependencies/generateArtistInfoPageChunkItem.js b/src/content/dependencies/generateArtistInfoPageChunkItem.js
index 9d406c67..af24e150 100644
--- a/src/content/dependencies/generateArtistInfoPageChunkItem.js
+++ b/src/content/dependencies/generateArtistInfoPageChunkItem.js
@@ -1,8 +1,14 @@
 import {empty} from '#sugar';
 
 export default {
+  contentDependencies: ['generateTextWithTooltip'],
   extraDependencies: ['html', 'language'],
 
+  relations: (relation) => ({
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+  }),
+
   slots: {
     content: {
       type: 'html',
@@ -18,10 +24,13 @@ export default {
       validate: v => v.strictArrayOf(v.isHTML),
     },
 
-    rerelease: {type: 'boolean'},
+    rereleaseTooltip: {
+      type: 'html',
+      mutable: false,
+    },
   },
 
-  generate: (slots, {html, language}) =>
+  generate: (relations, slots, {html, language}) =>
     language.encapsulate('artistPage.creditList.entry', entryCapsule =>
       html.tag('li',
         slots.rerelease && {class: 'rerelease'},
@@ -29,8 +38,15 @@ export default {
         language.encapsulate(entryCapsule, workingCapsule => {
           const workingOptions = {entry: slots.content};
 
-          if (slots.rerelease) {
+          if (!html.isBlank(slots.rereleaseTooltip)) {
             workingCapsule += '.rerelease';
+            workingOptions.rerelease =
+              relations.textWithTooltip.slots({
+                attributes: {class: 'rerelease'},
+                text: language.$(entryCapsule, 'rerelease.term'),
+                tooltip: slots.rereleaseTooltip,
+              });
+
             return language.$(workingCapsule, workingOptions);
           }
 
diff --git a/src/content/dependencies/generateArtistInfoPageRereleaseTooltip.js b/src/content/dependencies/generateArtistInfoPageRereleaseTooltip.js
new file mode 100644
index 00000000..6600a5c1
--- /dev/null
+++ b/src/content/dependencies/generateArtistInfoPageRereleaseTooltip.js
@@ -0,0 +1,64 @@
+import {sortChronologically} from '#sort';
+
+export default {
+  contentDependencies: ['generateColorStyleAttribute', 'generateTooltip'],
+  extraDependencies: ['html', 'language'],
+
+  query: (track) => ({
+    firstRelease:
+      sortChronologically(track.allReleases)[0],
+  }),
+
+  relations: (relation, query, track) => ({
+    tooltip:
+      relation('generateTooltip'),
+
+    rereleaseColorStyle:
+      relation('generateColorStyleAttribute', track.color),
+
+    firstReleaseColorStyle:
+      relation('generateColorStyleAttribute', query.firstRelease.color),
+  }),
+
+  data: (query, track) => ({
+    firstReleaseAlbumName:
+      query.firstRelease.album.name,
+
+    rereleaseDate:
+      track.dateFirstReleased ??
+      track.album.date,
+
+    firstReleaseDate:
+      query.firstRelease.dateFirstReleased ??
+      query.firstRelease.album.date,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('artistPage.creditList.entry.rerelease', capsule =>
+      relations.tooltip.slots({
+        attributes: [
+          {class: 'rerelease-tooltip'},
+          relations.rereleaseColorStyle,
+        ],
+
+        content: [
+          language.$(capsule, 'firstRelease', {
+            album:
+              html.metatag('blockwrap',
+                html.tag('a',
+                  {href: '#'},
+                  relations.firstReleaseColorStyle.slot('context', 'primary-only'),
+
+                  language.sanitize(data.firstReleaseAlbumName))),
+          }),
+
+          html.tag('br'),
+
+          language.formatRelativeDate(data.firstReleaseDate, data.rereleaseDate, {
+            considerRoundingDays: true,
+            approximate: true,
+            absolute: true,
+          }),
+        ],
+      })),
+};
diff --git a/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js b/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js
index 1c311036..8be3f404 100644
--- a/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js
+++ b/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js
@@ -5,6 +5,7 @@ export default {
   contentDependencies: [
     'generateArtistInfoPageChunkItem',
     'generateArtistInfoPageOtherArtistLinks',
+    'generateArtistInfoPageRereleaseTooltip',
     'linkTrack',
   ],
 
@@ -62,6 +63,17 @@ export default {
       ];
     }
 
+    query.isRerelease =
+      // It's kinda awkward to perform this chronological sort here,
+      // per track, rather than just reusing the one that's done to
+      // sort all the items on the page altogether... but then, the
+      // sort for the page is actually *a different* sort, on purpsoe.
+      // That sort is according to the dates of the contributions;
+      // this is according to the dates of the tracks. Those can be
+      // different - and it's the latter that determines whether the
+      // track is a rerelease!
+      sortChronologically(query.track.allReleases)[0] !== query.track;
+
     return query;
   },
 
@@ -74,23 +86,17 @@ export default {
 
     otherArtistLinks:
       relation('generateArtistInfoPageOtherArtistLinks', contribs),
+
+    rereleaseTooltip:
+      (query.isRerelease
+        ? relation('generateArtistInfoPageRereleaseTooltip', query.track)
+        : null),
   }),
 
   data: (query) => ({
     duration:
       query.track.duration,
 
-    rerelease:
-      // It's kinda awkward to perform this chronological sort here,
-      // per track, rather than just reusing the one that's done to
-      // sort all the items on the page altogether... but then, the
-      // sort for the page is actually *a different* sort, on purpsoe.
-      // That sort is according to the dates of the contributions;
-      // this is according to the dates of the tracks. Those can be
-      // different - and it's the latter that determines whether the
-      // track is a rerelease!
-      sortChronologically(query.track.allReleases)[0] !== query.track,
-
     contribAnnotations:
       (query.displayedContributions
         ? query.displayedContributions
@@ -101,7 +107,7 @@ export default {
   generate: (data, relations, {html, language}) =>
     relations.template.slots({
       otherArtistLinks: relations.otherArtistLinks,
-      rerelease: data.rerelease,
+      rereleaseTooltip: relations.rereleaseTooltip,
 
       annotation:
         (data.contribAnnotations
diff --git a/src/content/dependencies/generateDatetimestampTemplate.js b/src/content/dependencies/generateDatetimestampTemplate.js
index d9ed036a..a92d15fc 100644
--- a/src/content/dependencies/generateDatetimestampTemplate.js
+++ b/src/content/dependencies/generateDatetimestampTemplate.js
@@ -31,8 +31,10 @@ export default {
           slots.mainContent),
 
       tooltip:
-        slots.tooltip?.slots({
-          attributes: [{class: 'datetimestamp-tooltip'}],
-        }),
+        (html.isBlank(slots.tooltip)
+          ? null
+          : slots.tooltip.slots({
+              attributes: [{class: 'datetimestamp-tooltip'}],
+            })),
     }),
 };
diff --git a/src/content/dependencies/listTracksByDate.js b/src/content/dependencies/listTracksByDate.js
index 66ca4af5..dcfaeaf0 100644
--- a/src/content/dependencies/listTracksByDate.js
+++ b/src/content/dependencies/listTracksByDate.js
@@ -84,7 +84,7 @@ export default {
         data.rereleases.map(rereleases =>
           rereleases.map(rerelease =>
             (rerelease
-              ? {class: 'rerelease'}
+              ? {class: 'rerelease-line'}
               : null))),
     });
   },
diff --git a/src/static/css/site.css b/src/static/css/site.css
index adf0b4b8..82122251 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1022,7 +1022,8 @@ a:not([href]):hover {
 .text-with-tooltip.datetimestamp .text-with-tooltip-interaction-cue,
 .text-with-tooltip.missing-duration .text-with-tooltip-interaction-cue,
 .text-with-tooltip.commentary-date .text-with-tooltip-interaction-cue,
-.text-with-tooltip.wiki-edits .text-with-tooltip-interaction-cue {
+.text-with-tooltip.wiki-edits .text-with-tooltip-interaction-cue,
+.text-with-tooltip.rerelease .text-with-tooltip-interaction-cue {
   cursor: default;
 }
 
@@ -1079,7 +1080,8 @@ li:not(:first-child:last-child) .tooltip,
 
 .datetimestamp-tooltip,
 .missing-duration-tooltip,
-.commentary-date-tooltip {
+.commentary-date-tooltip,
+.rerelease-tooltip {
   padding: 3px 4px 2px 2px;
   left: -10px;
 }
@@ -1244,6 +1246,12 @@ li:not(:first-child:last-child) .tooltip,
   padding: 3px 4.5px;
 }
 
+.rerelease-tooltip .tooltip-content {
+  padding: 3px 4.5px;
+  width: 260px;
+  font-size: 0.9em;
+}
+
 .external-icon {
   display: inline-block;
   padding: 0 3px;
@@ -1260,8 +1268,8 @@ li:not(:first-child:last-child) .tooltip,
   fill: var(--primary-color);
 }
 
-.rerelease,
-.other-group-accent {
+.other-group-accent,
+.rerelease-line {
   opacity: 0.7;
   font-style: oblique;
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index abbc9373..887f4fbb 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -1202,7 +1202,19 @@ artistPage:
       #   artists or contributors, and get dimmed a little compared
       #   to original release track entries.
 
-      rerelease: "{ENTRY} (rerelease)"
+      rerelease:
+        _: "{ENTRY} ({RERELEASE})"
+        term: "rerelease"
+
+        firstRelease: >-
+          First released on {ALBUM}
+
+      firstRelease:
+        _: "{ENTRY} ({FIRST_RELEASE})"
+        term: "first release"
+
+        rerelease: >-
+          {WHEN}: {ALBUM}
 
       # track:
       #   The string without duration is used in both the artist's