From 0bf597c2fdf969fac717f37c0b605b2942e2d319 Mon Sep 17 00:00:00 2001
From: arookieofc <2128194521@qq.com>
Date: Sun, 1 Nov 2026 08:13:15 +0800
Subject: [PATCH] fix(search): make the search popups draggable (#625)

Find in Files, Replace in Files and Search Everywhere have no window title bar, so they could not be moved off the editor underneath. Dialogs can now be dragged from any element marked `data-dialog-drag`: the headers of those search popups, the title of any titled popup, and the existing window title bars and alert bodies, which now use the same mark. Controls inside a handle never start a drag.

Also waits for a review thread inlay in a test where it can mount a tick later.

Co-authored-by: a-rookie-of-C-language <186315048+a-rookie-of-C-language@users.noreply.github.com>
---
 src/features/github/diff/reviewDiff.test.tsx  |  3 +-
 .../search/everywhere/SearchEverywhere.tsx    |  2 +-
 src/features/search/find/FindInFiles.tsx      |  2 +-
 src/ui/Dialog.test.tsx                        | 41 +++++++++++++++++++
 src/ui/Dialog.tsx                             | 15 +++----
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/features/github/diff/reviewDiff.test.tsx b/src/features/github/diff/reviewDiff.test.tsx
index cbde3dbe..0026892f 100644
--- a/src/features/github/diff/reviewDiff.test.tsx
+++ b/src/features/github/diff/reviewDiff.test.tsx
@@ -216,7 +216,8 @@ describe("review threads in a pull request diff", () => {
     expect(right.contains(t1)).toBe(true);
     expect(t1.closest(".cm-lineInlay")!.previousElementSibling?.textContent).toBe("line three");
     expect(right.querySelectorAll(".cm-reviewControl-toggle")).toHaveLength(2);
-    expect(inlay("T2")).not.toBeNull();
+    // Each thread's inlay mounts in its own effect, so T2 may land a tick after T1.
+    await waitFor(() => expect(inlay("T2")).not.toBeNull());
 
     act(() => setReviewDiffSettings({ threadsView: "unresolved" }));
     await waitFor(() => expect(inlay("T2")).toBeNull());
diff --git a/src/features/search/everywhere/SearchEverywhere.tsx b/src/features/search/everywhere/SearchEverywhere.tsx
index 86b116fc..f5bd6c41 100644
--- a/src/features/search/everywhere/SearchEverywhere.tsx
+++ b/src/features/search/everywhere/SearchEverywhere.tsx
@@ -394,7 +394,7 @@ function SearchEverywhereDialog() {
       aria-label={tx("Search Everywhere")}
       className={styles.dialog}
     >
-      <div className={styles.header}>
+      <div className={styles.header} data-dialog-drag="">
         <div role="tablist" aria-label={tx("Search scope")} className={styles.tabs} onKeyDown={onTabKey}>
           {TABS.map((t) => (
             <button
diff --git a/src/features/search/find/FindInFiles.tsx b/src/features/search/find/FindInFiles.tsx
index b7ee8bff..c7cd8b73 100644
--- a/src/features/search/find/FindInFiles.tsx
+++ b/src/features/search/find/FindInFiles.tsx
@@ -483,7 +483,7 @@ function FindInFilesDialog() {
       className={styles.dialog}
     >
       <div className={styles.root} onKeyDown={onKeyDown}>
-        <header className={styles.header}>
+        <header className={styles.header} data-dialog-drag="">
           <span className={styles.title}>{s.replace ? tx("Replace in Files") : tx("Find in Files")}</span>
           <span className={styles.status} aria-live="polite">
             {state.status === "searching" || state.status === "validating" ? <Spinner size={12} /> : null}
diff --git a/src/ui/Dialog.test.tsx b/src/ui/Dialog.test.tsx
index 964420fb..051bf266 100644
--- a/src/ui/Dialog.test.tsx
+++ b/src/ui/Dialog.test.tsx
@@ -103,6 +103,47 @@ describe("Dialog chrome", () => {
     expect(document.querySelector("[data-dialog-titlebar]")).toBeNull();
   });
 
+  it("drags a popup by a [data-dialog-drag] handle, but not by its controls or body", () => {
+    render(
+      <Dialog open onClose={() => {}} position="top" aria-label="Search Everywhere">
+        <div data-dialog-drag="">
+          <span>header</span>
+          <button>tab</button>
+        </div>
+        <div>rows</div>
+      </Dialog>,
+    );
+    const dialog = screen.getByRole("dialog");
+    const handle = dialog.querySelector("[data-dialog-drag]")!;
+    const down = (el: Element, x: number) => fireEvent.pointerDown(el, { button: 0, clientX: x, clientY: 10 });
+    down(handle.querySelector("button")!, 10);
+    down(dialog.querySelector("div:last-child")!, 10);
+    expect(dialog.style.translate).toBe("");
+    down(handle, 10);
+    fireEvent.pointerMove(window, { clientX: 200, clientY: 40 });
+    fireEvent.pointerUp(window);
+    expect(dialog.style.translate).toBe("190px 30px");
+  });
+
+  it("still drags a window dialog by its title bar", () => {
+    render(
+      <Dialog open onClose={() => {}} title="Usages Detected" buttons={safeDelete()} platform="other">
+        <p>Usages found</p>
+      </Dialog>,
+    );
+    const dialog = screen.getByRole("dialog");
+    const bar = document.querySelector("[data-dialog-titlebar]") as HTMLElement;
+    fireEvent.pointerDown(bar, { button: 0, clientX: 10, clientY: 10 });
+    fireEvent.pointerMove(window, { clientX: 60, clientY: 40 });
+    fireEvent.pointerUp(window);
+    expect(dialog.style.translate).toBe("80px 30px");
+    // The close button never starts a drag.
+    fireEvent.pointerDown(within(bar).getByRole("button", { name: "Close" }), { button: 0, clientX: 10, clientY: 10 });
+    fireEvent.pointerMove(window, { clientX: 200, clientY: 40 });
+    fireEvent.pointerUp(window);
+    expect(dialog.style.translate).toBe("80px 30px");
+  });
+
   it("renders the help button and footer start on the left", () => {
     const onHelp = vi.fn();
     render(
diff --git a/src/ui/Dialog.tsx b/src/ui/Dialog.tsx
index 4d0423d9..a7f148d9 100644
--- a/src/ui/Dialog.tsx
+++ b/src/ui/Dialog.tsx
@@ -117,7 +117,7 @@ export interface DialogProps {
   /**
    * `top` places a lightweight modal popup (choosers, Search Everywhere) near
    * the top. Popups (also any dialog without a title) get no window title bar
-   * and are not draggable.
+   * and drag only by a `[data-dialog-drag]` element, such as their title.
    */
   position?: "center" | "top";
   className?: string;
@@ -287,8 +287,8 @@ function DialogInner({
 
   const drag = (e: PointerEvent<HTMLDivElement>) => {
     if (
-      popup ||
       e.button !== 0 ||
+      !(e.target as Element).closest("[data-dialog-drag]") ||
       (e.target as Element).closest(`button, input, label, a, select, textarea, .${selectableText}`)
     )
       return;
@@ -362,6 +362,7 @@ function DialogInner({
         data-alert={icon ? "" : undefined}
         data-inactive={active ? undefined : ""}
         className={clsx(styles.dialog, popup ? styles.popup : styles.window, className)}
+        onPointerDown={drag}
         style={{
           width: size ? size.w : width,
           height: size?.h,
@@ -370,12 +371,12 @@ function DialogInner({
       >
         {icon ? null : popup ? (
           title != null && (
-            <div className={styles.popupHeader}>
+            <div className={styles.popupHeader} data-dialog-drag="">
               <span className={styles.title}>{title}</span>
             </div>
           )
         ) : platform === "mac" ? (
-          <div className={clsx(styles.titleBar, styles.macTitleBar)} onPointerDown={drag} data-dialog-titlebar="">
+          <div className={clsx(styles.titleBar, styles.macTitleBar)} data-dialog-drag="" data-dialog-titlebar="">
             <span className={styles.lights}>
               <button
                 type="button"
@@ -392,13 +393,13 @@ function DialogInner({
             <span className={styles.title}>{title}</span>
           </div>
         ) : (
-          <div className={styles.titleBar} onPointerDown={drag} data-dialog-titlebar="">
+          <div className={styles.titleBar} data-dialog-drag="" data-dialog-titlebar="">
             <span className={styles.title}>{title}</span>
             <IconButton icon="close" title="Close" size="small" tabIndex={-1} onClick={onClose} />
           </div>
         )}
         {icon ? (
-          <div className={styles.message} data-dialog-body="" onPointerDown={drag}>
+          <div className={styles.message} data-dialog-body="" data-dialog-drag="">
             {icon === "app" ? (
               <img className={styles.messageAppIcon} src={appIcon} alt="" draggable={false} />
             ) : (
@@ -419,7 +420,7 @@ function DialogInner({
         )}
         {icon
           ? !!buttons?.length && (
-              <div className={clsx(styles.footer, styles.messageFooter)} data-dialog-footer="" onPointerDown={drag}>
+              <div className={clsx(styles.footer, styles.messageFooter)} data-dialog-footer="" data-dialog-drag="">
                 <DialogButtons buttons={buttons} onCancel={onClose} platform={platform} />
               </div>
             )