1 files changed, 128 insertions, 6 deletions

diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js
index c8f42e91..d63b9708 100644
--- a/src/static/js/client/sidebar-search.js
+++ b/src/static/js/client/sidebar-search.js
@@ -1,5 +1,3 @@
-/* eslint-env browser */
-
 import {getColors} from '../../shared-util/colors.js';
 import {accumulateSum, empty, unique} from '../../shared-util/sugar.js';
 
@@ -41,6 +39,9 @@ export const info = {
   failedRule: null,
   failedContainer: null,
 
+  contextContainer: null,
+  contextBackLink: null,
+
   filterContainer: null,
   albumFilterLink: null,
   artistFilterLink: null,
@@ -68,11 +69,17 @@ export const info = {
   currentResultString: null,
   endSearchString: null,
 
+  backString: null,
+
   albumResultKindString: null,
   artistResultKindString: null,
   groupResultKindString: null,
   tagResultKindString: null,
 
+  groupResultDisambiguatorString: null,
+  flashResultDisambiguatorString: null,
+  trackResultDisambiguatorString: null,
+
   albumResultFilterString: null,
   artistResultFilterString: null,
   flashResultFilterString: null,
@@ -107,6 +114,10 @@ export const info = {
       type: 'string',
     },
 
+    activeQueryContextPageName: {type: 'string'},
+    activeQueryContextPagePathname: {type: 'string'},
+    activeQueryContextPageColor: {type: 'string'},
+
     activeQueryResults: {
       type: 'json',
       maxLength: settings => settings.maxActiveResultsStorage,
@@ -178,6 +189,9 @@ export function getPageReferences() {
   info.noResultsString =
     findString('no-results');
 
+  info.backString =
+    findString('back');
+
   info.currentResultString =
     findString('current-result');
 
@@ -196,6 +210,15 @@ export function getPageReferences() {
   info.tagResultKindString =
     findString('tag-result-kind');
 
+  info.groupResultDisambiguatorString =
+    findString('group-result-disambiguator');
+
+  info.flashResultDisambiguatorString =
+    findString('flash-result-disambiguator');
+
+  info.trackResultDisambiguatorString =
+    findString('track-result-disambiguator');
+
   info.albumResultFilterString =
     findString('album-result-filter');
 
@@ -302,6 +325,25 @@ export function mutatePageContent() {
   info.searchBox.appendChild(info.failedRule);
   info.searchBox.appendChild(info.failedContainer);
 
+  // Context section
+
+  info.contextContainer =
+    document.createElement('div');
+
+  info.contextContainer.classList.add('wiki-search-context-container');
+
+  info.contextBackLink =
+    document.createElement('a');
+
+  info.contextContainer.appendChild(
+    templateContent(info.backString, {
+      page: info.contextBackLink,
+    }));
+
+  cssProp(info.contextContainer, 'display', 'none');
+
+  info.searchBox.appendChild(info.contextContainer);
+
   // Filter section
 
   info.filterContainer =
@@ -641,6 +683,17 @@ async function activateSidebarSearch(query) {
   state.searchStage = 'complete';
   updateSidebarSearchStatus();
 
+  session.activeQueryContextPageName =
+    document.querySelector('title').dataset.withoutWikiName ??
+    document.title;
+
+  session.activeQueryContextPagePathname =
+    location.pathname;
+
+  session.activeQueryContextPageColor =
+    document.querySelector('.color-style')?.dataset.color ??
+    null;
+
   session.activeQuery = query;
   session.activeQueryResults = results;
   session.resultsScrollOffset = 0;
@@ -793,6 +846,8 @@ function showSidebarSearchResults(results) {
   }
 
   if (shownAnyResults) {
+    showContextControls();
+
     cssProp(info.endSearchRule, 'display', 'block');
     cssProp(info.endSearchLine, 'display', 'block');
 
@@ -841,7 +896,7 @@ function fillResultElements(results, {
   }
 
   for (const result of filteredResults) {
-    const el = generateSidebarSearchResult(result);
+    const el = generateSidebarSearchResult(result, filteredResults);
     if (!el) continue;
 
     info.results.appendChild(el);
@@ -890,13 +945,42 @@ function showFilterElements(results) {
   }
 }
 
-function generateSidebarSearchResult(result) {
+function showContextControls() {
+  const {session} = info;
+
+  const shouldShow =
+    session.activeQueryContextPagePathname &&
+    location.pathname !== session.activeQueryContextPagePathname;
+
+  if (shouldShow) {
+    info.contextBackLink.href =
+      session.activeQueryContextPagePathname;
+
+    cssProp(info.contextBackLink,
+      '--primary-color',
+      session.activeQueryContextPageColor);
+
+    while (info.contextBackLink.firstChild) {
+      info.contextBackLink.firstChild.remove();
+    }
+
+    info.contextBackLink.appendChild(
+      document.createTextNode(
+        session.activeQueryContextPageName));
+
+    cssProp(info.contextContainer, 'display', 'block');
+  } else {
+    cssProp(info.contextContainer, 'display', 'none');
+  }
+}
+
+function generateSidebarSearchResult(result, results) {
   const preparedSlots = {
     color:
       result.data.color ?? null,
 
     name:
-      result.data.name ?? result.data.primaryName ?? null,
+      getSearchResultName(result),
 
     imageSource:
       getSearchResultImageSource(result),
@@ -961,9 +1045,37 @@ function generateSidebarSearchResult(result) {
       return null;
   }
 
+  const compareReferenceType = otherResult =>
+    otherResult.referenceType === result.referenceType;
+
+  const compareName = otherResult =>
+    getSearchResultName(otherResult) === getSearchResultName(result);
+
+  const ambiguous =
+    results.some(otherResult =>
+      otherResult !== result &&
+      compareReferenceType(otherResult) &&
+      compareName(otherResult));
+
+  if (ambiguous) {
+    preparedSlots.disambiguate =
+      result.data.disambiguator;
+
+    preparedSlots.disambiguatorString =
+      info[result.referenceType + 'ResultDisambiguatorString'];
+  }
+
   return generateSidebarSearchResultTemplate(preparedSlots);
 }
 
+function getSearchResultName(result) {
+  return (
+    result.data.name ??
+    result.data.primaryName ??
+    null
+  );
+}
+
 function getSearchResultImageSource(result) {
   const {artwork} = result.data;
   if (!artwork) return null;
@@ -1039,6 +1151,15 @@ function generateSidebarSearchResultTemplate(slots) {
     }
   }
 
+  if (!accentSpan && slots.disambiguate) {
+    accentSpan = document.createElement('span');
+    accentSpan.classList.add('wiki-search-result-disambiguator');
+    accentSpan.appendChild(
+      templateContent(slots.disambiguatorString, {
+        disambiguator: slots.disambiguate,
+      }));
+  }
+
   if (!accentSpan && slots.kindString) {
     accentSpan = document.createElement('span');
     accentSpan.classList.add('wiki-search-result-kind');
@@ -1078,6 +1199,7 @@ function generateSidebarSearchResultTemplate(slots) {
 }
 
 function hideSidebarSearchResults() {
+  cssProp(info.contextContainer, 'display', 'none');
   cssProp(info.filterContainer, 'display', 'none');
 
   cssProp(info.resultsRule, 'display', 'none');
@@ -1305,7 +1427,7 @@ async function handleDroppedIntoSearchInput(domEvent) {
   let droppedURL;
   try {
     droppedURL = new URL(droppedText);
-  } catch (error) {
+  } catch {
     droppedURL = null;
   }