fix(web): refine open files sidebar controls

Author: pallyoung

packages/web/src/features/code-editor/index.test.tsx

@@ -460,7 +460,7 @@ describe("CodeEditorHost", () => {
       );
     });
 
-    const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (1)" });
+    const heading = screen.getByRole("heading", { level: 2, name: "Open Files (1)" });
     const section = heading.closest("section") as HTMLElement;
     const closeAll = within(section).getByRole("button", { name: "Close all" });
     expect(closeAll).toBeEnabled();

packages/web/src/features/workspace/index.test.tsx

@@ -411,7 +411,7 @@ describe("WorkspacePage", () => {
       </Provider>
     );
 
-    await screen.findByText(/Open Editors|打开的编辑器/i);
+    await screen.findByText(/Open Files|打开的文件/i);
 
     const explorerButton = screen.getByRole("button", { name: /Explorer|资源管理器/i });
     expect(explorerButton).toHaveAttribute("aria-pressed", "true");
@@ -1703,9 +1703,9 @@ describe("WorkspacePage", () => {
     await screen.findByTestId("code-editor-host");
     expect(screen.queryByTestId("agent-panes")).not.toBeInTheDocument();
 
-    const heading = screen.getByRole("heading", { level: 2, name: /(Open Editors|打开的编辑器)/i });
+    const heading = screen.getByRole("heading", { level: 2, name: /(Open Files|打开的文件)/i });
     const section = heading.closest("section") as HTMLElement;
-    expect(heading).toHaveTextContent(/Open Editors|打开的编辑器/i);
+    expect(heading).toHaveTextContent(/Open Files|打开的文件/i);
     expect(within(section).getByText("1")).toHaveClass("workspace-open-editors__count");
     fireEvent.click(within(section).getByRole("button", { name: /Close all|全部关闭/i }));
 
@@ -1862,7 +1862,7 @@ describe("WorkspacePage", () => {
 
     await screen.findByTestId("code-editor-host");
 
-    const heading = screen.getByRole("heading", { level: 2, name: /(Open Editors|打开的编辑器)/i });
+    const heading = screen.getByRole("heading", { level: 2, name: /(Open Files|打开的文件)/i });
     const section = heading.closest("section") as HTMLElement;
     fireEvent.click(within(section).getByRole("button", { name: /Close all|全部关闭/i }));
 
@@ -1891,7 +1891,7 @@ describe("WorkspacePage", () => {
     });
   });
 
-  it("clearing the final open editor from Open Editors preserves an active commit preview", async () => {
+  it("clearing the final open editor from Open Files preserves an active commit preview", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "git.status") {
         return {

packages/web/src/features/workspace/views/desktop/workspace-desktop-view.test.tsx

@@ -18,7 +18,7 @@ vi.mock("../../../../lib/i18n", () => ({
       "workspace.sidebar.source_control": "Source Control",
       "workspace.sidebar.label": "Workspace Sidebar",
       "workspace.sidebar.workspace": "Workspace",
-      "workspace.sidebar.open_editors": "Open Editors",
+      "workspace.sidebar.open_editors": "Open Files",
       "workspace.no_workspace": "No workspace",
       "workspace.search.empty": "Type to search across file contents",
       "workspace.search.placeholder": "Search",

packages/web/src/features/workspace/views/mobile/mobile-explorer-panel.test.tsx

@@ -19,7 +19,7 @@ vi.mock("../../../../lib/i18n", () => ({
       "workspace.sidebar.workspace": "Workspace",
       "workspace.sidebar.workspace_expand_label": "Expand Workspace",
       "workspace.sidebar.workspace_collapse_label": "Collapse Workspace",
-      "workspace.sidebar.open_editors": "Open Editors",
+      "workspace.sidebar.open_editors": "Open Files",
       "file.new_file": "New File",
       "file.new_folder": "New Folder",
       "file.collapse_all": "Collapse All",
@@ -29,15 +29,15 @@ vi.mock("../../../../lib/i18n", () => ({
     };
 
     if (key === "workspace.open_editors.title_with_count") {
-      return `${params?.title ?? "Open Editors"} (${params?.count ?? 0})`;
+      return `${params?.title ?? "Open Files"} (${params?.count ?? 0})`;
     }
 
     if (key === "workspace.open_editors.expand_label") {
-      return "Expand Open Editors";
+      return "Expand Open Files";
     }
 
     if (key === "workspace.open_editors.collapse_label") {
-      return "Collapse Open Editors";
+      return "Collapse Open Files";
     }
 
     if (key === "workspace.open_editors.close_path") {
@@ -120,7 +120,7 @@ describe("MobileExplorerPanel", () => {
 
     const headings = screen.getAllByRole("heading", { level: 2 });
     expect(headings[0]).toHaveTextContent(/Quick Jump|快速跳转/i);
-    expect(headings[1]).toHaveTextContent(/Open Editors|打开的编辑器/i);
+    expect(headings[1]).toHaveTextContent(/Open Files|打开的文件/i);
     expect(headings[2]).toHaveTextContent(/Workspace|工作区/i);
 
     expect(screen.getByRole("button", { name: "README.md" })).toBeInTheDocument();
@@ -205,15 +205,15 @@ describe("MobileExplorerPanel", () => {
       </Provider>
     );
 
-    const heading = screen.getByRole("heading", { level: 2, name: /(Open Editors|打开的编辑器)/i });
-    expect(heading).toHaveTextContent(/Open Editors|打开的编辑器/i);
+    const heading = screen.getByRole("heading", { level: 2, name: /(Open Files|打开的文件)/i });
+    expect(heading).toHaveTextContent(/Open Files|打开的文件/i);
 
     const section = heading.closest("section") as HTMLElement;
     expect(within(section).getByText("2")).toBeInTheDocument();
 
     expect(
       within(section).getByRole("button", {
-        name: /Collapse Open Editors|Expand Open Editors|收起打开的编辑器|展开打开的编辑器/i,
+        name: /Collapse Open Files|Expand Open Files|收起打开的文件|展开打开的文件/i,
       })
     ).toHaveAttribute("aria-expanded", "true");
     expect(
@@ -236,7 +236,7 @@ describe("MobileExplorerPanel", () => {
       "workspace-open-editors__item--active"
     );
     expect(within(section).queryByRole("button", { name: "src/alpha.tsx" })).toBeNull();
-    expect(heading).toHaveTextContent(/Open Editors|打开的编辑器/i);
+    expect(heading).toHaveTextContent(/Open Files|打开的文件/i);
     expect(within(section).getByText("1")).toBeInTheDocument();
     expect(Object.keys(store.get(openFilesAtomFamily("ws-test")))).toEqual(["src/beta.tsx"]);
     expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull();

packages/web/src/features/workspace/views/mobile/workspace-mobile-view.test.tsx

@@ -56,9 +56,9 @@ vi.mock("../../../../lib/i18n", () => ({
       "mobile.sheet.dismiss": "Dismiss sheet",
       "action.close_all": "Close all",
       "workspace.sidebar.explorer": "Explorer",
-      "workspace.sidebar.open_editors": "Open Editors",
-      "workspace.open_editors.collapse_label": "Collapse Open Editors",
-      "workspace.open_editors.expand_label": "Expand Open Editors",
+      "workspace.sidebar.open_editors": "Open Files",
+      "workspace.open_editors.collapse_label": "Collapse Open Files",
+      "workspace.open_editors.expand_label": "Expand Open Files",
       "workspace.sidebar.search": "Search",
       "workspace.sidebar.source_control": "Source Control",
     };
@@ -68,7 +68,7 @@ vi.mock("../../../../lib/i18n", () => ({
     }
 
     if (key === "workspace.open_editors.title_with_count") {
-      return `${params?.title ?? "Open Editors"} (${params?.count ?? "0"})`;
+      return `${params?.title ?? "Open Files"} (${params?.count ?? "0"})`;
     }
 
     if (key === "workspace.open_editors.close_path") {
@@ -451,7 +451,7 @@ describe("WorkspaceMobileView", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "Files" }));
     const openEditorsSection = screen
-      .getByRole("heading", { level: 2, name: "Open Editors (1)" })
+      .getByRole("heading", { level: 2, name: "Open Files (1)" })
       .closest("section") as HTMLElement;
     fireEvent.click(within(openEditorsSection).getByRole("button", { name: "Close all" }));
 

packages/web/src/features/workspace/views/shared/explorer-panel.test.tsx

@@ -13,7 +13,7 @@ vi.mock("../../../../lib/i18n", () => ({
     const translations: Record<string, string> = {
       "workspace.sidebar.explorer": "Explorer",
       "workspace.sidebar.workspace": "Workspace",
-      "workspace.sidebar.open_editors": "Open Editors",
+      "workspace.sidebar.open_editors": "Open Files",
       "workspace.sidebar.workspace_expand_label": "Expand Workspace",
       "workspace.sidebar.workspace_collapse_label": "Collapse Workspace",
       "file.new_file": "New File",
@@ -24,15 +24,15 @@ vi.mock("../../../../lib/i18n", () => ({
     };
 
     if (key === "workspace.open_editors.title_with_count") {
-      return `${params?.title ?? "Open Editors"} (${params?.count ?? 0})`;
+      return `${params?.title ?? "Open Files"} (${params?.count ?? 0})`;
     }
 
     if (key === "workspace.open_editors.expand_label") {
-      return "Expand Open Editors";
+      return "Expand Open Files";
     }
 
     if (key === "workspace.open_editors.collapse_label") {
-      return "Collapse Open Editors";
+      return "Collapse Open Files";
     }
 
     if (key === "workspace.open_editors.close_path") {

packages/web/src/features/workspace/views/shared/open-editors-section.test.tsx

@@ -24,7 +24,7 @@ import { OpenEditorsSection } from "./open-editors-section";
 vi.mock("../../../../lib/i18n", () => ({
   useTranslation: () => (key: string, params?: Record<string, string | number>) => {
     if (key === "common.cancel") return "Cancel";
-    if (key === "workspace.sidebar.open_editors") return "Open Editors";
+    if (key === "workspace.sidebar.open_editors") return "Open Files";
     if (key === "action.close") return "Close";
     if (key === "action.close_all") return "Close all";
     if (key === "code_editor.unsaved_changes") return "Unsaved changes";
@@ -34,13 +34,13 @@ vi.mock("../../../../lib/i18n", () => ({
     }
     if (key === "code_editor.discard_and_close") return "Discard and Close";
     if (key === "workspace.open_editors.close_all_unsaved_description") {
-      return `${params?.count ?? 0} open editors have unsaved changes.`;
+      return `${params?.count ?? 0} open files have unsaved changes.`;
     }
     if (key === "workspace.open_editors.title_with_count") {
-      return `${params?.title ?? "Open Editors"} (${params?.count ?? 0})`;
+      return `${params?.title ?? "Open Files"} (${params?.count ?? 0})`;
     }
-    if (key === "workspace.open_editors.expand_label") return "Expand Open Editors";
-    if (key === "workspace.open_editors.collapse_label") return "Collapse Open Editors";
+    if (key === "workspace.open_editors.expand_label") return "Expand Open Files";
+    if (key === "workspace.open_editors.collapse_label") return "Collapse Open Files";
     if (key === "workspace.open_editors.close_path") {
       return `Close ${params?.path ?? ""}`;
     }
@@ -113,12 +113,12 @@ describe("OpenEditorsSection", () => {
   it("shows file count, toggles collapse, closes a non-active row, and closes all", () => {
     const { store } = renderSection();
 
-    const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (3)" });
-    expect(heading).toHaveTextContent("Open Editors");
+    const heading = screen.getByRole("heading", { level: 2, name: "Open Files (3)" });
+    expect(heading).toHaveTextContent("Open Files");
 
     const section = heading.closest("section") as HTMLElement;
     expect(within(section).getByText("3")).toHaveClass("workspace-open-editors__count");
-    const toggle = within(section).getByRole("button", { name: /collapse open editors/i });
+    const toggle = within(section).getByRole("button", { name: /collapse open files/i });
 
     expect(toggle).toHaveAttribute("aria-expanded", "true");
 
@@ -142,7 +142,7 @@ describe("OpenEditorsSection", () => {
     ]);
 
     fireEvent.click(toggle);
-    expect(within(section).getByRole("button", { name: "Expand Open Editors" })).toHaveAttribute(
+    expect(within(section).getByRole("button", { name: "Expand Open Files" })).toHaveAttribute(
       "aria-expanded",
       "false"
     );
@@ -152,7 +152,7 @@ describe("OpenEditorsSection", () => {
       })
     ).toBeNull();
 
-    fireEvent.click(within(section).getByRole("button", { name: /expand open editors/i }));
+    fireEvent.click(within(section).getByRole("button", { name: /expand open files/i }));
 
     const readmeRow = within(section)
       .getByRole("button", { name: "README.md" })
@@ -165,21 +165,25 @@ describe("OpenEditorsSection", () => {
     ]);
     expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("src/beta.ts");
 
-    fireEvent.click(within(section).getByRole("button", { name: "Close all" }));
+    const closeAllButton = within(section).getByRole("button", { name: "Close all" });
+    expect(closeAllButton).toHaveTextContent(/^$/);
+    expect(closeAllButton.querySelector("svg")).toBeTruthy();
+
+    fireEvent.click(closeAllButton);
 
     expect(store.get(openFilesAtomFamily("ws-test"))).toEqual({});
     expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull();
   });
 
-  it("keeps the header visible but hides the body when there are no open editors", () => {
+  it("keeps the header visible but hides the body when there are no open files", () => {
     renderSection({});
 
-    const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (0)" });
-    expect(heading).toHaveTextContent("Open Editors");
+    const heading = screen.getByRole("heading", { level: 2, name: "Open Files (0)" });
+    expect(heading).toHaveTextContent("Open Files");
 
     const section = heading.closest("section") as HTMLElement;
     expect(within(section).getByText("0")).toHaveClass("workspace-open-editors__count");
-    const toggle = within(section).getByRole("button", { name: "Expand Open Editors" });
+    const toggle = within(section).getByRole("button", { name: "Expand Open Files" });
 
     expect(toggle).toBeDisabled();
     expect(toggle).not.toHaveAttribute("aria-expanded");
@@ -194,13 +198,13 @@ describe("OpenEditorsSection", () => {
 
     renderSection({}, "src/pending.ts");
 
-    const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (1)" });
-    expect(heading).toHaveTextContent("Open Editors");
+    const heading = screen.getByRole("heading", { level: 2, name: "Open Files (1)" });
+    expect(heading).toHaveTextContent("Open Files");
 
     const section = heading.closest("section") as HTMLElement;
     expect(within(section).getByText("1")).toHaveClass("workspace-open-editors__count");
 
-    expect(within(section).getByRole("button", { name: "Collapse Open Editors" })).toHaveAttribute(
+    expect(within(section).getByRole("button", { name: "Collapse Open Files" })).toHaveAttribute(
       "aria-expanded",
       "true"
     );
@@ -215,7 +219,7 @@ describe("OpenEditorsSection", () => {
       draftStore.set(openEditorPathsAtomFamily("ws-test"), ["src/app.tsx", "README.md"]);
     });
 
-    const heading = screen.getByRole("heading", { level: 2, name: "Open Editors (2)" });
+    const heading = screen.getByRole("heading", { level: 2, name: "Open Files (2)" });
     const section = heading.closest("section") as HTMLElement;
     const rowButtons = Array.from(
       section.querySelectorAll<HTMLButtonElement>(".workspace-open-editors__item")
@@ -254,7 +258,7 @@ describe("OpenEditorsSection", () => {
     expect(store.get(activeFilePathAtomFamily("ws-test"))).toBe("README.md");
   });
 
-  it("marks dirty open editors and confirms before closing a dirty row", () => {
+  it("marks dirty open files and confirms before closing a dirty row", () => {
     const { store } = renderSection(
       {
         "biome.jsonc": createDirtyFile("biome.jsonc"),
@@ -283,7 +287,7 @@ describe("OpenEditorsSection", () => {
     expect(store.get(activeFilePathAtomFamily("ws-test"))).toBeNull();
   });
 
-  it("confirms before closing all when open editors include dirty files", () => {
+  it("confirms before closing all when open files include dirty files", () => {
     const { store } = renderSection(
       {
         "src/clean.ts": createFile("src/clean.ts"),
@@ -299,7 +303,7 @@ describe("OpenEditorsSection", () => {
       "src/dirty.ts",
     ]);
     expect(screen.getByRole("dialog", { name: "Discard unsaved changes?" })).toBeInTheDocument();
-    expect(screen.getByText("1 open editors have unsaved changes.")).toBeInTheDocument();
+    expect(screen.getByText("1 open files have unsaved changes.")).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole("button", { name: "Discard and Close" }));
 

packages/web/src/features/workspace/views/shared/open-editors-section.tsx

@@ -141,15 +141,16 @@ export function OpenEditorsSection({ workspaceId, onSelectFile, title }: OpenEdi
             {openEditorPaths.length}
           </span>
         </div>
-        <button
-          type="button"
-          className="workspace-sidebar-section__action workspace-open-editors__close-all"
-          disabled={openEditorPaths.length === 0}
-          onClick={requestCloseAll}
-          title={headingLabel}
-        >
-          {t("action.close_all")}
-        </button>
+        <Tooltip content={t("action.close_all")}>
+          <IconButton
+            aria-label={t("action.close_all")}
+            className="workspace-open-editors__close-all"
+            disabled={openEditorPaths.length === 0}
+            icon={<X size={14} />}
+            size="sm"
+            onClick={requestCloseAll}
+          />
+        </Tooltip>
       </div>
       {isExpanded ? (
         <div className="workspace-open-editors">

packages/web/src/features/workspace/views/shared/search-panel.test.tsx

@@ -197,9 +197,7 @@ describe("SearchPanel", () => {
     fireEvent.change(screen.getByRole("textbox", { name: /Files to Exclude|排除的文件/i }), {
       target: { value: "**/*.spec.tsx" },
     });
-    expect(
-      screen.queryByRole("switch", { name: /Only Open Editors|仅在打开的编辑器中/i })
-    ).toBeNull();
+    expect(screen.queryByRole("switch", { name: /Only Open Files|仅在打开的文件中/i })).toBeNull();
     fireEvent.click(
       screen.getByRole("button", {
         name: /Use Exclude Settings and Ignore Files|使用排除设置和忽略文件/i,
@@ -296,9 +294,7 @@ describe("SearchPanel", () => {
     expect(replaceCompound?.contains(expandedDetailsToggle)).toBe(false);
     expect(excludeCompound).not.toBeNull();
     expect(excludeCompound?.contains(ignoreToggle)).toBe(true);
-    expect(
-      screen.queryByRole("switch", { name: /Only Open Editors|仅在打开的编辑器中/i })
-    ).toBeNull();
+    expect(screen.queryByRole("switch", { name: /Only Open Files|仅在打开的文件中/i })).toBeNull();
 
     fireEvent.click(expandedDetailsToggle);
     const collapsedDetailsToggle = screen.getByRole("button", {

packages/web/src/lib/i18n.test.ts

@@ -2,6 +2,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { describe, expect, it } from "vitest";
+import en from "../locales/en.json";
 import zh from "../locales/zh.json";
 
 function flattenKeys(value: unknown, prefix = ""): string[] {
@@ -36,6 +37,15 @@ function collectSourceFiles(dir: string): string[] {
 }
 
 describe("i18n coverage", () => {
+  it("labels the open editor section as open files in user-facing copy", () => {
+    expect(zh.workspace.sidebar.open_editors).toBe("打开的文件");
+    expect(zh.workspace.open_editors.expand_label).toBe("展开打开的文件");
+    expect(zh.workspace.open_editors.collapse_label).toBe("收起打开的文件");
+    expect(en.workspace.sidebar.open_editors).toBe("Open Files");
+    expect(en.workspace.open_editors.expand_label).toBe("Expand Open Files");
+    expect(en.workspace.open_editors.collapse_label).toBe("Collapse Open Files");
+  });
+
   it("resolves every static translation key used in source files", () => {
     const localeKeys = new Set(flattenKeys(zh));
     const sourceRoot = path.resolve(__dirname, "..");