From 18262a0899d03b01f289273e0babaa58b37b92e1 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Fri, 24 Apr 2026 02:10:50 +0700
Subject: [PATCH] chore(lint): memoize inline styles in explorer-sidebar

---
 .../app/src/components/explorer-sidebar.tsx   | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/components/explorer-sidebar.tsx b/packages/app/src/components/explorer-sidebar.tsx
index 9b3482cf5..dc857c3f1 100644
--- a/packages/app/src/components/explorer-sidebar.tsx
+++ b/packages/app/src/components/explorer-sidebar.tsx
@@ -310,13 +310,11 @@ export function ExplorerSidebar({
   }
 
   return (
-    <Animated.View
-      style={[explorerStaticStyles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insets.top }]}
-    >
-      <View style={[styles.desktopSidebarBorder, { flex: 1 }]}>
+    <Animated.View style={desktopSidebarStyle}>
+      <View style={DESKTOP_SIDEBAR_BORDER_STYLE}>
         {/* Resize handle - absolutely positioned over left border */}
         <GestureDetector gesture={resizeGesture}>
-          <View style={[styles.resizeHandle, isWeb && ({ cursor: "col-resize" } as any)]} />
+          <View style={RESIZE_HANDLE_STYLE} />
         </GestureDetector>
 
         <SidebarContent
@@ -354,16 +352,12 @@ function ExplorerTabButton({
   children,
 }: ExplorerTabButtonProps) {
   const handlePress = useCallback(() => onTabPress(tab), [onTabPress, tab]);
+  const tabStyle = useMemo(() => [styles.tab, active && styles.tabActive], [active]);
+  const tabTextStyle = useMemo(() => [styles.tabText, active && styles.tabTextActive], [active]);
   return (
-    <Pressable
-      testID={testID}
-      style={[styles.tab, active && styles.tabActive]}
-      onPress={handlePress}
-    >
+    <Pressable testID={testID} style={tabStyle} onPress={handlePress}>
       {children}
-      {label !== undefined ? (
-        <Text style={[styles.tabText, active && styles.tabTextActive]}>{label}</Text>
-      ) : null}
+      {label !== undefined ? <Text style={tabTextStyle}>{label}</Text> : null}
     </Pressable>
   );
 }
@@ -409,10 +403,15 @@ function SidebarContent({
     requestedTab === "pr" && !hasPullRequest ? "changes" : requestedTab;
   const prTabLabel = prPane.prNumber === null ? "" : `#${prPane.prNumber}`;
 
+  const headerStyle = useMemo(
+    () => [styles.header, { paddingRight: padding.right }],
+    [padding.right],
+  );
+
   return (
     <View style={styles.sidebarContent} pointerEvents="auto">
       {/* Header with tabs and close button */}
-      <View style={[styles.header, { paddingRight: padding.right }]} testID="explorer-header">
+      <View style={headerStyle} testID="explorer-header">
         <TitlebarDragRegion />
         <View style={styles.tabsContainer}>
           {isGit && (
@@ -570,3 +569,6 @@ const styles = StyleSheet.create((theme) => ({
     minHeight: 0,
   },
 }));
+
+const DESKTOP_SIDEBAR_BORDER_STYLE = [styles.desktopSidebarBorder, { flex: 1 }];
+const RESIZE_HANDLE_STYLE = [styles.resizeHandle, isWeb && ({ cursor: "col-resize" } as any)];