From b3b077fa9da9aba9bf976ed2f25a7c812d81e4f4 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Wed, 24 Sep 2025 23:41:11 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E7=A7=BB=E5=8B=95=E7=AB=AF=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E4=BF=AE=E6=94=B9=E5=80=8B=E4=BA=BA=E8=B3=87=E6=96=99?=
 =?UTF-8?q?,=20=E4=BF=AE=E7=B9=95=E7=A7=BB=E5=8B=95=E7=AB=AF=20UI=20?=
 =?UTF-8?q?=E7=9A=84=E8=AB=B8=E5=A4=9A=E6=BD=9B=E5=9C=A8=E5=95=8F=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/AppMobile.tsx | 44 +++++++++++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/client/ui/AppMobile.tsx b/client/ui/AppMobile.tsx
index 7e50629..85d193c 100644
--- a/client/ui/AppMobile.tsx
+++ b/client/ui/AppMobile.tsx
@@ -8,7 +8,6 @@ import Avatar from "./Avatar.tsx"
 
 import * as React from 'react'
 import { Dialog, NavigationBar, TextField } from "mdui"
-import Split from 'split.js'
 import 'mdui/jsx.zh-cn.d.ts'
 import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 
@@ -18,8 +17,8 @@ import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import ContactsList from "./main/ContactsList.tsx"
 import RecentsList from "./main/RecentsList.tsx"
 import useAsyncEffect from "./useAsyncEffect.ts"
-import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx";
-import Chat from "../api/client_data/Chat.ts";
+import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
+import Chat from "../api/client_data/Chat.ts"
 
 declare global {
     namespace React {
@@ -52,6 +51,10 @@ export default function AppMobile() {
     const registerInputPasswordRef = React.useRef<TextField>(null)
 
     const userProfileDialogRef = React.useRef<Dialog>(null)
+    const openMyUserProfileDialogButtonRef = React.useRef<HTMLElement>(null)
+    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
+        userProfileDialogRef.current!.open = true
+    })
 
     const chatInfoDialogRef = React.useRef<Dialog>(null)
     const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
@@ -91,6 +94,7 @@ export default function AppMobile() {
         <div style={{
             display: "flex",
             position: 'relative',
+            flexDirection: 'column',
             width: 'var(--whitesilk-window-width)',
             height: 'var(--whitesilk-window-height)',
         }}>
@@ -135,16 +139,33 @@ export default function AppMobile() {
                 }}
                 chat={chatInfo} />
 
-            <mdui-navigation-bar scroll-target="#SideBar" label-visibility="selected" value="Recents" ref={navigationBarRef}>
-                <mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近</mdui-navigation-bar-item>
-                <mdui-navigation-bar-item icon="contacts--outlined" active-icon="contacts--filled" value="Contacts">聯絡人</mdui-navigation-bar-item>
-            </mdui-navigation-bar>
+            <mdui-top-app-bar style={{
+                position: 'sticky',
+                marginTop: '3px',
+                marginRight: '6px',
+                marginLeft: '15px',
+                top: '0px',
+            }}>
+                <mdui-top-app-bar-title>{
+                    ({
+                        Recents: "最近對話",
+                        Contacts: "聯絡人"
+                    })[navigationItemSelected]
+                }</mdui-top-app-bar-title>
+                <div style={{
+                    flexGrow: 1,
+                }}></div>
+                <mdui-button-icon icon="settings"></mdui-button-icon>
+                <mdui-button-icon>
+                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
+                </mdui-button-icon>
+            </mdui-top-app-bar>
             {
                 // 侧边列表
             }
             <div style={{
                 display: 'flex',
-                height: 'calc(100% - 80px)',
+                height: 'calc(100% - 80px - 67px)',
                 width: '100%',
             }} id="SideBar">
                 {
@@ -167,6 +188,13 @@ export default function AppMobile() {
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>
+            <mdui-navigation-bar label-visibility="selected" value="Recents" ref={navigationBarRef} style={{
+                position: 'sticky',
+                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="contacts--outlined" active-icon="contacts--filled" value="Contacts">聯絡人</mdui-navigation-bar-item>
+            </mdui-navigation-bar>
         </div>
     )
 }
\ No newline at end of file