feat: 添加聊天会话页面，支持会话ID和标题显示，优化会话列表和搜索功能

features/im/components/conversation-search-bar.tsx

@@ -1,5 +1,6 @@
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
-import { StyleSheet, TextInput, View } from "react-native";
+import { useRef, useState } from "react";
+import { Animated, Easing, StyleSheet, TextInput } from "react-native";
 
 type ConversationSearchBarProps = {
   value: string;
@@ -10,17 +11,52 @@ export function ConversationSearchBar({
   value,
   onChangeText,
 }: ConversationSearchBarProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const focusAnim = useRef(new Animated.Value(0)).current;
+
+  const animateFocus = (toValue: 0 | 1) => {
+    Animated.timing(focusAnim, {
+      toValue,
+      duration: 140,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  };
+
   return (
-    <View style={styles.wrapper}>
+    <Animated.View
+      style={[
+        styles.wrapper,
+        isFocused && styles.wrapperFocused,
+        {
+          transform: [
+            {
+              scale: focusAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [1, 1.01],
+              }),
+            },
+          ],
+        },
+      ]}
+    >
       <MaterialIcons color="#A2A2A7" name="search" size={28} />
       <TextInput
+        onBlur={() => {
+          setIsFocused(false);
+          animateFocus(0);
+        }}
         onChangeText={onChangeText}
+        onFocus={() => {
+          setIsFocused(true);
+          animateFocus(1);
+        }}
         placeholder="搜索联系人备注/昵称/ID"
         placeholderTextColor="#B8B8BC"
         style={styles.input}
         value={value}
       />
-    </View>
+    </Animated.View>
   );
 }
 
@@ -28,7 +64,9 @@ const styles = StyleSheet.create({
   wrapper: {
     alignItems: "center",
     backgroundColor: "#F0F0F2",
+    borderColor: "transparent",
     borderCurve: "continuous",
+    borderWidth: 1,
     borderRadius: 20,
     flexDirection: "row",
     gap: 8,
@@ -36,6 +74,10 @@ const styles = StyleSheet.create({
     marginHorizontal: 20,
     paddingHorizontal: 16,
   },
+  wrapperFocused: {
+    backgroundColor: "#F4FAF8",
+    borderColor: "#BEEEDB",
+  },
   input: {
     color: "#2A2A2A",
     flex: 1,