Filter pages on tags

web/components/filter.tsx

@@ -21,6 +21,8 @@ export function FilterList({
   completer,
   vimMode,
   darkMode,
+  preFilter,
+  phrasePreprocessor,
   allowNew = false,
   helpText = "",
   completePrefix,
@@ -32,6 +34,8 @@ export function FilterList({
   label: string;
   onKeyPress?: (key: string, currentText: string) => void;
   onSelect: (option: FilterOption | undefined) => void;
+  preFilter?: (options: FilterOption[], phrase: string) => FilterOption[];
+  phrasePreprocessor?: (phrase: string) => string;
   vimMode: boolean;
   darkMode: boolean;
   completer: (context: CompletionContext) => Promise<CompletionResult | null>;
@@ -50,7 +54,13 @@ export function FilterList({
   const selectedElementRef = useRef<HTMLDivElement>(null);
 
   function updateFilter(originalPhrase: string) {
-    const results = fuzzySearchAndSort(options, originalPhrase);
+    const prefilteredOptions = preFilter
+      ? preFilter(options, originalPhrase)
+      : options;
+    if (phrasePreprocessor) {
+      originalPhrase = phrasePreprocessor(originalPhrase);
+    }
+    const results = fuzzySearchAndSort(prefilteredOptions, originalPhrase);
     const foundExactMatch = !!results.find((result) =>
       result.name === originalPhrase
     );
@@ -74,7 +84,6 @@ export function FilterList({
 
   useEffect(() => {
     function closer() {
-      // console.log("Invoking closer");
       onSelect(undefined);
     }
 

web/components/fuse_search.ts

@@ -13,6 +13,7 @@ export const fuzzySearchAndSort = (
   if (!searchPhrase) {
     return arr.sort((a, b) => (a.orderId || 0) - (b.orderId || 0));
   }
+
   const enrichedArr: FuseOption[] = arr.map((item) => {
     return {
       ...item,
@@ -31,9 +32,6 @@ export const fuzzySearchAndSort = (
     }, {
       name: "displayName",
       weight: 0.3,
-    }, {
-      name: "tags",
-      weight: 0.1,
     }, {
       name: "aliases",
       weight: 0.7,

web/components/page_navigator.tsx

@@ -4,6 +4,8 @@ import { CompletionContext, CompletionResult } from "../deps.ts";
 import { PageMeta } from "$sb/types.ts";
 import { isFederationPath } from "$sb/lib/resolve.ts";
 
+const tagRegex = /#[^#\d\s\[\]]+\w+/g;
+
 export function PageNavigator({
   allPages,
   onNavigate,
@@ -74,6 +76,26 @@ export function PageNavigator({
       vimMode={vimMode}
       darkMode={darkMode}
       completer={completer}
+      phrasePreprocessor={(phrase) => {
+        phrase = phrase.replaceAll(tagRegex, "").trim();
+        return phrase;
+      }}
+      preFilter={(options, phrase) => {
+        const allTags = phrase.match(tagRegex);
+        if (allTags) {
+          // Search phrase contains hash tags, let's pre-filter the results based on this
+          const filterTags = allTags.map((t) => t.slice(1));
+          options = options.filter((pageMeta) => {
+            if (!pageMeta.tags) {
+              return false;
+            }
+            return filterTags.every((tag) =>
+              pageMeta.tags.find((itemTag: string) => itemTag.startsWith(tag))
+            );
+          });
+        }
+        return options;
+      }}
       allowNew={true}
       helpText="Press <code>Enter</code> to open the selected page, or <code>Shift-Enter</code> to create a new page with this exact name."
       newHint="Create page"

website/Page Picker.md

@@ -4,6 +4,8 @@ The page picker can be invoked by clicking the 📔 icon in the top bar, or by p
 
 The main input is the **filter phrase** and can be used to narrow down the list of page results.
 
+If the filter phrase contains `#tags` the results will be filtered based on matching those tags. That means to quickly see a list of all `#template`s you can use `#template` as a filter phrase. 
+
 Pressing the `Enter` key will open/create the selected page. Pressing `Shift-Enter` will always open or the page _exactly matching_ the filter phrase. Therefore, if you intend to create a new page, simply type the name of the new page and hit `Shift-Enter`.
 
 # Result ordering