style(quick-pane): use standard titlebar drag

test/quick-pane-ui.test.js

@@ -278,7 +278,7 @@ test("Quick Pane uses native dimensions and request-first compact layout", async
   assert.match(source, /new ResizeObserver\(resizeToContent\)/);
   assert.match(source, /invoke\("resize_quick_pane", \{ height \}\)/);
   assert.doesNotMatch(source, /onCloseRequested/);
-  assert.match(source, /className="quick-pane-drag-region"/);
+  assert.match(source, /className="quick-pane-titlebar"/);
   assert.match(source, /startDragging\(\)/);
   assert.match(source, /className="quick-pane-request"/);
   assert.match(source, /className=\{`quick-pane-exchange/);
@@ -322,7 +322,10 @@ test("Quick Pane uses native dimensions and request-first compact layout", async
     stylesheet,
     /\.quick-pane-composer[\s\S]*?height: 120px[\s\S]*?min-height: 110px[\s\S]*?max-height: 130px/,
   );
-  assert.match(stylesheet, /\.quick-pane-drag-region[\s\S]*?position:\s*absolute[\s\S]*?height:\s*10px[\s\S]*?cursor:\s*grab/);
+  assert.match(
+    stylesheet,
+    /\.quick-pane-titlebar[\s\S]*?height:\s*20px[\s\S]*?border-bottom:[\s\S]*?cursor:\s*grab/,
+  );
   assert.match(
     stylesheet,
     /\.quick-pane-composer-actions[\s\S]*?position: absolute/,

ui/src/quick-pane/QuickPane.test.tsx

@@ -234,7 +234,7 @@ describe("QuickPane", () => {
     expect(
       Array.from(pane?.children ?? []).map((element) => element.classList[0]),
     ).toEqual([
-      "quick-pane-drag-region",
+      "quick-pane-titlebar",
       "quick-pane-toolbar",
       "quick-pane-composer",
       "quick-pane-exchange",
@@ -280,13 +280,13 @@ describe("QuickPane", () => {
     }
   });
 
-  it("starts native dragging from whole visible region, never toolbar controls", async () => {
+  it("starts native dragging from the titlebar, never toolbar controls", async () => {
     bridgeMock([defaultModels]);
     const { container } = render(<QuickPane />);
     await preparedTrigger();
-    const dragRegion = container.querySelector(".quick-pane-drag-region")!;
-    expect(dragRegion.querySelector(".quick-pane-drag-grip")).toBeTruthy();
-    fireEvent.pointerDown(dragRegion);
+    const titlebar = container.querySelector(".quick-pane-titlebar")!;
+    expect(titlebar).toHaveTextContent("Quick Pane");
+    fireEvent.pointerDown(titlebar);
     expect(mocks.startDragging).toHaveBeenCalledTimes(1);
     fireEvent.pointerDown(
       screen.getByRole("button", { name: "Close Quick Pane" }),

ui/src/quick-pane/QuickPane.tsx

@@ -1136,14 +1136,16 @@ export default function QuickPane() {
   return (
     <main className="quick-pane" ref={paneRef}>
       <div
-        className="quick-pane-drag-region"
-        aria-hidden="true"
-        onPointerDown={() =>
+        className="quick-pane-titlebar"
+        onPointerDown={(event) => {
+          if (event.button !== 0) return;
           void getCurrentWindow()
             .startDragging()
-            .catch(() => undefined)
-        }
-      />
+            .catch(() => undefined);
+        }}
+      >
+        <span>Quick Pane</span>
+      </div>
       <header className="quick-pane-toolbar">
         <div className="quick-pane-primary-controls">
           <ModelSelector

ui/src/quick-pane/quick-pane.css

@@ -47,37 +47,26 @@ body {
   align-items: center;
 }
 
-.quick-pane-drag-region {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 10px;
+.quick-pane-titlebar {
+  display: flex;
+  height: 20px;
+  flex: 0 0 20px;
+  align-items: center;
+  padding: 0 8px;
+  border-bottom: 1px solid #4b4b4b;
+  color: #aaa39a;
   cursor: grab;
-  touch-action: none;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  user-select: none;
 }
 
-.quick-pane-drag-region:active {
+.quick-pane-titlebar:active {
   cursor: grabbing;
 }
 
-.quick-pane-drag-region::after {
-  position: absolute;
-  top: 2px;
-  right: 18px;
-  left: 18px;
-  height: 5px;
-  border-radius: 999px;
-  background: repeating-linear-gradient(
-    90deg,
-    #817c76 0 5px,
-    transparent 5px 9px
-  );
-  box-shadow: 0 0 5px rgba(190, 185, 178, 0.18);
-  content: "";
-}
-
 .quick-pane-toolbar {
   flex: 0 0 auto;
   flex-wrap: nowrap;