From 243c85970966ecd9be83fab2592029783844ec94 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Fri, 24 Apr 2026 02:03:16 +0700
Subject: [PATCH] chore(lint): hoist inline styles/objects in menu-header

---
 .../src/components/headers/menu-header.tsx    | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/headers/menu-header.tsx b/packages/app/src/components/headers/menu-header.tsx
index eaaecb258..5a7cfcb24 100644
--- a/packages/app/src/components/headers/menu-header.tsx
+++ b/packages/app/src/components/headers/menu-header.tsx
@@ -1,4 +1,4 @@
-import { useCallback, type ReactNode } from "react";
+import { useCallback, useMemo, type ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { PanelLeft } from "lucide-react-native";
@@ -27,13 +27,19 @@ const MOBILE_MENU_LINE_SHORT_WIDTH = 8;
 const MOBILE_MENU_LINE_HEIGHT = 2;
 
 function MobileMenuIcon({ color }: { color: string }) {
+  const lineStyle = useMemo(
+    () => [styles.mobileMenuLine, { backgroundColor: color }],
+    [color],
+  );
+  const shortLineStyle = useMemo(
+    () => [styles.mobileMenuLine, styles.mobileMenuLineShort, { backgroundColor: color }],
+    [color],
+  );
   return (
     <View style={styles.mobileMenuIcon} pointerEvents="none">
-      <View style={[styles.mobileMenuLine, { backgroundColor: color }]} />
-      <View style={[styles.mobileMenuLine, { backgroundColor: color }]} />
-      <View
-        style={[styles.mobileMenuLine, styles.mobileMenuLineShort, { backgroundColor: color }]}
-      />
+      <View style={lineStyle} />
+      <View style={lineStyle} />
+      <View style={shortLineStyle} />
     </View>
   );
 }
@@ -48,7 +54,10 @@ export function SidebarMenuToggle({
   const isMobile = useIsCompactFormFactor();
   const isOpen = usePanelStore((state) => selectIsAgentListOpen(state, { isCompact: isMobile }));
   const toggleAgentListForLayout = usePanelStore((state) => state.toggleAgentListForLayout);
-  const toggleShortcutKeys = getShortcutOs() === "mac" ? ["mod", "B"] : ["mod", "."];
+  const toggleShortcutKeys = useMemo(
+    () => (getShortcutOs() === "mac" ? ["mod", "B"] : ["mod", "."]),
+    [],
+  );
 
   const menuIconColor =
     !isMobile && isOpen ? theme.colors.foreground : theme.colors.foregroundMuted;
@@ -57,6 +66,8 @@ export function SidebarMenuToggle({
     toggleAgentListForLayout({ isCompact: isMobile });
   }, [toggleAgentListForLayout, isMobile]);
 
+  const accessibilityState = useMemo(() => ({ expanded: isOpen }), [isOpen]);
+
   return (
     <HeaderToggleButton
       onPress={handlePress}
@@ -69,7 +80,7 @@ export function SidebarMenuToggle({
       accessible
       accessibilityRole="button"
       accessibilityLabel={isOpen ? "Close menu" : "Open menu"}
-      accessibilityState={{ expanded: isOpen }}
+      accessibilityState={accessibilityState}
     >
       {isMobile ? (
         <MobileMenuIcon color={menuIconColor} />