content: generateArtTagSidebar: combine boxes into one

3 files changed, 43 insertions, 34 deletions

diff --git a/src/content/dependencies/generateArtTagAncestorDescendantMapList.js b/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
index 6b4e52df..34a45ffc 100644
--- a/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
+++ b/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
@@ -96,7 +96,7 @@ export default {
 
   generate(data, relations, {html, language}) {
     const recursive = (dataNode, relationsNode) =>
-      html.tag('dl', [
+      html.tag('dl', {class: dataNode === data.root && 'tree-list'}, [
         dataNode.displayBriefly &&
           html.tag('dt',
             language.$('artTagSidebar.otherTagsExempt', {
diff --git a/src/content/dependencies/generateArtTagAncestorSidebarBox.js b/src/content/dependencies/generateArtTagAncestorSidebarBox.js
deleted file mode 100644
index ea85c2b2..00000000
--- a/src/content/dependencies/generateArtTagAncestorSidebarBox.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default {
-  contentDependencies: [
-    'generateArtTagAncestorDescendantMapList',
-    'linkArtTagDynamically',
-  ],
-
-  extraDependencies: ['html'],
-
-  relations: (relation, ancestorArtTag, descendantArtTag) => ({
-    ancestorArtTagLink:
-      relation('linkArtTagDynamically', ancestorArtTag),
-
-    ancestorArtTagMapList:
-      relation('generateArtTagAncestorDescendantMapList',
-        ancestorArtTag,
-        descendantArtTag),
-  }),
-
-  generate: (relations, {html}) => ({
-    content: html.tags([
-      html.tag('h2',
-        relations.ancestorArtTagLink),
-
-      relations.ancestorArtTagMapList,
-    ]),
-  }),
-};
diff --git a/src/content/dependencies/generateArtTagSidebar.js b/src/content/dependencies/generateArtTagSidebar.js
index 51e53d20..b5b4ced3 100644
--- a/src/content/dependencies/generateArtTagSidebar.js
+++ b/src/content/dependencies/generateArtTagSidebar.js
@@ -1,8 +1,13 @@
+import {stitchArrays} from '#sugar';
 import {collectTreeLeaves} from '#wiki-data';
 
 export default {
-  contentDependencies: ['generateArtTagAncestorSidebarBox'],
-  extraDependencies: ['wikiData'],
+  contentDependencies: [
+    'generateArtTagAncestorDescendantMapList',
+    'linkArtTagDynamically',
+  ],
+
+  extraDependencies: ['html', 'language', 'wikiData'],
 
   sprawl: ({artTagData}) =>
     ({artTagData}),
@@ -20,12 +25,43 @@ export default {
   },
 
   relations: (relation, query, sprawl, artTag) => ({
-    ancestorBoxes:
+    artTagLink: relation('linkArtTagDynamically', artTag),
+
+    furthestAncestorArtTagMapLists:
       query.furthestAncestorArtTags
         .map(ancestorArtTag =>
-          relation('generateArtTagAncestorSidebarBox', ancestorArtTag, artTag)),
+          relation('generateArtTagAncestorDescendantMapList',
+            ancestorArtTag,
+            artTag)),
+  }),
+
+  data: query => ({
+    furthestAncestorArtTagNames:
+      query.furthestAncestorArtTags
+        .map(ancestorArtTag => ancestorArtTag.name),
   }),
 
-  generate: (relations) =>
-    ({leftSidebarMultiple: relations.ancestorBoxes}),
+  generate: (data, relations, {html, language}) => ({
+    leftSidebarContent: [
+      html.tag('h1',
+        relations.artTagLink),
+
+      stitchArrays({
+        name: data.furthestAncestorArtTagNames,
+        list: relations.furthestAncestorArtTagMapLists,
+      }).map(({name, list}) =>
+          html.tag('details',
+            {
+              class: 'has-tree-list',
+              open: relations.furthestAncestorArtTagMapLists.length === 1,
+            },
+            [
+              html.tag('summary',
+                html.tag('span', {class: 'group-name'},
+                  language.sanitize(name))),
+
+              list,
+            ])),
+    ],
+  }),
 };