From f90c3a2851bc84e159cf278b21352a676bee0210 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Tue, 9 Jun 2026 16:52:48 -0400
Subject: [PATCH 1/3] ENG-1840: Align advanced search highlight with
 Roam/BlueprintJS styling.

Replace custom purple selection chrome with Blueprint menu-item hover gray for result rows and native active states for filter/sort toolbar buttons.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../AdvancedSearchDialog.tsx                  | 79 +++++++++++--------
 .../DiscourseNodeTypeFilter.tsx               |  7 +-
 .../components/DiscourseNodeSortControl.tsx   |  7 +-
 apps/roam/src/styles/styles.css               |  7 ++
 4 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
index a5d6bbdd6..c61d0bc03 100644
--- a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
@@ -9,6 +9,8 @@ import {
   Button,
   Dialog,
   InputGroup,
+  Menu,
+  MenuItem,
   NonIdealState,
   Spinner,
   SpinnerSize,
@@ -87,27 +89,23 @@ const ResultRow = ({
   onMouseEnter: () => void;
   result: SearchResult;
 }) => (
-  <Button
-    alignText="left"
-    aria-selected={active}
-    className="flex-none !items-start gap-2 !px-3 !py-2"
-    fill
-    minimal
+  <MenuItem
+    className={`flex items-start${active ? "advanced-search-result-focused" : ""}`}
+    data-active={active}
+    icon={
+      <Tag minimal style={getTagStyle(nodeConfig)}>
+        {nodeConfig ? getNodeBadgeText(nodeConfig) : result.nodeTypeLabel}
+      </Tag>
+    }
+    multiline
     onClick={onClick}
     onMouseEnter={onMouseEnter}
-    role="option"
-    style={{
-      background: active ? "rgba(95, 87, 192, 0.08)" : undefined,
-      boxShadow: active ? "inset 3px 0 0 #5f57c0" : undefined,
-    }}
-  >
-    <Tag minimal style={getTagStyle(nodeConfig)}>
-      {nodeConfig ? getNodeBadgeText(nodeConfig) : result.nodeTypeLabel}
-    </Tag>
-    <span className="min-w-0 break-words text-sm leading-snug text-gray-900">
-      {renderHighlightedText(stripTypePrefix(result.title), keywords)}
-    </span>
-  </Button>
+    text={
+      <span className="min-w-0 break-words text-sm leading-snug text-gray-900">
+        {renderHighlightedText(stripTypePrefix(result.title), keywords)}
+      </span>
+    }
+  />
 );
 
 const PreviewPane = ({ result }: { result: SearchResult | null }) => {
@@ -284,8 +282,20 @@ const AdvancedNodeSearchDialog = ({
     const panel = resultsPanelRef.current;
     if (!panel) return;
 
-    const activeRow = panel.querySelector('[aria-selected="true"]');
-    activeRow?.scrollIntoView({ block: "nearest" });
+    const activeRow = panel.querySelector(
+      '[data-active="true"]',
+    ) as HTMLElement | null;
+    if (!activeRow) return;
+
+    const containerRect = panel.getBoundingClientRect();
+    const itemRect = activeRow.getBoundingClientRect();
+
+    if (
+      itemRect.bottom > containerRect.bottom ||
+      itemRect.top < containerRect.top
+    ) {
+      activeRow.scrollIntoView({ block: "nearest", behavior: "auto" });
+    }
   }, [activeIndex, activeResult?.uid, debouncedSearchTerm]);
 
   const onInsert = useCallback(async () => {
@@ -450,21 +460,22 @@ const AdvancedNodeSearchDialog = ({
             <>
               <div
                 aria-label="Search results"
-                className="w-1/3 shrink-0 overflow-y-auto border-r border-gray-200 py-1"
+                className="advanced-node-search-results w-1/3 shrink-0 overflow-y-auto border-r border-gray-200"
                 ref={resultsPanelRef}
-                role="listbox"
               >
-                {results.map((result, index) => (
-                  <ResultRow
-                    active={index === activeIndex}
-                    key={result.uid}
-                    keywords={keywords}
-                    nodeConfig={nodeConfigByType[result.type]}
-                    onClick={() => setActiveIndex(index)}
-                    onMouseEnter={() => setActiveIndex(index)}
-                    result={result}
-                  />
-                ))}
+                <Menu>
+                  {results.map((result, index) => (
+                    <ResultRow
+                      active={index === activeIndex}
+                      key={result.uid}
+                      keywords={keywords}
+                      nodeConfig={nodeConfigByType[result.type]}
+                      onClick={() => setActiveIndex(index)}
+                      onMouseEnter={() => setActiveIndex(index)}
+                      result={result}
+                    />
+                  ))}
+                </Menu>
               </div>
               <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
                 <PreviewPane result={activeResult} />
diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx
index 0eef336b9..5ce4c5b97 100644
--- a/apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx
@@ -252,17 +252,14 @@ export const DiscourseNodeTypeFilter = ({
   const filterButton = (
     <span className="relative inline-flex shrink-0 items-center">
       <Button
+        active={isTriggerActive}
         aria-expanded={isOpen}
         aria-label={
           activeFilterCount > 0
             ? `Filter by type, ${activeFilterCount} selected`
             : "Filter by type"
         }
-        className={
-          isTriggerActive
-            ? "!bg-[rgba(95,87,192,0.1)] !text-[#5f57c0]"
-            : "!text-gray-600 hover:!bg-gray-100 hover:!text-gray-900"
-        }
+        className="!text-gray-600 hover:!bg-gray-100 hover:!text-gray-900"
         disabled={!isFilterReady}
         elementRef={triggerRef}
         icon="filter"
diff --git a/apps/roam/src/components/DiscourseNodeSortControl.tsx b/apps/roam/src/components/DiscourseNodeSortControl.tsx
index 71cd598c0..4e8a50007 100644
--- a/apps/roam/src/components/DiscourseNodeSortControl.tsx
+++ b/apps/roam/src/components/DiscourseNodeSortControl.tsx
@@ -116,14 +116,11 @@ export const DiscourseNodeSortControl = ({
 
   const sortButton = (
     <Button
+      active={isTriggerActive}
       aria-expanded={isOpen}
       aria-haspopup="listbox"
       aria-label={`Sort by ${sortLabel}`}
-      className={`${
-        isTriggerActive
-          ? "!bg-[rgba(95,87,192,0.1)] !text-[#5f57c0]"
-          : "!text-gray-600 hover:!bg-gray-100 hover:!text-gray-900"
-      }`}
+      className="!text-gray-600 hover:!bg-gray-100 hover:!text-gray-900"
       disabled={disabled}
       elementRef={triggerRef}
       icon="sort"
diff --git a/apps/roam/src/styles/styles.css b/apps/roam/src/styles/styles.css
index ef6ccf4f8..b4fc79e0a 100644
--- a/apps/roam/src/styles/styles.css
+++ b/apps/roam/src/styles/styles.css
@@ -191,3 +191,10 @@
 #dg-left-sidebar-root .bp3-dark .bp3-button:not([class*="bp3-intent-"]):hover {
   color: #f5f8fa;
 }
+
+/* Advanced search: persist Blueprint menu-item hover styling for keyboard focus */
+.advanced-node-search-results .bp3-menu-item.advanced-search-result-focused {
+  background-color: rgba(167, 182, 194, 0.3);
+  cursor: pointer;
+  text-decoration: none;
+}

From f395456468185926b1cdd9ba93e209f159aa4282 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Tue, 9 Jun 2026 16:54:46 -0400
Subject: [PATCH 2/3] Fix lint issues in advanced search dialog.

Remove unnecessary querySelector type assertion and unused useMemo import.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../AdvancedSearchDialog.tsx                         | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
index c61d0bc03..ca99d587e 100644
--- a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   Button,
   Dialog,
@@ -282,9 +276,7 @@ const AdvancedNodeSearchDialog = ({
     const panel = resultsPanelRef.current;
     if (!panel) return;
 
-    const activeRow = panel.querySelector(
-      '[data-active="true"]',
-    ) as HTMLElement | null;
+    const activeRow = panel.querySelector('[data-active="true"]');
     if (!activeRow) return;
 
     const containerRect = panel.getBoundingClientRect();

From d529a62c02ceca2889bc069c7acf82147f55c305 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Tue, 9 Jun 2026 17:04:11 -0400
Subject: [PATCH 3/3] change hover color

---
 .../AdvancedSearchDialog.tsx                  | 85 +++++++++----------
 .../DiscourseNodeTypeFilter.tsx               |  7 +-
 .../components/DiscourseNodeSortControl.tsx   |  7 +-
 apps/roam/src/styles/styles.css               |  7 --
 4 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
index ca99d587e..c40d5b4ab 100644
--- a/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx
@@ -1,10 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Button,
   Dialog,
   InputGroup,
-  Menu,
-  MenuItem,
   NonIdealState,
   Spinner,
   SpinnerSize,
@@ -83,23 +87,27 @@ const ResultRow = ({
   onMouseEnter: () => void;
   result: SearchResult;
 }) => (
-  <MenuItem
-    className={`flex items-start${active ? "advanced-search-result-focused" : ""}`}
-    data-active={active}
-    icon={
-      <Tag minimal style={getTagStyle(nodeConfig)}>
-        {nodeConfig ? getNodeBadgeText(nodeConfig) : result.nodeTypeLabel}
-      </Tag>
-    }
-    multiline
+  <Button
+    alignText="left"
+    aria-selected={active}
+    className="flex-none !items-start gap-2 !px-3 !py-2"
+    fill
+    minimal
     onClick={onClick}
     onMouseEnter={onMouseEnter}
-    text={
-      <span className="min-w-0 break-words text-sm leading-snug text-gray-900">
-        {renderHighlightedText(stripTypePrefix(result.title), keywords)}
-      </span>
-    }
-  />
+    role="option"
+    style={{
+      background: active ? "rgba(167, 182, 194, 0.3)" : undefined,
+      boxShadow: active ? "inset 3px 0 0 rgba(167, 182, 194, 0.3)" : undefined,
+    }}
+  >
+    <Tag minimal style={getTagStyle(nodeConfig)}>
+      {nodeConfig ? getNodeBadgeText(nodeConfig) : result.nodeTypeLabel}
+    </Tag>
+    <span className="min-w-0 break-words text-sm leading-snug text-gray-900">
+      {renderHighlightedText(stripTypePrefix(result.title), keywords)}
+    </span>
+  </Button>
 );
 
 const PreviewPane = ({ result }: { result: SearchResult | null }) => {
@@ -276,18 +284,8 @@ const AdvancedNodeSearchDialog = ({
     const panel = resultsPanelRef.current;
     if (!panel) return;
 
-    const activeRow = panel.querySelector('[data-active="true"]');
-    if (!activeRow) return;
-
-    const containerRect = panel.getBoundingClientRect();
-    const itemRect = activeRow.getBoundingClientRect();
-
-    if (
-      itemRect.bottom > containerRect.bottom ||
-      itemRect.top < containerRect.top
-    ) {
-      activeRow.scrollIntoView({ block: "nearest", behavior: "auto" });
-    }
+    const activeRow = panel.querySelector('[aria-selected="true"]');
+    activeRow?.scrollIntoView({ block: "nearest" });
   }, [activeIndex, activeResult?.uid, debouncedSearchTerm]);
 
   const onInsert = useCallback(async () => {
@@ -452,22 +450,21 @@ const AdvancedNodeSearchDialog = ({
             <>
               <div
                 aria-label="Search results"
-                className="advanced-node-search-results w-1/3 shrink-0 overflow-y-auto border-r border-gray-200"
+                className="w-1/3 shrink-0 overflow-y-auto border-r border-gray-200 py-1"
                 ref={resultsPanelRef}
+                role="listbox"
               >
-                <Menu>
-                  {results.map((result, index) => (
-                    <ResultRow
-                      active={index === activeIndex}
-                      key={result.uid}
-                      keywords={keywords}
-                      nodeConfig={nodeConfigByType[result.type]}
-                      onClick={() => setActiveIndex(index)}
-                      onMouseEnter={() => setActiveIndex(index)}
-                      result={result}
-                    />
-                  ))}
-                </Menu>
+                {results.map((result, index) => (
+                  <ResultRow
+                    active={index === activeIndex}
+                    key={result.uid}
+                    keywords={keywords}
+                    nodeConfig={nodeConfigByType[result.type]}
+                    onClick={() => setActiveIndex(index)}
+                    onMouseEnter={() => setActiveIndex(index)}
+                    result={result}
+                  />
+                ))}
               </div>
               <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
                 <PreviewPane result={activeResult} />
diff --git a/apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx b/apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx
index 5ce4c5b97..5b3880d5a 100644
--- a/apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx
+++ b/apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx
@@ -252,14 +252,17 @@ export const DiscourseNodeTypeFilter = ({
   const filterButton = (
     <span className="relative inline-flex shrink-0 items-center">
       <Button
-        active={isTriggerActive}
         aria-expanded={isOpen}
         aria-label={
           activeFilterCount > 0
             ? `Filter by type, ${activeFilterCount} selected`
             : "Filter by type"
         }
-        className="!text-gray-600 hover:!bg-gray-100 hover:!text-gray-900"
+        className={
+          isTriggerActive
+            ? "!bg-[rgba(167, 182, 194, 0.3)] !text-[#5f57c0]"
+            : "!text-gray-600 hover:!bg-gray-100 hover:!text-gray-900"
+        }
         disabled={!isFilterReady}
         elementRef={triggerRef}
         icon="filter"
diff --git a/apps/roam/src/components/DiscourseNodeSortControl.tsx b/apps/roam/src/components/DiscourseNodeSortControl.tsx
index 4e8a50007..ec3bee6a2 100644
--- a/apps/roam/src/components/DiscourseNodeSortControl.tsx
+++ b/apps/roam/src/components/DiscourseNodeSortControl.tsx
@@ -116,11 +116,14 @@ export const DiscourseNodeSortControl = ({
 
   const sortButton = (
     <Button
-      active={isTriggerActive}
       aria-expanded={isOpen}
       aria-haspopup="listbox"
       aria-label={`Sort by ${sortLabel}`}
-      className="!text-gray-600 hover:!bg-gray-100 hover:!text-gray-900"
+      className={`${
+        isTriggerActive
+          ? "!bg-[rgba(167, 182, 194, 0.3)] !text-[#5f57c0]"
+          : "!text-gray-600 hover:!bg-gray-100 hover:!text-gray-900"
+      }`}
       disabled={disabled}
       elementRef={triggerRef}
       icon="sort"
diff --git a/apps/roam/src/styles/styles.css b/apps/roam/src/styles/styles.css
index b4fc79e0a..ef6ccf4f8 100644
--- a/apps/roam/src/styles/styles.css
+++ b/apps/roam/src/styles/styles.css
@@ -191,10 +191,3 @@
 #dg-left-sidebar-root .bp3-dark .bp3-button:not([class*="bp3-intent-"]):hover {
   color: #f5f8fa;
 }
-
-/* Advanced search: persist Blueprint menu-item hover styling for keyboard focus */
-.advanced-node-search-results .bp3-menu-item.advanced-search-result-focused {
-  background-color: rgba(167, 182, 194, 0.3);
-  cursor: pointer;
-  text-decoration: none;
-}