feat: 查看自己所有的对话

client/ui/App.tsx

@@ -25,6 +25,7 @@ import DataCaches from "../api/DataCaches.ts"
 import getUrlForFileByHash from "../getUrlForFileByHash.ts"
 import Message from "../api/client_data/Message.ts"
 import EventBus from "../EventBus.ts"
+import AllChatsList from "./main/AllChatsList.tsx";
 
 declare global {
     namespace React {
@@ -205,8 +206,21 @@ export default function App() {
                 </mdui-button-icon>
 
                 <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
-                <mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="Contacts"></mdui-navigation-rail-item>
+                <mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Contacts"></mdui-navigation-rail-item>
+                <mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
 
+                <mdui-button-icon icon="refresh" slot="bottom" onClick={() => {
+                    EventBus.emit('RecentsList.updateRecents')
+                    EventBus.emit('ContactsList.updateContacts')
+                    EventBus.emit('AllChatsList.updateAllChats')
+                }}></mdui-button-icon>
+                <mdui-dropdown trigger="hover" slot="bottom">
+                    <mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
+                    <mdui-menu>
+                        <mdui-menu-item icon="person_add" onClick={() => addContactDialogRef.current!.open = true}>添加收藏对话</mdui-menu-item>
+                        <mdui-menu-item icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}>创建群组</mdui-menu-item>
+                    </mdui-menu>
+                </mdui-dropdown>
                 <mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
             </mdui-navigation-rail>
             {
@@ -220,9 +234,17 @@ export default function App() {
                         display={navigationItemSelected == "Recents"}
                         currentChatId={currentChatId} />
                 }
+                {
+                    // 最近聊天
+                    <AllChatsList
+                        openChatInfoDialog={openChatInfoDialog}
+                        display={navigationItemSelected == "AllChats"}
+                        currentChatId={currentChatId} />
+                }
                 {
                     // 對話列表
                     <ContactsList
+                        currentChatId={currentChatId}
                         openChatInfoDialog={openChatInfoDialog}
                         setSharedFavouriteChats={setSharedFavouriteChats}
                         addContactDialogRef={addContactDialogRef as any}

client/ui/AppMobile.tsx

@@ -21,6 +21,8 @@ import Chat from "../api/client_data/Chat.ts"
 import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
 import getUrlForFileByHash from "../getUrlForFileByHash.ts"
+import AllChatsList from "./main/AllChatsList.tsx";
+import EventBus from "../EventBus.ts";
 
 declare global {
     namespace React {
@@ -198,12 +200,24 @@ export default function AppMobile() {
                 <mdui-top-app-bar-title>{
                     ({
                         Recents: "最近对话",
-                        Contacts: "所有对话"
+                        Contacts: "收藏对话"
                     })[navigationItemSelected]
                 }</mdui-top-app-bar-title>
                 <div style={{
                     flexGrow: 1,
                 }}></div>
+                <mdui-button-icon icon="refresh" onClick={() => {
+                    EventBus.emit('RecentsList.updateRecents')
+                    EventBus.emit('ContactsList.updateContacts')
+                    EventBus.emit('AllChatsList.updateAllChats')
+                }}></mdui-button-icon>
+                <mdui-dropdown trigger="hover">
+                    <mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
+                    <mdui-menu>
+                        <mdui-menu-item icon="person_add" onClick={() => addContactDialogRef.current!.open = true}>添加收藏对话</mdui-menu-item>
+                        <mdui-menu-item icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}>创建群组</mdui-menu-item>
+                    </mdui-menu>
+                </mdui-dropdown>
                 <mdui-button-icon icon="settings"></mdui-button-icon>
                 <mdui-button-icon>
                     <Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
@@ -227,9 +241,17 @@ export default function AppMobile() {
                         display={navigationItemSelected == "Recents"}
                         currentChatId={currentChatId} />
                 }
+                {
+                    // 最近聊天
+                    <AllChatsList
+                        openChatInfoDialog={openChatInfoDialog}
+                        display={navigationItemSelected == "AllChats"}
+                        currentChatId={currentChatId} />
+                }
                 {
                     // 對話列表
                     <ContactsList
+                        currentChatId={currentChatId}
                         openChatInfoDialog={openChatInfoDialog}
                         setSharedFavouriteChats={setSharedFavouriteChats}
                         addContactDialogRef={addContactDialogRef as any}
@@ -242,7 +264,8 @@ export default function AppMobile() {
                 bottom: '0',
             }}>
                 <mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
-                <mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="Contacts">所有对话</mdui-navigation-bar-item>
+                <mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Contacts">收藏对话</mdui-navigation-bar-item>
+                <mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
             </mdui-navigation-bar>
         </div>
     )

client/ui/main/AllChatsList.tsx

@@ -0,0 +1,85 @@
+import { TextField } from "mdui"
+import useEventListener from "../useEventListener.ts"
+import RecentsListItem from "./RecentsListItem.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 Chat from "../../api/client_data/Chat.ts"
+import AllChatsListItem from "./AllChatsListItem.tsx"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    display: boolean
+    currentChatId: string
+    openChatInfoDialog: (chat: Chat) => void
+}
+
+export default function AllChatsList({
+    currentChatId,
+    display,
+    openChatInfoDialog,
+    ...props
+}: Args) {
+    const searchRef = React.useRef<HTMLElement>(null)
+    const [searchText, setSearchText] = React.useState('')
+    const [allChatsList, setAllChatsList] = React.useState<Chat[]>([])
+
+    useEventListener(searchRef, 'input', (e) => {
+        setSearchText((e.target as unknown as TextField).value)
+    })
+
+    useAsyncEffect(async () => {
+        async function updateAllChats() {
+            const re = await Client.invoke("User.getMyAllChats", {
+                token: data.access_token,
+            })
+            if (re.code != 200) {
+                if (re.code != 401 && re.code != 400) checkApiSuccessOrSncakbar(re, "获取所有对话列表失败")
+                return
+            }
+
+            setAllChatsList(re.data!.all_chats as Chat[])
+        }
+        updateAllChats()
+        EventBus.on('AllChatsList.updateAllChats', () => updateAllChats())
+        return () => {
+            EventBus.off('AllChatsList.updateAllChats')
+        }
+    })
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        paddingLeft: '10px',
+        display: display ? undefined : 'none',
+        height: '100%',
+        width: '100%',
+    }} {...props}>
+        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
+            marginTop: '5px',
+            marginBottom: '13px',
+            position: 'sticky',
+            top: '0',
+            backgroundColor: 'rgb(var(--mdui-color-background))',
+            zIndex: '10',
+        }}></mdui-text-field>
+        {
+            allChatsList.filter((chat) =>
+                searchText == '' ||
+                chat.title.includes(searchText) ||
+                chat.id.includes(searchText)
+            ).map((v) =>
+                <AllChatsListItem
+                    active={isMobileUI() ? false : currentChatId == v.id}
+                    key={v.id}
+                    onClick={() => {
+                        openChatInfoDialog(v)
+                    }}
+                    chat={v} />
+            )
+        }
+    </mdui-list>
+}

client/ui/main/AllChatsListItem.tsx

@@ -0,0 +1,29 @@
+import { $ } from "mdui/jq"
+import Avatar from "../Avatar.tsx"
+import React from 'react'
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
+import Chat from "../../api/client_data/Chat.ts"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    chat: Chat
+    active?: boolean
+}
+
+export default function AllChatsListItem({ chat, active, ...prop }: Args) {
+    const { title, avatar_file_hash } = chat
+
+    const ref = React.useRef<HTMLElement>(null)
+
+    return (
+        <mdui-list-item active={active} ref={ref} rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+            width: '100%',
+        }} {...prop as any}>
+            <span style={{
+                width: "100%",
+            }}>{title}</span>
+            <Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
+        </mdui-list-item>
+    )
+}