From 1db168953244d003c75e42330f0f11076cfac330 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Fri, 24 Apr 2026 02:21:02 +0700
Subject: [PATCH] chore(lint): memoize inline styles in workspace-screen

---
 .../screens/workspace/workspace-screen.tsx    | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/screens/workspace/workspace-screen.tsx b/packages/app/src/screens/workspace/workspace-screen.tsx
index c69e45ac5..fb36d7388 100644
--- a/packages/app/src/screens/workspace/workspace-screen.tsx
+++ b/packages/app/src/screens/workspace/workspace-screen.tsx
@@ -30,6 +30,7 @@ import { ScreenHeader } from "@/components/headers/screen-header";
 import { BranchSwitcher } from "@/components/branch-switcher";
 import { Combobox, type ComboboxOption } from "@/components/ui/combobox";
 import { Shortcut } from "@/components/ui/shortcut";
+import type { ShortcutKey } from "@/utils/format-shortcut";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -565,8 +566,13 @@ const MobileMountedTabSlot = memo(function MobileMountedTabSlot({
     [buildPaneContentModel, paneId, tabDescriptor],
   );
 
+  const slotStyle = useMemo(
+    () => ({ display: isVisible ? ("flex" as const) : ("none" as const), flex: 1 }),
+    [isVisible],
+  );
+
   return (
-    <View style={{ display: isVisible ? "flex" : "none", flex: 1 }}>
+    <View style={slotStyle}>
       <WorkspacePaneContent
         content={content}
         isWorkspaceFocused={isWorkspaceFocused}
@@ -994,6 +1000,10 @@ function WorkspaceScreenContent({
     ],
     [hasDiffStat, isExplorerOpen],
   );
+  const explorerToggleAccessibilityState = useMemo(
+    () => ({ expanded: isExplorerOpen }),
+    [isExplorerOpen],
+  );
 
   const explorerOpenGesture = useExplorerOpenGesture({
     enabled: isMobile && canOpenExplorerFromAgentView,
@@ -2269,8 +2279,13 @@ function WorkspaceScreenContent({
     );
   }, []);
 
+  const containerStyle = useMemo(
+    () => [styles.container, { backgroundColor: mainBackgroundColor }],
+    [mainBackgroundColor],
+  );
+
   return (
-    <View style={[styles.container, { backgroundColor: mainBackgroundColor }]}>
+    <View style={containerStyle}>
       {isRouteFocused && isWeb && activeTabDescriptor ? (
         <WorkspaceTabPresentationResolver
           tab={activeTabDescriptor}
@@ -2427,7 +2442,7 @@ function WorkspaceScreenContent({
                             onPress={handleToggleExplorer}
                             accessibilityRole="button"
                             accessibilityLabel={isExplorerOpen ? "Close explorer" : "Open explorer"}
-                            accessibilityState={{ expanded: isExplorerOpen }}
+                            accessibilityState={explorerToggleAccessibilityState}
                             style={explorerToggleStyle}
                           >
                             {({ hovered, pressed }) => {
@@ -2460,7 +2475,10 @@ function WorkspaceScreenContent({
                         >
                           <View style={styles.explorerTooltipRow}>
                             <Text style={styles.explorerTooltipText}>Toggle explorer</Text>
-                            <Shortcut keys={["mod", "E"]} style={styles.explorerTooltipShortcut} />
+                            <Shortcut
+                              keys={EXPLORER_TOGGLE_KEYS}
+                              style={styles.explorerTooltipShortcut}
+                            />
                           </View>
                         </TooltipContent>
                       </Tooltip>
@@ -2471,13 +2489,13 @@ function WorkspaceScreenContent({
                       testID="workspace-explorer-toggle"
                       onPress={handleToggleExplorer}
                       tooltipLabel="Toggle explorer"
-                      tooltipKeys={["mod", "E"]}
+                      tooltipKeys={EXPLORER_TOGGLE_KEYS}
                       tooltipSide="left"
                       style={styles.headerActionButton}
                       accessible
                       accessibilityRole="button"
                       accessibilityLabel={isExplorerOpen ? "Close explorer" : "Open explorer"}
-                      accessibilityState={{ expanded: isExplorerOpen }}
+                      accessibilityState={explorerToggleAccessibilityState}
                     >
                       {({ hovered }) => {
                         const color =
@@ -2493,13 +2511,13 @@ function WorkspaceScreenContent({
                       testID="workspace-explorer-toggle"
                       onPress={handleToggleExplorer}
                       tooltipLabel="Toggle explorer"
-                      tooltipKeys={["mod", "E"]}
+                      tooltipKeys={EXPLORER_TOGGLE_KEYS}
                       tooltipSide="left"
                       style={styles.headerActionButton}
                       accessible
                       accessibilityRole="button"
                       accessibilityLabel={isExplorerOpen ? "Close explorer" : "Open explorer"}
-                      accessibilityState={{ expanded: isExplorerOpen }}
+                      accessibilityState={explorerToggleAccessibilityState}
                     >
                       {({ hovered }) => {
                         const color =
@@ -2932,3 +2950,5 @@ const styles = StyleSheet.create((theme) => ({
     textAlign: "center",
   },
 }));
+
+const EXPLORER_TOGGLE_KEYS: ShortcutKey[] = ["mod", "E"];