From 6f6e1469c1e7b3b9a1695ed1f3a5f845a42b8dd0 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Fri, 24 Apr 2026 01:50:04 +0700 Subject: [PATCH] chore(lint): flatten nested ternaries in button/volume-meter/autocomplete --- packages/app/src/components/ui/button.tsx | 47 ++++++++------ packages/app/src/components/volume-meter.tsx | 64 ++++++++++++++----- .../app/src/hooks/use-agent-autocomplete.ts | 61 ++++++++++-------- 3 files changed, 109 insertions(+), 63 deletions(-) diff --git a/packages/app/src/components/ui/button.tsx b/packages/app/src/components/ui/button.tsx index 6cb4da4732..5e232d36cf 100644 --- a/packages/app/src/components/ui/button.tsx +++ b/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 {leftIcon}; } - 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 diff --git a/packages/app/src/components/volume-meter.tsx b/packages/app/src/components/volume-meter.tsx index d396c2455e..56b35b5458 100644 --- a/packages/app/src/components/volume-meter.tsx +++ b/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 ( - - - - - - + + + + + + ); } diff --git a/packages/app/src/hooks/use-agent-autocomplete.ts b/packages/app/src/hooks/use-agent-autocomplete.ts index 4abc88dd2f..9680eebc77 100644 --- a/packages/app/src/hooks/use-agent-autocomplete.ts +++ b/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";