From 5a78561dc8fddae00e4a2b5e7ae58a21b7eb32a0 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Thu, 23 Apr 2026 23:15:11 +0700
Subject: [PATCH] chore(lint): hoist inline arrays in app
 (jsx-no-new-array-as-prop)

---
 packages/app/src/components/agent-status-dot.tsx      |  8 +++++++-
 .../app/src/components/archived-agent-callout.tsx     | 11 +++++++----
 .../app/src/components/git-actions-split-button.tsx   |  6 ++++--
 .../ui/isolated-bottom-sheet-modal.test.tsx           | 10 +++++++---
 .../app/src/desktop/components/pair-device-modal.tsx  |  4 +++-
 5 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/components/agent-status-dot.tsx b/packages/app/src/components/agent-status-dot.tsx
index 37ae7a67e..bdf7e360a 100644
--- a/packages/app/src/components/agent-status-dot.tsx
+++ b/packages/app/src/components/agent-status-dot.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import {
@@ -41,7 +42,12 @@ export function AgentStatusDot({
     return null;
   }
 
-  return <View style={[styles.dot, { backgroundColor: color }]} />;
+  return <AgentStatusDotView color={color} />;
+}
+
+function AgentStatusDotView({ color }: { color: string }) {
+  const dotStyle = useMemo(() => [styles.dot, { backgroundColor: color }], [color]);
+  return <View style={dotStyle} />;
 }
 
 function isAgentLifecycleStatus(value: string): value is AgentLifecycleStatus {
diff --git a/packages/app/src/components/archived-agent-callout.tsx b/packages/app/src/components/archived-agent-callout.tsx
index 325e0387d..39bc06ea4 100644
--- a/packages/app/src/components/archived-agent-callout.tsx
+++ b/packages/app/src/components/archived-agent-callout.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { View, Text } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import Animated from "react-native-reanimated";
@@ -22,6 +22,11 @@ export function ArchivedAgentCallout({ serverId, agentId }: ArchivedAgentCallout
 
   const { style: keyboardAnimatedStyle } = useKeyboardShiftStyle({ mode: "translate" });
 
+  const containerStyle = useMemo(
+    () => [styles.container, { paddingBottom: insets.bottom }, keyboardAnimatedStyle],
+    [insets.bottom, keyboardAnimatedStyle],
+  );
+
   async function handleUnarchive() {
     if (!client || !isConnected || isUnarchiving) return;
     setIsUnarchiving(true);
@@ -34,9 +39,7 @@ export function ArchivedAgentCallout({ serverId, agentId }: ArchivedAgentCallout
   }
 
   return (
-    <Animated.View
-      style={[styles.container, { paddingBottom: insets.bottom }, keyboardAnimatedStyle]}
-    >
+    <Animated.View style={containerStyle}>
       <View style={styles.inputAreaContainer}>
         <View style={styles.inputAreaContent}>
           <View style={styles.callout}>
diff --git a/packages/app/src/components/git-actions-split-button.tsx b/packages/app/src/components/git-actions-split-button.tsx
index 4bc6cd8cb..ce6a11bde 100644
--- a/packages/app/src/components/git-actions-split-button.tsx
+++ b/packages/app/src/components/git-actions-split-button.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { View, Text, ActivityIndicator, Pressable } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { ChevronDown, Info, MoreVertical } from "lucide-react-native";
@@ -44,6 +44,8 @@ export function GitActionsSplitButton({ gitActions, hideLabels }: GitActionsSpli
     [theme.colors.foreground, toast],
   );
 
+  const overflowMenuButtonStyle = useMemo(() => [styles.iconButton, styles.overflowMenuButton], []);
+
   return (
     <View style={styles.row}>
       {gitActions.primary ? (
@@ -132,7 +134,7 @@ export function GitActionsSplitButton({ gitActions, hideLabels }: GitActionsSpli
           <DropdownMenuTrigger
             testID="changes-overflow-menu"
             hitSlop={8}
-            style={[styles.iconButton, styles.overflowMenuButton]}
+            style={overflowMenuButtonStyle}
             accessibilityRole="button"
             accessibilityLabel="More actions"
           >
diff --git a/packages/app/src/components/ui/isolated-bottom-sheet-modal.test.tsx b/packages/app/src/components/ui/isolated-bottom-sheet-modal.test.tsx
index bcd43f279..ddec35405 100644
--- a/packages/app/src/components/ui/isolated-bottom-sheet-modal.test.tsx
+++ b/packages/app/src/components/ui/isolated-bottom-sheet-modal.test.tsx
@@ -8,6 +8,10 @@ import {
   useIsolatedBottomSheetVisibility,
 } from "./isolated-bottom-sheet-modal";
 
+const SNAP_POINTS_50: (string | number)[] = ["50%"];
+const SNAP_POINTS_60: (string | number)[] = ["60%"];
+const SNAP_POINTS_90: (string | number)[] = ["90%"];
+
 const { modalMethods, modalProps } = vi.hoisted(() => ({
   modalMethods: {
     present: vi.fn(),
@@ -57,7 +61,7 @@ function Harness({ visible, onClose }: { visible: boolean; onClose: () => void }
     <IsolatedBottomSheetModal
       ref={sheetRef}
       index={0}
-      snapPoints={["50%"]}
+      snapPoints={SNAP_POINTS_50}
       onChange={handleSheetChange}
     >
       <div>Sheet content</div>
@@ -112,8 +116,8 @@ describe("IsolatedBottomSheetModal", () => {
 
   it("allows nested sheets inside a parent sheet without creating a sibling provider", () => {
     const { getAllByTestId } = render(
-      <IsolatedBottomSheetModal index={0} snapPoints={["90%"]}>
-        <IsolatedBottomSheetModal index={0} snapPoints={["60%"]} onChange={() => {}}>
+      <IsolatedBottomSheetModal index={0} snapPoints={SNAP_POINTS_90}>
+        <IsolatedBottomSheetModal index={0} snapPoints={SNAP_POINTS_60} onChange={() => {}}>
           <div>Nested model picker</div>
         </IsolatedBottomSheetModal>
       </IsolatedBottomSheetModal>,
diff --git a/packages/app/src/desktop/components/pair-device-modal.tsx b/packages/app/src/desktop/components/pair-device-modal.tsx
index 4a774b2c4..548ca557f 100644
--- a/packages/app/src/desktop/components/pair-device-modal.tsx
+++ b/packages/app/src/desktop/components/pair-device-modal.tsx
@@ -7,13 +7,15 @@ export interface PairDeviceModalProps {
   testID?: string;
 }
 
+const SNAP_POINTS: string[] = ["82%", "94%"];
+
 export function PairDeviceModal({ visible, onClose, testID }: PairDeviceModalProps) {
   return (
     <AdaptiveModalSheet
       title="Pair a device"
       visible={visible}
       onClose={onClose}
-      snapPoints={["82%", "94%"]}
+      snapPoints={SNAP_POINTS}
       desktopMaxWidth={640}
       testID={testID}
     >