chore: add my account entry in user dropdown (#1187)

web/src/components/SettingDialog.tsx

@@ -13,21 +13,23 @@ import StorageSection from "./Settings/StorageSection";
 import SSOSection from "./Settings/SSOSection";
 import "../less/setting-dialog.less";
 
-type Props = DialogProps;
-
 type SettingSection = "my-account" | "preference" | "member" | "system" | "storage" | "sso";
 
+interface Props extends DialogProps {
+  selectedSection?: SettingSection;
+}
+
 interface State {
   selectedSection: SettingSection;
 }
 
 const SettingDialog: React.FC<Props> = (props: Props) => {
-  const { destroy } = props;
+  const { destroy, selectedSection } = props;
   const { t } = useTranslation();
   const userStore = useUserStore();
   const user = userStore.state.user;
   const [state, setState] = useState<State>({
-    selectedSection: "my-account",
+    selectedSection: selectedSection || "my-account",
   });
   const isHost = user?.role === "HOST";
 
@@ -128,13 +130,15 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
   );
 };
 
-export default function showSettingDialog(): void {
+export default function showSettingDialog(selectedSection?: SettingSection): void {
   generateDialog(
     {
       className: "setting-dialog",
       dialogName: "setting-dialog",
     },
     SettingDialog,
-    {}
+    {
+      selectedSection,
+    }
   );
 }

web/src/components/UserBanner.tsx

@@ -7,6 +7,7 @@ import Dropdown from "./common/Dropdown";
 import showArchivedMemoDialog from "./ArchivedMemoDialog";
 import showAboutSiteDialog from "./AboutSiteDialog";
 import UserAvatar from "./UserAvatar";
+import showSettingDialog from "./SettingDialog";
 
 const UserBanner = () => {
   const { t } = useTranslation();
@@ -44,6 +45,10 @@ const UserBanner = () => {
       });
   }, [memos]);
 
+  const handleMyAccountClick = () => {
+    showSettingDialog("my-account");
+  };
+
   const handleArchivedBtnClick = () => {
     showArchivedMemoDialog();
   };
@@ -77,6 +82,12 @@ const UserBanner = () => {
             <>
               {!userStore.isVisitorMode() && (
                 <>
+                  <button
+                    className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
+                    onClick={handleMyAccountClick}
+                  >
+                    <span className="mr-1">🤠</span> {t("setting.my-account")}
+                  </button>
                   <button
                     className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
                     onClick={handleArchivedBtnClick}
@@ -89,7 +100,7 @@ const UserBanner = () => {
                 className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
                 onClick={handleAboutBtnClick}
               >
-                <span className="mr-1">🤠</span> {t("common.about")}
+                <span className="mr-1">🏂</span> {t("common.about")}
               </button>
               {!userStore.isVisitorMode() && (
                 <button