1 files changed, 36 insertions, 68 deletions
diff --git a/src/content/dependencies/generateAlbumSidebar.js b/src/content/dependencies/generateAlbumSidebar.js
index 5ef4501..355a9a9 100644
--- a/src/content/dependencies/generateAlbumSidebar.js
+++ b/src/content/dependencies/generateAlbumSidebar.js
@@ -1,79 +1,47 @@
 export default {
   contentDependencies: [
     'generateAlbumSidebarGroupBox',
-    'generateAlbumSidebarTrackSection',
-    'linkAlbum',
+    'generateAlbumSidebarTrackListBox',
+    'generatePageSidebar',
+    'generatePageSidebarConjoinedBox',
   ],
 
-  extraDependencies: ['html'],
+  relations: (relation, album, track) => ({
+    sidebar:
+      relation('generatePageSidebar'),
 
-  relations(relation, album, track) {
-    const relations = {};
+    conjoinedBox:
+      relation('generatePageSidebarConjoinedBox'),
 
-    relations.albumLink =
-      relation('linkAlbum', album);
+    trackListBox:
+      relation('generateAlbumSidebarTrackListBox', album, track),
 
-    relations.groupBoxes =
+    groupBoxes:
       album.groups.map(group =>
-        relation('generateAlbumSidebarGroupBox', album, group));
-
-    relations.trackSections =
-      album.trackSections.map(trackSection =>
-        relation('generateAlbumSidebarTrackSection', album, track, trackSection));
-
-    return relations;
-  },
-
-  data(album, track) {
-    return {isAlbumPage: !track};
-  },
-
-  generate(data, relations, {html}) {
-    const trackListBox = {
-      class: 'track-list-sidebar-box',
-      content:
-        html.tags([
-          html.tag('h1', relations.albumLink),
-          relations.trackSections,
-        ]),
-    };
-
-    if (data.isAlbumPage) {
-      const groupBoxes =
-        relations.groupBoxes
-          .map(content => ({
-            class: 'individual-group-sidebar-box',
-            content: content.slot('mode', 'album'),
-          }));
-
-      return {
-        leftSidebarMultiple: [
-          ...groupBoxes,
-          trackListBox,
-        ],
-      };
-    }
-
-    const conjoinedGroupBox = {
-      class: 'conjoined-group-sidebar-box',
-      content:
-        relations.groupBoxes
-          .flatMap((content, i, {length}) => [
-            content.slot('mode', 'track'),
-            i < length - 1 &&
-              html.tag('hr', {
-                style: `border-color: var(--primary-color); border-style: none none dotted none`
-              }),
-          ])
-          .filter(Boolean),
-    };
-
-    return {
-      // leftSidebarStickyMode: 'column',
-      leftSidebarMultiple: [
-        trackListBox,
-        conjoinedGroupBox,
+        relation('generateAlbumSidebarGroupBox', album, group)),
+  }),
+
+  data: (album, track) => ({
+    isAlbumPage: !track,
+  }),
+
+  generate: (data, relations) =>
+    relations.sidebar.slots({
+      boxes: [
+        data.isAlbumPage &&
+          relations.groupBoxes
+            .map(box => box.slot('mode', 'album')),
+
+        relations.trackListBox,
+
+        !data.isAlbumPage &&
+          relations.conjoinedBox.slots({
+            attributes: {class: 'conjoined-group-sidebar-box'},
+            boxes:
+              relations.groupBoxes
+                .map(box => box.slot('mode', 'track'))
+                .map(box => box.content), /* TODO: Kludge. */
+          }),
       ],
-    };
-  },
+    }),
 };