feat: add desktop workspace fullscreen toggle

pallyoung · pallyoung · commit c6b36004b76f · 2026-05-05T23:00:18.000+08:00
diff --git a/packages/web/src/features/topbar/index.test.tsx b/packages/web/src/features/topbar/index.test.tsx
@@ -130,4 +130,51 @@ describe("TopBar", () => {
     expect(screen.getByRole("button", { name: "Hide Terminal" })).toHaveClass("topbar-btn--active");
     expect(screen.getByRole("button", { name: "Show Files" })).toHaveClass("topbar-btn--muted");
   });
+
+  it("renders the fullscreen toggle immediately to the right of settings when supported", () => {
+    const store = createStore();
+    store.set(localeAtom, "en");
+    store.set(workspacesLoadStateAtom, "ready");
+
+    render(
+      <Provider store={store}>
+        <TopBar
+          fullscreenController={{
+            supported: true,
+            isFullscreen: false,
+            enterFullscreen: vi.fn(),
+            exitFullscreen: vi.fn(),
+            toggleFullscreen: vi.fn(),
+          }}
+        />
+      </Provider>
+    );
+
+    const settingsButton = screen.getByTestId("settings-open");
+    const fullscreenButton = screen.getByRole("button", { name: "Enter Fullscreen" });
+
+    expect(settingsButton.nextElementSibling).toBe(fullscreenButton);
+  });
+
+  it("hides the fullscreen toggle when the controller reports unsupported", () => {
+    const store = createStore();
+    store.set(localeAtom, "en");
+    store.set(workspacesLoadStateAtom, "ready");
+
+    render(
+      <Provider store={store}>
+        <TopBar
+          fullscreenController={{
+            supported: false,
+            isFullscreen: false,
+            enterFullscreen: vi.fn(),
+            exitFullscreen: vi.fn(),
+            toggleFullscreen: vi.fn(),
+          }}
+        />
+      </Provider>
+    );
+
+    expect(screen.queryByRole("button", { name: "Enter Fullscreen" })).toBeNull();
+  });
 });
diff --git a/packages/web/src/features/topbar/index.tsx b/packages/web/src/features/topbar/index.tsx
@@ -12,11 +12,17 @@ import { useNavigate } from "react-router-dom";
 import { commandPaletteOpenAtom } from "../../atoms/app-ui";
 import { orderedWorkspacesAtom, resolvedActiveWorkspaceIdAtom } from "../../atoms/workspaces";
 import { useTranslation } from "../../lib/i18n";
+import type { WorkspaceFullscreenController } from "../workspace/actions/use-workspace-fullscreen";
 import { sidebarCollapsedAtom, terminalPanelVisibleAtom } from "../workspace/atoms";
+import { WorkspaceFullscreenButton } from "../workspace/components/workspace-fullscreen-button";
 import { WorkspaceLaunchModal } from "../workspace/views/shared/workspace-launch-modal";
 import { ConnectionStatus } from "./components/connection-status";
 import { WorkspaceTab } from "./components/tab";
 
+interface TopBarProps {
+  fullscreenController?: WorkspaceFullscreenController;
+}
+
 /**
  * TopBar Component
  *
@@ -25,7 +31,7 @@ import { WorkspaceTab } from "./components/tab";
  *   - Left: Workspace tabs + Add button
  *   - Right: ConnectionStatus, Quick Actions, Terminal toggle, Files toggle, Settings
  */
