content, client: "no results" message

4 files changed, 46 insertions, 5 deletions

diff --git a/src/content/dependencies/generateSearchSidebarBox.js b/src/content/dependencies/generateSearchSidebarBox.js
index 6632a4e8..d4d6b4e0 100644
--- a/src/content/dependencies/generateSearchSidebarBox.js
+++ b/src/content/dependencies/generateSearchSidebarBox.js
@@ -1,21 +1,27 @@
 export default {
   contentDependencies: ['generatePageSidebarBox'],
-  extraDependencies: ['html'],
+  extraDependencies: ['html', 'language'],
 
   relations: (relation) => ({
     sidebarBox:
       relation('generatePageSidebarBox'),
   }),
 
-  generate: (relations, {html}) =>
+  generate: (relations, {html, language}) =>
     relations.sidebarBox.slots({
       attributes: {class: 'wiki-search-sidebar-box'},
       collapsible: false,
 
       content: [
         html.tag('input', {class: 'wiki-search-input'},
-          {placeholder: `Search for anything`},
-          {type: 'search'})
+          {
+            placeholder:
+              language.$('misc.search.placeholder').toString(),
+          },
+          {type: 'search'}),
+
+        html.tag('template', {class: 'wiki-search-no-results-string'},
+          language.$('misc.search.noResults')),
       ],
     }),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 4fc2d8a3..17a85170 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -499,6 +499,12 @@ summary .group-name {
   margin-bottom: 5px;
 }
 
+.wiki-search-no-results {
+  font-size: 0.9em;
+  padding: 2px 3px 4px 6px;
+  cursor: default;
+}
+
 .wiki-search-result {
   position: relative;
   display: flex;
diff --git a/src/static/js/client.js b/src/static/js/client.js
index d8828ad2..1b98137a 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -154,6 +154,14 @@ function cssProp(el, ...args) {
   }
 }
 
+function templateContent(el) {
+  if (el?.nodeName !== 'TEMPLATE') {
+    throw new Error(`Expected a <template> element`);
+  }
+
+  return el.content.cloneNode(true);
+}
+
 // Curry-style, so multiple points can more conveniently be tested at once.
 function pointIsOverAnyOf(elements) {
   return (clientX, clientY) => {
@@ -3571,6 +3579,8 @@ const sidebarSearchInfo = initInfo('sidebarSearchInfo', {
   resultsContainer: null,
   results: null,
 
+  noResultsString: null,
+
   state: {
     stoppedTypingTimeout: null,
   },
@@ -3591,7 +3601,10 @@ function getSidebarSearchReferences() {
     document.querySelector('.wiki-search-sidebar-box');
 
   info.searchInput =
-    document.querySelector('.wiki-search-input');
+    info.searchBox.querySelector('.wiki-search-input');
+
+  info.noResultsString =
+    info.searchBox.querySelector('.wiki-search-no-results-string');
 }
 
 function mutateSidebarSearchContent() {
@@ -3712,6 +3725,13 @@ function showSidebarSearchResults(results) {
 
   cssProp(info.resultsContainer, 'display', 'block');
 
+  if (empty(flatResults)) {
+    const p = document.createElement('p');
+    p.classList.add('wiki-search-no-results');
+    p.appendChild(templateContent(info.noResultsString));
+    info.results.appendChild(p);
+  }
+
   for (const result of flatResults) {
     const el = generateSidebarSearchResult(result);
     if (!el) continue;
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 7dcbf9c1..ec298749 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -616,6 +616,15 @@ misc:
     _: "{TITLE}"
     withWikiName: "{TITLE} | {WIKI_NAME}"
 
+  # search:
+  #   Strings to do with the search bar!
+
+  search:
+    placeholder: "Search for anything"
+    noResults: >-
+      No results for this query, sorry!
+      Check spelling and use complete words.
+
   # skippers:
   #
   #   These are navigational links that only show up when you're