polish up album & album extras nav

2 files changed, 112 insertions, 48 deletions

diff --git a/src/page/album-commentary.js b/src/page/album-commentary.js
index b67dab0d..74eee2b0 100644
--- a/src/page/album-commentary.js
+++ b/src/page/album-commentary.js
@@ -1,5 +1,6 @@
 // Album commentary page and index specifications.
 
+import {generateAlbumExtrasPageNav} from './album.js';
 import {accumulateSum} from '../util/sugar.js';
 import {filterAlbumsByCommentary} from '../util/wiki-data.js';
 
@@ -38,7 +39,7 @@ export function write(album) {
         content: html.tag('div', {class: 'long-content'}, [
           generateStickyHeadingContainer({
             title: language.$('albumCommentaryPage.title', {
-              album: link.album(album),
+              album: album.name,
             }),
           }),
 
@@ -70,21 +71,11 @@ export function write(album) {
         ]),
       },
 
-      nav: {
-        linkContainerClasses: ['nav-links-hierarchy'],
-        links: [
-          {toHome: true},
-          {
-            path: ['localized.commentaryIndex'],
-            title: language.$('commentaryIndex.title'),
-          },
-          {
-            html: language.$('albumCommentaryPage.nav.album', {
-              album: link.albumCommentary(album, {class: 'current'}),
-            }),
-          },
-        ],
-      },
+      nav: generateAlbumExtrasPageNav(album, 'commentary', {
+        html,
+        language,
+        link,
+      }),
     }),
   };
 
diff --git a/src/page/album.js b/src/page/album.js
index ab44e656..fb738db8 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -47,14 +47,9 @@ export function write(album, {wikiData}) {
           }));
   };
 
-  const hasCommentaryEntries =
-    !empty([album, ...album.tracks].filter((x) => x.commentary));
   const hasAdditionalFiles = !empty(album.additionalFiles);
   const albumDuration = getTotalDuration(album.tracks);
 
-  // TODO: code this obviously
-  const hasGalleryPage = true;
-
   const displayTrackGroups =
     album.trackGroups &&
       (album.trackGroups.length > 1 ||
@@ -237,14 +232,14 @@ export function write(album, {wikiData}) {
                 hasAdditionalFiles &&
                   generateAdditionalFilesShortcut(album.additionalFiles),
 
-                hasGalleryPage &&
+                checkGalleryPage(album) &&
                   language.$('releaseInfo.viewGallery', {
                     link: link.albumGallery(album, {
                       text: language.$('releaseInfo.viewGallery.link'),
                     }),
                   }),
 
-                hasCommentaryEntries &&
+                checkCommentaryPage(album) &&
                   language.$('releaseInfo.viewCommentary', {
                     link: link.albumCommentary(album, {
                       text: language.$('releaseInfo.viewCommentary.link'),
@@ -343,12 +338,16 @@ export function write(album, {wikiData}) {
                 album: link.album(album, {class: 'current'}),
               }),
             },
+            {
+              divider: false,
+              html: generateAlbumNavLinks(album, null, {
+                generateNavigationLinks,
+                html,
+                language,
+                link,
+              }),
+            }
           ],
-          bottomRowContent: generateAlbumNavLinks(album, null, {
-            generateNavigationLinks,
-            html,
-            language,
-          }),
           content: generateAlbumChronologyLinks(album, null, {
             generateChronologyLinks,
             html,
@@ -373,6 +372,7 @@ export function write(album, {wikiData}) {
       // generateInfoGalleryLinks,
       // generateNavigationLinks,
       getAlbumCover,
+      getAlbumStylesheet,
       getGridHTML,
       getTrackCover,
       // getLinkThemeString,
@@ -382,6 +382,7 @@ export function write(album, {wikiData}) {
       link,
     }) => ({
       title: language.$('albumGalleryPage.title', {album: album.name}),
+      stylesheet: getAlbumStylesheet(album),
 
       themeColor: album.color,
       theme: getThemeString(album.color),
@@ -429,6 +430,12 @@ export function write(album, {wikiData}) {
             })),
         ],
       },
+
+      nav: generateAlbumExtrasPageNav(album, 'gallery', {
+        html,
+        language,
+        link,
+      }),
     }),
   };
 
@@ -634,35 +641,101 @@ export function generateAlbumSecondaryNav(album, currentTrack, {
   };
 }
 
+function checkGalleryPage(_album) {
+  return true;
+}
+
+function checkCommentaryPage(album) {
+  return !empty([album, ...album.tracks].filter((x) => x.commentary));
+}
+
 export function generateAlbumNavLinks(album, currentTrack, {
   generateNavigationLinks,
   html,
   language,
+  link,
+
+  currentExtra = null,
+  showTrackNavigation = true,
+  showExtraLinks = null,
 }) {
   const isTrackPage = !!currentTrack;
 
-  if (album.tracks.length <= 1) {
-    return '';
-  }
+  showExtraLinks ??= currentTrack ? false : true;
+
+  const extraLinks = showExtraLinks ? [
+    checkGalleryPage(album) &&
+      link.albumGallery(album, {
+        class: [currentExtra === 'gallery' && 'current'],
+        text: language.$('albumPage.nav.gallery'),
+      }),
+
+    checkCommentaryPage(album) &&
+      link.albumCommentary(album, {
+        class: [currentExtra === 'commentary' && 'current'],
+        text: language.$('albumPage.nav.commentary'),
+      }),
+  ].filter(Boolean) : [];
+
+  const previousNextLinks =
+    showTrackNavigation &&
+    album.tracks.length > 1 &&
+      generateNavigationLinks(currentTrack, {
+        data: album.tracks,
+        linkKey: 'track',
+        returnAsArray: true,
+      })
+
+  const randomLink =
+    showTrackNavigation &&
+    album.tracks.length > 1 &&
+      html.tag('a',
+        {
+          href: '#',
+          'data-random': 'track-in-album',
+          id: 'random-button'
+        },
+        (isTrackPage
+          ? language.$('trackPage.nav.random')
+          : language.$('albumPage.nav.randomTrack')));
 
-  const randomLink = html.tag('a',
-    {
-      href: '#',
-      'data-random': 'track-in-album',
-      id: 'random-button'
-    },
-    (isTrackPage
-      ? language.$('trackPage.nav.random')
-      : language.$('albumPage.nav.randomTrack')));
-
-  const navigationLinks =
-    generateNavigationLinks(currentTrack, {
-      additionalLinks: [randomLink],
-      data: album.tracks,
-      linkKey: 'track',
-    });
+  const allLinks = [
+    ...previousNextLinks || [],
+    ...extraLinks || [],
+    randomLink,
+  ].filter(Boolean);
+
+  return `(${language.formatUnitList(allLinks)})`;
+}
+
+export function generateAlbumExtrasPageNav(album, currentExtra, {
+  html,
+  language,
+  link,
+}) {
+  return {
+    linkContainerClasses: ['nav-links-hierarchy'],
+    links: [
+      {toHome: true},
+      {
+        html: language.$('albumPage.nav.album', {
+          album: link.album(album, {class: 'current'}),
+        }),
+      },
+      {
+        divider: false,
+        html: generateAlbumNavLinks(album, null, {
+          currentExtra,
+          showTrackNavigation: false,
+          showExtraLinks: true,
 
-  return `(${navigationLinks})`;
+          html,
+          language,
+          link,
+        }),
+      }
+    ],
+  };
 }
 
 export function generateAlbumChronologyLinks(album, currentTrack, {