From c16942777dba264f644fddb279ea215c543a641f Mon Sep 17 00:00:00 2001
From: agent_coder <agent_coder@users.noreply.gitea.vvzvlad.xyz>
Date: Thu, 2 Jul 2026 03:09:03 +0300
Subject: [PATCH] test(ai-chat): extract+test navbar-visibility predicate; dock
 label on useDock (#276 review F1/F2)

F1: extract the navbar-visibility crux (width/height 0 or right<=0 -> hidden)
from getNavbarRect into a pure isNavbarRectVisible in dock-helpers.ts + 3 tests;
getNavbarRect calls it (identical null cases).
F2: base the dock/undock button's label/icon/title on the effective useDock state
(docked && dockRect present) rather than the raw docked flag, so a docked window
that fell back to floating (collapsed sidebar) doesn't show 'Undock'. Toggle
action unchanged; no remount.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ai-chat/components/ai-chat-window.tsx     | 20 ++++++++----
 .../ai-chat/utils/dock-helpers.test.ts        | 32 ++++++++++++++++++-
 .../features/ai-chat/utils/dock-helpers.ts    | 16 ++++++++++
 3 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/features/ai-chat/components/ai-chat-window.tsx b/apps/client/src/features/ai-chat/components/ai-chat-window.tsx
index 94923771..c26bfa2d 100644
--- a/apps/client/src/features/ai-chat/components/ai-chat-window.tsx
+++ b/apps/client/src/features/ai-chat/components/ai-chat-window.tsx
@@ -56,6 +56,7 @@ import {
 import { selectContextBadge } from "@/features/ai-chat/utils/context-badge.ts";
 import {
   isPointWithinRect,
+  isNavbarRectVisible,
   type NavbarRect,
 } from "@/features/ai-chat/utils/dock-helpers.ts";
 import { useClipboard } from "@/hooks/use-clipboard";
@@ -134,7 +135,8 @@ function getNavbarRect(): NavbarRect | null {
   const el = document.getElementById(APP_NAVBAR_ID);
   if (!el) return null;
   const r = el.getBoundingClientRect();
-  if (r.width === 0 || r.height === 0 || r.right <= 0) return null;
+  // Off-screen/collapsed navbar (visibility predicate extracted + unit-tested).
+  if (!isNavbarRectVisible(r)) return null;
   return { left: r.left, top: r.top, width: r.width, height: r.height };
 }
 
@@ -751,17 +753,21 @@ export default function AiChatWindow() {
               )}
             </button>
           )}
-          {/* Dock/undock toggle. Docked -> "Undock" (expand icon) pops the window
-              back out to floating; floating -> "Dock to sidebar" (collapse icon)
-              pins it into the navbar. */}
+          {/* Dock/undock toggle. Effectively docked -> "Undock" (expand icon) pops
+              the window back out to floating; floating -> "Dock to sidebar"
+              (collapse icon) pins it into the navbar. The LABEL/icon reflect the
+              EFFECTIVE state (useDock), consistent with the Minimize gate: when
+              docked but the navbar is absent/collapsed the window renders floating,
+              so an "Undock" label there would misdescribe a floating window. The
+              action still toggles the raw `docked` atom. */}
           <button
             type="button"
             className={classes.headerBtn}
-            title={docked ? t("Undock") : t("Dock to sidebar")}
-            aria-label={docked ? t("Undock") : t("Dock to sidebar")}
+            title={useDock ? t("Undock") : t("Dock to sidebar")}
+            aria-label={useDock ? t("Undock") : t("Dock to sidebar")}
             onClick={toggleDock}
           >
-            {docked ? (
+            {useDock ? (
               <IconLayoutSidebarLeftExpand size={14} />
             ) : (
               <IconLayoutSidebarLeftCollapse size={14} />
diff --git a/apps/client/src/features/ai-chat/utils/dock-helpers.test.ts b/apps/client/src/features/ai-chat/utils/dock-helpers.test.ts
index 7d288ef1..e4f4d3a2 100644
--- a/apps/client/src/features/ai-chat/utils/dock-helpers.test.ts
+++ b/apps/client/src/features/ai-chat/utils/dock-helpers.test.ts
@@ -1,5 +1,9 @@
 import { describe, it, expect } from "vitest";
-import { isPointWithinRect, type NavbarRect } from "./dock-helpers.ts";
+import {
+  isPointWithinRect,
+  isNavbarRectVisible,
+  type NavbarRect,
+} from "./dock-helpers.ts";
 
 const NAVBAR: NavbarRect = { left: 0, top: 45, width: 300, height: 800 };
 
@@ -26,3 +30,29 @@ describe("isPointWithinRect", () => {
     expect(isPointWithinRect(150, 400, null)).toBe(false);
   });
 });
+
+describe("isNavbarRectVisible", () => {
+  it("returns true for a normal on-screen navbar rect", () => {
+    expect(isNavbarRectVisible({ width: 300, height: 800, right: 300 })).toBe(
+      true,
+    );
+  });
+
+  it("returns false for a zero-size rect (width or height 0)", () => {
+    expect(isNavbarRectVisible({ width: 0, height: 800, right: 300 })).toBe(
+      false,
+    );
+    expect(isNavbarRectVisible({ width: 300, height: 0, right: 300 })).toBe(
+      false,
+    );
+  });
+
+  it("returns false when the navbar is translated off-screen (right <= 0)", () => {
+    expect(isNavbarRectVisible({ width: 300, height: 800, right: 0 })).toBe(
+      false,
+    );
+    expect(isNavbarRectVisible({ width: 300, height: 800, right: -50 })).toBe(
+      false,
+    );
+  });
+});
diff --git a/apps/client/src/features/ai-chat/utils/dock-helpers.ts b/apps/client/src/features/ai-chat/utils/dock-helpers.ts
index b2e7f2f1..9dc3fa7d 100644
--- a/apps/client/src/features/ai-chat/utils/dock-helpers.ts
+++ b/apps/client/src/features/ai-chat/utils/dock-helpers.ts
@@ -30,3 +30,19 @@ export function isPointWithinRect(
     y <= rect.top + rect.height
   );
 }
+
+/**
+ * Whether a measured navbar rect represents a VISIBLE navbar. Mantine collapses
+ * the navbar by translating it off-screen (its right edge lands at or left of the
+ * viewport) without changing its width/border-box, so a zero-size or off-screen
+ * rect means "no navbar" — the docked window then falls back to floating instead
+ * of pinning to an invisible box. Pure (no DOM) so it can be unit-tested; the
+ * DOM-reading getNavbarRect() in the window component supplies the rect.
+ */
+export function isNavbarRectVisible(r: {
+  width: number;
+  height: number;
+  right: number;
+}): boolean {
+  return !(r.width === 0 || r.height === 0 || r.right <= 0);
+}