乱了, 懒得说是什么

client/ui/app-state/AppStateContext.ts

@@ -7,7 +7,7 @@ type AppState = {
     openUserInfo: (user: Chat | User | string) => void,
     openEditMyProfile: () => void,
     openAddFavouriteChat: () => void,
-    openChat: (chat: string | Chat) => void,
+    openChat: (chat: string | Chat, inDialog?: boolean) => void,
     closeChat: () => void,
 }
 

client/ui/app-state/AppStateContextWrapper.tsx

@@ -12,6 +12,7 @@ import MainSharedContext, { Shared } from "../MainSharedContext"
 import ChatFragmentDialog from "./ChatFragmentDialog"
 import useAsyncEffect from "../../utils/useAsyncEffect"
 import ClientCache from "../../ClientCache"
+import isMobileUI from "../../utils/isMobileUI"
 
 const config = await fetch('/config.json').then((re) => re.json())
 
@@ -42,7 +43,6 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
         MainSharedContext,
         (context: Shared) => context.state.currentSelectedChatId
     )
-    const [useChatFragmentDialog, setUseChatFragmentDialog] = React.useState(false)
     const chatFragmentDialogRef = React.useRef<Dialog>()
 
     useAsyncEffect(async () => {
@@ -70,11 +70,10 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
         static async openChat(chat: string | Chat, inDialog?: boolean) {
             if (chat instanceof Chat) chat = chat.getId()
 
-            setUseChatFragmentDialog(inDialog || false)
             setUserOrChatInfoDialogState([])
             setCurrentSelectedChatId(chat)
 
-            useChatFragmentDialog && (chatFragmentDialogRef.current!.open = true)
+            inDialog && (chatFragmentDialogRef.current!.open = true)
         }
         static closeChat() {
             if (chatFragmentDialogRef.current!.open) {
@@ -85,10 +84,10 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
                 setCurrentSelectedChatId('')
         }
     }}>
+        {<ChatFragmentDialog chatId={currentSelectedChatId} useRef={chatFragmentDialogRef} />}
         <UserOrChatInfoDialog chat={userOrChatInfoDialogState[userOrChatInfoDialogState.length - 1] || lastUserOrChatInfoDialogStateRef.current} useRef={userOrChatInfoDialogRef} />
         <EditMyProfileDialog useRef={editMyProfileDialogRef} />
         <AddFavourtieChatDialog useRef={addFavouriteChatDialogRef} />
-        {useChatFragmentDialog && currentSelectedChatId && currentSelectedChatId != '' && <ChatFragmentDialog chatId={currentSelectedChatId} useRef={chatFragmentDialogRef} />}
         {children}
     </AppStateContext.Provider>
 }

client/ui/app-state/ChatFragmentDialog.tsx

@@ -1,9 +1,10 @@
 import { Dialog } from "mdui"
 import * as React from 'react'
 import LazyChatFragment from "../chat-fragment/LazyChatFragment"
+import useEventListener from "../../utils/useEventListener"
 
 export default function ChatFragmentDialog({ chatId, useRef }: { chatId: string, useRef: React.MutableRefObject<Dialog | undefined> }) {
-    React.useEffect(() => {
+    useEventListener(useRef, 'open', () => {
         const shadow = useRef.current!.shadowRoot as ShadowRoot
         const panel = shadow.querySelector(".panel") as HTMLElement
         panel.style.padding = '0'
@@ -13,14 +14,14 @@ export default function ChatFragmentDialog({ chatId, useRef }: { chatId: string,
         const body = shadow.querySelector(".body") as HTMLElement
         body.style.height = '100%'
         body.style.display = 'flex'
-    }, [chatId])
+    })
 
     return <mdui-dialog fullscreen ref={useRef}>
         <div style={{
             display: 'flex',
             width: '100%',
         }}>
-            <LazyChatFragment chatId={chatId} openedInDialog={true} />
+            {chatId != null && chatId != '' && <LazyChatFragment chatId={chatId} openedInDialog={true} />}
         </div>
     </mdui-dialog>
 }

client/ui/app-state/UserOrChatInfoDialog.tsx

@@ -110,7 +110,7 @@ export default function UserOrChatInfoDialog({ chat, useRef }: { chat?: Chat, us
                     })}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
                 }
                 <mdui-list-item icon="chat" rounded onClick={async () => {
-                    AppState.openChat(chat!)
+                    AppState.openChat(chat!, isMobileUI())
                 }}>打开对话</mdui-list-item>
             </mdui-list>
         </mdui-dialog>