revert irrelevant changes

Author: trangdoan982

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

@@ -9,6 +9,7 @@ import {
   Button,
   Dialog,
   InputGroup,
+  NonIdealState,
   Spinner,
   SpinnerSize,
   Tag,
@@ -37,6 +38,7 @@ import {
   type SearchResult,
   type SortConfig,
   buildSearchIndex,
+  formatMetadataDate,
   searchIndexedNodes,
   sortSearchResults,
   splitWithHighlights,
@@ -108,6 +110,43 @@ const ResultRow = ({
   </Button>
 );
 
+const PreviewPane = ({ result }: { result: SearchResult | null }) => {
+  if (!result) {
+    return (
+      <div className="flex min-h-0 flex-1 items-center justify-center overflow-hidden">
+        <NonIdealState
+          icon="search"
+          title="Search DG nodes"
+          description="Type a keyword to preview matching discourse graph nodes."
+        />
+      </div>
+    );
+  }
+  const isPage = !!getPageTitleByPageUid(result.uid);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div className="flex-none flex-row gap-2 border-b border-gray-200 px-5 py-3 text-xs text-gray-500">
+        Created: {formatMetadataDate(result.createdAt)} · Last modified:{" "}
+        {formatMetadataDate(result.lastModified)} · Author:{" "}
+        {result.authorName || "Unknown"}
+      </div>
+      <div
+        className="min-h-0 flex-1 overflow-y-auto border-t border-gray-200 px-5 py-3"
+        onMouseDown={(event) => event.preventDefault()}
+      >
+        <div className="pointer-events-none">
+          {isPage ? (
+            <RenderRoamPage hideMentions key={result.uid} uid={result.uid} />
+          ) : (
+            <RenderRoamBlock key={result.uid} uid={result.uid} zoomPath />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const AdvancedNodeSearchDialog = ({
   isOpen,
   onClose,
@@ -408,6 +447,8 @@ const AdvancedNodeSearchDialog = ({
     ],
   );
 
+  const showSplitView = contentState === "results";
+
   return (
     <Dialog
       autoFocus={false}
@@ -459,25 +500,30 @@ const AdvancedNodeSearchDialog = ({
           />
         </div>
         <div className="flex min-h-0 w-full flex-1 overflow-hidden">
-          {contentState === "results" ? (
-            <div
-              aria-label="Search results"
-              className="w-full overflow-y-auto py-1"
-              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}
-                />
-              ))}
-            </div>
+          {showSplitView ? (
+            <>
+              <div
+                aria-label="Search results"
+                className="w-1/3 shrink-0 overflow-y-auto border-r border-gray-200 py-1"
+                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}
+                  />
+                ))}
+              </div>
+              <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+                <PreviewPane result={activeResult} />
+              </div>
+            </>
           ) : (
             <div className="flex min-h-0 w-full flex-1 items-center justify-center px-4 py-8 text-center text-sm text-gray-500">
               {contentState === "indexing" && (

apps/roam/src/utils/registerCommandPaletteCommands.ts

@@ -46,7 +46,7 @@ import { getUidAndBooleanSetting } from "~/utils/getExportSettings";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { refreshAndNotify } from "~/components/LeftSidebarView";
 import { sectionsToBlockProps } from "~/components/settings/LeftSidebarPersonalSettings";
-import { renderAdvancedNodeSearchSidebar } from "~/components/AdvancedNodeSearchDialog/AdvancedSearchDialog";
+import { renderAdvancedNodeSearchDialog } from "~/components/AdvancedNodeSearchDialog/AdvancedSearchDialog";
 import {
   getBlockSelection,
   insertPageRefAtRange,
@@ -367,7 +367,7 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
   if (getFeatureFlag("Advanced node search enabled")) {
     void addCommand("DG: Open Node Search", () => {
       posthog.capture("Node Search: Open Command Triggered");
-      renderAdvancedNodeSearchSidebar();
+      renderAdvancedNodeSearchDialog();
     });
   }
   void addCommand("DG: Open - Query drawer", openQueryDrawerWithArgs);