-export const TopBar: FC = () => {
+export const TopBar: FC<TopBarProps> = ({ fullscreenController }) => {
   const t = useTranslation();
   const navigate = useNavigate();
   const workspaceList = useAtomValue(orderedWorkspacesAtom);
@@ -95,6 +101,12 @@ export const TopBar: FC = () => {
         >
           <Settings size={14} />
         </button>
+        <WorkspaceFullscreenButton
+          controller={fullscreenController}
+          className="topbar-btn"
+          iconSize={14}
+          dataTestId="workspace-fullscreen-open"
+        />
       </div>
       {workspaceLaunchOpen ? (
         <WorkspaceLaunchModal onClose={() => setWorkspaceLaunchOpen(false)} />
diff --git a/packages/web/src/features/workspace/components/workspace-fullscreen-button.test.tsx b/packages/web/src/features/workspace/components/workspace-fullscreen-button.test.tsx
@@ -0,0 +1,72 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { localeAtom } from "../../../atoms/app-ui";
+import { WorkspaceFullscreenButton } from "./workspace-fullscreen-button";
+
+function renderWithEnglish(ui: React.ReactElement) {
+  const store = createStore();
+  store.set(localeAtom, "en");
+
+  return render(<Provider store={store}>{ui}</Provider>);
+}
+
+describe("WorkspaceFullscreenButton", () => {
+  it("renders nothing when fullscreen is unsupported", () => {
+    const { container } = renderWithEnglish(
+      <WorkspaceFullscreenButton
+        controller={{
+          supported: false,
+          isFullscreen: false,
+          enterFullscreen: vi.fn(),
+          exitFullscreen: vi.fn(),
+          toggleFullscreen: vi.fn(),
+        }}
+        className="topbar-btn"
+        iconSize={14}
+      />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders enter state and calls toggle", () => {
+    const toggleFullscreen = vi.fn();
+
+    renderWithEnglish(
+      <WorkspaceFullscreenButton
+        controller={{
+          supported: true,
+          isFullscreen: false,
+          enterFullscreen: vi.fn(),
+          exitFullscreen: vi.fn(),
+          toggleFullscreen,
+        }}
+        className="topbar-btn"
+        iconSize={14}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Enter Fullscreen" }));
+
+    expect(toggleFullscreen).toHaveBeenCalledTimes(1);
+  });
+
+  it("switches to exit state when fullscreen is active", () => {
+    renderWithEnglish(
+      <WorkspaceFullscreenButton
+        controller={{
+          supported: true,
+          isFullscreen: true,
+          enterFullscreen: vi.fn(),
+          exitFullscreen: vi.fn(),
+          toggleFullscreen: vi.fn(),
+        }}
+        className="topbar-btn"
+        iconSize={14}
+      />
+    );
+
+    expect(screen.getByRole("button", { name: "Exit Fullscreen" })).toBeInTheDocument();
+  });
+});
diff --git a/packages/web/src/features/workspace/components/workspace-fullscreen-button.tsx b/packages/web/src/features/workspace/components/workspace-fullscreen-button.tsx
@@ -0,0 +1,43 @@
+import { Maximize2, Minimize2 } from "lucide-react";
+import { useTranslation } from "../../../lib/i18n";
+import type { WorkspaceFullscreenController } from "../actions/use-workspace-fullscreen";
+
+interface WorkspaceFullscreenButtonProps {
+  controller?: WorkspaceFullscreenController;
+  className: string;
+  iconSize: number;
+  dataTestId?: string;
+}
+
+export function WorkspaceFullscreenButton({
+  controller,
+  className,
+  iconSize,
+  dataTestId,
+}: WorkspaceFullscreenButtonProps) {
+  const t = useTranslation();
+
+  if (!controller?.supported) {
+    return null;
+  }
+
+  const label = controller.isFullscreen
+    ? t("tooltip.exit_fullscreen")
+    : t("tooltip.enter_fullscreen");
+  const Icon = controller.isFullscreen ? Minimize2 : Maximize2;
+
+  return (
+    <button
+      type="button"
+      className={className}
+      aria-label={label}
+      title={label}
+      data-testid={dataTestId}
+      onClick={() => {
+        void controller.toggleFullscreen();
+      }}
+    >
+      <Icon size={iconSize} />
+    </button>
+  );
+}
diff --git a/packages/web/src/features/workspace/views/desktop/workspace-desktop-view.tsx b/packages/web/src/features/workspace/views/desktop/workspace-desktop-view.tsx
@@ -1,12 +1,13 @@
 import { useSetAtom } from "jotai";
 import { FilePlus, FolderPlus, GitBranch, RefreshCw } from "lucide-react";
-import type { FC } from "react";
+import { type FC, useRef } from "react";
 import { useTranslation } from "../../../../lib/i18n";
 import { AgentPanes } from "../../../agent-panes";
 import { CodeEditorHost } from "../../../code-editor/views/shared/code-editor-host";
 import { TerminalPanel } from "../../../terminal-panel";
 import { TopBar } from "../../../topbar";
 import { useGitDiffViewerActions } from "../../actions/use-git-actions";
+import { useWorkspaceFullscreen } from "../../actions/use-workspace-fullscreen";
 import { useWorkspaceScreenModel } from "../../actions/use-workspace-screen-model";
 import { activeFilePathAtomFamily } from "../../atoms";
 import { FileTreePanel } from "../shared/file-tree-panel";
@@ -15,6 +16,8 @@ import { GitPanel } from "../shared/git-panel";
 import { GitStatusBar } from "../shared/git-status-bar";
 
 export const WorkspaceDesktopView: FC = () => {
+  const fullscreenRootRef = useRef<HTMLDivElement>(null);
+  const fullscreenController = useWorkspaceFullscreen(fullscreenRootRef);
   const t = useTranslation();
   const {
     createRequest,
@@ -62,8 +65,8 @@ export const WorkspaceDesktopView: FC = () => {
   };
 
   return (
-    <div className="workspace-page">
-      <TopBar />
+    <div ref={fullscreenRootRef} className="workspace-page">
+      <TopBar fullscreenController={fullscreenController} />
 
       <div className="workspace-body">
         {!focusMode && !sidebarCollapsed && (
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
@@ -636,6 +636,8 @@
     "close_pane": "Close panel",
     "new_workspace": "New workspace",
     "quick_actions": "Quick Actions",
+    "enter_fullscreen": "Enter Fullscreen",
+    "exit_fullscreen": "Exit Fullscreen",
     "show_terminal": "Show Terminal",
     "hide_terminal": "Hide Terminal",
     "show_files": "Show Files",
diff --git a/packages/web/src/locales/zh.json b/packages/web/src/locales/zh.json
@@ -636,6 +636,8 @@
     "close_pane": "关闭面板",
     "new_workspace": "新建工作区",
     "quick_actions": "快捷操作",
+    "enter_fullscreen": "进入全屏",
+    "exit_fullscreen": "退出全屏",
     "show_terminal": "显示终端",
     "hide_terminal": "隐藏终端",
     "show_files": "显示文件",
