fix(workstation): keep left-pane close icon stable

Keep the workstation X unchanged on hover when the chat panel is docked on the right. Preserve the directional hover affordance for the mirrored layout and cover both positions with a focused regression test.\n\nVerification: pnpm exec vitest run src/modules/WorkStation/AppShell/useWorkstationTrailingSlot.test.ts; pnpm exec eslint src/modules/WorkStation/AppShell/useWorkstationTrailingSlot.tsx src/modules/WorkStation/AppShell/useWorkstationTrailingSlot.test.ts; pnpm run typecheck

Pre-commit hook ran. Total eslint: 0, total circular: 0

Author: Harry19081

src/modules/WorkStation/AppShell/useWorkstationTrailingSlot.test.ts

@@ -0,0 +1,31 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { WorkstationMaximizeChatIcon } from "./useWorkstationTrailingSlot";
+
+describe("WorkstationMaximizeChatIcon", () => {
+  it("keeps the X unchanged when the workstation is left of the chat panel", () => {
+    const markup = renderToStaticMarkup(
+      createElement(WorkstationMaximizeChatIcon, {
+        chatPanelPosition: "right",
+      })
+    );
+
+    expect(markup).toContain('data-icon="x"');
+    expect(markup).not.toContain("group-hover");
+    expect(markup).not.toContain('data-icon="panel-left-close"');
+  });
+
+  it("preserves the directional hover affordance when the chat panel is left", () => {
+    const markup = renderToStaticMarkup(
+      createElement(WorkstationMaximizeChatIcon, {
+        chatPanelPosition: "left",
+      })
+    );
+
+    expect(markup).toContain('data-icon="panel-right"');
+    expect(markup).toContain('data-icon="panel-right-close"');
+    expect(markup).toContain("group-hover:opacity-100");
+  });
+});

src/modules/WorkStation/AppShell/useWorkstationTrailingSlot.tsx

@@ -19,7 +19,6 @@ import {
   BubbleChatIcon,
   Cancel01Icon,
   HugeiconsIcon,
-  PanelLeftCloseIcon,
   PanelRightCloseIcon,
   PanelRightIcon,
 } from "@src/icons";
@@ -33,6 +32,7 @@ import {
   toggleChatPanelMaximizedAtom,
 } from "@src/store/ui/chatPanelAtom";
 import { chatPanelPositionAtom } from "@src/store/ui/workStationAtom";
+import type { ChatPanelPosition } from "@src/store/ui/workStationLayout/chatPositionAtoms";
 import { workstationProjectTabBarAtom } from "@src/store/workstation";
 import type { WorkstationTabHost } from "@src/store/workstation/tabHost";
 
@@ -48,6 +48,42 @@ export interface UseWorkstationTrailingSlotReturn {
   handleToggleChatPanel: () => void;
 }
 
+export function WorkstationMaximizeChatIcon({
+  chatPanelPosition,
+}: {
+  chatPanelPosition: ChatPanelPosition;
+}): ReactNode {
+  if (chatPanelPosition === "right") {
+    return (
+      <HugeiconsIcon
+        icon={Cancel01Icon}
+        data-icon="x"
+        size={HEADER_ICON_SIZE.md}
+        strokeWidth={1.75}
+      />
+    );
+  }
+
+  return (
+    <span className="relative flex h-4 w-4 items-center justify-center">
+      <HugeiconsIcon
+        icon={PanelRightIcon}
+        data-icon="panel-right"
+        size={HEADER_ICON_SIZE.md}
+        strokeWidth={2}
+        className="absolute transition-opacity duration-150 group-hover:opacity-0"
+      />
+      <HugeiconsIcon
+        icon={PanelRightCloseIcon}
+        data-icon="panel-right-close"
+        size={HEADER_ICON_SIZE.md}
+        strokeWidth={2}
+        className="absolute opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+      />
+    </span>
+  );
+}
+
 export function useWorkstationTrailingSlot({
   host,
   visible,
@@ -123,43 +159,9 @@ export function useWorkstationTrailingSlot({
           title={hideWorkstationLabel}
           shortcutId="maximize_chat"
           onClick={handleToggleChatPanelMaximized}
-          className="group"
+          className={chatPanelPosition === "left" ? "group" : undefined}
         >
-          {chatPanelPosition === "left" ? (
-            <span className="relative flex h-4 w-4 items-center justify-center">
-              <HugeiconsIcon
-                icon={PanelRightIcon}
-                data-icon="panel-right"
-                size={HEADER_ICON_SIZE.md}
-                strokeWidth={2}
-                className="absolute transition-opacity duration-150 group-hover:opacity-0"
-              />
-              <HugeiconsIcon
-                icon={PanelRightCloseIcon}
-                data-icon="panel-right-close"
-                size={HEADER_ICON_SIZE.md}
-                strokeWidth={2}
-                className="absolute opacity-0 transition-opacity duration-150 group-hover:opacity-100"
-              />
-            </span>
-          ) : (
-            <span className="relative flex h-4 w-4 items-center justify-center">
-              <HugeiconsIcon
-                icon={Cancel01Icon}
-                data-icon="x"
-                size={HEADER_ICON_SIZE.md}
-                strokeWidth={1.75}
-                className="absolute transition-opacity duration-150 group-hover:opacity-0"
-              />
-              <HugeiconsIcon
-                icon={PanelLeftCloseIcon}
-                data-icon="panel-left-close"
-                size={HEADER_ICON_SIZE.md}
-                strokeWidth={2}
-                className="absolute opacity-0 transition-opacity duration-150 group-hover:opacity-100"
-              />
-            </span>
-          )}
+          <WorkstationMaximizeChatIcon chatPanelPosition={chatPanelPosition} />
         </TabBarTrailingIconButton>
       ) : null;