refactor: 解耦側邊列表

client/ui/main/ContactsList.tsx

@@ -0,0 +1,40 @@
+import User from "../../api/client_data/User.ts"
+import ContactsListItem from "./ContactsListItem.jsx"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    contactsMap: { [key: string]: User[] }
+    display: boolean
+}
+
+export default function ContactsList({
+    contactsMap,
+    display,
+    ...props
+}: Args) {
+    return <mdui-list style={{
+        overflowY: 'auto',
+        marginLeft: '10px',
+        marginRight: '10px',
+        width: '100%',
+        display: display ? undefined : 'none'
+    }} {...props}>
+
+        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
+            {
+                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
+                                    key={v2.id}
+                                    nickName={v2.nickname}
+                                    avatar={v2.avatar} />
+                            )
+                        }
+                    </mdui-collapse-item>
+                )
+            }
+        </mdui-collapse>
+    </mdui-list>
+}

client/ui/main/RecentsList.tsx

@@ -0,0 +1,31 @@
+import RecentChat from "../../api/client_data/RecentChat.ts"
+import User from "../../api/client_data/User.ts"
+import ContactsListItem from "./ContactsListItem.jsx"
+import RecentsListItem from "./RecentsListItem.jsx"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    recentsList: RecentChat[]
+    display: boolean
+}
+
+export default function RecentsList({
+    recentsList,
+    display,
+    ...props
+}: Args) {
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        display: display ? undefined : 'none'
+    }}>
+        {
+            recentsList.map((v) =>
+                <RecentsListItem
+                    key={v.id}
+                    nickName={v.title}
+                    avatar={v.avatar}
+                    content={v.content} />
+            )
+        }
+    </mdui-list>
+}