Merge pull request #1076 from org2AI/fix/chat-pane-collapsed-drag-region

fix(chat-panel): restore the window drag zone in the folded header

Author: Chloe-JY

src/components/WindowChrome/PublishedHeaderSlotsView.tsx

@@ -14,10 +14,23 @@ export interface PublishedHeaderSlots {
   joinWithFollowingRow?: boolean;
 }
 
+const DRAG_STYLE = { WebkitAppRegion: "drag" } as React.CSSProperties;
+
 interface PublishedHeaderSlotsViewProps {
   slots: PublishedHeaderSlots | null;
   /** Left inset for host-specific chrome alignment. */
   paddingLeftClassName?: string;
+  /**
+   * Hand the space after `content` to the host window as a drag handle
+   * instead of stretching `content` across it.
+   *
+   * `content` normally carries the `flex-1`, which makes the whole middle of
+   * the row one no-drag region. That is fine while a tab bar sits above and
+   * owns dragging, but a row that is its own pane's only chrome has to offer
+   * a handle of its own — exactly as the tab strip does, where the strip is
+   * draggable and only the pills opt out.
+   */
+  dragFiller?: boolean;
 }
 
 /**
@@ -26,7 +39,11 @@ interface PublishedHeaderSlotsViewProps {
  */
 export const PublishedHeaderSlotsView: React.FC<PublishedHeaderSlotsViewProps> =
   memo(
-    ({ slots, paddingLeftClassName = HEADER_CONTENT_LEFT_PADDING_CLASS }) => {
+    ({
+      slots,
+      paddingLeftClassName = HEADER_CONTENT_LEFT_PADDING_CLASS,
+      dragFiller = false,
+    }) => {
       return (
         <div
           className={`flex min-w-0 flex-1 items-center ${paddingLeftClassName}`}
@@ -36,9 +53,20 @@ export const PublishedHeaderSlotsView: React.FC<PublishedHeaderSlotsViewProps> =
               {slots.leading}
             </NoDragRegion>
           )}
-          <NoDragRegion className="flex min-w-0 flex-1 items-center">
+          <NoDragRegion
+            className={`flex min-w-0 items-center ${dragFiller ? "" : "flex-1"}`}
+          >
             {slots?.content}
           </NoDragRegion>
+          {dragFiller && (
+            <div
+              className="h-full min-w-0 flex-1"
+              data-tauri-drag-region
+              data-testid="published-header-drag-filler"
+              style={DRAG_STYLE}
+              aria-hidden
+            />
+          )}
           {slots?.trailing && (
             <NoDragRegion className="flex shrink-0 items-center gap-px">
               {slots.trailing}

src/engines/ChatPanel/ChatPanelHeader.test.ts

@@ -104,6 +104,8 @@ describe("ChatPanelHeader tab row collapse", () => {
     expect(markup).not.toContain(
       'data-testid="chat-panel-collapsed-tab-controls"'
     );
+    // The tab row above still owns window dragging here.
+    expect(markup).not.toContain('data-testid="published-header-drag-filler"');
     expect(markup).toContain('style="height:80px"');
   });
 
@@ -124,8 +126,10 @@ describe("ChatPanelHeader tab row collapse", () => {
     expect(markup).not.toContain("transition-opacity");
     expect(markup).toContain('data-icon="x"');
     expect(markup).toContain('style="height:44px"');
-    // The maximized pane's only chrome — no rule under it.
+    // The maximized pane's only chrome — no rule under it, and it has to
+    // offer the window-drag handle the folded tab row used to provide.
     expect(markup).not.toContain("border-b border-border-2");
+    expect(markup).toContain('data-testid="published-header-drag-filler"');
     // The window-edge gap the folded 44px row used to hold (its pt-2).
     expect(markup).toContain('data-testid="chat-panel-collapsed-header"');
     expect(markup).toContain("padding-top:8px");

src/engines/ChatPanel/ChatPanelHeader.tsx

@@ -421,6 +421,7 @@ export function ChatPanelHeader({
             ? getCollapsedSidebarChromeOffset()
             : undefined
         }
+        dragFiller
       />
     </div>
   ) : (

src/engines/ChatPanel/header/ChatPanelPublishedHeader.test.ts

@@ -47,6 +47,33 @@ describe("ChatPanelPublishedHeader", () => {
     expect(markup).not.toContain("border-b border-border-2");
   });
 
+  it("stretches content over the row when a tab bar above owns dragging", () => {
+    const markup = renderToStaticMarkup(
+      React.createElement(ChatPanelPublishedHeader, {
+        windowsHost: false,
+        slots: { content: React.createElement("span", null, "Content") },
+      })
+    );
+
+    expect(markup).toContain("flex min-w-0 flex-1 items-center");
+    expect(markup).not.toContain('data-testid="published-header-drag-filler"');
+  });
+
+  it("hands the space after content to the window when it is the only chrome", () => {
+    const markup = renderToStaticMarkup(
+      React.createElement(ChatPanelPublishedHeader, {
+        windowsHost: false,
+        dragFiller: true,
+        slots: { content: React.createElement("span", null, "Content") },
+      })
+    );
+
+    // The filler is draggable; content no longer swallows the row.
+    expect(markup).toContain('data-testid="published-header-drag-filler"');
+    expect(markup).toContain("-webkit-app-region:drag");
+    expect(markup).toContain("Content");
+  });
+
   it("does not add an empty row when no pane has published controls", () => {
     expect(
       renderToStaticMarkup(

src/engines/ChatPanel/header/ChatPanelPublishedHeader.tsx

@@ -17,11 +17,16 @@ interface ChatPanelPublishedHeaderProps {
    * set, and is only passed once this row inherited the pane's top edge.
    */
   leadingInsetPx?: number;
+  /**
+   * Offer the space after the title as a window-drag handle. Set once this row
+   * is the pane's only chrome and no tab bar above it owns dragging.
+   */
+  dragFiller?: boolean;
 }
 
 /** Chat-pane counterpart of My Station's shared 36px published header. */
 export const ChatPanelPublishedHeader: React.FC<ChatPanelPublishedHeaderProps> =
-  memo(({ slots, windowsHost, leadingInsetPx }) => {
+  memo(({ slots, windowsHost, leadingInsetPx, dragFiller }) => {
     if (!slots) return null;
 
     return (
@@ -41,6 +46,7 @@ export const ChatPanelPublishedHeader: React.FC<ChatPanelPublishedHeaderProps> =
         <PublishedHeaderSlotsView
           slots={slots}
           paddingLeftClassName={leadingInsetPx === undefined ? undefined : ""}
+          dragFiller={dragFiller}
         />
       </div>
     );