feat(wip): user profile dialog

client/ui/App.tsx

@@ -1,25 +1,29 @@
 import Client from "../api/Client.ts"
 import data from "../Data.ts"
 import ChatFragment from "./chat/ChatFragment.jsx"
-import LoginDialog from "./dialog/LoginDialog.tsx"
 import ContactsListItem from "./main/ContactsListItem.jsx"
 import RecentsListItem from "./main/RecentsListItem.jsx"
 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'
-import { Button, Dialog, NavigationRail, TextField } from "mdui"
+import { Button, ButtonIcon, Dialog, NavigationRail, TextField } from "mdui"
 import Split from 'split.js'
 import 'mdui/jsx.zh-cn.d.ts'
-import { checkApiSuccessOrSncakbar } from "./snackbar.ts";
-import RegisterDialog from "./dialog/RegisterDialog.tsx";
+import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
+
+import RegisterDialog from "./dialog/RegisterDialog.tsx"
+import LoginDialog from "./dialog/LoginDialog.tsx"
+import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 
 declare global {
     namespace React {
         namespace JSX {
             interface IntrinsicAttributes {
                 id?: string
+                slot?: string
             }
         }
     }
@@ -57,7 +61,7 @@ export default function App() {
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
     const navigationRailRef: React.MutableRefObject<NavigationRail | null> = React.useRef(null)
-    useEventListener(navigationRailRef as React.MutableRefObject<NavigationRail>, 'change', (event) => {
+    useEventListener(navigationRailRef, 'change', (event) => {
         setNavigationItemSelected((event.target as HTMLElement as NavigationRail).value as string)
     })
 
@@ -70,6 +74,14 @@ export default function App() {
     const registerInputNickNameRef: React.MutableRefObject<TextField | null> = React.useRef(null)
     const registerInputPasswordRef: React.MutableRefObject<TextField | null> = React.useRef(null)
 
+    const userProfileDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
+    const openMyUserProfileDialogButtonRef: React.MutableRefObject<HTMLElement | null> = React.useRef(null)
+    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
+        userProfileDialogRef.current!.open = true
+    })
+
+    const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
+
     React.useEffect(() => {
         ; (async () => {
             Split(['#SideBar', '#ChatFragment'], {
@@ -79,13 +91,14 @@ export default function App() {
             })
 
             Client.connect()
-            const re = await Client.invoke("User.auth", {
-                access_token: data.access_token || '',
-            })
+            const re = await Client.auth(data.access_token || "")
             if (re.code == 401)
                 loginDialogRef.current!.open = true
-            else if (re.code != 200)
+            else if (re.code != 200) {
                 if (checkApiSuccessOrSncakbar(re, "驗證失敗")) return
+            } else if (re.code == 200) {
+                setMyUserProfileCache(Client.myUserProfile as User)
+            }
         })()
     }, [])
 
@@ -110,8 +123,14 @@ export default function App() {
                 loginInputAccountRef={loginInputAccountRef}
                 loginInputPasswordRef={loginInputPasswordRef} />
 
+            <UserProfileDialog
+                userProfileDialogRef={userProfileDialogRef}
+                user={myUserProfileCache} />
+
             <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
-                <mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
+                <mdui-button-icon slot="top">
+                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
+                </mdui-button-icon>
 
                 <mdui-navigation-rail-item icon="watch_later--outlined" value="Recents"></mdui-navigation-rail-item>
                 <mdui-navigation-rail-item icon="contacts--outlined" value="Contacts"></mdui-navigation-rail-item>

client/ui/dialog/UserProfileDialog.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import { Button, Dialog, TextField } from "mdui"
+import useEventListener from "../useEventListener.ts"
+import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
+import Client from "../../api/Client.ts"
+
+import * as CryptoJS from 'crypto-js'
+import data from "../../Data.ts"
+import Avatar from "../Avatar.tsx"
+import User from "../../api/client_data/User.ts"
+
+interface Refs {
+    userProfileDialogRef: React.MutableRefObject<Dialog | null>
+    user: User
+}
+
+export default function UserProfileDialog({
+    userProfileDialogRef,
+    user
+}: Refs) {
+    const isMySelf = Client.myUserProfile?.id == user?.id
+
+    const editAvatarButtonRef: React.MutableRefObject<HTMLElement | null> = React.useRef(null)
+    const chooseAvatarFileRef: React.MutableRefObject<HTMLInputElement | null> = React.useRef(null)
+    useEventListener(editAvatarButtonRef, 'click', () => chooseAvatarFileRef.current!.click())
+    useEventListener(chooseAvatarFileRef, 'change', async (_e) => {
+        const file = chooseAvatarFileRef.current!.files?.[0] as File
+        if (file == null) return
+
+        const re = await Client.invoke("User.setAvatar", {
+            token: data.access_token,
+            avatar: file
+        })
+
+        if (checkApiSuccessOrSncakbar(re, "修改失敗")) return
+        snackbar({
+            message: "修改成功 (刷新頁面以更新)"
+        })
+    })
+
+    return (
+        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
+            <div style={{
+                display: "none"
+            }}>
+                <input type="file" name="選擇頭像" ref={chooseAvatarFileRef}
+                    accept="image/*" />
+            </div>
+
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+            }}>
+                <Avatar src={user?.avatar} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
+                    width: '50px',
+                    height: '50px',
+                }} />
+                <span style={{
+                    marginLeft: "10px",
+                    fontSize: '15.5px',
+                }}>{user?.nickname}</span>
+            </div>
+            <mdui-divider style={{
+                marginTop: "10px",
+                marginBottom: "10px",
+            }}></mdui-divider>
+
+            <mdui-list>
+                {!isMySelf && <mdui-list-item icon="edit" rounded>編輯聯絡人訊息</mdui-list-item>}
+                {
+                    isMySelf && <>
+                        <mdui-list-item icon="edit" rounded>編輯資料</mdui-list-item>
+                        <mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
+                        <mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
+                    </>
+                }
+            </mdui-list>
+        </mdui-dialog>
+    )
+}