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

---
 packages/app/src/components/ui/shortcut.tsx   | 14 ++++---
 packages/app/src/panels/agent-panel.tsx       | 14 ++++++-
 .../app/src/screens/new-workspace-screen.tsx  | 27 +++++++------
 .../settings/keyboard-shortcuts-section.tsx   | 38 +++++++++++++------
 4 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/packages/app/src/components/ui/shortcut.tsx b/packages/app/src/components/ui/shortcut.tsx
index ec3d83e8f..e1499644f 100644
--- a/packages/app/src/components/ui/shortcut.tsx
+++ b/packages/app/src/components/ui/shortcut.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import { useMemo, type ReactElement } from "react";
 import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { formatShortcut, type ShortcutKey } from "@/utils/format-shortcut";
@@ -19,24 +19,28 @@ export function Shortcut({
   const shortcutOs = getShortcutOs();
   const singleCombo = displayChord[0];
 
+  const badgeStyle = useMemo(() => [styles.badge, style], [style]);
+  const textCombinedStyle = useMemo(() => [styles.text, textStyle], [textStyle]);
+  const sequenceStyle = useMemo(() => [styles.sequence, style], [style]);
+
   if (!singleCombo) {
     return <View style={style} />;
   }
 
   if (displayChord.length === 1) {
     return (
-      <View style={[styles.badge, style]}>
-        <Text style={[styles.text, textStyle]}>{formatShortcut(singleCombo, shortcutOs)}</Text>
+      <View style={badgeStyle}>
+        <Text style={textCombinedStyle}>{formatShortcut(singleCombo, shortcutOs)}</Text>
       </View>
     );
   }
 
   return (
-    <View style={[styles.sequence, style]}>
+    <View style={sequenceStyle}>
       {displayChord.map(function (combo, index) {
         return (
           <View key={`${combo.join("+")}-${index}`} style={styles.badge}>
-            <Text style={[styles.text, textStyle]}>{formatShortcut(combo, shortcutOs)}</Text>
+            <Text style={textCombinedStyle}>{formatShortcut(combo, shortcutOs)}</Text>
           </View>
         );
       })}
diff --git a/packages/app/src/panels/agent-panel.tsx b/packages/app/src/panels/agent-panel.tsx
index abaaf4901..0cbd984bd 100644
--- a/packages/app/src/panels/agent-panel.tsx
+++ b/packages/app/src/panels/agent-panel.tsx
@@ -860,6 +860,11 @@ function ChatAgentContent({
     shouldUseOptimisticStream,
   ]);
 
+  const animatedContentStyle = useMemo(
+    () => [styles.content, animatedKeyboardStyle],
+    [animatedKeyboardStyle],
+  );
+
   if (viewState.tag === "not_found") {
     return (
       <View style={styles.container} testID="agent-not-found">
@@ -896,7 +901,7 @@ function ChatAgentContent({
       <FileDropZone onFilesDropped={handleFilesDropped} disabled={isArchivingCurrentAgent}>
         <View style={styles.container}>
           <View style={styles.contentContainer}>
-            <ReanimatedAnimated.View style={[styles.content, animatedKeyboardStyle]}>
+            <ReanimatedAnimated.View style={animatedContentStyle}>
               <AgentStreamSection
                 streamViewRef={streamViewRef}
                 serverId={serverId}
@@ -1192,8 +1197,13 @@ function ActiveAgentComposer({
     initialCwd,
   });
 
+  const inputAreaStyle = useMemo(
+    () => [styles.inputAreaWrapper, { paddingBottom: insets.bottom }],
+    [insets.bottom],
+  );
+
   return (
-    <View style={[styles.inputAreaWrapper, { paddingBottom: insets.bottom }]}>
+    <View style={inputAreaStyle}>
       <Composer
         agentId={agentId}
         serverId={serverId}
diff --git a/packages/app/src/screens/new-workspace-screen.tsx b/packages/app/src/screens/new-workspace-screen.tsx
index aa79d92ac..14c1ec072 100644
--- a/packages/app/src/screens/new-workspace-screen.tsx
+++ b/packages/app/src/screens/new-workspace-screen.tsx
@@ -444,6 +444,20 @@ export function NewWorkspaceScreen({
     [isPending, itemById, theme.colors.foregroundMuted, theme.iconSize.sm],
   );
 
+  const contentStyle = useMemo(
+    () => [
+      styles.content,
+      isCompact ? styles.contentCompact : styles.contentCentered,
+      isCompact ? { paddingBottom: insets.bottom } : null,
+    ],
+    [isCompact, insets.bottom],
+  );
+
+  const optionsRowStyle = useMemo(
+    () => [styles.optionsRow, keyboardAnimatedStyle],
+    [keyboardAnimatedStyle],
+  );
+
   return (
     <View style={styles.container}>
       <ScreenHeader
@@ -463,13 +477,7 @@ export function NewWorkspaceScreen({
         leftStyle={styles.headerLeft}
         borderless
       />
-      <View
-        style={[
-          styles.content,
-          isCompact ? styles.contentCompact : styles.contentCentered,
-          isCompact ? { paddingBottom: insets.bottom } : null,
-        ]}
-      >
+      <View style={contentStyle}>
         <TitlebarDragRegion />
         <View style={styles.centered}>
           <Composer
@@ -503,10 +511,7 @@ export function NewWorkspaceScreen({
             }
             onAddImages={handleAddImagesCallback}
           />
-          <Animated.View
-            testID="new-workspace-ref-picker-row"
-            style={[styles.optionsRow, keyboardAnimatedStyle]}
-          >
+          <Animated.View testID="new-workspace-ref-picker-row" style={optionsRowStyle}>
             <View>
               <Tooltip>
                 <TooltipTrigger asChild triggerRefProp="ref">
diff --git a/packages/app/src/screens/settings/keyboard-shortcuts-section.tsx b/packages/app/src/screens/settings/keyboard-shortcuts-section.tsx
index f2ddf1417..1bb63ac35 100644
--- a/packages/app/src/screens/settings/keyboard-shortcuts-section.tsx
+++ b/packages/app/src/screens/settings/keyboard-shortcuts-section.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { View, Text } from "react-native";
 import { useIsFocused } from "@react-navigation/native";
 import { StyleSheet } from "react-native-unistyles";
@@ -23,6 +23,8 @@ import { getShortcutOs } from "@/utils/shortcut-platform";
 import { getIsElectronRuntime } from "@/constants/layout";
 import { isNative } from "@/constants/platform";
 
+const EMPTY_CAPTURED_COMBOS: string[] = [];
+
 function ShortcutSequence({
   chord,
   heldModifiers,
@@ -30,16 +32,19 @@ function ShortcutSequence({
   chord: string[] | null;
   heldModifiers: string | null;
 }) {
+  const displayChord = useMemo(() => {
+    const combos = [...(chord ?? [])];
+    if (heldModifiers) {
+      combos.push(heldModifiers);
+    }
+    return combos.map(comboStringToShortcutKeys);
+  }, [chord, heldModifiers]);
+
   if ((!chord || chord.length === 0) && !heldModifiers) {
     return <Text style={styles.capturingText}>Press shortcut...</Text>;
   }
 
-  const displayCombos = [...(chord ?? [])];
-  if (heldModifiers) {
-    displayCombos.push(heldModifiers);
-  }
-
-  return <Shortcut chord={displayCombos.map(comboStringToShortcutKeys)} />;
+  return <Shortcut chord={displayChord} />;
 }
 
 function ShortcutRow({
@@ -65,10 +70,17 @@ function ShortcutRow({
   onCancel: () => void;
   onReset: () => void;
 }) {
-  const displayChord = overrideCombo ? chordStringToShortcutKeys(overrideCombo) : [row.keys];
+  const displayChord = useMemo(
+    () => (overrideCombo ? chordStringToShortcutKeys(overrideCombo) : [row.keys]),
+    [overrideCombo, row.keys],
+  );
+  const rowStyle = useMemo(
+    () => [styles.row, isCapturing && styles.rowCapturing],
+    [isCapturing],
+  );
 
   return (
-    <View style={[styles.row, isCapturing && styles.rowCapturing]}>
+    <View style={rowStyle}>
       <Text style={styles.rowLabel}>{row.label}</Text>
       <View style={styles.rowActions}>
         {isCapturing ? (
@@ -178,7 +190,7 @@ export function KeyboardShortcutsSection() {
   if (isNative) {
     return (
       <SettingsSection title="Shortcuts">
-        <View style={[settingsStyles.card, styles.mobileCard]}>
+        <View style={mobileCardStyle}>
           <Text style={styles.mobileText}>Keyboard shortcuts are only available on desktop</Text>
         </View>
       </SettingsSection>
@@ -215,7 +227,9 @@ export function KeyboardShortcutsSection() {
                       bindingId={bindingId}
                       overrideCombo={overrideCombo}
                       isCapturing={capturingBindingId === bindingId}
-                      capturedCombos={capturingBindingId === bindingId ? capturedCombos : []}
+                      capturedCombos={
+                        capturingBindingId === bindingId ? capturedCombos : EMPTY_CAPTURED_COMBOS
+                      }
                       heldModifiers={capturingBindingId === bindingId ? heldModifiers : null}
                       onRebind={() => {
                         if (bindingId) {
@@ -280,3 +294,5 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
   },
 }));
+
+const mobileCardStyle = [settingsStyles.card, styles.mobileCard];