rename: (User -> My)ProfileDialog

* 橫屏時, 測試 Via 瀏覽器時 可能是因為全屏不當, 大小不正確, 也因此需要手動縮小, 繼續切豎屏正常

client/index.ts

@@ -26,13 +26,13 @@ import AppMobile from './ui/AppMobile.tsx'
 import isMobileUI from "./ui/isMobileUI.ts"
 ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(React.createElement(isMobileUI() ? AppMobile : App, null))
 
-const onResize = () => {
+const onResize = () => setTimeout(() => {
     document.body.style.setProperty('--whitesilk-widget-message-maxwidth', breakpoint().down('md') ? "80%" : "70%")
     // deno-lint-ignore no-window
-    document.body.style.setProperty('--whitesilk-window-width', window.innerWidth + 'px')
+    document.body.style.setProperty('--whitesilk-window-width', window.screen.availWidth + 'px')
     // deno-lint-ignore no-window
-    document.body.style.setProperty('--whitesilk-window-height', window.innerHeight + 'px')
+    document.body.style.setProperty('--whitesilk-window-height', window.screen.availHeight + 'px')
-}
+}, 100)
 // deno-lint-ignore no-window no-window-prefix
 window.addEventListener('resize', onResize)
 onResize()

client/ui/App.tsx

@@ -14,7 +14,7 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 
 import RegisterDialog from "./dialog/RegisterDialog.tsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
-import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
+import MyProfileDialog from "./dialog/MyProfileDialog.tsx"
 import ContactsList from "./main/ContactsList.tsx"
 import RecentsList from "./main/RecentsList.tsx"
 import useAsyncEffect from "./useAsyncEffect.ts"
