Switch to double quotes and reformat codebase with Biome

packages/app/src/components/combined-model-selector.tsx

@@ -1,24 +1,24 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { View, Text, Pressable, Platform } from 'react-native'
-import { StyleSheet, useUnistyles } from 'react-native-unistyles'
-import { ArrowLeft, Check, ChevronDown, ChevronRight } from 'lucide-react-native'
-import type { AgentModelDefinition, AgentProvider } from '@server/server/agent/agent-sdk-types'
-import type { AgentProviderDefinition } from '@server/server/agent/provider-manifest'
-import { Combobox, ComboboxItem, SearchInput } from '@/components/ui/combobox'
-import { getProviderIcon } from '@/components/provider-icons'
+import { useCallback, useMemo, useRef, useState } from "react";
+import { View, Text, Pressable, Platform } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { ArrowLeft, Check, ChevronDown, ChevronRight } from "lucide-react-native";
+import type { AgentModelDefinition, AgentProvider } from "@server/server/agent/agent-sdk-types";
+import type { AgentProviderDefinition } from "@server/server/agent/provider-manifest";
+import { Combobox, ComboboxItem, SearchInput } from "@/components/ui/combobox";
+import { getProviderIcon } from "@/components/provider-icons";
 
-const INLINE_MODEL_THRESHOLD = 8
+const INLINE_MODEL_THRESHOLD = 8;
 
