data, content, css: FlashAct.{shortName,title,titleColor}

11 files changed, 140 insertions, 67 deletions

diff --git a/src/content/dependencies/generateFlashActGalleryPage.js b/src/content/dependencies/generateFlashActGalleryPage.js
index 4097d765..681a61b8 100644
--- a/src/content/dependencies/generateFlashActGalleryPage.js
+++ b/src/content/dependencies/generateFlashActGalleryPage.js
@@ -7,7 +7,7 @@ export default {
       relation('linkFlashIndex'),
 
     flashActNavLink:
-      relation('linkFlashActInline', act),
+      relation('linkFlashActWithTitle', act),
 
     flashActNavAccent:
       relation('generateFlashActNavAccent', act),
@@ -29,7 +29,7 @@ export default {
 
   data: (act) => ({
     name: act.name,
-    nameHTML: act.nameHTML,
+    title: act.title,
     color: act.color,
 
     flashNames:
@@ -37,15 +37,20 @@ export default {
   }),
 
   generate: (data, relations, {html, language}) =>
-    language.encapsulate('flashPage', pageCapsule =>
+    language.encapsulate('flashActPage', pageCapsule =>
       relations.layout.slots({
         title:
-          language.$(pageCapsule, 'title', {
-            flash:
-              html.ifelse([
-                html.permit(data.nameHTML, {strip: true}),
-                language.sanitize(data.name),
-              ]),
+          language.encapsulate(pageCapsule, 'title', workingCapsule => {
+            const workingOptions = {act: data.name};
+
+            if (data.title) {
+              workingCapsule += '.withTitle'; // sigh
+              workingOptions.title =
+                html.tag('span', {class: 'flash-act-title'},
+                  data.title);
+            }
+
+            return language.$(workingCapsule, workingOptions);
           }),
 
         color: data.color,
diff --git a/src/content/dependencies/generateFlashActSidebarCurrentActBox.js b/src/content/dependencies/generateFlashActSidebarCurrentActBox.js
index e08582fe..c1c21b09 100644
--- a/src/content/dependencies/generateFlashActSidebarCurrentActBox.js
+++ b/src/content/dependencies/generateFlashActSidebarCurrentActBox.js
@@ -4,7 +4,7 @@ export default {
       relation('generatePageSidebarBox'),
 
     actLink:
-      relation('linkFlashAct', act),
+      relation('linkFlashActWithTitle', act),
 
     flashLinks:
       act.flashes
diff --git a/src/content/dependencies/generateFlashActSidebarSideMapBox.js b/src/content/dependencies/generateFlashActSidebarSideMapBox.js
index 7cae184f..b61f042f 100644
--- a/src/content/dependencies/generateFlashActSidebarSideMapBox.js
+++ b/src/content/dependencies/generateFlashActSidebarSideMapBox.js
@@ -17,7 +17,7 @@ export default {
     sideActLinks:
       sprawl.flashSideData
         .map(side => side.acts
-          .map(act => relation('linkFlashActInline', act))),
+          .map(act => relation('linkFlashActWithTitle', act))),
   }),
 
   data: (sprawl, act, flash) => ({
@@ -33,6 +33,11 @@ export default {
 
     currentActIndex:
       act.side.acts.indexOf(act),
+
+    sideActTitles:
+      sprawl.flashSideData
+        .map(side => side.acts
+          .map(act => act.title)),
   }),
 
   generate: (data, relations, {html}) =>
@@ -46,7 +51,8 @@ export default {
           sideName: data.sideNames,
           sideColorStyle: relations.sideColorStyles,
           actLinks: relations.sideActLinks,
-        }).map(({sideName, sideColorStyle, actLinks}, sideIndex) =>
+          actTitles: data.sideActTitles,
+        }).map(({sideName, sideColorStyle, actLinks, actTitles}, sideIndex) =>
             html.tag('details',
               sideIndex === data.currentSideIndex &&
                 {class: 'current'},
@@ -63,13 +69,19 @@ export default {
                     html.tag('b', sideName))),
 
                 html.tag('ul',
-                  actLinks.map((actLink, actIndex) =>
-                    html.tag('li',
-                      sideIndex === data.currentSideIndex &&
-                      actIndex === data.currentActIndex &&
-                        {class: 'current'},
-
-                      actLink))),
+                  stitchArrays({
+                    actLink: actLinks,
+                    actTitle: actTitles,
+                  }).map(({actLink, actTitle}, actIndex) =>
+                      html.tag('li',
+                        sideIndex === data.currentSideIndex &&
+                        actIndex === data.currentActIndex &&
+                          {class: 'current'},
+
+                        actTitle &&
+                          {class: 'structured'},
+
+                        actLink))),
               ])),
       ],
     }),
diff --git a/src/content/dependencies/generateFlashInfoPage.js b/src/content/dependencies/generateFlashInfoPage.js
index ac49dbf5..b4e8c757 100644
--- a/src/content/dependencies/generateFlashInfoPage.js
+++ b/src/content/dependencies/generateFlashInfoPage.js
@@ -56,6 +56,9 @@ export default {
     readCommentaryLine:
       relation('generateReadCommentaryLine', flash),
 
+    flashIndexLink:
+      relation('linkFlashIndex'),
+
     flashActLink:
       relation('linkFlashAct', flash.act),
 
@@ -87,6 +90,9 @@ export default {
 
     date:
       flash.date,
+
+    flashActShortName:
+      flash.act.shortName,
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -180,7 +186,14 @@ export default {
         navLinkStyle: 'hierarchical',
         navLinks: [
           {auto: 'home'},
-          {html: relations.flashActLink.slot('color', false)},
+          {html: relations.flashIndexLink},
+
+          {
+            html:
+              relations.flashActLink.slot('content',
+                language.sanitize(data.flashActShortName)),
+          },
+
           {auto: 'current'},
         ],
 
diff --git a/src/content/dependencies/linkFlashAct.js b/src/content/dependencies/linkFlashAct.js
index dcad71e0..efa715e6 100644
--- a/src/content/dependencies/linkFlashAct.js
+++ b/src/content/dependencies/linkFlashAct.js
@@ -1,21 +1,6 @@
 export default {
-  relations: (relation, flashAct) => ({
-    link:
-      relation('linkThing', 'localized.flashActGallery', flashAct),
-  }),
+  relations: (relation, flashAct) =>
+    ({link: relation('linkThing', 'localized.flashActGallery', flashAct)}),
 
-  data: (flashAct) => ({
-    name:
-      flashAct.name,
-
-    nameHTML:
-      flashAct.nameHTML,
-  }),
-
-  generate: (data, relations, {html, language}) =>
-    relations.link.slot('content',
-      html.ifelse([
-        html.permit(data.nameHTML),
-        language.sanitize(data.name),
-      ])),
+  generate: (relations) => relations.link,
 };
diff --git a/src/content/dependencies/linkFlashActInline.js b/src/content/dependencies/linkFlashActInline.js
deleted file mode 100644
index ba2a4883..00000000
--- a/src/content/dependencies/linkFlashActInline.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// junk component which only exists because you can't
-// "extend" the slots of underlying linkThing.
-
-export default {
-  relations: (relation, flashAct) => ({
-    link:
-      relation('linkThing', 'localized.flashActGallery', flashAct),
-  }),
-
-  data: (flashAct) => ({
-    name:
-      flashAct.name,
-
-    nameHTML:
-      flashAct.nameHTML,
-  }),
-
-  generate: (data, relations, {html, language}) =>
-    relations.link.slot('content',
-      html.ifelse([
-        html.permit(data.nameHTML, {inline: true}),
-        language.sanitize(data.name),
-      ])),
-};
diff --git a/src/content/dependencies/linkFlashActWithTitle.js b/src/content/dependencies/linkFlashActWithTitle.js
new file mode 100644
index 00000000..87d1c2db
--- /dev/null
+++ b/src/content/dependencies/linkFlashActWithTitle.js
@@ -0,0 +1,28 @@
+export default {
+  relations: (relation, flashAct) => ({
+    link:
+      relation('linkThing', 'localized.flashActGallery', flashAct),
+
+    titleColorStyle:
+      (flashAct.titleColor && flashAct.titleColor !== flashAct.color
+        ? relation('generateColorStyleAttribute', flashAct.titleColor)
+        : null),
+  }),
+
+  data: (flashAct) => ({
+    name: flashAct.name,
+    title: flashAct.title,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    (data.title
+      ? relations.link.slot('content',
+          language.$('misc.flashActWithTitle', {
+            act: data.name,
+            title:
+              html.tag('span', {class: 'flash-act-title'},
+                relations.titleColorStyle,
+                language.sanitize(data.title)),
+          }))
+      : relations.link),
+};
diff --git a/src/data/things/flash/FlashAct.js b/src/data/things/flash/FlashAct.js
index d1c64b4b..19412fdc 100644
--- a/src/data/things/flash/FlashAct.js
+++ b/src/data/things/flash/FlashAct.js
@@ -1,6 +1,6 @@
 import {input, V} from '#composite';
 import Thing from '#thing';
-import {isContentString, isString} from '#validators';
+import {isColor, isContentString, isString} from '#validators';
 
 import {withPropertyFromObject} from '#composite/data';
 
@@ -33,10 +33,42 @@ export class FlashAct extends Thing {
     side: thing(V(FlashSide)),
 
     name: name(V('Unnamed Flash Act')),
-    nameHTML: simpleString(),
-    directory: directory(),
+
+    title: simpleString(),
+
+    shortName: [
+      exposeUpdateValueOrContinue({
+        validate: input.value(isString),
+      }),
+
+      exposeDependency('name'),
+    ],
+
+    directory: [
+      {
+        dependencies: ['name', 'shortName'],
+        compute: (continuation, {name, shortName}) =>
+          continuation({
+            ['#name']:
+              shortName ?? name,
+          }),
+      },
+
+      directory('#name'),
+    ],
+
     color: color(),
 
+    titleColor: [
+      exitWithoutDependency('title'),
+
+      exposeUpdateValueOrContinue({
+        validate: input.value(isColor),
+      }),
+
+      exposeDependency('color'),
+    ],
+
     listTerminology: [
       exposeUpdateValueOrContinue({
         validate: input.value(isContentString),
@@ -77,10 +109,13 @@ export class FlashAct extends Thing {
   static [Thing.yamlDocumentSpec] = {
     fields: {
       'Act': {property: 'name'},
-      'Act HTML': {property: 'nameHTML'},
+      'Title': {property: 'title'},
+      'Short': {property: 'shortName'},
       'Directory': {property: 'directory'},
 
       'Color': {property: 'color'},
+      'Title Color': {property: 'titleColor'},
+
       'List Terminology': {property: 'listTerminology'},
 
       'Review Points': {ignore: true},
diff --git a/src/replacer.js b/src/replacer.js
index 9be14755..4e29f927 100644
--- a/src/replacer.js
+++ b/src/replacer.js
@@ -82,7 +82,7 @@ export const replacerSpec = {
 
   'flash-act': {
     find: 'flashAct',
-    link: 'linkFlashAct',
+    link: 'linkFlashActWithTitle',
   },
 
   'flash-side': {
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 0b6a8250..047f85c6 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -485,6 +485,10 @@ body::before, .wallpaper-part {
   overflow-wrap: break-word;
 }
 
+.sidebar li.structured {
+  margin-bottom: 3px;
+}
+
 .sidebar > details.current summary {
   font-weight: 800;
 }
@@ -1590,6 +1594,15 @@ label > input[type=checkbox]:not(:checked) + span {
   color: var(--page-primary-color);
 }
 
+.flash-act-title {
+  display: inline-block;
+  text-decoration: inherit;
+}
+
+a .flash-act-title {
+  color: var(--primary-color);
+}
+
 .wiki-commentary s:not(.spoiler) {
   text-decoration-color: #fff9;
   text-decoration-thickness: 1.4px;
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 672984ee..ddb0ec41 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -716,6 +716,8 @@ misc:
       playlist: "YouTube (playlist)"
       fullAlbum: "YouTube (full album)"
 
+  flashActWithTitle: "{ACT}: {TITLE}"
+
   # lyrics:
 
   lyrics:
@@ -1672,6 +1674,10 @@ flashSidebar:
     # specifies a custom phrasing.
     entriesInThisSection: "Entries in this section"
 
+flashActPage:
+  title: "{ACT}"
+  title.withTitle: "{ACT}: {TITLE}"
+
 #
 # flashPage:
 #   The flash info page shows release information, links to check the