update

client/ui/dialog/ChatInfoDialog.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import Chat from "../../api/client_data/Chat.ts"
+import useAsyncEffect from "../useAsyncEffect.ts"
+import Client from "../../api/Client.ts"
+import data from "../../Data.ts"
+import { Dialog } from "mdui"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    chat: Chat
+    chatInfoDialogRef: React.MutableRefObject<Dialog>
+}
+
+export default function ChatInfoDialog({ chat, chatInfoDialogRef }: Args) {
+    const [isMySelf, setIsMySelf] = React.useState(false)
+
+    useAsyncEffect(async () => {
+        const re = await Client.invoke("Chat.getInfo", {
+            token: data.access_token,
+            target: chat.id,
+        })
+    })
+
+    return (
+        <mdui-dialog close-on-overlay-click close-on-esc ref={chatInfoDialogRef}>
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+            }}>
+                <Avatar src={chat?.avatar} text={chat?.nickname} style={{
+                    width: '50px',
+                    height: '50px',
+                }} />
+                <span style={{
+                    marginLeft: "15px",
+                    fontSize: '16.5px',
+                }}>{user?.nickname}</span>
+            </div>
+            <mdui-divider style={{
+                marginTop: "10px",
+                marginBottom: "10px",
+            }}></mdui-divider>
+
+            <mdui-list>
+                {!isMySelf && <mdui-list-item icon="edit" rounded>編輯聯絡人訊息</mdui-list-item>}
+                {
+                    isMySelf && <>
+                        <mdui-list-item icon="edit" rounded>編輯資料</mdui-list-item>
+                        <mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
+                        <mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
+                    </>
+                }
+            </mdui-list>
+        </mdui-dialog>
+    )
+}

client/ui/main/ContactsList.tsx

@@ -3,17 +3,16 @@ import User from "../../api/client_data/User.ts"
 import ContactsListItem from "./ContactsListItem.tsx"
 import useEventListener from "../useEventListener.ts"
 import { ListItem, TextField } from "mdui"
+import useAsyncEffect from "../useAsyncEffect.ts"
+import Client from "../../api/Client.ts"
+import data from "../../Data.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
-    contactsList: User[]
-    setContactsList: React.Dispatch<React.SetStateAction<User[]>>
     display: boolean
     openChatFragment: (id: string) => void
 }
 
 export default function ContactsList({
-    contactsList,
-    setContactsList,
     display,
     openChatFragment,
     ...props
@@ -21,11 +20,27 @@ export default function ContactsList({
     const searchRef = React.useRef<HTMLElement>(null)
     const [isMultiSelecting, setIsMultiSelecting] = React.useState(false)
     const [searchText, setSearchText] = React.useState('')
+    const [contactsList, setContactsList] = React.useState([
+        {
+            id: '1',
+            avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
+            nickname: "麻油衣酱",
+        },
+        {
+            id: '0',
+            avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
+            nickname: "Maya Fey",
+        },
+    ] as User[])
 
     useEventListener(searchRef, 'input', (e) => {
         setSearchText((e.target as unknown as TextField).value)
     })
 
+    useAsyncEffect(async () => {
+        
+    })
+
     return <mdui-list style={{
         overflowY: 'auto',
         paddingLeft: '10px',
@@ -49,7 +64,7 @@ export default function ContactsList({
 
         {
             contactsList.filter((user) =>
-                searchText == '' || 
+                searchText == '' ||
                 user.nickname.includes(searchText) ||
                 user.id.includes(searchText) ||
                 user.username?.includes(searchText)