ENG-1736: Open active search result in main panel and sidebar. (#1059)

Rebased onto main so the PR only includes dialog open/sidebar behavior and footer shortcuts, without settings or duplicate utils from earlier stacked commits.

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

Author: trangdoan982

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

@@ -315,6 +315,32 @@ const AdvancedNodeSearchDialog = ({
     setSort(nextSort);
   }, []);
 
+  const onOpen = useCallback(async () => {
+    if (!activeResult || contentState !== "results") return;
+
+    const uid = activeResult.uid;
+    if (getPageTitleByPageUid(uid)) {
+      await window.roamAlphaAPI.ui.mainWindow.openPage({ page: { uid } });
+    } else {
+      await window.roamAlphaAPI.ui.mainWindow.openBlock({ block: { uid } });
+    }
+    onClose();
+  }, [activeResult, contentState, onClose]);
+
+  const onOpenInSidebar = useCallback(async () => {
+    if (!activeResult || contentState !== "results") return;
+
+    await window.roamAlphaAPI.ui.rightSidebar.addWindow({
+      window: {
+        type: "outline",
+        // @ts-expect-error - block-uid is valid for outline sidebar windows
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        "block-uid": activeResult.uid,
+      },
+    });
+    onClose();
+  }, [activeResult, contentState, onClose]);
+
   const onKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === "ArrowDown" && results.length) {
@@ -323,6 +349,16 @@ const AdvancedNodeSearchDialog = ({
       } else if (event.key === "ArrowUp" && results.length) {
         event.preventDefault();
         setActiveIndex((index) => Math.max(index - 1, 0));
+      } else if (
+        event.key === "Enter" &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        contentState === "results" &&
+        activeResult
+      ) {
+        event.preventDefault();
+        if (event.shiftKey) void onOpenInSidebar();
+        else void onOpen();
       } else if (
         event.key === "Enter" &&
         (event.metaKey || event.ctrlKey) &&
@@ -343,6 +379,8 @@ const AdvancedNodeSearchDialog = ({
       insertTarget,
       onClose,
       onInsert,
+      onOpen,
+      onOpenInSidebar,
       results.length,
     ],
   );
@@ -441,6 +479,8 @@ const AdvancedNodeSearchDialog = ({
           hasActiveResult={!!activeResult}
           insertTarget={insertTarget}
           onInsert={() => void onInsert()}
+          onOpen={() => void onOpen()}
+          onOpenInSidebar={() => void onOpenInSidebar()}
         />
       </div>
     </Dialog>

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@blueprintjs/core";
+import { Icon, type IconName } from "@blueprintjs/core";
 import type { InsertTarget } from "~/utils/advancedSearchFooterUtils";
 
 export type AdvancedSearchContentState =
@@ -14,46 +14,77 @@ export type AdvancedSearchFooterProps = {
   hasActiveResult: boolean;
   insertTarget: InsertTarget | null;
   onInsert: () => void;
+  onOpen: () => void;
+  onOpenInSidebar: () => void;
 };
 
 const footerKbdClassName =
-  "rounded border border-gray-300 bg-white px-1.5 py-0.5 font-mono text-xs text-gray-600";
+  "inline-flex items-center justify-center rounded border border-gray-300 bg-white px-1 py-0.5 text-gray-600";
 
 const footerLabelClassName =
   "inline-flex shrink-0 items-center gap-1 text-xs lowercase text-gray-500";
 
 type FooterShortcutHintProps = {
   disabled?: boolean;
-  keys: string[];
+  keyIcons: IconName[];
   label: string;
   onClick?: () => void;
 };
 
-export const FooterShortcutHint = ({
+const FooterShortcutHint = ({
   disabled = false,
-  keys,
+  keyIcons,
   label,
   onClick,
 }: FooterShortcutHintProps) => (
-  <Button
-    className="inline-flex !min-h-0 items-center gap-2 p-0"
+  <button
+    className="inline-flex cursor-pointer items-center gap-2 border-0 bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50"
     disabled={disabled}
-    minimal
     onClick={onClick}
-    small
+    type="button"
   >
     <span className={footerLabelClassName}>
-      {keys.map((key) => (
-        <kbd className={footerKbdClassName} key={key}>
-          {key}
+      {keyIcons.map((icon) => (
+        <kbd className={footerKbdClassName} key={icon}>
+          <Icon icon={icon} iconSize={12} />
         </kbd>
       ))}
       {label}
     </span>
-  </Button>
+  </button>
 );
 
-export const InsertFooterAction = ({
+const OpenFooterAction = ({
+  disabled,
+  onOpen,
+}: {
+  disabled: boolean;
+  onOpen: () => void;
+}) => (
+  <FooterShortcutHint
+    disabled={disabled}
+    keyIcons={["key-enter"]}
+    label="open"
+    onClick={() => void onOpen()}
+  />
+);
+
+const OpenInSidebarFooterAction = ({
+  disabled,
+  onOpenInSidebar,
+}: {
+  disabled: boolean;
+  onOpenInSidebar: () => void;
+}) => (
+  <FooterShortcutHint
+    disabled={disabled}
+    keyIcons={["key-shift", "key-enter"]}
+    label="sidebar"
+    onClick={() => void onOpenInSidebar()}
+  />
+);
+
+const InsertFooterAction = ({
   disabled,
   onInsert,
 }: {
@@ -62,15 +93,17 @@ export const InsertFooterAction = ({
 }) => (
   <FooterShortcutHint
     disabled={disabled}
-    keys={["⌘", "↵"]}
+    keyIcons={["key-command", "key-enter"]}
     label="insert"
     onClick={() => void onInsert()}
   />
 );
 
 const CloseFooterHint = () => (
   <span className={footerLabelClassName}>
-    <kbd className={footerKbdClassName}>esc</kbd>
+    <kbd className={footerKbdClassName}>
+      <Icon icon="key-escape" iconSize={12} />
+    </kbd>
     close
   </span>
 );
@@ -80,8 +113,11 @@ export const AdvancedSearchFooter = ({
   hasActiveResult,
   insertTarget,
   onInsert,
+  onOpen,
+  onOpenInSidebar,
 }: AdvancedSearchFooterProps) => {
   const hasResults = contentState === "results";
+  const canOpen = hasActiveResult && hasResults;
   const canInsert = !!insertTarget && hasActiveResult && hasResults;
 
   return (
@@ -90,6 +126,11 @@ export const AdvancedSearchFooter = ({
         {insertTarget && (
           <InsertFooterAction disabled={!canInsert} onInsert={onInsert} />
         )}
+        <OpenFooterAction disabled={!canOpen} onOpen={onOpen} />
+        <OpenInSidebarFooterAction
+          disabled={!canOpen}
+          onOpenInSidebar={onOpenInSidebar}
+        />
       </div>
       <CloseFooterHint />
     </div>

apps/roam/src/utils/registerCommandPaletteCommands.ts

@@ -47,7 +47,10 @@ import refreshConfigTree from "~/utils/refreshConfigTree";
 import { refreshAndNotify } from "~/components/LeftSidebarView";
 import { sectionsToBlockProps } from "~/components/settings/LeftSidebarPersonalSettings";
 import { renderAdvancedNodeSearchDialog } from "~/components/AdvancedNodeSearchDialog/AdvancedSearchDialog";
-import { getBlockSelection } from "./advancedSearchFooterUtils";
+import {
+  getBlockSelection,
+  insertPageRefAtRange,
+} from "./advancedSearchFooterUtils";
 
 export const createDiscourseNodeFromCommand = (
   extensionAPI: OnloadArgs["extensionAPI"],
@@ -74,19 +77,12 @@ export const createDiscourseNodeFromCommand = (
         });
         return;
       }
-      const originalText = getTextByBlockUid(uid) || "";
-      const pageRef = `[[${result.text}]]`;
-      const newText = `${originalText.substring(0, selectionStart)}${pageRef}${originalText.substring(selectionEnd)}`;
-      const newCursorPosition = selectionStart + pageRef.length;
-
-      await updateBlock({ uid, text: newText });
-
-      await window.roamAlphaAPI.ui.setBlockFocusAndSelection({
-        location: {
-          "block-uid": uid,
-          "window-id": windowId,
-        },
-        selection: { start: newCursorPosition },
+      await insertPageRefAtRange({
+        blockUid: uid,
+        pageTitle: result.text,
+        selectionEnd,
+        selectionStart,
+        windowId,
       });
       return;
     },