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

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

diff --git a/packages/app/src/components/explorer-sidebar.tsx b/packages/app/src/components/explorer-sidebar.tsx
index dc857c3f1..567a66672 100644
--- a/packages/app/src/components/explorer-sidebar.tsx
+++ b/packages/app/src/components/explorer-sidebar.tsx
@@ -256,6 +256,30 @@ export function ExplorerSidebar({
     width: resizeWidth.value,
   }));
 
+  const backdropCombinedStyle = useMemo(
+    () => [explorerStaticStyles.backdrop, backdropAnimatedStyle],
+    [backdropAnimatedStyle],
+  );
+  const mobileSidebarStyle = useMemo(
+    () => [
+      explorerStaticStyles.mobileSidebar,
+      {
+        width: windowWidth,
+        paddingTop: insets.top,
+        backgroundColor: theme.colors.surfaceSidebar,
+      },
+      sidebarAnimatedStyle,
+      mobileKeyboardInsetStyle,
+    ],
+    [
+      windowWidth,
+      insets.top,
+      theme.colors.surfaceSidebar,
+      sidebarAnimatedStyle,
+      mobileKeyboardInsetStyle,
+    ],
+  );
+
   // Mobile: full-screen overlay with gesture.
   // On web, keep it interactive only while open so closed sidebars don't eat taps.
   const overlayPointerEvents = isWeb ? (isOpen ? "auto" : "none") : "box-none";
@@ -270,22 +294,10 @@ export function ExplorerSidebar({
     return (
       <View style={StyleSheet.absoluteFillObject} pointerEvents={overlayPointerEvents}>
         {/* Backdrop */}
-        <Animated.View style={[explorerStaticStyles.backdrop, backdropAnimatedStyle]} />
+        <Animated.View style={backdropCombinedStyle} />
 
         <GestureDetector gesture={closeGesture} touchAction="pan-y">
-          <Animated.View
-            style={[
-              explorerStaticStyles.mobileSidebar,
-              {
-                width: windowWidth,
-                paddingTop: insets.top,
-                backgroundColor: theme.colors.surfaceSidebar,
-              },
-              sidebarAnimatedStyle,
-              mobileKeyboardInsetStyle,
-            ]}
-            pointerEvents="auto"
-          >
+          <Animated.View style={mobileSidebarStyle} pointerEvents="auto">
             <SidebarContent
               activeTab={explorerTab}
               onTabPress={handleTabPress}