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>
This commit is contained in:
agent_coder
2026-07-02 03:09:03 +03:00
parent 85b303e387
commit c16942777d
3 changed files with 60 additions and 8 deletions
@@ -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} />
@@ -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,
);
});
});
@@ -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);
}