chore: update about page

web/src/components/AboutSiteDialog.tsx

@@ -1,53 +0,0 @@
-import { Divider, IconButton } from "@mui/joy";
-import { useGlobalStore } from "@/store/module";
-import { useTranslate } from "@/utils/i18n";
-import { generateDialog } from "./Dialog";
-import Icon from "./Icon";
-
-type Props = DialogProps;
-
-const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
-  const t = useTranslate();
-  const globalStore = useGlobalStore();
-  const profile = globalStore.state.systemStatus.profile;
-  const customizedProfile = globalStore.state.systemStatus.customizedProfile;
-
-  const handleCloseBtnClick = () => {
-    destroy();
-  };
-
-  return (
-    <>
-      <div className="dialog-header-container">
-        <p className="title-text flex items-center">
-          {t("common.about")} {customizedProfile.name}
-        </p>
-        <IconButton size="sm" onClick={handleCloseBtnClick}>
-          <Icon.X className="opacity-70" />
-        </IconButton>
-      </div>
-      <div className="flex flex-col justify-start items-start max-w-full w-96">
-        <p className="text-xs">{t("about.memos-description")}</p>
-        <p className="text-sm mt-2">{customizedProfile.description || t("about.no-server-description")}</p>
-        <Divider className="!my-3" />
-        <div className="w-full flex flex-row justify-start items-center text-sm italic">
-          {t("about.powered-by")}
-          <a className="shrink-0 flex flex-row justify-start items-center mx-1 hover:underline" href="https://usememos.com" target="_blank">
-            <img className="w-auto h-7" src="https://www.usememos.com/full-logo-landscape.png" alt="" />
-          </a>
-          <span>v{profile.version}</span>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default function showAboutSiteDialog(): void {
-  generateDialog(
-    {
-      className: "about-site-dialog",
-      dialogName: "about-site-dialog",
-    },
-    AboutSiteDialog
-  );
-}

web/src/components/Navigation.tsx

@@ -98,10 +98,16 @@ const Navigation = () => {
     title: t("common.sign-in"),
     icon: <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" />,
   };
+  const aboutNavLink: NavLinkItem = {
+    id: "header-about",
+    path: "/about",
+    title: t("common.about"),
+    icon: <Icon.Smile className="mr-3 w-6 h-auto opacity-70" />,
+  };
 
   const navLinks: NavLinkItem[] = user
     ? [homeNavLink, timelineNavLink, resourcesNavLink, exploreNavLink, profileNavLink, inboxNavLink, archivedNavLink, settingNavLink]
-    : [exploreNavLink, signInNavLink];
+    : [exploreNavLink, signInNavLink, aboutNavLink];
 
   return (
     <header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30">

web/src/components/UserBanner.tsx

@@ -2,7 +2,6 @@ import * as api from "@/helpers/api";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useGlobalStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
-import showAboutSiteDialog from "./AboutSiteDialog";
 import Icon from "./Icon";
 import UserAvatar from "./UserAvatar";
 import Dropdown from "./kit/Dropdown";
@@ -14,10 +13,6 @@ const UserBanner = () => {
   const user = useCurrentUser();
   const title = user ? user.nickname || user.username : systemStatus.customizedProfile.name || "memos";
 
-  const handleAboutBtnClick = () => {
-    showAboutSiteDialog();
-  };
-
   const handleSignOutBtnClick = async () => {
     await api.signout();
     window.location.href = "/auth";
@@ -33,22 +28,17 @@ const UserBanner = () => {
             <span className="text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
           </div>
         }
+        disabled={user == undefined}
         actionsClassName="min-w-[128px] max-w-full"
         positionClassName="top-full mt-2"
         actions={
           <>
-            <button
-              className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
-              onClick={handleAboutBtnClick}
-            >
-              <Icon.Info className="w-5 h-auto mr-2 opacity-80" /> {t("common.about")}
-            </button>
             {user != undefined && (
               <button
                 className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
                 onClick={handleSignOutBtnClick}
               >
-                <Icon.LogOut className="w-5 h-auto mr-2 opacity-80" /> {t("common.sign-out")}
+                <Icon.LogOut className="w-5 h-auto mr-1 opacity-60" /> {t("common.sign-out")}
               </button>
             )}
           </>

web/src/components/kit/Dropdown.tsx

@@ -5,13 +5,14 @@ import Icon from "../Icon";
 interface Props {
   trigger?: ReactNode;
   actions?: ReactNode;
+  disabled?: boolean;
   className?: string;
   actionsClassName?: string;
   positionClassName?: string;
 }
 
 const Dropdown: React.FC<Props> = (props: Props) => {
-  const { trigger, actions, className, actionsClassName, positionClassName } = props;
+  const { trigger, actions, disabled, className, actionsClassName, positionClassName } = props;
   const [dropdownStatus, toggleDropdownStatus] = useToggle(false);
   const dropdownWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -29,11 +30,18 @@ const Dropdown: React.FC<Props> = (props: Props) => {
     }
   }, [dropdownStatus]);
 
+  const handleDropdownClick = () => {
+    if (disabled) {
+      return;
+    }
+    toggleDropdownStatus();
+  };
+
   return (
     <div
       ref={dropdownWrapperRef}
       className={`relative flex flex-col justify-start items-start select-none ${className ?? ""}`}
-      onClick={() => toggleDropdownStatus()}
+      onClick={handleDropdownClick}
     >
       {trigger ? (
         trigger