-type DrillDownView = { provider: string }
+type DrillDownView = { provider: string };
 
 interface CombinedModelSelectorProps {
-  providerDefinitions: AgentProviderDefinition[]
-  allProviderModels: Map<string, AgentModelDefinition[]>
-  selectedProvider: string
-  selectedModel: string
-  onSelect: (provider: AgentProvider, modelId: string) => void
-  isLoading: boolean
-  disabled?: boolean
+  providerDefinitions: AgentProviderDefinition[];
+  allProviderModels: Map<string, AgentModelDefinition[]>;
+  selectedProvider: string;
+  selectedModel: string;
+  onSelect: (provider: AgentProvider, modelId: string) => void;
+  isLoading: boolean;
+  disabled?: boolean;
 }
 
 export function CombinedModelSelector({
@@ -30,43 +30,46 @@ export function CombinedModelSelector({
   isLoading,
   disabled = false,
 }: CombinedModelSelectorProps) {
-  const { theme } = useUnistyles()
-  const anchorRef = useRef<View>(null)
-  const [isOpen, setIsOpen] = useState(false)
-  const [view, setView] = useState<'groups' | DrillDownView>('groups')
-  const [searchQuery, setSearchQuery] = useState('')
+  const { theme } = useUnistyles();
+  const anchorRef = useRef<View>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [view, setView] = useState<"groups" | DrillDownView>("groups");
+  const [searchQuery, setSearchQuery] = useState("");
 
-  const handleOpenChange = useCallback((open: boolean) => {
-    setIsOpen(open)
-    if (open) {
-      const models = allProviderModels.get(selectedProvider)
-      if (models && models.length > INLINE_MODEL_THRESHOLD) {
-        setView({ provider: selectedProvider })
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (open) {
+        const models = allProviderModels.get(selectedProvider);
+        if (models && models.length > INLINE_MODEL_THRESHOLD) {
+          setView({ provider: selectedProvider });
+        }
+      } else {
+        setView("groups");
+        setSearchQuery("");
       }
-    } else {
-      setView('groups')
-      setSearchQuery('')
-    }
-  }, [allProviderModels, selectedProvider])
+    },
+    [allProviderModels, selectedProvider],
+  );
 
   const handleSelect = useCallback(
     (provider: string, modelId: string) => {
-      onSelect(provider as AgentProvider, modelId)
-      setIsOpen(false)
-      setView('groups')
-      setSearchQuery('')
+      onSelect(provider as AgentProvider, modelId);
+      setIsOpen(false);
+      setView("groups");
+      setSearchQuery("");
     },
-    [onSelect]
-  )
+    [onSelect],
+  );
 
-  const ProviderIcon = getProviderIcon(selectedProvider)
+  const ProviderIcon = getProviderIcon(selectedProvider);
 
   const selectedModelLabel = useMemo(() => {
-    const models = allProviderModels.get(selectedProvider)
-    if (!models) return isLoading ? 'Loading...' : 'Auto'
-    const model = models.find((m) => m.id === selectedModel)
-    return model?.label ?? 'Auto'
-  }, [allProviderModels, selectedProvider, selectedModel, isLoading])
+    const models = allProviderModels.get(selectedProvider);
+    if (!models) return isLoading ? "Loading..." : "Auto";
+    const model = models.find((m) => m.id === selectedModel);
+    return model?.label ?? "Auto";
+  }, [allProviderModels, selectedProvider, selectedModel, isLoading]);
 
   return (
     <>
@@ -99,7 +102,7 @@ export function CombinedModelSelector({
         desktopPlacement="top-start"
         title="Select model"
       >
-        {view === 'groups' ? (
+        {view === "groups" ? (
           <GroupsView
             providerDefinitions={providerDefinitions}
             allProviderModels={allProviderModels}
@@ -107,8 +110,8 @@ export function CombinedModelSelector({
             selectedModel={selectedModel}
             onSelect={handleSelect}
             onDrillDown={(provider) => {
-              setView({ provider })
-              setSearchQuery('')
+              setView({ provider });
+              setSearchQuery("");
             }}
           />
         ) : (
@@ -122,14 +125,14 @@ export function CombinedModelSelector({
             onSearchChange={setSearchQuery}
             onSelect={handleSelect}
             onBack={() => {
-              setView('groups')
-              setSearchQuery('')
+              setView("groups");
+              setSearchQuery("");
             }}
           />
         )}
       </Combobox>
     </>
-  )
+  );
 }
 
 function GroupsView({
@@ -140,21 +143,21 @@ function GroupsView({
   onSelect,
   onDrillDown,
 }: {
-  providerDefinitions: AgentProviderDefinition[]
-  allProviderModels: Map<string, AgentModelDefinition[]>
-  selectedProvider: string
-  selectedModel: string
-  onSelect: (provider: string, modelId: string) => void
-  onDrillDown: (provider: string) => void
+  providerDefinitions: AgentProviderDefinition[];
+  allProviderModels: Map<string, AgentModelDefinition[]>;
+  selectedProvider: string;
+  selectedModel: string;
+  onSelect: (provider: string, modelId: string) => void;
+  onDrillDown: (provider: string) => void;
 }) {
-  const { theme } = useUnistyles()
+  const { theme } = useUnistyles();
 
   return (
     <View>
       {providerDefinitions.map((def, index) => {
-        const models = allProviderModels.get(def.id) ?? []
-        const isInline = models.length <= INLINE_MODEL_THRESHOLD
-        const ProvIcon = getProviderIcon(def.id)
+        const models = allProviderModels.get(def.id) ?? [];
+        const isInline = models.length <= INLINE_MODEL_THRESHOLD;
+        const ProvIcon = getProviderIcon(def.id);
 
         return (
           <View key={def.id}>
@@ -193,10 +196,10 @@ function GroupsView({
               </Pressable>
             )}
           </View>
-        )
+        );
       })}
     </View>
-  )
+  );
 }
 
 function DrillDownModelView({
@@ -210,27 +213,27 @@ function DrillDownModelView({
   onSelect,
   onBack,
 }: {
-  provider: string
-  providerDefinitions: AgentProviderDefinition[]
-  models: AgentModelDefinition[]
-  selectedProvider: string
-  selectedModel: string
-  searchQuery: string
-  onSearchChange: (query: string) => void
-  onSelect: (provider: string, modelId: string) => void
-  onBack: () => void
+  provider: string;
+  providerDefinitions: AgentProviderDefinition[];
+  models: AgentModelDefinition[];
+  selectedProvider: string;
+  selectedModel: string;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onSelect: (provider: string, modelId: string) => void;
+  onBack: () => void;
 }) {
-  const { theme } = useUnistyles()
-  const ProvIcon = getProviderIcon(provider)
-  const providerLabel = providerDefinitions.find((d) => d.id === provider)?.label ?? provider
+  const { theme } = useUnistyles();
+  const ProvIcon = getProviderIcon(provider);
+  const providerLabel = providerDefinitions.find((d) => d.id === provider)?.label ?? provider;
 
   const filteredModels = useMemo(() => {
-    if (!searchQuery.trim()) return models
-    const q = searchQuery.toLowerCase()
+    if (!searchQuery.trim()) return models;
+    const q = searchQuery.toLowerCase();
     return models.filter(
-      (m) => m.label.toLowerCase().includes(q) || m.id.toLowerCase().includes(q)
-    )
-  }, [models, searchQuery])
+      (m) => m.label.toLowerCase().includes(q) || m.id.toLowerCase().includes(q),
+    );
+  }, [models, searchQuery]);
 
   return (
     <View>
@@ -251,7 +254,7 @@ function DrillDownModelView({
         placeholder="Search models..."
         value={searchQuery}
         onChangeText={onSearchChange}
-        autoFocus={Platform.OS === 'web'}
+        autoFocus={Platform.OS === "web"}
       />
 
       {filteredModels.map((model) => (
@@ -270,18 +273,18 @@ function DrillDownModelView({
         </View>
       ) : null}
     </View>
-  )
+  );
 }
 
 const styles = StyleSheet.create((theme) => ({
   trigger: {
     height: 28,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "transparent",
     gap: theme.spacing[1],
     paddingHorizontal: theme.spacing[2],
-    borderRadius: theme.borderRadius['2xl'],
+    borderRadius: theme.borderRadius["2xl"],
   },
   triggerHovered: {
     backgroundColor: theme.colors.surface2,
@@ -303,8 +306,8 @@ const styles = StyleSheet.create((theme) => ({
     marginVertical: theme.spacing[1],
   },
   sectionHeading: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[1],
@@ -315,8 +318,8 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
   },
   drillDownRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
@@ -334,8 +337,8 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
   },
   drillDownTrailing: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: theme.spacing[1],
   },
   drillDownCount: {
@@ -343,8 +346,8 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
   },
   backButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
@@ -363,10 +366,10 @@ const styles = StyleSheet.create((theme) => ({
   },
   emptyState: {
     paddingVertical: theme.spacing[4],
-    alignItems: 'center',
+    alignItems: "center",
   },
   emptyStateText: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.foregroundMuted,
   },
-}))
+}));