From 02ba4387a6ce990de45ea9a411aeb60835c2b40f Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 5 Dec 2024 10:51:36 -0500 Subject: [PATCH] Add results count to search mode Fixes #934 --- src/langs/json/en.json | 1 + src/lib/components/viewer/Search.svelte | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/src/langs/json/en.json b/src/langs/json/en.json index 0157af71..4047f7bf 100644 --- a/src/langs/json/en.json +++ b/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 user:, project: or organization: to refine searches. Use sort: to order results.", "more": "Learn more", diff --git a/src/lib/components/viewer/Search.svelte b/src/lib/components/viewer/Search.svelte index 01db41d5..4521f730 100644 --- a/src/lib/components/viewer/Search.svelte +++ b/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); + }
@@ -45,6 +49,18 @@ Assumes it's a child of a ViewerContext {$_("search.loading")} {:then resultsPages} + {#if resultsPages.length > 0} +
+

+ {$_("search.viewerResults", { + values: { + results: countResults(resultsPages), + pages: resultsPages.length, + }, + })} +

+
+ {/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); + }