"from (group)" accents on group album lists

3 files changed, 25 insertions, 8 deletions

diff --git a/src/static/site.css b/src/static/site.css
index b71f0cd5..e664c0ee 100644
--- a/src/static/site.css
+++ b/src/static/site.css
@@ -197,9 +197,11 @@ footer > :last-child {
     fill: var(--primary-color);
 }
 
-.rerelease {
+.rerelease,
+.other-group-accent {
     opacity: 0.7;
     font-style: oblique;
+    white-space: nowrap;
 }
 
 .content-columns {
diff --git a/src/strings-default.json b/src/strings-default.json
index eac71544..dd892392 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -213,6 +213,8 @@
     "groupInfoPage.viewAlbumGallery.link": "album gallery",
     "groupInfoPage.albumList.title": "Albums",
     "groupInfoPage.albumList.item": "({YEAR}) {ALBUM}",
+    "groupInfoPage.albumList.item.withAccent": "{ITEM} {ACCENT}",
+    "groupInfoPage.albumList.item.otherGroupAccent": "(from {GROUP})",
     "groupGalleryPage.title": "{GROUP} - Gallery",
     "groupGalleryPage.infoLine": "{TRACKS} across {ALBUMS}, totaling {TIME}.",
     "groupGalleryPage.anotherGroupLine": "({LINK})",
diff --git a/src/upd8.js b/src/upd8.js
index 5615bb1c..1337d286 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -5474,6 +5474,11 @@ function writeGroupPage(group, {wikiData}) {
     const releasedTracks = releasedAlbums.flatMap(album => album.tracks);
     const totalDuration = getTotalDuration(releasedTracks);
 
+    const albumLines = group.albums.map(album => ({
+        album,
+        otherGroup: album.groups.find(g => g !== group)
+    }));
+
     const infoPage = {
         type: 'page',
         path: ['groupInfo', group.directory],
@@ -5505,14 +5510,22 @@ function writeGroupPage(group, {wikiData}) {
                         })
                     }</p>
                     <ul>
-                        ${group.albums.map(album => fixWS`
-                            <li>${
-                                strings('groupInfoPage.albumList.item', {
-                                    year: album.date.getFullYear(),
-                                    album: link.album(album)
+                        ${albumLines.map(({ album, otherGroup }) => {
+                            const item = strings('groupInfoPage.albumList.item', {
+                                year: album.date.getFullYear(),
+                                album: link.album(album)
+                            });
+                            return html.tag('li', (otherGroup
+                                ? strings('groupInfoPage.albumList.item.withAccent', {
+                                    item,
+                                    accent: html.tag('span',
+                                        {class: 'other-group-accent'},
+                                        strings('groupInfoPage.albumList.item.otherGroupAccent', {
+                                            group: link.groupInfo(otherGroup, {color: false})
+                                        }))
                                 })
-                            }</li>
-                        `).join('\n')}
+                                : item));
+                        }).join('\n')}
                     </ul>
                 `
             },