From b7ce12ff5e7e4565109503bb1df66584f26362f0 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sat, 20 Sep 2025 00:32:21 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E6=B7=BB=E5=8A=A0=E6=89=93=E9=96=8B?=
 =?UTF-8?q?=E5=B0=8D=E8=A9=B1=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/App.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/client/ui/App.tsx b/client/ui/App.tsx
index dc89420..8c5ff9d 100644
--- a/client/ui/App.tsx
+++ b/client/ui/App.tsx
@@ -82,6 +82,10 @@ export default function App() {
 
     const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
 
+    const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
+
+    const [currentChatId, setCurrentChatId] = React.useState('')
+
     React.useEffect(() => {
         ; (async () => {
             Split(['#SideBar', '#ChatFragment'], {
@@ -144,12 +148,19 @@ export default function App() {
                 {
                     // 最近聊天
                     <RecentsList
+                        openChatFragment={(id) => {
+                            setIsShowChatFragment(true)
+
+                        }}
                         display={navigationItemSelected == "Recents"}
                         recentsList={recentsList} />
                 }
                 {
                     // 联系人列表
                     <ContactsList
+                        openChatFragment={(id) => {
+                            setIsShowChatFragment(true)
+                        }}
                         display={navigationItemSelected == "Contacts"}
                         contactsMap={contactsMap} />
                 }
@@ -157,7 +168,23 @@ export default function App() {
             {
                 // 聊天页面
             }
-            <ChatFragment id="ChatFragment" />
+            <div id="ChatFragment" style={{
+                display: "flex"
+            }}>
+                {
+                    !isShowChatFragment && <div style={{
+                        width: '100%',
+                        textAlign: 'center',
+                        alignSelf: 'center',
+                    }}>
+                        選擇聯絡人以開始對話...
+                    </div>
+                }
+                {
+                    isShowChatFragment && <ChatFragment
+                        target={currentChatId} />
+                }
+            </div>
         </div>
     )
 }
\ No newline at end of file