feat: search contact by nickname/id/username

client/ui/App.tsx

@@ -152,10 +152,11 @@ export default function App() {
                     // 最近聊天
                     <RecentsList
                         openChatFragment={(id) => {
+                            setCurrentChatId(id)
                             setIsShowChatFragment(true)
-
                         }}
                         display={navigationItemSelected == "Recents"}
+                        currentChatId={currentChatId}
                         recentsList={recentsList}
                         setRecentsList={setRecentsList} />
                 }

client/ui/main/ContactsList.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import User from "../../api/client_data/User.ts"
 import ContactsListItem from "./ContactsListItem.tsx"
+import useEventListener from "../useEventListener.ts"
+import { TextField } from "mdui";
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     contactsList: User[]
@@ -16,6 +18,13 @@ export default function ContactsList({
     openChatFragment,
     ...props
 }: Args) {
+    const searchRef = React.useRef<HTMLElement>(null)
+    const [searchText, setSearchText] = React.useState('')
+
+    useEventListener(searchRef, 'input', (e) => {
+        setSearchText((e.target as unknown as TextField).value)
+    })
+
     return <mdui-list style={{
         overflowY: 'auto',
         paddingLeft: '10px',
@@ -23,15 +32,26 @@ export default function ContactsList({
         display: display ? undefined : 'none',
         height: '100%',
     }} {...props}>
+        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" label="搜索..." style={{
+            marginTop: '5px',
+        }}></mdui-text-field>
+
         <mdui-list-item rounded style={{
             width: '100%',
+            marginTop: '13px',
+            marginBottom: '15px',
         }} icon="person_add">添加聯絡人</mdui-list-item>
         {
-            contactsList.map((v2) =>
+            contactsList.filter((user) =>
+                searchText == '' || 
+                user.nickname.includes(searchText) ||
+                user.id.includes(searchText) ||
+                user.username?.includes(searchText)
+            ).map((v) =>
                 <ContactsListItem
                     openChatFragment={openChatFragment}
-                    key={v2.id}
+                    key={v.id}
-                    contact={v2} />
+                    contact={v} />
             )
         }
     </mdui-list>

client/ui/main/RecentsList.tsx

@@ -5,12 +5,14 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
     recentsList: RecentChat[]
     setRecentsList: React.Dispatch<React.SetStateAction<RecentChat[]>>
     display: boolean
+    currentChatId: string
     openChatFragment: (id: string) => void
 }
 
 export default function RecentsList({
     recentsList,
     setRecentsList,
+    currentChatId,
     display,
     openChatFragment,
     ...props
@@ -24,7 +26,8 @@ export default function RecentsList({
         {
             recentsList.map((v) =>
                 <RecentsListItem
-                    openChatFragment={openChatFragment}
+                    active={currentChatId == v.id}
+                    openChatFragment={() => openChatFragment(v.id)}
                     key={v.id}
                     recentChat={v} />
             )

client/ui/main/RecentsListItem.tsx

@@ -4,15 +4,16 @@ import Avatar from "../Avatar.tsx"
 interface Args extends React.HTMLAttributes<HTMLElement> {
     recentChat: RecentChat
     openChatFragment: (id: string) => void
+    active?: boolean
 }
 
-export default function RecentsListItem({ recentChat, openChatFragment }: Args) {
+export default function RecentsListItem({ recentChat, openChatFragment, active }: Args) {
     const { id, title, avatar, content } = recentChat
     return (
         <mdui-list-item rounded style={{
             marginTop: '3px',
             marginBottom: '3px',
-        }} onClick={() => openChatFragment(id)}>
+        }} onClick={() => openChatFragment(id)} active={active}>
             {title}
             <Avatar src={avatar} text={title} slot="icon" />
             <span slot="description"