feat(wip): 對話

client/ui/main/ContactsList.tsx

@@ -1,14 +1,16 @@
 import User from "../../api/client_data/User.ts"
-import ContactsListItem from "./ContactsListItem.jsx"
+import ContactsListItem from "./ContactsListItem.tsx"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     contactsMap: { [key: string]: User[] }
     display: boolean
+    openChatFragment: (id: string) => void
 }
 
 export default function ContactsList({
     contactsMap,
     display,
+    openChatFragment,
     ...props
 }: Args) {
     return <mdui-list style={{
@@ -19,6 +21,9 @@ export default function ContactsList({
     }} {...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}>
@@ -26,9 +31,9 @@ export default function ContactsList({
                         {
                             contactsMap[v].map((v2) =>
                                 <ContactsListItem
+                                    openChatFragment={openChatFragment}
                                     key={v2.id}
-                                    nickName={v2.nickname}
-                                    avatar={v2.avatar} />
+                                    contact={v2} />
                             )
                         }
                     </mdui-collapse-item>

client/ui/main/ContactsListItem.jsx

@@ -1,16 +0,0 @@
-import Avatar from "../Avatar.tsx"
-
-export default function ContactsListItem({ nickName, avatar }) {
-    return (
-        <mdui-list-item rounded style={{
-            marginTop: '3px',
-            marginBottom: '3px',
-            width: '100%',
-        }}>
-            <span style={{
-                width: "100%",
-            }}>{nickName}</span>
-            <Avatar src={avatar} text="title" slot="icon" />
-        </mdui-list-item>
-    )
-}

client/ui/main/ContactsListItem.tsx

@@ -0,0 +1,23 @@
+import User from "../../api/client_data/User.ts"
+import Avatar from "../Avatar.tsx"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    contact: User
+    openChatFragment: (id: string) => void
+}
+
+export default function ContactsListItem({ contact, openChatFragment }: Args) {
+    const { id, nickname, avatar } = contact
+    return (
+        <mdui-list-item rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+            width: '100%',
+        }} onClick={() => openChatFragment(id)}>
+            <span style={{
+                width: "100%",
+            }}>{nickname}</span>
+            <Avatar src={avatar} text="title" slot="icon" />
+        </mdui-list-item>
+    )
+}

client/ui/main/RecentsList.tsx

@@ -1,30 +1,29 @@
 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"
+import RecentsListItem from "./RecentsListItem.tsx"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     recentsList: RecentChat[]
     display: boolean
+    openChatFragment: (id: string) => void
 }
 
 export default function RecentsList({
     recentsList,
     display,
+    openChatFragment,
     ...props
 }: Args) {
     return <mdui-list style={{
         overflowY: 'auto',
         paddingRight: '10px',
         display: display ? undefined : 'none'
-    }}>
+    }} {...props}>
         {
             recentsList.map((v) =>
                 <RecentsListItem
+                    openChatFragment={openChatFragment}
                     key={v.id}
-                    nickName={v.title}
-                    avatar={v.avatar}
-                    content={v.content} />
+                    recentChat={v} />
             )
         }
     </mdui-list>

client/ui/main/RecentsListItem.tsx

@@ -1,13 +1,20 @@
+import RecentChat from "../../api/client_data/RecentChat.ts"
 import Avatar from "../Avatar.tsx"
 
-export default function RecentsListItem({ nickName, avatar, content }) {
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    recentChat: RecentChat
+    openChatFragment: (id: string) => void
+}
+
+export default function RecentsListItem({ recentChat, openChatFragment }: Args) {
+    const { id, title, avatar, content } = recentChat
     return (
         <mdui-list-item rounded style={{
             marginTop: '3px',
             marginBottom: '3px',
-        }}>
-            {nickName}
-            <Avatar src={avatar} text={nickName} slot="icon" />
+        }} onClick={() => openChatFragment(id)}>
+            {title}
+            <Avatar src={avatar} text={title} slot="icon" />
             <span slot="description"
                 style={{
                     width: "100%",