@nextclaw/ui 0.13.4 → 0.13.6

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -1,8 +1,23 @@
-import type { PointerEvent } from 'react';
-import { ArrowLeft, ArrowRight, Maximize2, PanelRightOpen, Plus, X } from 'lucide-react';
-import type { DocBrowserTab } from './doc-browser-context';
-import { cn } from '@/shared/lib/utils';
-import { t } from '@/shared/lib/i18n';
+import type { ButtonHTMLAttributes, PointerEvent, ReactElement } from "react";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Maximize2,
+  PanelRightOpen,
+  Pin,
+  PinOff,
+  Plus,
+  X,
+} from "lucide-react";
+import type { DocBrowserDockState, DocBrowserTab } from "./doc-browser-context";
+import { cn } from "@/shared/lib/utils";
+import { t } from "@/shared/lib/i18n";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 
 type DocBrowserTabStripProps = {
   tabs: DocBrowserTab[];
@@ -11,9 +26,11 @@ type DocBrowserTabStripProps = {
   canGoForward: boolean;
   isDocked: boolean;
   isFullscreen: boolean;
+  dockState?: DocBrowserDockState;
   onGoBack: () => void;
   onGoForward: () => void;
   onOpenNewTab: () => void;
+  onToggleDock?: () => void;
   onSetActiveTab: (tabId: string) => void;
   onCloseTab: (tabId: string) => void;
   onClose: () => void;
@@ -21,6 +38,53 @@ type DocBrowserTabStripProps = {
   onToggleMode: () => void;
 };
 
+type DocBrowserIconActionButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children" | "type"
+> & {
+  disabled?: boolean;
+  icon: ReactElement;
+  label: string;
+  variant?: "tab" | "toolbar";
+};
+
+function DocBrowserIconActionButton({
+  className,
+  disabled = false,
+  icon,
+  label,
+  variant = "toolbar",
+  ...buttonProps
+}: DocBrowserIconActionButtonProps) {
+  const button = (
+    <button
+      {...buttonProps}
+      type="button"
+      disabled={disabled}
+      className={cn(
+        variant === "toolbar"
+          ? "rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent disabled:hover:text-gray-300"
+          : "rounded p-0.5 transition-colors hover:bg-black/10",
+        className,
+      )}
+      aria-label={label}
+    >
+      {icon}
+    </button>
+  );
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {disabled ? <span className="inline-flex">{button}</span> : button}
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="text-xs">
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
 export function DocBrowserTabStrip({
   tabs,
   activeTabId,
@@ -28,113 +92,135 @@ export function DocBrowserTabStrip({
   canGoForward,
   isDocked,
   isFullscreen,
+  dockState,
   onGoBack,
   onGoForward,
   onOpenNewTab,
+  onToggleDock,
   onSetActiveTab,
   onCloseTab,
   onClose,
   onDragStart,
   onToggleMode,
 }: DocBrowserTabStripProps) {
+  const backLabel = t("docBrowserBack");
+  const closeLabel = t("docBrowserClose");
+  const closeTabLabel = t("docBrowserCloseTab");
+  const dockLabel = dockState?.isDocked
+    ? dockState.removable
+      ? t("sideDockUnpinCurrent")
+      : t("sideDockBuiltInDocked")
+    : t("sideDockPinCurrent");
+  const forwardLabel = t("docBrowserForward");
+  const modeLabel = isDocked
+    ? t("docBrowserFloatMode")
+    : t("docBrowserDockMode");
+  const newTabLabel = t("docBrowserNewTab");
+
   return (
-    <div
-      data-testid="doc-browser-tab-strip"
-      className={cn(
-        'flex h-11 items-stretch gap-2 px-2.5 bg-background border-b border-[#f1e7d4] shrink-0 select-none',
-        isFullscreen && 'h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]',
-      )}
-      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-    >
+    <TooltipProvider delayDuration={250}>
       <div
-        className="doc-browser-tab-scrollbar flex h-full min-w-0 flex-1 items-center gap-1.5 overflow-x-auto"
-        onPointerDown={(event) => event.stopPropagation()}
+        data-testid="doc-browser-tab-strip"
+        className={cn(
+          "flex h-11 items-stretch gap-2 px-2.5 bg-background border-b border-[#f1e7d4] shrink-0 select-none",
+          isFullscreen &&
+            "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
+        )}
+        onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
       >
-        {tabs.map((tab) => {
-          const isActive = tab.id === activeTabId;
-          return (
-            <div
-              key={tab.id}
-              className={cn(
-                'inline-flex items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors',
-                isActive
-                  ? 'bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]'
-                  : 'bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]',
-              )}
-            >
-              <button
-                type="button"
-                onClick={() => onSetActiveTab(tab.id)}
-                className="truncate text-left px-1"
-                title={tab.title}
-              >
-                {tab.title || t('docBrowserTabUntitled')}
-              </button>
-              <button
-                type="button"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onCloseTab(tab.id);
-                }}
-                className="rounded p-0.5 hover:bg-black/10"
-                aria-label={t('docBrowserCloseTab')}
-              >
-                <X className="w-3 h-3" />
-              </button>
-            </div>
-          );
-        })}
-      </div>
-      <div
-        className="flex h-full items-center gap-1 shrink-0"
-        data-testid="doc-browser-tab-actions"
-        onPointerDown={(event) => event.stopPropagation()}
-      >
-        <button
-          type="button"
-          onClick={onGoBack}
-          disabled={!canGoBack}
-          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent disabled:hover:text-gray-300"
-          title={t('docBrowserBack')}
-        >
-          <ArrowLeft className="w-3.5 h-3.5" />
-        </button>
-        <button
-          type="button"
-          onClick={onGoForward}
-          disabled={!canGoForward}
-          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent disabled:hover:text-gray-300"
-          title={t('docBrowserForward')}
+        <div
+          className="doc-browser-tab-scrollbar flex h-full min-w-0 flex-1 items-center gap-1.5 overflow-x-auto"
+          onPointerDown={(event) => event.stopPropagation()}
         >
-          <ArrowRight className="w-3.5 h-3.5" />
-        </button>
-        <button
-          type="button"
-          onClick={onOpenNewTab}
-          className="hover:bg-gray-100 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
-          title={t('docBrowserNewTab')}
-        >
-          <Plus className="w-3.5 h-3.5" />
-        </button>
-        {!isFullscreen ? (
-          <button
-            type="button"
-            onClick={onToggleMode}
-            className="hover:bg-gray-100 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
-            title={isDocked ? t('docBrowserFloatMode') : t('docBrowserDockMode')}
-          >
-            {isDocked ? <Maximize2 className="w-3.5 h-3.5" /> : <PanelRightOpen className="w-3.5 h-3.5" />}
-          </button>
-        ) : null}
-        <button
-          type="button"
-          onClick={onClose}
-          className="hover:bg-gray-100 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
-          title={t('docBrowserClose')}
+          {tabs.map((tab) => {
+            const isActive = tab.id === activeTabId;
+            return (
+              <div
+                key={tab.id}
+                className={cn(
+                  "inline-flex items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors",
+                  isActive
+                    ? "bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
+                    : "bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]",
+                )}
+              >
+                <button
+                  type="button"
+                  onClick={() => onSetActiveTab(tab.id)}
+                  className="truncate text-left px-1"
+                  title={tab.title}
+                >
+                  {tab.title || t("docBrowserTabUntitled")}
+                </button>
+                <DocBrowserIconActionButton
+                  icon={<X className="w-3 h-3" />}
+                  label={closeTabLabel}
+                  variant="tab"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onCloseTab(tab.id);
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+        <div
+          className="flex h-full items-center gap-1 shrink-0"
+          data-testid="doc-browser-tab-actions"
+          onPointerDown={(event) => event.stopPropagation()}
         >
-          <X className="w-3.5 h-3.5" />
-        </button>
+          <DocBrowserIconActionButton
+            disabled={!canGoBack}
+            icon={<ArrowLeft className="w-3.5 h-3.5" />}
+            label={backLabel}
+            onClick={onGoBack}
+          />
+          <DocBrowserIconActionButton
+            disabled={!canGoForward}
+            icon={<ArrowRight className="w-3.5 h-3.5" />}
+            label={forwardLabel}
+            onClick={onGoForward}
+          />
+          <DocBrowserIconActionButton
+            icon={<Plus className="w-3.5 h-3.5" />}
+            label={newTabLabel}
+            onClick={onOpenNewTab}
+          />
+          {dockState?.canDock ? (
+            <DocBrowserIconActionButton
+              disabled={dockState.isDocked && !dockState.removable}
+              icon={
+                dockState.isDocked && dockState.removable ? (
+                  <PinOff className="w-3.5 h-3.5" />
+                ) : (
+                  <Pin className="w-3.5 h-3.5" />
+                )
+              }
+              label={dockLabel}
+              onClick={onToggleDock}
+            />
+          ) : null}
+          {!isFullscreen ? (
+            <DocBrowserIconActionButton
+              icon={
+                isDocked ? (
+                  <Maximize2 className="w-3.5 h-3.5" />
+                ) : (
+                  <PanelRightOpen className="w-3.5 h-3.5" />
+                )
+              }
+              label={modeLabel}
+              onClick={onToggleMode}
+            />
+          ) : null}
+          <DocBrowserIconActionButton
+            icon={<X className="w-3.5 h-3.5" />}
+            label={closeLabel}
+            onClick={onClose}
+          />
+        </div>
       </div>
-    </div>
+    </TooltipProvider>
   );
 }

package/src/shared/components/doc-browser/doc-browser.test.tsx

@@ -1,7 +1,11 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DocBrowser } from "@/shared/components/doc-browser/doc-browser";
-import type { DocBrowserContextValue, DocBrowserTab } from "@/shared/components/doc-browser/doc-browser-context";
+import type {
+  DocBrowserContextValue,
+  DocBrowserTab,
+} from "@/shared/components/doc-browser/doc-browser-context";
 import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
 
 const { navigateMock } = vi.hoisted(() => ({
@@ -9,11 +13,13 @@ const { navigateMock } = vi.hoisted(() => ({
 }));
 
 vi.mock("react-router-dom", async () => ({
-  ...(await vi.importActual("react-router-dom") as object),
+  ...((await vi.importActual("react-router-dom")) as object),
   useNavigate: () => navigateMock,
 }));
 
-const { docBrowserState } = vi.hoisted<{ docBrowserState: DocBrowserContextValue }>(() => ({
+const { docBrowserState } = vi.hoisted<{
+  docBrowserState: DocBrowserContextValue;
+}>(() => ({
   docBrowserState: {
     isOpen: true,
     mode: "docked" as "docked" | "floating",
@@ -29,11 +35,13 @@ const { docBrowserState } = vi.hoisted<{ docBrowserState: DocBrowserContextValue
       },
     ],
     activeTabId: "docs",
-    activeHistory: [{
-      kind: "docs" as const,
-      tabId: "docs",
-      url: "https://docs.nextclaw.io/en/guide/getting-started",
-    }],
+    activeHistory: [
+      {
+        kind: "docs" as const,
+        tabId: "docs",
+        url: "https://docs.nextclaw.io/en/guide/getting-started",
+      },
+    ],
     activeHistoryIndex: 0,
     currentTab: {
       id: "docs",
@@ -99,11 +107,13 @@ describe("DocBrowser", () => {
       },
     ];
     docBrowserState.activeTabId = "docs";
-    docBrowserState.activeHistory = [{
-      kind: "docs" as const,
-      tabId: "docs",
-      url: "https://docs.nextclaw.io/en/guide/getting-started",
-    }];
+    docBrowserState.activeHistory = [
+      {
+        kind: "docs" as const,
+        tabId: "docs",
+        url: "https://docs.nextclaw.io/en/guide/getting-started",
+      },
+    ];
     docBrowserState.activeHistoryIndex = 0;
     docBrowserState.currentTab = docBrowserState.tabs[0];
     Object.defineProperty(window, "innerWidth", {
@@ -133,24 +143,41 @@ describe("DocBrowser", () => {
     expect(panel.className).toContain("inset-0");
     expect(panel.className).toContain("w-screen");
     expect(
-      screen.queryByTitle(/float/i) ?? screen.queryByTitle(/dock/i),
+      screen.queryByRole("button", { name: /float/i }) ??
+        screen.queryByRole("button", { name: /dock/i }),
     ).toBeNull();
     expect(panel.querySelector(".cursor-ew-resize")).toBeNull();
     expect(panel.querySelector(".cursor-se-resize")).toBeNull();
   });
 
-  it("keeps browser window controls on the tab strip", () => {
-    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
+  it("keeps browser window controls on the tab strip", async () => {
+    const user = userEvent.setup();
+    render(
+      <DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />,
+    );
 
     const tabStrip = screen.getByTestId("doc-browser-tab-strip");
     const tabActions = screen.getByTestId("doc-browser-tab-actions");
+    const newTabButton = screen.getByRole("button", { name: "New Tab" });
 
-    expect(tabActions.contains(screen.getByTitle("Back"))).toBe(true);
-    expect(tabActions.contains(screen.getByTitle("Forward"))).toBe(true);
-    expect(tabStrip.contains(screen.getByTitle("Float Window"))).toBe(true);
-    expect(tabStrip.contains(screen.getByTitle("Close"))).toBe(true);
-    expect(tabActions.contains(screen.getByTitle("New Tab"))).toBe(true);
+    expect(
+      tabActions.contains(screen.getByRole("button", { name: "Back" })),
+    ).toBe(true);
+    expect(
+      tabActions.contains(screen.getByRole("button", { name: "Forward" })),
+    ).toBe(true);
+    expect(
+      tabStrip.contains(screen.getByRole("button", { name: "Float Window" })),
+    ).toBe(true);
+    expect(
+      tabStrip.contains(screen.getByRole("button", { name: "Close" })),
+    ).toBe(true);
+    expect(tabActions.contains(newTabButton)).toBe(true);
     expect(screen.queryByText("Embedded Browser")).toBeNull();
+
+    await user.hover(newTabButton);
+
+    expect((await screen.findAllByText("New Tab")).length).toBeGreaterThan(0);
   });
 
   it("uses active history to enable browser back and forward actions", () => {
@@ -178,10 +205,12 @@ describe("DocBrowser", () => {
     docBrowserState.activeHistoryIndex = 1;
     docBrowserState.currentTab = historyTab;
 
-    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
+    render(
+      <DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />,
+    );
 
-    fireEvent.click(screen.getByTitle("Back"));
-    fireEvent.click(screen.getByTitle("Forward"));
+    fireEvent.click(screen.getByRole("button", { name: "Back" }));
+    fireEvent.click(screen.getByRole("button", { name: "Forward" }));
 
     expect(docBrowserState.goBack).toHaveBeenCalled();
     expect(docBrowserState.goForward).toHaveBeenCalled();
@@ -212,8 +241,14 @@ describe("DocBrowser", () => {
 
     const { rerender } = render(<DocBrowser />);
 
-    expect(screen.getByTitle("Back")).toHaveProperty("disabled", false);
-    expect(screen.getByTitle("Forward")).toHaveProperty("disabled", true);
+    expect(screen.getByRole("button", { name: "Back" })).toHaveProperty(
+      "disabled",
+      false,
+    );
+    expect(screen.getByRole("button", { name: "Forward" })).toHaveProperty(
+      "disabled",
+      true,
+    );
 
     const oldestTab: DocBrowserTab = {
       ...latestTab,
@@ -225,18 +260,94 @@ describe("DocBrowser", () => {
     docBrowserState.activeHistoryIndex = 0;
     rerender(<DocBrowser />);
 
-    expect(screen.getByTitle("Back")).toHaveProperty("disabled", true);
-    expect(screen.getByTitle("Forward")).toHaveProperty("disabled", false);
+    expect(screen.getByRole("button", { name: "Back" })).toHaveProperty(
+      "disabled",
+      true,
+    );
+    expect(screen.getByRole("button", { name: "Forward" })).toHaveProperty(
+      "disabled",
+      false,
+    );
   });
 
   it("opens the start page from the fixed new tab action", () => {
     render(<DocBrowser />);
 
-    fireEvent.click(screen.getByTitle("New Tab"));
+    fireEvent.click(screen.getByRole("button", { name: "New Tab" }));
 
     expect(docBrowserState.openNewTab).toHaveBeenCalled();
   });
 
+  it("pins the current tab through injected dock controls", () => {
+    const pinTab = vi.fn();
+    const unpinTab = vi.fn();
+
+    render(
+      <DocBrowser
+        dockControls={{
+          getDockState: () => ({
+            canDock: true,
+            isDocked: false,
+            removable: false,
+          }),
+          pinTab,
+          unpinTab,
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Pin to SideDock" }));
+
+    expect(pinTab).toHaveBeenCalledWith(docBrowserState.currentTab);
+    expect(unpinTab).not.toHaveBeenCalled();
+  });
+
+  it("unpins a removable docked tab through injected dock controls", () => {
+    const pinTab = vi.fn();
+    const unpinTab = vi.fn();
+
+    render(
+      <DocBrowser
+        dockControls={{
+          getDockState: () => ({
+            canDock: true,
+            isDocked: true,
+            removable: true,
+          }),
+          pinTab,
+          unpinTab,
+        }}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Remove from SideDock" }),
+    );
+
+    expect(unpinTab).toHaveBeenCalledWith(docBrowserState.currentTab);
+    expect(pinTab).not.toHaveBeenCalled();
+  });
+
+  it("disables dock controls for built-in shortcuts", () => {
+    render(
+      <DocBrowser
+        dockControls={{
+          getDockState: () => ({
+            canDock: true,
+            isDocked: true,
+            removable: false,
+          }),
+          pinTab: vi.fn(),
+          unpinTab: vi.fn(),
+        }}
+      />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Built-in shortcut" }),
+    ).toHaveProperty("disabled", true);
+  });
+
   it("renders a start page for home tabs", () => {
     const homeTab: DocBrowserTab = {
       id: "home",
@@ -251,7 +362,9 @@ describe("DocBrowser", () => {
     docBrowserState.activeTabId = homeTab.id;
     docBrowserState.currentTab = homeTab;
 
-    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
+    render(
+      <DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />,
+    );
 
     expect(screen.getAllByText("Start Page").length).toBeGreaterThan(0);
     expect(screen.getByText("Apps")).toBeTruthy();
@@ -264,10 +377,14 @@ describe("DocBrowser", () => {
 
     render(<DocBrowser />);
 
-    firePointerEvent(screen.getByTestId("doc-browser-resize-right"), "pointerdown", {
-      clientX: 1160,
-      pointerId: 1,
-    });
+    firePointerEvent(
+      screen.getByTestId("doc-browser-resize-right"),
+      "pointerdown",
+      {
+        clientX: 1160,
+        pointerId: 1,
+      },
+    );
     firePointerEvent(window, "pointermove", { clientX: 1120, pointerId: 1 });
 
     const panel = screen.getByTestId("doc-browser-panel");
@@ -280,10 +397,14 @@ describe("DocBrowser", () => {
 
     render(<DocBrowser />);
 
-    firePointerEvent(screen.getByTestId("doc-browser-resize-left"), "pointerdown", {
-      clientX: 680,
-      pointerId: 1,
-    });
+    firePointerEvent(
+      screen.getByTestId("doc-browser-resize-left"),
+      "pointerdown",
+      {
+        clientX: 680,
+        pointerId: 1,
+      },
+    );
     firePointerEvent(window, "pointermove", { clientX: 620, pointerId: 1 });
 
     const panel = screen.getByTestId("doc-browser-panel");
@@ -296,11 +417,15 @@ describe("DocBrowser", () => {
 
     render(<DocBrowser />);
 
-    firePointerEvent(screen.getByTestId("doc-browser-resize-top"), "pointerdown", {
-      clientX: 900,
-      clientY: 80,
-      pointerId: 1,
-    });
+    firePointerEvent(
+      screen.getByTestId("doc-browser-resize-top"),
+      "pointerdown",
+      {
+        clientX: 900,
+        clientY: 80,
+        pointerId: 1,
+      },
+    );
     firePointerEvent(window, "pointermove", {
       clientX: 900,
       clientY: 120,