content, data, css: align group info page album list with gallery tabs preview

1 files changed, 97 insertions, 38 deletions

diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
index b6a59097..32c13c57 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js
@@ -1,17 +1,44 @@
 import {empty} from '#sugar';
 
 export default {
-  query: (album, group) => {
-    const otherCategory =
-      album.groups
-        .map(group => group.category)
-        .find(category => category !== group.category);
+  query(album, group) {
+    if (album.groups.length > 1) {
+      const currentCategory = group.category;
 
-    const otherGroups =
-      album.groups
-        .filter(group => group.category === otherCategory);
+      const candidateGroups =
+        album.groups
+          .filter(group => !group.excludeFromOtherGroupAlbumSummaries);
 
-    return {otherGroups};
+      const categoriesToGroups =
+        Map.groupBy(candidateGroups, group => group.category);
+
+      for (const [category, groups] of categoriesToGroups) {
+        if (category === currentCategory) {
+          continue;
+        }
+
+        if (empty(groups)) {
+          continue;
+        }
+
+        return {detail: 'groups', detailGroups: groups};
+      }
+    }
+
+    if (!empty(album.artistContribs)) {
+      if (album.artistContribs.length >= 2) {
+        return {detail: 'artists'};
+      }
+
+      const onlyAlbumArtist = album.artistContribs[0].artist;
+      const firstGroupArtist = group.closelyLinkedArtists[0]?.artist;
+
+      if (!firstGroupArtist || onlyAlbumArtist !== firstGroupArtist) {
+        return {detail: 'artists'};
+      }
+    }
+
+    return {detail: null};
   },
 
   relations: (relation, query, album, _group) => ({
@@ -30,21 +57,25 @@ export default {
       relation('generateArtistCredit', album.artistContribs, []),
 
     otherGroupLinks:
-      query.otherGroups
-        .map(group => relation('linkGroup', group)),
+      (query.detail === 'groups'
+        ? query.detailGroups.map(group => relation('linkGroup', group))
+        : []),
   }),
 
-  data: (_query, album, group) => ({
+  data: (query, album, group) => ({
     groupName:
       group.name,
 
     notFromThisGroup:
       !group.albums.includes(album),
+
+    autoDetailArtists:
+      query.detail === 'artists',
   }),
 
   slots: {
-    accentMode: {
-      validate: v => v.is('groups', 'artists'),
+    detail: {
+      validate: v => v.is('auto', 'artists'),
     },
   },
 
@@ -73,13 +104,56 @@ export default {
               });
           }
 
+          const artistCapsule = language.encapsulate(itemCapsule, 'withArtists');
+          const {artistCredit} = relations;
+
+          artistCredit.setSlots({
+            normalStringKey:
+              artistCapsule + '.by',
+
+            featuringStringKey:
+              artistCapsule + '.featuring',
+
+            normalFeaturingStringKey:
+              artistCapsule + '.by.featuring',
+          });
+
+          let showDetail = null;
+          switch (slots.detail) {
+            case null:
+              break;
+
+            case 'artists': {
+              if (!html.isBlank(artistCredit)) {
+                showDetail = 'artists';
+                break;
+              }
+
+              break;
+            }
+
+            case 'auto': {
+              if (data.notFromThisGroup) {
+                showDetail = 'not from this group';
+                break;
+              }
+
+              if (!empty(relations.otherGroupLinks)) {
+                showDetail = 'other groups';
+                break;
+              }
+
+              if (!html.isBlank(artistCredit) && data.autoDetailArtists) {
+                showDetail = 'artists';
+              }
+
+              break;
+            }
+          }
+
           const otherGroupCapsule = language.encapsulate(itemCapsule, 'withOtherGroup');
 
-          if (
-            (slots.accentMode === 'groups' ||
-             slots.accentMode === null) &&
-            data.notFromThisGroup
-          ) {
+          if (showDetail === 'not from this group') {
             workingCapsule += '.withOtherGroup';
             workingOptions.otherGroupAccent =
               html.tag('span', {class: 'other-group-accent'},
@@ -87,10 +161,9 @@ export default {
                   group:
                     data.groupName,
                 }));
-          } else if (
-            slots.accentMode === 'groups' &&
-            !empty(relations.otherGroupLinks)
-          ) {
+          }
+
+          if (showDetail === 'other groups') {
             workingCapsule += '.withOtherGroup';
             workingOptions.otherGroupAccent =
               html.tag('span', {class: 'other-group-accent'},
@@ -102,21 +175,7 @@ export default {
                 }));
           }
 
-          const artistCapsule = language.encapsulate(itemCapsule, 'withArtists');
-          const {artistCredit} = relations;
-
-          artistCredit.setSlots({
-            normalStringKey:
-              artistCapsule + '.by',
-
-            featuringStringKey:
-              artistCapsule + '.featuring',
-
-            normalFeaturingStringKey:
-              artistCapsule + '.by.featuring',
-          });
-
-          if (slots.accentMode === 'artists' && !html.isBlank(artistCredit)) {
+          if (showDetail === 'artists') {
             workingCapsule += '.withArtists';
             workingOptions.by =
               html.tag('span', {class: 'by'},