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";