Add results count to search mode

Fixes #934

src/langs/json/en.json

@@ -13,6 +13,7 @@
   "search": {
     "loading": "Searching…",
     "matchingResults": "{n, plural, one {# matching result} other {# matching results}}",
+    "viewerResults": "{results, plural, one {# matching result} other {# matching results}} found across {pages, plural, one {# page} other {# pages}}",
     "reset": "Clear Search",
     "help": "Use filters like <code>user:</code>, <code>project:</code> or <code>organization:</code> to refine searches. Use <code>sort:</code> to order results.",
     "more": "Learn more",

src/lib/components/viewer/Search.svelte

@@ -37,6 +37,10 @@ Assumes it's a child of a ViewerContext
 
   $: query = getQuery($page.url, "q");
   $: search = searchWithin($document.id, query).then(formatResults);
+
+  function countResults(results: [number, string[]][]) {
+    return results.reduce((acc, [, segments]) => acc + segments.length, 0);
+  }
 </script>
 
 <div class="pages">
@@ -45,6 +49,18 @@ Assumes it's a child of a ViewerContext
       {$_("search.loading")}
     </Empty>
   {:then resultsPages}
+    {#if resultsPages.length > 0}
+      <header>
+        <h2>
+          {$_("search.viewerResults", {
+            values: {
+              results: countResults(resultsPages),
+              pages: resultsPages.length,
+            },
+          })}
+        </h2>
+      </header>
+    {/if}
     {#each resultsPages as [pageNumber, resultsList]}
       {@const href = getViewerHref({
         document: $document,
@@ -93,4 +109,12 @@ Assumes it's a child of a ViewerContext
     border-color: var(--blue-2);
     background-color: var(--blue-1);
   }
+  header {
+    margin-bottom: 1rem;
+  }
+  h2 {
+    font-size: var(--font-lg);
+    font-weight: var(--font-semibold);
+    color: var(--gray-5);
+  }
 </style>