@nextclaw/ui 0.12.35-beta.1 → 0.12.35-beta.3

package/src/shared/components/doc-browser/doc-browser-panel-parts.tsx

@@ -0,0 +1,201 @@
+import type { ReactNode, Ref } from 'react';
+import {
+  ArrowLeft,
+  ArrowRight,
+  BookOpen,
+  ExternalLink,
+  Maximize2,
+  PanelRightOpen,
+  Search,
+  X,
+} from 'lucide-react';
+import {
+  isDocsUrl,
+  type DocBrowserTab,
+} from './doc-browser-context';
+import type { DocBrowserCustomTabRenderer } from './doc-browser-renderer.types';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
+
+type DocBrowserPanelHeaderProps = {
+  currentTab?: DocBrowserTab;
+  customRenderer?: DocBrowserCustomTabRenderer;
+  isDocked: boolean;
+  isFullscreen: boolean;
+  onClose: () => void;
+  onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
+  onToggleMode: () => void;
+};
+
+type DocBrowserDocsToolbarProps = {
+  currentTab?: DocBrowserTab;
+  isDocsTab: boolean;
+  onBack: () => void;
+  onForward: () => void;
+  onSubmit: (e: React.FormEvent) => void;
+  onUrlInputChange: (value: string) => void;
+  urlInput: string;
+};
+
+type DocBrowserFrameContentProps = {
+  activeTabId: string;
+  currentTab?: DocBrowserTab;
+  currentUrl: string;
+  customContent: ReactNode;
+  iframeRef: Ref<HTMLIFrameElement>;
+  iframeReloadVersion: number;
+  iframeSandbox: string;
+  isDragging: boolean;
+  isResizing: boolean;
+  navVersion: number;
+};
+
+export function DocBrowserPanelHeader({
+  currentTab,
+  customRenderer,
+  isDocked,
+  isFullscreen,
+  onClose,
+  onDragStart,
+  onToggleMode,
+}: DocBrowserPanelHeaderProps) {
+  const title = currentTab && customRenderer?.getTitle
+    ? customRenderer.getTitle(currentTab)
+    : t('docBrowserTitle');
+  const icon = currentTab && customRenderer?.renderIcon
+    ? customRenderer.renderIcon(currentTab)
+    : <BookOpen className="w-4 h-4 text-primary shrink-0" />;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between px-4 py-2.5 bg-gray-50 border-b border-gray-200 shrink-0 select-none',
+        !isDocked && !isFullscreen && 'cursor-grab active:cursor-grabbing',
+        isFullscreen && 'pt-[calc(env(safe-area-inset-top,0px)+0.625rem)]',
+      )}
+      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
+    >
+      <div className="flex items-center gap-2.5 min-w-0">
+        {icon}
+        <span className="text-sm font-semibold text-gray-900 truncate">{title}</span>
+      </div>
+      <div className="flex items-center gap-1">
+        {!isFullscreen ? (
+          <button
+            onClick={onToggleMode}
+            className="hover:bg-gray-200 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
+          onClick={onClose}
+          className="hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors"
+          title={t('docBrowserClose')}
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function DocBrowserDocsToolbar({
+  currentTab,
+  isDocsTab,
+  onBack,
+  onForward,
+  onSubmit,
+  onUrlInputChange,
+  urlInput,
+}: DocBrowserDocsToolbarProps) {
+  if (!isDocsTab) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
+      <button
+        onClick={onBack}
+        disabled={!isDocsTab || (currentTab?.historyIndex ?? 0) <= 0}
+        className="p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors"
+      >
+        <ArrowLeft className="w-4 h-4" />
+      </button>
+      <button
+        onClick={onForward}
+        disabled={!isDocsTab || (currentTab?.historyIndex ?? 0) >= (currentTab?.history.length ?? 0) - 1}
+        className="p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors"
+      >
+        <ArrowRight className="w-4 h-4" />
+      </button>
+
+      <form onSubmit={onSubmit} className="flex-1 relative">
+        <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+        <input
+          type="text"
+          value={urlInput}
+          onChange={(e) => onUrlInputChange(e.target.value)}
+          placeholder={t('docBrowserSearchPlaceholder')}
+          className="w-full h-8 pl-8 pr-3 rounded-lg bg-gray-50 border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 transition-colors placeholder:text-gray-400"
+        />
+      </form>
+    </div>
+  );
+}
+
+export function DocBrowserFrameContent({
+  activeTabId,
+  currentTab,
+  currentUrl,
+  customContent,
+  iframeRef,
+  iframeReloadVersion,
+  iframeSandbox,
+  isDragging,
+  isResizing,
+  navVersion,
+}: DocBrowserFrameContentProps) {
+  return (
+    <div className="flex-1 relative overflow-hidden">
+      {customContent ? (
+        customContent
+      ) : (
+        <iframe
+          ref={iframeRef}
+          key={`${activeTabId}:${navVersion}:${iframeReloadVersion}`}
+          src={currentUrl}
+          className="absolute inset-0 w-full h-full border-0"
+          title={currentTab?.title || 'NextClaw Docs'}
+          sandbox={iframeSandbox}
+          allow="clipboard-read; clipboard-write"
+        />
+      )}
+      {(isResizing || isDragging) && (
+        <div className="absolute inset-0 z-10" />
+      )}
+    </div>
+  );
+}
+
+export function DocBrowserExternalLink({ currentUrl, isDocsTab }: { currentUrl: string; isDocsTab: boolean }) {
+  if (!isDocsTab || !isDocsUrl(currentUrl)) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-t border-gray-200 shrink-0">
+      <a
+        href={currentUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-doc-external
+        className="flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
+      >
+        {t('docBrowserOpenExternal')}
+        <ExternalLink className="w-3 h-3" />
+      </a>
+    </div>
+  );
+}

package/src/shared/components/doc-browser/doc-browser-renderer.types.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { DocBrowserContextValue, DocBrowserTab } from './doc-browser-context';
+
+export type DocBrowserCustomTabRenderParams = {
+  currentUrl: string;
+  open: DocBrowserContextValue['open'];
+  refreshIframe: () => void;
+  tab: DocBrowserTab;
+};
+
+export type DocBrowserCustomTabRenderer = {
+  getIframeSandbox?: (tab: DocBrowserTab) => string;
+  getTitle?: (tab: DocBrowserTab) => string;
+  renderContent?: (params: DocBrowserCustomTabRenderParams) => ReactNode;
+  renderIcon?: (tab: DocBrowserTab) => ReactNode;
+  renderToolbar?: (params: DocBrowserCustomTabRenderParams) => ReactNode;
+};
+
+export type DocBrowserCustomTabRenderers = Record<string, DocBrowserCustomTabRenderer>;

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

@@ -0,0 +1,67 @@
+import { Plus, X } from 'lucide-react';
+import type { DocBrowserTab } from './doc-browser-context';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
+
+type DocBrowserTabStripProps = {
+  tabs: DocBrowserTab[];
+  activeTabId: string;
+  onOpenDocs: () => void;
+  onSetActiveTab: (tabId: string) => void;
+  onCloseTab: (tabId: string) => void;
+};
+
+export function DocBrowserTabStrip({
+  tabs,
+  activeTabId,
+  onOpenDocs,
+  onSetActiveTab,
+  onCloseTab,
+}: DocBrowserTabStripProps) {
+  return (
+    <div className="flex items-center gap-1.5 px-2.5 py-2 bg-background border-b border-[#f1e7d4] overflow-x-auto custom-scrollbar">
+      {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>
+        );
+      })}
+      <button
+        type="button"
+        onClick={onOpenDocs}
+        className="inline-flex items-center justify-center w-7 h-7 rounded-lg border border-[#eee3d1] bg-white text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212] shrink-0"
+        title={t('docBrowserNewTab')}
+      >
+        <Plus className="w-3.5 h-3.5" />
+      </button>
+    </div>
+  );
+}

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

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DocBrowser } from "@/shared/components/doc-browser/doc-browser";
 
 const { docBrowserState } = vi.hoisted(() => ({
@@ -49,7 +49,34 @@ vi.mock("@/shared/components/doc-browser/doc-browser-context", async () => {
   };
 });
 
+function firePointerEvent(
+  target: Window | Document | Node | Element,
+  type: string,
+  point: { clientX: number; clientY?: number; pointerId?: number },
+) {
+  const event = new Event(type, { bubbles: true });
+  Object.defineProperties(event, {
+    clientX: { value: point.clientX },
+    clientY: { value: point.clientY ?? 0 },
+    pointerId: { value: point.pointerId ?? 1 },
+  });
+  fireEvent(target, event);
+}
+
 describe("DocBrowser", () => {
+  beforeEach(() => {
+    docBrowserState.mode = "docked";
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 1200,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 900,
+    });
+    HTMLElement.prototype.setPointerCapture = vi.fn();
+  });
+
   it("uses the shared right panel resize handle in docked mode", () => {
     render(<DocBrowser />);
 
@@ -71,4 +98,57 @@ describe("DocBrowser", () => {
     expect(panel.querySelector(".cursor-ew-resize")).toBeNull();
     expect(panel.querySelector(".cursor-se-resize")).toBeNull();
   });
+
+  it("keeps the floating panel left edge stable when resizing from the right", () => {
+    docBrowserState.mode = "floating";
+
+    render(<DocBrowser />);
+
+    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");
+    expect(panel.style.left).toBe("680px");
+    expect(panel.style.width).toBe("440px");
+  });
+
+  it("keeps the floating panel right edge stable when resizing from the left", () => {
+    docBrowserState.mode = "floating";
+
+    render(<DocBrowser />);
+
+    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");
+    expect(panel.style.left).toBe("620px");
+    expect(panel.style.width).toBe("540px");
+  });
+
+  it("keeps the floating panel bottom edge stable when resizing from the top", () => {
+    docBrowserState.mode = "floating";
+
+    render(<DocBrowser />);
+
+    firePointerEvent(screen.getByTestId("doc-browser-resize-top"), "pointerdown", {
+      clientX: 900,
+      clientY: 80,
+      pointerId: 1,
+    });
+    firePointerEvent(window, "pointermove", {
+      clientX: 900,
+      clientY: 120,
+      pointerId: 1,
+    });
+
+    const panel = screen.getByTestId("doc-browser-panel");
+    expect(panel.style.top).toBe("120px");
+    expect(panel.style.height).toBe("560px");
+  });
 });