资料卡展示对话或用户 id

client/ui/App.tsx

@@ -3,7 +3,6 @@ import data from "../Data.ts"
 import ChatFragment from "./chat/ChatFragment.tsx"
 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'
@@ -22,7 +21,6 @@ import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
 import Chat from "../api/client_data/Chat.ts"
 import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
-import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
 import getUrlForFileByHash from "../getUrlForFileByHash.ts"
 import Message from "../api/client_data/Message.ts"
@@ -62,9 +60,6 @@ export default function App() {
         myProfileDialogRef.current!.open = true
     })
 
-    const userProfileDialogRef = React.useRef<Dialog>(null)
-    const [userInfo, setUserInfo] = React.useState(null as unknown as User)
-
     const addContactDialogRef = React.useRef<Dialog>(null)
     const createGroupDialogRef = React.useRef<Dialog>(null)
 
@@ -112,13 +107,23 @@ export default function App() {
     }
 
     async function openUserInfoDialog(user: User | string) {
-        if (typeof user == 'object') {
+        const re = await Client.invoke("Chat.getIdForPrivate", {
+            token: data.access_token,
+            target: typeof user == 'object' ? user.id : user,
+        })
+        if (re.code != 200) {
+            checkApiSuccessOrSncakbar(re, '获取对话失败')
+            return
+        }
+
+        openChatInfoDialog(re.data as Chat)
+        /* if (typeof user == 'object') {
             setUserInfo(user)
         } else {
             setUserInfo(await DataCaches.getUserProfile(user))
 
         }
-        userProfileDialogRef.current!.open = true
+        userProfileDialogRef.current!.open = true */
     }
     // deno-lint-ignore no-window
     window.openUserInfoDialog = openUserInfoDialog
@@ -181,18 +186,12 @@ export default function App() {
             <ChatInfoDialog
                 chatInfoDialogRef={chatInfoDialogRef as any}
                 openChatFragment={openChatFragment}
-                openUserInfoDialog={openUserInfoDialog}
                 sharedFavouriteChats={sharedFavouriteChats}
                 chat={chatInfo} />
 
             <MyProfileDialog
                 myProfileDialogRef={myProfileDialogRef as any}
                 user={myUserProfileCache} />
-            <UserProfileDialog
-                chatInfoDialogRef={chatInfoDialogRef as any}
-                userProfileDialogRef={userProfileDialogRef as any}
-                openChatFragment={openChatFragment}
-                user={userInfo} />
 
             <AddContactDialog
                 addContactDialogRef={addContactDialogRef} />

client/ui/AppMobile.tsx

@@ -3,7 +3,6 @@ import data from "../Data.ts"
 import ChatFragment from "./chat/ChatFragment.tsx"
 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'
@@ -21,8 +20,6 @@ import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
 import Chat from "../api/client_data/Chat.ts"
 import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
-import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
-import DataCaches from "../api/DataCaches.ts"
 import getUrlForFileByHash from "../getUrlForFileByHash.ts"
 
 declare global {
@@ -65,9 +62,6 @@ export default function AppMobile() {
     const chatInfoDialogRef = React.useRef<Dialog>(null)
     const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
 
-    const userProfileDialogRef = React.useRef<Dialog>(null)
-    const [userInfo, setUserInfo] = React.useState(null as unknown as User)
-
     const [myUserProfileCache, setMyUserProfileCache] = React.useState(null as unknown as User)
 
     const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
@@ -112,13 +106,23 @@ export default function AppMobile() {
     }
 
     async function openUserInfoDialog(user: User | string) {
-        if (typeof user == 'object') {
+        const re = await Client.invoke("Chat.getIdForPrivate", {
+            token: data.access_token,
+            target: typeof user == 'object' ? user.id : user,
+        })
+        if (re.code != 200) {
+            checkApiSuccessOrSncakbar(re, '获取对话失败')
+            return
+        }
+
+        openChatInfoDialog(re.data as Chat)
+        /* if (typeof user == 'object') {
             setUserInfo(user)
         } else {
             setUserInfo(await DataCaches.getUserProfile(user))
 
         }
-        userProfileDialogRef.current!.open = true
+        userProfileDialogRef.current!.open = true */
     }
     // deno-lint-ignore no-window
     window.openUserInfoDialog = openUserInfoDialog
@@ -167,7 +171,6 @@ export default function AppMobile() {
 
             <ChatInfoDialog
                 chatInfoDialogRef={chatInfoDialogRef as any}
-                openUserInfoDialog={openUserInfoDialog}
                 sharedFavouriteChats={sharedFavouriteChats}
                 openChatFragment={(id) => {
                     setCurrentChatId(id)
@@ -178,15 +181,10 @@ export default function AppMobile() {
             <MyProfileDialog
                 myProfileDialogRef={myProfileDialogRef as any}
                 user={myUserProfileCache} />
-            <UserProfileDialog
-                chatInfoDialogRef={chatInfoDialogRef as any}
-                userProfileDialogRef={userProfileDialogRef as any}
-                openChatFragment={openChatFragment}
-                user={userInfo} />
 
             <AddContactDialog
                 addContactDialogRef={addContactDialogRef} />
-                
+
             <CreateGroupDialog
                 createGroupDialogRef={createGroupDialogRef} />
 

client/ui/chat/ChatFragment.tsx

@@ -576,7 +576,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                         flexDirection: "column",
                         height: "100%",
                     }}>
-                        <JoinRequestsList chat={chatInfo} />
+                        {chatInfo.is_admin && <JoinRequestsList chat={chatInfo} />}
                     </mdui-tab-panel>
                 }
                 <mdui-tab-panel slot="panel" value="Settings" style={{

client/ui/chat/GroupMembersList.tsx

@@ -73,6 +73,7 @@ export default function GroupMembersList({
             ).map((v) =>
                 <GroupMembersListItem
                     key={v.id}
+                    chat={chat}
                     user={v} />
             )
         }

client/ui/chat/GroupMembersListItem.tsx

@@ -3,12 +3,18 @@ import Avatar from "../Avatar.tsx"
 import React from 'react'
 import User from "../../api/client_data/User.ts"
 import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
+import Client from "../../api/Client.ts"
+import data from "../../Data.ts"
+import Chat from "../../api/client_data/Chat.ts"
+import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
+import EventBus from "../../EventBus.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     user: User
+    chat: Chat
 }
 
-export default function GroupMembersListItem({ user }: Args) {
+export default function GroupMembersListItem({ user, chat }: Args) {
     const { id, nickname, avatar_file_hash } = user
 
     const itemRef = React.useRef<HTMLElement>(null)
@@ -16,54 +22,60 @@ export default function GroupMembersListItem({ user }: Args) {
         <mdui-list-item rounded style={{
             marginTop: '3px',
             marginBottom: '3px',
-        }} ref={itemRef}>
+        }} ref={itemRef} onClick={() => {
+            // deno-lint-ignore no-window
+            window.openUserInfoDialog(user)
+        }}>
             {nickname}
             <Avatar src={getUrlForFileByHash(avatar_file_hash)} text={nickname} slot="icon" />
             <div slot="end-icon">
-                <mdui-button-icon icon="delete" onClick={() => dialog({
+                <mdui-button-icon icon="delete" onClick={(e) => {
-                    headline: "移除群组成员",
+                    e.stopPropagation()
-                    description: `确定要移除 ${nickname} 吗?`,
+                    dialog({
-                    actions: [
+                        headline: "移除群组成员",
-                        {
+                        description: `确定要移除 ${nickname} 吗?`,
-                            text: "取消",
+                        actions: [
-                            onClick: () => {
+                            {
-                                return true
+                                text: "取消",
+                                onClick: () => {
+                                    return true
+                                },
                             },
-                        },
+                            {
-                        {
+                                text: "确定",
-                            text: "确定",
+                                onClick: () => {
-                            onClick: () => {
+                                    ; (async () => {
-                                ;(async () => {
+                                        const re = await Client.invoke("Chat.removeMembers", {
-                                    const re = await Client.invoke("Chat.removeMembers", {
+                                            token: data.access_token,
-                                        token: data.access_token,
+                                            chat_id: chat.id,
-                                        chat_id: target,
+                                            user_ids: [
-                                        user_ids: [
+                                                id
-                                            id
+                                            ],
-                                        ],
+                                        })
-                                    })
+                                        if (re.code != 200)
-                                    if (re.code != 200)
+                                            checkApiSuccessOrSncakbar(re, "移除群组成员失败")
-                                        checkApiSuccessOrSncakbar(re, "移除群组成员失败")
+                                        EventBus.emit('GroupMembersList.updateMembers')
-                                    EventBus.emit('GroupMembersList.updateMembers')
+                                        snackbar({
-                                    snackbar({
+                                            message: `已移除 ${nickname}`,
-                                        message: `已移除 ${nickname}`,
+                                            placement: "top",
-                                        placement: "top",
+                                            /* action: "撤销操作",
-                                        action: "撤销操作",
+                                            onActionClick: async () => {
-                                        onActionClick: async () => {
+                                                const re = await Client.invoke("User.addContacts", {
-                                            const re = await Client.invoke("User.addContacts", {
+                                                    token: data.access_token,
-                                                token: data.access_token,
+                                                    targets: ls,
-                                                targets: ls,
+                                                })
-                                            })
+                                                if (re.code != 200)
-                                            if (re.code != 200)
+                                                    checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
-                                                checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
+                                                EventBus.emit('ContactsList.updateContacts')
-                                            EventBus.emit('ContactsList.updateContacts')
+                                            } */
-                                        }
+                                        })
-                                    })
+                                    })()
-                                })()
+                                    return true
-                                return true
+                                },
-                            },
+                            }
-                        }
+                        ],
-                    ],
+                    })
-                })}></mdui-button-icon>
+                }}></mdui-button-icon>
             </div>
         </mdui-list-item>
     )

client/ui/chat/JoinRequestsList.tsx

@@ -1,16 +1,12 @@
 import { TextField } from "mdui"
-import RecentChat from "../../api/client_data/RecentChat.ts"
 import useEventListener from "../useEventListener.ts"
-import RecentsListItem from "./JoinRequestsListItem.tsx"
 import React from "react"
-import useAsyncEffect from "../useAsyncEffect.ts"
 import Client from "../../api/Client.ts"
 import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
 import data from "../../Data.ts"
 import EventBus from "../../EventBus.ts"
-import isMobileUI from "../isMobileUI.ts"
 import JoinRequest from "../../api/client_data/JoinRequest.ts"
-import JoinRequestsListItem from "./JoinRequestsListItem.tsx";
+import JoinRequestsListItem from "./JoinRequestsListItem.tsx"
 import Chat from "../../api/client_data/Chat.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {

client/ui/chat/JoinRequestsListItem.tsx

@@ -1,5 +1,4 @@
 import { $ } from "mdui/jq"
-import RecentChat from "../../api/client_data/RecentChat.ts"
 import Avatar from "../Avatar.tsx"
 import React from 'react'
 import JoinRequest from "../../api/client_data/JoinRequest.ts"

client/ui/dialog/ChatInfoDialog.tsx

@@ -12,29 +12,32 @@ import openImageViewer from "../openImageViewer.ts"
 import EventBus from "../../EventBus.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
-    chat: Chat
+    chat?: Chat
     openChatFragment: (id: string) => void
     chatInfoDialogRef: React.MutableRefObject<Dialog>
-    openUserInfoDialog: (user: User | string) => void
     sharedFavouriteChats: Chat[]
 }
 
-export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragment, openUserInfoDialog, sharedFavouriteChats }: Args) {
+export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragment, sharedFavouriteChats }: Args) {
-    const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
     const [favourited, setIsFavourited] = React.useState(false)
 
-    useAsyncEffect(async () => {
+    React.useEffect(() => {
-        if (chat == null) return
+        setIsFavourited(sharedFavouriteChats.map((v) => v.id).indexOf(chat?.id || '') != -1)
-        const re = await Client.invoke("Chat.getInfo", {
+    })
-            token: data.access_token,
-            target: chat.id,
-        })
-        if (re.code != 200)
-            return checkApiSuccessOrSncakbar(re, '获取对话信息失败')
 
-        const info = re.data as Chat
+    const [userId, setUserId] = React.useState<string | null>(null)
-        setIsFavourited(sharedFavouriteChats.map((v) => v.id).indexOf(info.id) != -1)
+    useAsyncEffect(async () => {
+        if (chat?.type == 'private') {
+            const re = await Client.invoke("Chat.getAnotherUserIdFromPrivate", {
+                token: data.access_token,
+                target: chat.id,
+            })
+            if (re.code != 200)
+                return checkApiSuccessOrSncakbar(re, '获取用户失败')
+            setUserId(re.data!.user_id as string)
+        }
     }, [chat, sharedFavouriteChats])
+
     const avatarUrl = getUrlForFileByHash(chat?.avatar_file_hash as string)
 
     return (
@@ -47,29 +50,28 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                     width: '50px',
                     height: '50px',
                 }} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
-                <span style={{
+                <div style={{
-                    marginLeft: "15px",
+                    display: 'flex',
+                    marginLeft: '15px',
+                    marginRight: '15px',
                     fontSize: '16.5px',
-                }}>{chat?.title}</span>
+                    flexDirection: 'column',
+                }}>
+                    <span style={{
+                        fontSize: '16.5px'
+                    }}>{chat?.title}</span>
+                    <span style={{
+                        fontSize: '10.5px',
+                        marginTop: '3px',
+                        color: 'rgb(var(--mdui-color-secondary))',
+                    }}>ID: {chat?.type == 'private' ? userId : chat?.id}</span>
+                </div>
             </div>
             <mdui-divider style={{
                 marginTop: "10px",
             }}></mdui-divider>
 
             <mdui-list>
-                {
-                    chat?.type == 'private' &&
-                    <mdui-list-item icon="person" rounded onClick={async () => {
-                        const re = await Client.invoke("Chat.getAnotherUserIdFromPrivate", {
-                            token: data.access_token,
-                            target: chat.id,
-                        })
-                        if (re.code != 200)
-                            return checkApiSuccessOrSncakbar(re, '获取用户失败')
-
-                        openUserInfoDialog(re.data!.user_id as string)
-                    }}>用户详情</mdui-list-item>
-                }
                 <mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={() => dialog({
                     headline: favourited ? "取消收藏对话" : "收藏对话",
                     description: favourited ? "确定从收藏对话列表中移除吗? (虽然这不会导致聊天记录丢失)" : "确定要添加到收藏对话列表吗?",
@@ -83,11 +85,11 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                         {
                             text: "确定",
                             onClick: () => {
-                                ;(async () => {
+                                ; (async () => {
                                     const re = await Client.invoke(favourited ? "User.removeContacts" : "User.addContacts", {
                                         token: data.access_token,
                                         targets: [
-                                            chat.id
+                                            chat!.id
                                         ],
                                     })
                                     if (re.code != 200)
@@ -101,7 +103,7 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                 })}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
                 <mdui-list-item icon="chat" rounded onClick={() => {
                     chatInfoDialogRef.current!.open = false
-                    openChatFragment(chat.id)
+                    openChatFragment(chat!.id)
                 }}>打开对话</mdui-list-item>
             </mdui-list>
         </mdui-dialog>

client/ui/dialog/UserProfileDialog.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react'
-import { Dialog } from "mdui"
-import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
-import Client from "../../api/Client.ts"
-
-import data from "../../Data.ts"
-import Avatar from "../Avatar.tsx"
-import User from "../../api/client_data/User.ts"
-import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
-import openImageViewer from "../openImageViewer.ts"
-import Chat from "../../api/client_data/Chat.ts"
-
-interface Refs {
-    userProfileDialogRef: React.MutableRefObject<Dialog>
-    chatInfoDialogRef: React.MutableRefObject<Dialog>
-    openChatFragment: (id: string) => void
-    user: User
-}
-
-export default function UserProfileDialog({
-    userProfileDialogRef,
-    chatInfoDialogRef,
-    openChatFragment,
-    user
-}: Refs) {
-    const avatarUrl = getUrlForFileByHash(user?.avatar_file_hash)
-    return (
-        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-            }}>
-                <Avatar src={avatarUrl} text={user?.nickname} style={{
-                    width: '50px',
-                    height: '50px',
-                }} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
-                <span style={{
-                    marginLeft: "15px",
-                    fontSize: '16.5px',
-                }}>{user?.nickname}</span>
-            </div>
-            <mdui-divider style={{
-                marginTop: "10px",
-            }}></mdui-divider>
-
-            <mdui-list>
-                {/* <mdui-list-item icon="edit" rounded>设置备注</mdui-list-item> */}
-                <mdui-list-item icon="chat" rounded onClick={async () => {
-                    const re = await Client.invoke("Chat.getIdForPrivate", {
-                        token: data.access_token,
-                        target: user.id,
-                    })
-                    if (re.code != 200)
-                        return checkApiSuccessOrSncakbar(re, '获取对话失败')
-                    
-                    openChatFragment(re.data!.chat_id as string)
-                    userProfileDialogRef.current!.open = false
-                    chatInfoDialogRef.current!.open = false
-                }}>对话</mdui-list-item>
-            </mdui-list>
-        </mdui-dialog>
-    )
-}