refactor: 解耦側邊列表

client/ui/AppMobile.tsx

@@ -1,12 +1,8 @@
 import Client from "../api/Client.ts"
 import data from "../Data.ts"
-import ChatFragment from "./chat/ChatFragment.tsx"
-import ContactsListItem from "./main/ContactsListItem.jsx"
-import RecentsListItem from "./main/RecentsListItem.jsx"
 import useEventListener from './useEventListener.ts'
 import User from "../api/client_data/User.ts"
 import RecentChat from "../api/client_data/RecentChat.ts"
-import Avatar from "./Avatar.tsx"
 
 import * as React from 'react'
 import { Dialog, NavigationBar, TextField } from "mdui"
@@ -16,6 +12,8 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 import RegisterDialog from "./dialog/RegisterDialog.tsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
+import ContactsList from "./main/ContactsList.tsx"
+import RecentsList from "./main/RecentsList.tsx"
 
 declare global {
     namespace React {
@@ -75,9 +73,9 @@ export default function AppMobile() {
 
     const userProfileDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
     const openMyUserProfileDialogButtonRef: React.MutableRefObject<HTMLElement | null> = React.useRef(null)
-/*    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
-        userProfileDialogRef.current!.open = true
-    })*/
+    /*    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
+            userProfileDialogRef.current!.open = true
+        })*/
 
     const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
 
@@ -119,12 +117,12 @@ export default function AppMobile() {
             <UserProfileDialog
                 userProfileDialogRef={userProfileDialogRef}
                 user={myUserProfileCache} />
-            
+
             <mdui-navigation-bar scroll-target="#SideBar" label-visibility="selected" value="Recents" ref={navigationBarRef}>
                 <mdui-navigation-bar-item icon="watch_later--outlined" value="Recents">最近</mdui-navigation-bar-item>
                 <mdui-navigation-bar-item icon="contacts--outlined" value="Contacts">聯絡人</mdui-navigation-bar-item>
             </mdui-navigation-bar>
-            
+
             <div style={{
                 display: 'flex',
                 height: 'calc(100% - 80px)',
@@ -132,51 +130,15 @@ export default function AppMobile() {
             }} id="SideBar">
                 {
                     // 最近聊天
-                    <mdui-list style={{
-                        overflowY: 'auto',
-                        marginLeft: '10px',
-                        marginRight: '10px',
-                        width: '100%',
-                        display: navigationItemSelected == "Recents" ? undefined : 'none'
-                    }}>
-                        {
-                            recentsList.map((v) =>
-                                <RecentsListItem
-                                    key={v.id}
-                                    nickName={v.title}
-                                    avatar={v.avatar}
-                                    content={v.content} />
-                            )
-                        }
-                    </mdui-list>
+                    <RecentsList
+                        display={navigationItemSelected == "Recents"}
+                        recentsList={recentsList} />
                 }
                 {
                     // 联系人列表
-                    <mdui-list style={{
-                        overflowY: 'auto',
-                        marginLeft: '10px',
-                        marginRight: '10px',
-                        width: '100%',
-                        display: navigationItemSelected == "Contacts" ? undefined : 'none'
-                    }}>
-                        <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>
+                    <ContactsList
+                        display={navigationItemSelected == "Contacts"}
+                        contactsMap={contactsMap} />
                 }
             </div>
         </div>