ENG-1732: Add sorting to advanced node search (#1053)

* Add client-side sorting to advanced node search dialog.

Sort by relevance, title, date created, or author with asc/desc controls so users can reorder results after search without re-querying.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix styling

* lint

* clean

* use Blueprint

* remove useMemo

* Address review feedback for sort control and dialog reset.

Reset all search state when the dialog closes, and use a single direction toggle beside the sort field menu.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Put sort direction controls in the sort menu footer.

Match Roam's pattern: field list above a divider, Ascending/Descending button group below.

Co-authored-by: Cursor <cursoragent@cursor.com>

* add one button to control direction

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: trangdoan982

apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx

@@ -20,16 +20,20 @@ import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageU
 import renderOverlay, {
   RoamOverlayProps,
 } from "roamjs-components/util/renderOverlay";
+import { DiscourseNodeSortControl } from "~/components/DiscourseNodeSortControl";
 import getDiscourseNodes, {
   type DiscourseNode,
 } from "~/utils/getDiscourseNodes";
 import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
 import {
   DEBOUNCE_MS,
+  DEFAULT_SORT_CONFIG,
   type SearchResult,
+  type SortConfig,
   buildSearchIndex,
   formatMetadataDate,
   searchIndexedNodes,
+  sortSearchResults,
   splitWithHighlights,
   stripTypePrefix,
 } from "./utils";
@@ -144,6 +148,8 @@ const AdvancedNodeSearchDialog = ({
   const [isIndexLoading, setIsIndexLoading] = useState(false);
   const [indexError, setIndexError] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [sort, setSort] = useState<SortConfig>(DEFAULT_SORT_CONFIG);
   const miniSearchRef = useRef<MiniSearch<
     SearchResult & { id: string }
   > | null>(null);
@@ -160,19 +166,6 @@ const AdvancedNodeSearchDialog = ({
     ) as Record<string, DiscourseNode>;
   }, []);
 
-  const results =
-    isOpen &&
-    !isIndexLoading &&
-    !indexError &&
-    debouncedSearchTerm &&
-    miniSearchRef.current
-      ? searchIndexedNodes({
-          miniSearch: miniSearchRef.current,
-          allResults: allResultsRef.current,
-          searchTerm: debouncedSearchTerm,
-        })
-      : [];
-
   const activeResult = results[activeIndex] ?? null;
   const keywords = debouncedSearchTerm.split(/\s+/).filter(Boolean);
 
@@ -191,6 +184,38 @@ const AdvancedNodeSearchDialog = ({
     };
   }, [isOpen]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchTerm("");
+      setDebouncedSearchTerm("");
+      setActiveIndex(0);
+      setSort(DEFAULT_SORT_CONFIG);
+      setResults([]);
+      setIndexError(false);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (
+      !isOpen ||
+      isIndexLoading ||
+      indexError ||
+      !debouncedSearchTerm ||
+      !miniSearchRef.current
+    ) {
+      setResults([]);
+      return;
+    }
+
+    const scoredHits = searchIndexedNodes({
+      miniSearch: miniSearchRef.current,
+      allResults: allResultsRef.current,
+      searchTerm: debouncedSearchTerm,
+    });
+
+    setResults(sortSearchResults({ hits: scoredHits, sort }));
+  }, [debouncedSearchTerm, indexError, isIndexLoading, isOpen, sort]);
+
   useEffect(() => {
     let cancelled = false;
     setIsIndexLoading(true);
@@ -235,7 +260,7 @@ const AdvancedNodeSearchDialog = ({
 
   useEffect(() => {
     setActiveIndex(0);
-  }, [debouncedSearchTerm]);
+  }, [debouncedSearchTerm, sort]);
 
   useEffect(() => {
     const panel = resultsPanelRef.current;
@@ -245,6 +270,10 @@ const AdvancedNodeSearchDialog = ({
     activeRow?.scrollIntoView({ block: "nearest" });
   }, [activeIndex, activeResult?.uid, debouncedSearchTerm]);
 
+  const handleSortChange = useCallback((nextSort: SortConfig): void => {
+    setSort(nextSort);
+  }, []);
+
   const onKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === "ArrowDown" && results.length) {
@@ -305,7 +334,19 @@ const AdvancedNodeSearchDialog = ({
             placeholder="Search discourse nodes..."
             value={searchTerm}
           />
-          <Button icon="cross" minimal onClick={onClose} title="Close search" />
+
+          <DiscourseNodeSortControl
+            disabled={isIndexLoading || indexError}
+            onSortChange={handleSortChange}
+            sort={sort}
+          />
+          <Button
+            className="shrink-0"
+            icon="cross"
+            minimal
+            onClick={onClose}
+            title="Close search"
+          />
         </div>
         <div className="flex min-h-0 w-full flex-1 overflow-hidden">
           {showSplitView ? (

apps/roam/src/components/AdvancedNodeSearchDialog/utils.ts

@@ -13,6 +13,26 @@ import {
 export const DEBOUNCE_MS = 250;
 export const MAX_RESULTS = 50;
 
+export type SortField = "relevance" | "alphabetical" | "dateCreated" | "author";
+export type SortDirection = "asc" | "desc";
+
+export type SortConfig = {
+  field: SortField;
+  direction: SortDirection;
+};
+
+export const DEFAULT_SORT_CONFIG: SortConfig = {
+  field: "relevance",
+  direction: "desc",
+};
+
+export const SORT_FIELD_LABELS: Record<SortField, string> = {
+  relevance: "Relevance",
+  alphabetical: "Alphabetical",
+  dateCreated: "Date created",
+  author: "Author",
+};
+
 export type SearchResult = {
   uid: string;
   title: string;
@@ -24,6 +44,11 @@ export type SearchResult = {
   authorName: string;
 };
 
+export type ScoredSearchHit = {
+  result: SearchResult;
+  score: number;
+};
+
 type MiniSearchDocument = SearchResult & {
   id: string;
 };
@@ -148,6 +173,80 @@ export const buildSearchIndex = async (
   return { miniSearch, results };
 };
 
+const compareNumbers = (
+  a: number,
+  b: number,
+  direction: SortDirection,
+): number => (direction === "desc" ? b - a : a - b);
+
+const compareStrings = (
+  a: string,
+  b: string,
+  direction: SortDirection,
+): number => {
+  const comparison = a.localeCompare(b, undefined, { sensitivity: "base" });
+  return direction === "desc" ? -comparison : comparison;
+};
+
+const getSortableTitle = (result: SearchResult): string =>
+  stripTypePrefix(result.title);
+
+const getCreatedTime = (result: SearchResult): number =>
+  Number(result.createdAt) || 0;
+
+export const isNonDefaultSort = (sort: SortConfig): boolean =>
+  sort.field !== DEFAULT_SORT_CONFIG.field ||
+  sort.direction !== DEFAULT_SORT_CONFIG.direction;
+
+export const sortSearchResults = ({
+  hits,
+  sort,
+}: {
+  hits: ScoredSearchHit[];
+  sort: SortConfig;
+}): SearchResult[] => {
+  const sorted = [...hits];
+
+  sorted.sort((aHit, bHit) => {
+    const a = aHit.result;
+    const b = bHit.result;
+    let comparison = 0;
+
+    switch (sort.field) {
+      case "relevance":
+        comparison = compareNumbers(aHit.score, bHit.score, sort.direction);
+        break;
+      case "alphabetical":
+        comparison = compareStrings(
+          getSortableTitle(a),
+          getSortableTitle(b),
+          sort.direction,
+        );
+        break;
+      case "dateCreated":
+        comparison = compareNumbers(
+          getCreatedTime(a),
+          getCreatedTime(b),
+          sort.direction,
+        );
+        break;
+      case "author": {
+        const aAuthor = a.authorName.trim();
+        const bAuthor = b.authorName.trim();
+        if (!aAuthor && !bAuthor) comparison = 0;
+        else if (!aAuthor) comparison = 1;
+        else if (!bAuthor) comparison = -1;
+        else comparison = compareStrings(aAuthor, bAuthor, sort.direction);
+        break;
+      }
+    }
+
+    return comparison || a.uid.localeCompare(b.uid);
+  });
+
+  return sorted.map((hit) => hit.result);
+};
+
 export const searchIndexedNodes = ({
   miniSearch,
   allResults,
@@ -156,7 +255,7 @@ export const searchIndexedNodes = ({
   miniSearch: MiniSearch<MiniSearchDocument>;
   allResults: SearchResult[];
   searchTerm: string;
-}): SearchResult[] => {
+}): ScoredSearchHit[] => {
   const resultsByUid = new Map(
     allResults.map((result) => [result.uid, result]),
   );
@@ -168,6 +267,10 @@ export const searchIndexedNodes = ({
     })
     .filter((result) => result.score > DISCOURSE_NODE_MIN_SEARCH_SCORE)
     .slice(0, MAX_RESULTS)
-    .map((result) => resultsByUid.get(String(result.id)))
-    .filter((result): result is SearchResult => !!result);
+    .map((result) => {
+      const searchResult = resultsByUid.get(String(result.id));
+      if (!searchResult) return null;
+      return { result: searchResult, score: result.score };
+    })
+    .filter((hit): hit is ScoredSearchHit => !!hit);
 };