fix(web): restore workspace tab and file tree visuals

Author: pallyoung

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

@@ -244,9 +244,11 @@ describe("WorkspacePage", () => {
     expect(branchButton).not.toBeNull();
     fireEvent.click(branchButton as HTMLElement);
 
+    const gitTab = screen.getByRole("tab", { name: "Git" });
     expect(screen.getByRole("tablist", { name: "Workspace sections" })).toBeInTheDocument();
-    expect(screen.getByRole("tab", { name: "Git" })).toHaveAttribute("aria-selected", "true");
-    expect(screen.getByRole("tab", { name: "Git" })).toHaveClass("panel-tab", "active");
+    expect(gitTab).toHaveAttribute("aria-selected", "true");
+    expect(gitTab).toHaveClass("workspace-sidebar-panel__tab", "active");
+    expect(gitTab).not.toHaveClass("panel-tab");
     expect(
       await screen.findByPlaceholderText("Search branches or create new branch...")
     ).toBeInTheDocument();
@@ -257,6 +259,62 @@ describe("WorkspacePage", () => {
     });
   });
 
+  it("uses workspace sidebar-specific tab styling without legacy panel-tab classes", async () => {
+    const sendCommand = vi.fn().mockImplementation(async (op: string) => {
+      if (op === "git.status") {
+        return {
+          branch: "main",
+          ahead: 0,
+          behind: 0,
+          staged: [],
+          modified: [],
+          deleted: [],
+          untracked: [],
+        };
+      }
+
+      return [];
+    });
+
+    const store = createStore();
+    store.set(connectionStatusAtom, "connected");
+    store.set(wsClientAtom, { sendCommand } as never);
+    seedReadyWorkspaceState(store, {
+      "ws-test": {
+        id: "ws-test",
+        path: "/home/spencer/workspace/coder-studio",
+        targetRuntime: "native",
+        openedAt: 1,
+        lastActiveAt: 1,
+        uiState: {
+          leftPanelWidth: 280,
+          bottomPanelHeight: 200,
+          focusMode: false,
+        },
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={["/workspace"]}>
+          <Routes>
+            <Route path="/workspace" element={<WorkspaceDesktopView />} />
+          </Routes>
+        </MemoryRouter>
+      </Provider>
+    );
+
+    await screen.findByTestId("file-tree-panel");
+
+    const filesTab = screen.getByRole("tab", { name: /Files|文件/i });
+    const gitTab = screen.getByRole("tab", { name: "Git" });
+
+    expect(filesTab).toHaveClass("workspace-sidebar-panel__tab", "active");
+    expect(filesTab).not.toHaveClass("panel-tab");
+    expect(gitTab).toHaveClass("workspace-sidebar-panel__tab");
+    expect(gitTab).not.toHaveClass("panel-tab");
+  });
+
   it("does not render a duplicate worktree entry button in the desktop git header", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "git.status") {

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

@@ -114,10 +114,10 @@ export const WorkspaceDesktopView: FC = () => {
                     value={sidebarTab}
                   >
                     <TabList className="workspace-sidebar-panel__tabs">
-                      <Tab className="workspace-sidebar-panel__tab panel-tab" value="files">
+                      <Tab className="workspace-sidebar-panel__tab" value="files">
                         <span>{t("file.title")}</span>
                       </Tab>
-                      <Tab className="workspace-sidebar-panel__tab panel-tab" value="git">
+                      <Tab className="workspace-sidebar-panel__tab" value="git">
                         <span>{t("label.git")}</span>
                       </Tab>
                     </TabList>

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

@@ -70,4 +70,20 @@ describe("MobileFilesSheet", () => {
     ).toBeTruthy();
     expect(searchInput).toBeInTheDocument();
   });
+
+  it("uses the mobile segmented tab styling without legacy panel-tab classes", () => {
+    render(
+      <Provider store={createStore()}>
+        <MobileFilesSheet workspaceId="ws-test" route={{ kind: "root" }} activeTab="git" />
+      </Provider>
+    );
+
+    const filesTab = screen.getByRole("tab", { name: "Files" });
+    const gitTab = screen.getByRole("tab", { name: "Git" });
+
+    expect(filesTab).toHaveClass("mobile-files-sheet__segment");
+    expect(filesTab).not.toHaveClass("panel-tab");
+    expect(gitTab).toHaveClass("mobile-files-sheet__segment", "active");
+    expect(gitTab).not.toHaveClass("panel-tab");
+  });
 });

packages/web/src/features/workspace/views/mobile/mobile-files-sheet.tsx

@@ -88,10 +88,10 @@ export function MobileFilesSheet({
           value={activeTab}
         >
           <TabList className="mobile-files-sheet__tabs">
-            <Tab className="mobile-files-sheet__segment panel-tab" value="files">
+            <Tab className="mobile-files-sheet__segment" value="files">
               <span>{t("file.title")}</span>
             </Tab>
-            <Tab className="mobile-files-sheet__segment panel-tab" value="git">
+            <Tab className="mobile-files-sheet__segment" value="git">
               <span>{t("label.git")}</span>
             </Tab>
           </TabList>

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

@@ -339,6 +339,77 @@ describe("FileTreePanel", () => {
     });
   });
 
+  it("restores per-type icon tone classes for tree rows and search results", async () => {
+    const searchFiles = [
+      { path: "src/app.tsx", name: "app.tsx", kind: "file" },
+      { path: "src/config.json", name: "config.json", kind: "file" },
+      { path: "src/README.md", name: "README.md", kind: "file" },
+      { path: "src/logo.svg", name: "logo.svg", kind: "file" },
+      { path: "src/notes.bin", name: "notes.bin", kind: "file" },
+    ];
+    const sendCommand = vi.fn().mockImplementation(async (op: string, args: { query?: string }) => {
+      if (op === "file.search") {
+        const query = args.query?.toLowerCase() ?? "";
+        return {
+          files: searchFiles.filter((item) => item.name.toLowerCase().includes(query)),
+        };
+      }
+
+      return { ok: true };
+    });
+    const store = createStore();
+    store.set(wsClientAtom, { sendCommand } as never);
+    store.set(
+      fileTreeAtomFamily("ws-test"),
+      new Map([
+        [
+          ".",
+          [
+            {
+              path: "src",
+              name: "src",
+              kind: "dir",
+              children: [
+                { path: "src/app.tsx", name: "app.tsx", kind: "file" },
+                { path: "src/config.json", name: "config.json", kind: "file" },
+                { path: "src/README.md", name: "README.md", kind: "file" },
+                { path: "src/logo.svg", name: "logo.svg", kind: "file" },
+                { path: "src/notes.bin", name: "notes.bin", kind: "file" },
+              ],
+            },
+          ],
+        ],
+      ])
+    );
+
+    render(
+      <Provider store={store}>
+        <FileTreePanel workspaceId="ws-test" />
+      </Provider>
+    );
+
+    const folderLabel = screen.getByText("src");
+    expect(folderLabel.previousElementSibling).toHaveClass("tree-icon", "folder");
+
+    await screen.findByText("app.tsx");
+
+    expect(screen.getByText("app.tsx").previousElementSibling).toHaveClass("tree-icon", "code");
+    expect(screen.getByText("config.json").previousElementSibling).toHaveClass("tree-icon", "data");
+    expect(screen.getByText("README.md").previousElementSibling).toHaveClass("tree-icon", "doc");
+    expect(screen.getByText("logo.svg").previousElementSibling).toHaveClass("tree-icon", "media");
+    expect(screen.getByText("notes.bin").previousElementSibling).toHaveClass("tree-icon", "file");
+
+    fireEvent.change(screen.getByPlaceholderText("action.search_files"), {
+      target: { value: "logo" },
+    });
+
+    const searchLabel = await screen.findByText("logo.svg");
+    expect(searchLabel.closest(".tree-search-labels")?.previousElementSibling).toHaveClass(
+      "tree-icon",
+      "media"
+    );
+  });
+
   it("opens the new file dialog from the toolbar and dispatches file.create", async () => {
     const sendCommand = vi
       .fn()

packages/web/src/features/workspace/views/shared/file-tree-panel.tsx

@@ -689,8 +689,40 @@ function getNodeIcon(node: FileNode, isExpanded: boolean): LucideIcon {
 
 function getNodeToneClass(node: FileNode, isExpanded: boolean) {
   if (node.kind === "dir") {
-    return isExpanded ? "folder-open" : "folder";
+    return "folder";
   }
 
-  return "file";
+  const ext = node.name.split(".").pop()?.toLowerCase();
+
+  switch (ext) {
+    case "ts":
+    case "tsx":
+    case "js":
+    case "jsx":
+    case "mjs":
+    case "cjs":
+    case "py":
+    case "go":
+    case "rs":
+    case "java":
+      return "code";
+    case "json":
+    case "yaml":
+    case "yml":
+    case "toml":
+    case "lock":
+      return "data";
+    case "md":
+    case "txt":
+      return "doc";
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+    case "webp":
+      return "media";
+    default:
+      return "file";
+  }
 }