@@ -52,10 +52,10 @@ export default function App() {
     const registerInputNickNameRef = React.useRef<TextField>(null)
     const registerInputPasswordRef = React.useRef<TextField>(null)
 
-    const userProfileDialogRef = React.useRef<Dialog>(null)
+    const myProfileDialogRef = React.useRef<Dialog>(null)
-    const openMyUserProfileDialogButtonRef = React.useRef<HTMLElement>(null)
+    const openMyProfileDialogButtonRef = React.useRef<HTMLElement>(null)
-    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
+    useEventListener(openMyProfileDialogButtonRef, 'click', (_event) => {
-        userProfileDialogRef.current!.open = true
+        myProfileDialogRef.current!.open = true
     })
     
     const addContactDialogRef = React.useRef<Dialog>(null)
@@ -112,8 +112,8 @@ export default function App() {
                 loginInputAccountRef={loginInputAccountRef}
                 loginInputPasswordRef={loginInputPasswordRef} />
 
-            <UserProfileDialog
+            <MyProfileDialog
-                userProfileDialogRef={userProfileDialogRef as any}
+                myProfileDialogRef={myProfileDialogRef as any}
                 user={myUserProfileCache} />
 
             <ChatInfoDialog
@@ -129,7 +129,7 @@ export default function App() {
 
             <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
                 <mdui-button-icon slot="top">
-                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
+                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
                 </mdui-button-icon>
 
                 <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>

client/ui/AppMobile.tsx

@@ -13,7 +13,7 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 
 import RegisterDialog from "./dialog/RegisterDialog.tsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
-import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
+import MyProfileDialog from "./dialog/MyProfileDialog.tsx"
 import ContactsList from "./main/ContactsList.tsx"
 import RecentsList from "./main/RecentsList.tsx"
 import useAsyncEffect from "./useAsyncEffect.ts"
@@ -51,10 +51,10 @@ export default function AppMobile() {
     const registerInputNickNameRef = React.useRef<TextField>(null)
     const registerInputPasswordRef = React.useRef<TextField>(null)
 
-    const userProfileDialogRef = React.useRef<Dialog>(null)
+    const myProfileDialogRef = React.useRef<Dialog>(null)
-    const openMyUserProfileDialogButtonRef = React.useRef<HTMLElement>(null)
+    const openMyProfileDialogButtonRef = React.useRef<HTMLElement>(null)
-    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
+    useEventListener(openMyProfileDialogButtonRef, 'click', (_event) => {
-        userProfileDialogRef.current!.open = true
+        myProfileDialogRef.current!.open = true
     })
     
     const addContactDialogRef = React.useRef<Dialog>(null)
@@ -131,8 +131,8 @@ export default function AppMobile() {
                 loginInputAccountRef={loginInputAccountRef}
                 loginInputPasswordRef={loginInputPasswordRef} />
 
-            <UserProfileDialog
+            <MyProfileDialog
-                userProfileDialogRef={userProfileDialogRef as any}
+                myProfileDialogRef={myProfileDialogRef as any}
                 user={myUserProfileCache} />
 
             <ChatInfoDialog
@@ -164,7 +164,7 @@ export default function AppMobile() {
                 }}></div>
                 <mdui-button-icon icon="settings"></mdui-button-icon>
                 <mdui-button-icon>
-                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
+                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
                 </mdui-button-icon>
             </mdui-top-app-bar>
             {

client/ui/dialog/MyProfileDialog.tsx

@@ -10,12 +10,12 @@ import Avatar from "../Avatar.tsx"
 import User from "../../api/client_data/User.ts"
 
 interface Refs {
-    userProfileDialogRef: React.MutableRefObject<Dialog>
+    myProfileDialogRef: React.MutableRefObject<Dialog>
     user: User
 }
 
-export default function UserProfileDialog({
+export default function MyProfileDialog({
-    userProfileDialogRef,
+    myProfileDialogRef,
     user
 }: Refs) {
     const isMySelf = Client.myUserProfile?.id == user?.id
@@ -47,7 +47,7 @@ export default function UserProfileDialog({
         {
             // 公用 - 資料卡
         }
-        <mdui-dialog close-on-overlay-click close-on-esc ref={userProfileDialogRef}>
+        <mdui-dialog close-on-overlay-click close-on-esc ref={myProfileDialogRef}>
             <div style={{
                 display: 'flex',
                 alignItems: 'center',
@@ -66,41 +66,36 @@ export default function UserProfileDialog({
             }}></mdui-divider>
 
             <mdui-list>
-                {!isMySelf && <mdui-list-item icon="edit" rounded>編輯聯絡人訊息</mdui-list-item>}
+                <mdui-list-item icon="edit" rounded onClick={() => userProfileEditDialogRef.current!.open = true}>編輯資料</mdui-list-item>
-                {
+                {/*
-                    isMySelf && <>
+                <mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
-                        <mdui-list-item icon="edit" rounded onClick={() => userProfileEditDialogRef.current!.open = true}>編輯資料</mdui-list-item>
+                <mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
-                        {/*
+                */}
-                        <mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
+                <mdui-divider style={{
-                        <mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
+                    marginTop: "10px",
-                        */}
+                    marginBottom: "10px",
-                        <mdui-divider style={{
+                }}></mdui-divider>
-                            marginTop: "10px",
+                <mdui-list-item icon="logout" rounded onClick={() => dialog({
-                            marginBottom: "10px",
+                    headline: "退出登錄",
-                        }}></mdui-divider>
+                    description: "確定要退出登錄嗎? (若您的賬號未設定 用戶名, 請無務必複製 用戶 ID, 以免丟失賬號!)",
-                        <mdui-list-item icon="logout" rounded onClick={() => dialog({
+                    actions: [
-                            headline: "退出登錄",
+                        {
-                            description: "確定要退出登錄嗎? (若您的賬號未設定 用戶名, 請無務必複製 用戶 ID, 以免丟失賬號!)",
+                            text: "取消",
-                            actions: [
+                            onClick: () => {
-                                {
+                                return true
-                                    text: "取消",
+                            },
-                                    onClick: () => {
+                        },
-                                        return true
+                        {
-                                    },
+                            text: "確定",
-                                },
+                            onClick: () => {
-                                {
+                                data.access_token = ''
-                                    text: "確定",
+                                data.apply()
-                                    onClick: () => {
+                                location.reload()
-                                        data.access_token = ''
+                                return true
-                                        data.apply()
+                            },
-                                        location.reload()
+                        }
-                                        return true
+                    ],
-                                    },
+                })}>退出登錄</mdui-list-item>
-                                }
-                            ],
-                        })}>退出登錄</mdui-list-item>
-                    </>
-                }
             </mdui-list>
         </mdui-dialog>
         {