style(quick-pane): use standard titlebar drag

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;