fix: style and mcp tool alert

Author: eeee0717

src/componentsV2/base/SelectionSheet/index.tsx

@@ -29,6 +29,7 @@ export interface SelectionSheetProps {
   ref: React.RefObject<BottomSheetModal | null>
   placeholder?: string
   shouldDismiss?: boolean
+  headerComponent?: React.ReactNode
 }
 
 /**
@@ -41,7 +42,8 @@ const SelectionSheet: React.FC<SelectionSheetProps> = ({
   snapPoints = [],
   ref,
   placeholder,
-  shouldDismiss = true
+  shouldDismiss = true,
+  headerComponent
 }) => {
   const { isDark } = useTheme()
   const [isVisible, setIsVisible] = useState(false)
@@ -122,6 +124,17 @@ const SelectionSheet: React.FC<SelectionSheetProps> = ({
     <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} opacity={0.5} pressBehavior="close" />
   )
 
+  const renderHeader = () => {
+    if (!placeholder && !headerComponent) return undefined
+
+    return (
+      <View className="gap-2 pb-2">
+        {headerComponent}
+        {placeholder && <Text className="text-text-secondary text-center text-sm opacity-60">{placeholder}</Text>}
+      </View>
+    )
+  }
+
   return (
     <BottomSheetModal
       ref={ref}
@@ -146,13 +159,7 @@ const SelectionSheet: React.FC<SelectionSheetProps> = ({
         ItemSeparatorComponent={() => <YStack className="h-2.5" />}
         contentContainerStyle={{ paddingBottom: 40, paddingHorizontal: 16 }}
         renderScrollComponent={BottomSheetLegendListScrollable}
-        ListHeaderComponent={
-          placeholder ? (
-            <View className="px-4 pb-2">
-              <Text className="text-text-secondary text-center text-sm opacity-60">{placeholder}</Text>
-            </View>
-          ) : undefined
-        }
+        ListHeaderComponent={renderHeader()}
         ListEmptyComponent={emptyContent ? <YStack className="gap-2.5 px-4 pb-7">{emptyContent}</YStack> : undefined}
         recycleItems
       />

src/componentsV2/features/SettingsScreen/RestoreProgressModal.tsx

@@ -28,14 +28,14 @@ interface RestoreProgressModalProps {
 const getIconForStatus = (status: StepStatus) => {
   switch (status) {
     case 'in_progress':
-      return <Spinner size="sm" className="text-text-link" />
+      return <Spinner size="sm" className="text-text-link dark:text-text-link" />
     case 'completed':
-      return <CircleCheck size={20} className="text-green-100" />
+      return <CircleCheck size={20} className="text-green-100 dark:text-green-100" />
     case 'error':
-      return <XCircle size={20} className="text-red-100" />
+      return <XCircle size={20} className="text-red-100 dark:text-red-100" />
     case 'pending':
     default:
-      return <TriangleAlert size={20} className="text-orange-100" />
+      return <TriangleAlert size={20} className="text-orange-100 dark:text-orange-100" />
   }
 }
 
@@ -100,15 +100,16 @@ export function RestoreProgressModal({ isOpen, steps, overallStatus, onClose }:
             <Button
               size="sm"
               className={cn(
-                'w-40 items-center justify-center rounded-[30px] border text-base',
+                'w-40 items-center justify-center rounded-[30px] border text-base active:opacity-80',
                 overallStatus === 'error'
                   ? 'border-red-20 bg-red-20'
                   : overallStatus === 'success'
                     ? 'border-green-20 bg-green-20'
                     : 'border-yellow-20 bg-yellow-20'
               )}
               isDisabled={!isDone}
-              onPress={onClose}>
+              onPress={onClose}
+              animationConfig={{ highlight: { isDisabled: true } }}>
               <Button.Label>
                 <Text
                   className={cn(

src/componentsV2/features/Sheet/McpServerSheet.tsx

@@ -8,6 +8,7 @@ import { TouchableOpacity } from 'react-native'
 import type { SelectionSheetItem } from '@/componentsV2/base/SelectionSheet'
 import SelectionSheet from '@/componentsV2/base/SelectionSheet'
 import Text from '@/componentsV2/base/Text'
+import { ChevronRight, TriangleAlert } from '@/componentsV2/icons'
 import RowRightArrow from '@/componentsV2/layout/Row/RowRightArrow'
 import XStack from '@/componentsV2/layout/XStack'
 import { useActiveMcpServers } from '@/hooks/useMcp'
@@ -34,6 +35,14 @@ export const McpServerSheet: FC<McpServerProps> = ({ ref, assistant, updateAssis
     navigation.navigate('Mcp', { screen: 'McpMarketScreen' })
   }
 
+  const handleNavigateToToolTab = () => {
+    ref.current?.dismiss()
+    navigation.navigate('Assistant', {
+      screen: 'AssistantDetailScreen',
+      params: { assistantId: assistant.id, tab: 'tool' }
+    })
+  }
+
   const providerItems: SelectionSheetItem[] = activeMcpServers.map(mcpServer => {
     return {
       id: mcpServer.id,
@@ -54,6 +63,16 @@ export const McpServerSheet: FC<McpServerProps> = ({ ref, assistant, updateAssis
     }
   })
 
+  const warningContent = !assistant.settings?.toolUseMode ? (
+    <TouchableOpacity onPress={handleNavigateToToolTab} activeOpacity={0.7}>
+      <XStack className="bg-orange-10 mb-2 w-full items-center gap-2.5 rounded-lg px-3.5 py-3">
+        <TriangleAlert size={20} className="text-orange-100 dark:text-orange-100" />
+        <Text className="flex-1 text-sm text-orange-100">{t('assistants.settings.tooluse.empty')}</Text>
+        <ChevronRight size={20} className="text-orange-100 dark:text-orange-100" />
+      </XStack>
+    </TouchableOpacity>
+  ) : null
+
   const emptyContent = (
     <TouchableOpacity onPress={handleNavigateToMcpMarket} activeOpacity={0.7}>
       <XStack className="bg-card w-full items-center gap-2.5 rounded-md px-5 py-4">
@@ -66,5 +85,13 @@ export const McpServerSheet: FC<McpServerProps> = ({ ref, assistant, updateAssis
     </TouchableOpacity>
   )
 
-  return <SelectionSheet items={providerItems} ref={ref} emptyContent={emptyContent} shouldDismiss={false} />
+  return (
+    <SelectionSheet
+      items={providerItems}
+      ref={ref}
+      emptyContent={emptyContent}
+      headerComponent={warningContent}
+      shouldDismiss={false}
+    />
+  )
 }

src/hooks/useDialog.tsx

@@ -152,11 +152,12 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
                 <Button
                   variant="tertiary"
                   className={cn(
-                    'border-gray-20 h-[42px] flex-1 rounded-[30px] bg-transparent',
+                    'border-gray-20 h-[42px] flex-1 rounded-[30px] bg-transparent active:opacity-80',
                     options?.cancelStyle?.toString() || ''
                   )}
                   onPress={cancel}
-                  isDisabled={isLoading}>
+                  isDisabled={isLoading}
+                  animationConfig={{ highlight: { isDisabled: true } }}>
                   <Button.Label>
                     <Text className="text-gray-80 text-[17px]">
                       {isLoading && shouldShowLoading ? t('common.loading') : cancelText}

src/screens/welcome/WelcomeScreen.tsx

@@ -53,22 +53,25 @@ export default function WelcomeScreen() {
           </FastSquircleView>
           <View className="items-center justify-center px-4">
             <View className="flex-row flex-wrap items-center justify-center">
-              <WelcomeTitle className="text-center text-3xl font-bold" />
-              <View className="ml-2 h-7 w-7 rounded-full bg-black" />
+              <WelcomeTitle className="text-center text-2xl font-bold" />
+              <View className="bg-text-primary ml-2 h-7 w-7 rounded-full" />
             </View>
           </View>
         </View>
         {/* register and login*/}
         <View className="bg-ui-card-background h-1/4 w-full items-center justify-center">
           <YStack className="flex-1 items-center justify-center gap-5">
-            <Button className="w-3/4" variant="primary" onPress={() => bottomSheetModalRef.current?.present()}>
-              <Button.Label className="w-full text-center text-lg">
+            <Button
+              className="w-3/4 rounded-lg"
+              variant="secondary"
+              onPress={() => bottomSheetModalRef.current?.present()}>
+              <Button.Label className="text-text-primary w-full text-center text-lg">
                 {t('common.import_from_cherry_studio')}
               </Button.Label>
             </Button>
 
-            <Button className="w-3/4" variant="secondary" onPress={handleStart}>
-              <Button.Label className="w-full text-center text-lg">{t('common.start')}</Button.Label>
+            <Button className="w-3/4 rounded-lg" variant="secondary" onPress={handleStart}>
+              <Button.Label className="text-text-primary w-full text-center text-lg">{t('common.start')}</Button.Label>
             </Button>
           </YStack>
         </View>