chore(lint): flatten nested ternaries in button/volume-meter/autocomplete

packages/app/src/components/ui/button.tsx

@@ -118,18 +118,27 @@ export function Button({
   const [hovered, setHovered] = useState(false);
   const { theme } = useUnistyles();
 
-  const variantStyle =
-    variant === "default"
-      ? styles.default
-      : variant === "secondary"
-        ? styles.secondary
-        : variant === "outline"
-          ? styles.outline
-          : variant === "ghost"
-            ? styles.ghost
-            : styles.destructive;
+  let variantStyle: ViewStyle;
+  if (variant === "default") {
+    variantStyle = styles.default;
+  } else if (variant === "secondary") {
+    variantStyle = styles.secondary;
+  } else if (variant === "outline") {
+    variantStyle = styles.outline;
+  } else if (variant === "ghost") {
+    variantStyle = styles.ghost;
+  } else {
+    variantStyle = styles.destructive;
+  }
 
-  const sizeStyle = size === "sm" ? styles.sm : size === "lg" ? styles.lg : styles.md;
+  let sizeStyle: ViewStyle;
+  if (size === "sm") {
+    sizeStyle = styles.sm;
+  } else if (size === "lg") {
+    sizeStyle = styles.lg;
+  } else {
+    sizeStyle = styles.md;
+  }
   const isGhostHovered = hovered && variant === "ghost";
 
   const handleHoverIn = useCallback(() => setHovered(true), []);
@@ -167,14 +176,14 @@ export function Button({
       return <View>{leftIcon}</View>;
     }
 
-    const color =
-      variant === "default"
-        ? theme.colors.accentForeground
-        : variant === "ghost"
-          ? isGhostHovered
-            ? theme.colors.foreground
-            : theme.colors.foregroundMuted
-          : theme.colors.foreground;
+    let color: string;
+    if (variant === "default") {
+      color = theme.colors.accentForeground;
+    } else if (variant === "ghost") {
+      color = isGhostHovered ? theme.colors.foreground : theme.colors.foregroundMuted;
+    } else {
+      color = theme.colors.foreground;
+    }
     const iconSize = ICON_SIZE[size];
 
     // Render function

packages/app/src/components/volume-meter.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { View } from "react-native";
 import ReanimatedAnimated, {
   useSharedValue,
@@ -33,8 +33,18 @@ export function VolumeMeter({
   // Base dimensions
   const LINE_SPACING = isCompact ? 6 : 8;
   const LINE_WIDTH = isCompact ? 6 : 8;
-  const MAX_HEIGHT = orientation === "horizontal" ? (isCompact ? 18 : 30) : isCompact ? 32 : 50;
-  const MIN_HEIGHT = orientation === "horizontal" ? (isCompact ? 8 : 12) : isCompact ? 14 : 20;
+  let MAX_HEIGHT: number;
+  if (orientation === "horizontal") {
+    MAX_HEIGHT = isCompact ? 18 : 30;
+  } else {
+    MAX_HEIGHT = isCompact ? 32 : 50;
+  }
+  let MIN_HEIGHT: number;
+  if (orientation === "horizontal") {
+    MIN_HEIGHT = isCompact ? 8 : 12;
+  } else {
+    MIN_HEIGHT = isCompact ? 14 : 20;
+  }
 
   // Create shared values for 3 dots unconditionally
   const animatedVolume = useSharedValue(0);
@@ -99,8 +109,12 @@ export function VolumeMeter({
   }, [animatedVolume, isMuted, volume]);
 
   const lineColor = color ?? theme.colors.foreground;
-  const containerHeight =
-    orientation === "horizontal" ? (isCompact ? 32 : 60) : isCompact ? 64 : 100;
+  let containerHeight: number;
+  if (orientation === "horizontal") {
+    containerHeight = isCompact ? 32 : 60;
+  } else {
+    containerHeight = isCompact ? 64 : 100;
+  }
 
   // Create animated styles unconditionally at top level
   const line1Style = useAnimatedStyle(() => {
@@ -139,19 +153,35 @@ export function VolumeMeter({
     };
   });
 
+  const containerStyle = useMemo(
+    () => [styles.container, { height: containerHeight }],
+    [containerHeight],
+  );
+  const lineBase = useMemo(
+    () => ({ width: LINE_WIDTH, backgroundColor: lineColor }),
+    [LINE_WIDTH, lineColor],
+  );
+  const spacerStyle = useMemo(() => ({ width: LINE_SPACING }), [LINE_SPACING]);
+  const line1CombinedStyle = useMemo(
+    () => [styles.line, lineBase, line1Style],
+    [lineBase, line1Style],
+  );
+  const line2CombinedStyle = useMemo(
+    () => [styles.line, lineBase, line2Style],
+    [lineBase, line2Style],
+  );
+  const line3CombinedStyle = useMemo(
+    () => [styles.line, lineBase, line3Style],
+    [lineBase, line3Style],
+  );
+
   return (
-    <View style={[styles.container, { height: containerHeight }]}>
-      <ReanimatedAnimated.View
-        style={[styles.line, { width: LINE_WIDTH, backgroundColor: lineColor }, line1Style]}
-      />
-      <View style={{ width: LINE_SPACING }} />
-      <ReanimatedAnimated.View
-        style={[styles.line, { width: LINE_WIDTH, backgroundColor: lineColor }, line2Style]}
-      />
-      <View style={{ width: LINE_SPACING }} />
-      <ReanimatedAnimated.View
-        style={[styles.line, { width: LINE_WIDTH, backgroundColor: lineColor }, line3Style]}
-      />
+    <View style={containerStyle}>
+      <ReanimatedAnimated.View style={line1CombinedStyle} />
+      <View style={spacerStyle} />
+      <ReanimatedAnimated.View style={line2CombinedStyle} />
+      <View style={spacerStyle} />
+      <ReanimatedAnimated.View style={line3CombinedStyle} />
     </View>
   );
 }

packages/app/src/hooks/use-agent-autocomplete.ts

@@ -143,17 +143,22 @@ export function useAgentAutocomplete(input: UseAgentAutocompleteInput): AgentAut
   const client = useHostRuntimeClient(serverId);
   const isConnected = useHostRuntimeIsConnected(serverId);
 
-  const mode: "command" | "file" | null = showFileAutocomplete
-    ? "file"
-    : showCommandAutocomplete
-      ? "command"
-      : null;
-  const isVisible =
-    mode === "command"
-      ? canLoadCommands
-      : mode === "file"
-        ? Boolean(serverId) && autocompleteCwd.length > 0
-        : false;
+  let mode: "command" | "file" | null;
+  if (showFileAutocomplete) {
+    mode = "file";
+  } else if (showCommandAutocomplete) {
+    mode = "command";
+  } else {
+    mode = null;
+  }
+  let isVisible: boolean;
+  if (mode === "command") {
+    isVisible = canLoadCommands;
+  } else if (mode === "file") {
+    isVisible = Boolean(serverId) && autocompleteCwd.length > 0;
+  } else {
+    isVisible = false;
+  }
 
   const {
     commands,
@@ -258,22 +263,24 @@ export function useAgentAutocomplete(input: UseAgentAutocompleteInput): AgentAut
     onEscape: mode === "command" ? () => setUserInput("") : undefined,
   });
 
-  const isLoading =
-    mode === "command"
-      ? isCommandsLoading
-      : mode === "file"
-        ? fileSuggestionsQuery.isPending || (fileSuggestionsQuery.isLoading && options.length === 0)
-        : false;
-  const errorMessage =
-    mode === "command"
-      ? isError
-        ? (error?.message ?? "Failed to load")
-        : undefined
-      : mode === "file"
-        ? fileSuggestionsQuery.error instanceof Error
-          ? fileSuggestionsQuery.error.message
-          : undefined
-        : undefined;
+  let isLoading: boolean;
+  if (mode === "command") {
+    isLoading = isCommandsLoading;
+  } else if (mode === "file") {
+    isLoading =
+      fileSuggestionsQuery.isPending || (fileSuggestionsQuery.isLoading && options.length === 0);
+  } else {
+    isLoading = false;
+  }
+  let errorMessage: string | undefined;
+  if (mode === "command") {
+    errorMessage = isError ? (error?.message ?? "Failed to load") : undefined;
+  } else if (mode === "file") {
+    errorMessage =
+      fileSuggestionsQuery.error instanceof Error ? fileSuggestionsQuery.error.message : undefined;
+  } else {
+    errorMessage = undefined;
+  }
 
   const loadingText = mode === "file" ? "Searching workspace..." : "Loading commands...";
   const emptyText = mode === "file" ? "No files or directories found" : "No commands found";