1 files changed, 99 insertions, 38 deletions

diff --git a/src/content/dependencies/linkThing.js b/src/content/dependencies/linkThing.js
index 166a857d..64b3ddcd 100644
--- a/src/content/dependencies/linkThing.js
+++ b/src/content/dependencies/linkThing.js
@@ -19,6 +19,7 @@ export default {
   data: (pathKey, thing) => ({
     name: thing.name,
     nameShort: thing.nameShort ?? thing.shortName,
+    nameDetail: thing.nameDetail,
     nameText: thing.nameText,
 
     path:
@@ -43,9 +44,28 @@ export default {
       default: false,
     },
 
-    tooltipStyle: {
-      validate: v => v.is('none', 'auto', 'browser', 'wiki'),
-      default: 'auto',
+    showTooltip: {
+      // This is a bit of a misnomer since it just switches between two
+      // modes of differently conditional behavior (or no tooltip ever).
+      // But there's no world where BOTH modes are active at once, so.
+      validate: v => v.is(
+        // false - no tooltip
+        false,
+
+        // wiki - shows a wiki tooltip containing the thing's entire name
+        // if slots.preferShortName is set and a short name is present
+        'wiki',
+
+        // browser - shows a browser tooltip containing the thing's name
+        // if slots.content is set
+        'browser'),
+
+      default: false,
+    },
+
+    showNameDetail: {
+      validate: v => v.is(false, 'accent', 'inside'),
+      default: false,
     },
 
     color: {
@@ -54,10 +74,7 @@ export default {
     },
 
     colorContext: {
-      validate: v => v.is(
-        'image-box',
-        'primary-only'),
-
+      validate: v => v.is('image-box', 'primary-only'),
       default: 'primary-only',
     },
 
@@ -70,7 +87,7 @@ export default {
     hash: {type: 'string'},
   },
 
-  generate(data, relations, slots, {html}) {
+  generate(data, relations, slots, {html, language}) {
     const path =
       slots.path ?? data.path;
 
@@ -80,36 +97,64 @@ export default {
     const name =
       relations.name.slot('preferShortName', slots.preferShortName);
 
+    const showCustomContent =
+      !html.isBlank(slots.content);
+
     const showShortName =
-      slots.preferShortName &&
-     !data.nameText &&
-      data.nameShort &&
-      data.nameShort !== data.name;
-
-    const showWikiTooltip =
-      (slots.tooltipStyle === 'auto'
-        ? showShortName
-        : slots.tooltipStyle === 'wiki');
-
-    const wikiTooltip =
-      showWikiTooltip &&
+      !!(slots.preferShortName &&
+         data.nameShort &&
+         data.nameShort !== data.name &&
+        !data.nameText &&
+        !showCustomContent);
+
+    const effectiveTooltipStyle =
+      (slots.showTooltip === 'wiki'
+        ? (showShortName ? 'wiki' : null)
+
+     : slots.showTooltip === 'browser'
+        ? (showCustomContent ? 'browser' : null)
+
+        : null);
+
+    if (effectiveTooltipStyle === 'browser') {
+      linkAttributes.add('title', data.name);
+    }
+
+    let wikiTooltip = null;
+    if (effectiveTooltipStyle === 'wiki') {
+      wikiTooltip =
         relations.tooltip.slots({
           attributes: {class: 'thing-name-tooltip'},
           content: data.name,
         });
 
-    if (slots.tooltipStyle === 'browser') {
-      linkAttributes.add('title', data.name);
-    }
-
-    if (showWikiTooltip) {
       linkAttributes.add('class', 'text-with-tooltip-interaction-cue');
     }
 
+    const showNameDetail =
+      !!(slots.showNameDetail &&
+         data.nameDetail &&
+        !showCustomContent);
+
+    const effectiveNameDetailStyle =
+      (showNameDetail === true
+        ? slots.showNameDetail
+        : null);
+
+    const nameDetailCapsule =
+      language.encapsulate('misc.linkWithNameDetail');
+
     const content =
-      (html.isBlank(slots.content)
-        ? name
-        : slots.content);
+      (showCustomContent
+        ? slots.content
+
+     : effectiveNameDetailStyle === 'inside'
+        ? language.$(nameDetailCapsule, 'insideLink', {
+            name,
+            detail: data.nameDetail,
+          })
+
+        : name);
 
     if (slots.color !== false) {
       const {colorStyle} = relations;
@@ -120,26 +165,42 @@ export default {
         colorStyle.setSlot('color', slots.color);
       }
 
-      if (showWikiTooltip) {
+      if (effectiveTooltipStyle === 'wiki') {
         wrapperAttributes.add(colorStyle);
       } else {
         linkAttributes.add(colorStyle);
       }
     }
 
+    const link =
+      relations.linkTemplate.slots({
+        path: slots.anchor ? [] : path,
+        href: slots.anchor ? '' : null,
+        attributes: linkAttributes,
+        hash: slots.hash,
+        linkless: slots.linkless,
+        content,
+      });
+
+    const text =
+      (effectiveNameDetailStyle === 'accent'
+        ? language.$(nameDetailCapsule, 'withAccent', {
+            link,
+
+            accent:
+              html.tag('span', {class: 'name-detail'},
+                language.$(nameDetailCapsule, 'accent', {
+                  detail: data.nameDetail,
+                })),
+          })
+
+        : link);
+
     return relations.textWithTooltip.slots({
       attributes: wrapperAttributes,
       customInteractionCue: true,
 
-      text:
-        relations.linkTemplate.slots({
-          path: slots.anchor ? [] : path,
-          href: slots.anchor ? '' : null,
-          attributes: linkAttributes,
-          hash: slots.hash,
-          linkless: slots.linkless,
-          content,
-        }),
+      text,
 
       tooltip:
         wikiTooltip ?? null,