updated

浪費了半天時間, 索性移除了聯絡人分組的支援

client/ui/main/ContactsList.tsx

@@ -1,14 +1,17 @@
+import React from "react"
 import User from "../../api/client_data/User.ts"
 import ContactsListItem from "./ContactsListItem.tsx"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
-    contactsMap: { [key: string]: User[] }
+    contactsList: User[]
+    setContactsList: React.Dispatch<React.SetStateAction<User[]>>
     display: boolean
     openChatFragment: (id: string) => void
 }
 
 export default function ContactsList({
-    contactsMap,
+    contactsList,
+    setContactsList,
     display,
     openChatFragment,
     ...props
@@ -17,28 +20,19 @@ export default function ContactsList({
         overflowY: 'auto',
         paddingLeft: '10px',
         paddingRight: '10px',
-        display: display ? undefined : 'none'
+        display: display ? undefined : 'none',
+        height: '100%',
     }} {...props}>
-
-        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
-            <mdui-list-item rounded style={{
-                width: '100%',
-            }} icon="person_add">添加聯絡人</mdui-list-item>
-            {
-                Object.keys(contactsMap).map((v) =>
-                    <mdui-collapse-item key={v} value={v}>
-                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
-                        {
-                            contactsMap[v].map((v2) =>
-                                <ContactsListItem
-                                    openChatFragment={openChatFragment}
-                                    key={v2.id}
-                                    contact={v2} />
-                            )
-                        }
-                    </mdui-collapse-item>
-                )
-            }
-        </mdui-collapse>
+        <mdui-list-item rounded style={{
+            width: '100%',
+        }} icon="person_add">添加聯絡人</mdui-list-item>
+        {
+            contactsList.map((v2) =>
+                <ContactsListItem
+                    openChatFragment={openChatFragment}
+                    key={v2.id}
+                    contact={v2} />
+            )
+        }
     </mdui-list>
 }

client/ui/main/ContactsListItem.tsx

@@ -1,5 +1,6 @@
 import User from "../../api/client_data/User.ts"
 import Avatar from "../Avatar.tsx"
+import React from 'react'
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     contact: User
@@ -8,8 +9,10 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
 
 export default function ContactsListItem({ contact, openChatFragment }: Args) {
     const { id, nickname, avatar } = contact
+    const ref = React.useRef<HTMLElement>(null)
+
     return (
-        <mdui-list-item rounded style={{
+        <mdui-list-item ref={ref} rounded style={{
             marginTop: '3px',
             marginBottom: '3px',
             width: '100%',

client/ui/main/RecentsList.tsx

@@ -3,12 +3,14 @@ import RecentsListItem from "./RecentsListItem.tsx"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     recentsList: RecentChat[]
+    setRecentsList: React.Dispatch<React.SetStateAction<RecentChat[]>>
     display: boolean
     openChatFragment: (id: string) => void
 }
 
 export default function RecentsList({
     recentsList,
+    setRecentsList,
     display,
     openChatFragment,
     ...props
@@ -16,7 +18,8 @@ export default function RecentsList({
     return <mdui-list style={{
         overflowY: 'auto',
         paddingRight: '10px',
-        display: display ? undefined : 'none'
+        display: display ? undefined : 'none',
+        height: '100%',
     }} {...props}>
         {
             recentsList.map((v) =>