chore: update some detail styles (#2168)

* chore: update some detail styls

* chore: update

README.md

@@ -10,6 +10,7 @@ Discuss in <a href="https://discord.gg/tfPJa4UmAv">Discord</a> / <a href="https:
 
 <p>
   <a href="https://github.com/usememos/memos/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/usememos/memos?logo=github" /></a>
+  <a href="https://hub.docker.com/r/neosmemo/memos"><img alt="Docker pull" src="https://img.shields.io/docker/pulls/neosmemo/memos.svg"/></a>
   <a href="https://discord.gg/tfPJa4UmAv"><img alt="Discord" src="https://img.shields.io/badge/discord-chat-5865f2?logo=discord&logoColor=f5f5f5" /></a>
 </p>
 

web/src/components/Dialog/CommonDialog.tsx

+import { Button } from "@mui/joy";
+import { DefaultColorPalette } from "@mui/joy/styles/types";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import { generateDialog } from "./BaseDialog";
 import "@/less/common-dialog.less";
 
-type DialogStyle = "info" | "warning";
-
 interface Props extends DialogProps {
   title: string;
   content: string;
-  style?: DialogStyle;
+  style?: DefaultColorPalette;
   closeBtnText?: string;
   confirmBtnText?: string;
   onClose?: () => void;
@@ -18,7 +18,7 @@ interface Props extends DialogProps {
 const defaultProps = {
   title: "",
   content: "",
-  style: "info",
+  style: "neutral",
   closeBtnText: "common.close",
   confirmBtnText: "common.confirm",
   onClose: () => null,
@@ -54,13 +54,13 @@ const CommonDialog: React.FC<Props> = (props: Props) => {
       </div>
       <div className="dialog-content-container">
         <p className="content-text">{content}</p>
-        <div className="btns-container">
-          <span className="btn cancel-btn" onClick={handleCloseBtnClick}>
+        <div className="mt-4 w-full flex flex-row justify-end items-center gap-2">
+          <Button color="neutral" variant="plain" onClick={handleCloseBtnClick}>
             {closeBtnText}
-          </span>
-          <span className={`btn confirm-btn ${style}`} onClick={handleConfirmBtnClick}>
+          </Button>
+          <Button color={style} onClick={handleConfirmBtnClick}>
             {confirmBtnText}
-          </span>
+          </Button>
         </div>
       </div>
     </>
@@ -71,7 +71,7 @@ interface CommonDialogProps {
   title: string;
   content: string;
   className?: string;
-  style?: DialogStyle;
+  style?: DefaultColorPalette;
   dialogName: string;
   closeBtnText?: string;
   confirmBtnText?: string;

web/src/components/Header.tsx

 import classNames from "classnames";
 import { useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
-import { useGlobalStore, useLayoutStore, useUserStore } from "@/store/module";
+import { useLayoutStore, useUserStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import { resolution } from "@/utils/layout";
 import Icon from "./Icon";
-import UpgradeVersionView from "./UpgradeVersionBanner";
 import UserBanner from "./UserBanner";
 
+interface NavLinkItem {
+  id: string;
+  path: string;
+  title: string;
+  icon: React.ReactNode;
+}
+
 const Header = () => {
   const t = useTranslate();
   const location = useLocation();
-  const globalStore = useGlobalStore();
   const userStore = useUserStore();
   const layoutStore = useLayoutStore();
   const showHeader = layoutStore.state.showHeader;
@@ -29,6 +34,53 @@ const Header = () => {
     handleWindowResize();
   }, [location]);
 
+  const homeNavLink: NavLinkItem = {
+    id: "header-home",
+    path: "/",
+    title: t("common.home"),
+    icon: <Icon.Home className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const dailyReviewNavLink: NavLinkItem = {
+    id: "header-daily-review",
+    path: "/review",
+    title: t("daily-review.title"),
+    icon: <Icon.Calendar className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const exploreNavLink: NavLinkItem = {
+    id: "header-explore",
+    path: "/explore",
+    title: t("common.explore"),
+    icon: <Icon.Hash className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const resourcesNavLink: NavLinkItem = {
+    id: "header-resources",
+    path: "/resources",
+    title: t("common.resources"),
+    icon: <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const archivedNavLink: NavLinkItem = {
+    id: "header-archived",
+    path: "/archived",
+    title: t("common.archived"),
+    icon: <Icon.Archive className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const settingNavLink: NavLinkItem = {
+    id: "header-setting",
+    path: "/setting",
+    title: t("common.settings"),
+    icon: <Icon.Settings className="mr-3 w-6 h-auto opacity-70" />,
+  };
+  const authNavLink: NavLinkItem = {
+    id: "header-auth",
+    path: "/auth",
+    title: t("common.sign-in"),
+    icon: <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" />,
+  };
+
+  const navLinks: NavLinkItem[] = !isVisitorMode
+    ? [homeNavLink, dailyReviewNavLink, exploreNavLink, resourcesNavLink, archivedNavLink, settingNavLink]
+    : [exploreNavLink, authNavLink];
+
   return (
     <div
       className={`fixed sm:sticky top-0 left-0 w-full sm:w-56 h-full shrink-0 pointer-events-none sm:pointer-events-auto z-10 ${
@@ -48,122 +100,23 @@ const Header = () => {
       >
         <UserBanner />
         <div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
-          {!isVisitorMode && (
-            <>
-              <NavLink
-                to="/"
-                id="header-home"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Home className="mr-3 w-6 h-auto opacity-70" /> {t("common.home")}
-                </>
-              </NavLink>
-              <NavLink
-                to="/review"
-                id="header-review"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Calendar className="mr-3 w-6 h-auto opacity-70" /> {t("daily-review.title")}
-                </>
-              </NavLink>
-              <NavLink
-                to="/resources"
-                id="header-resources"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" /> {t("common.resources")}
-                </>
-              </NavLink>
-            </>
-          )}
-          {!globalStore.getDisablePublicMemos() && (
-            <>
-              <NavLink
-                to="/explore"
-                id="header-explore"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Hash className="mr-3 w-6 h-auto opacity-70" /> {t("common.explore")}
-                </>
-              </NavLink>
-            </>
-          )}
-
-          {!isVisitorMode && (
-            <>
-              <NavLink
-                to="/archived"
-                id="header-archived"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Archive className="mr-3 w-6 h-auto opacity-70" /> {t("common.archived")}
-                </>
-              </NavLink>
-              <NavLink
-                to="/setting"
-                id="header-setting"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.Settings className="mr-3 w-6 h-auto opacity-70" /> {t("common.settings")}
-                </>
-              </NavLink>
-              <UpgradeVersionView />
-            </>
-          )}
-          {isVisitorMode && (
-            <>
-              <NavLink
-                to="/auth"
-                id="header-auth"
-                className={({ isActive }) =>
-                  classNames(
-                    "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                    isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
-                  )
-                }
-              >
-                <>
-                  <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" /> {t("common.sign-in")}
-                </>
-              </NavLink>
-            </>
-          )}
+          {navLinks.map((navLink) => (
+            <NavLink
+              key={navLink.id}
+              to={navLink.path}
+              id={navLink.id}
+              className={({ isActive }) =>
+                classNames(
+                  "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
+                  isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
+                )
+              }
+            >
+              <>
+                {navLink.icon} {navLink.title}
+              </>
+            </NavLink>
+          ))}
         </div>
       </header>
     </div>

web/src/components/Memo.tsx

-import { Divider, Tooltip } from "@mui/joy";
+import { Divider } from "@mui/joy";
 import { isEqual, uniqWith } from "lodash-es";
 import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -31,7 +31,7 @@ interface Props {
 }
 
 const Memo: React.FC<Props> = (props: Props) => {
-  const { memo, showCreator, showFull, showVisibility, showRelatedMemos, lazyRendering } = props;
+  const { memo, showCreator, showFull, showRelatedMemos, lazyRendering } = props;
   const { i18n } = useTranslation();
   const t = useTranslate();
   const filterStore = useFilterStore();
@@ -243,15 +243,6 @@ const Memo: React.FC<Props> = (props: Props) => {
     }
   };
 
-  const handleMemoVisibilityClick = (visibility: Visibility) => {
-    const currVisibilityQuery = filterStore.getState().visibility;
-    if (currVisibilityQuery === visibility) {
-      filterStore.setMemoVisibilityFilter(undefined);
-    } else {
-      filterStore.setMemoVisibilityFilter(visibility);
-    }
-  };
-
   return (
     <>
       <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>
@@ -271,17 +262,6 @@ const Memo: React.FC<Props> = (props: Props) => {
             </Link>
           </div>
           <div className="btns-container space-x-2">
-            {showVisibility && memo.visibility !== "PRIVATE" && (
-              <Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase() as Lowercase<typeof memo.visibility>}`)} placement="top">
-                <div onClick={() => handleMemoVisibilityClick(memo.visibility)}>
-                  {memo.visibility === "PUBLIC" ? (
-                    <Icon.Globe2 className="w-4 h-auto cursor-pointer rounded text-green-600" />
-                  ) : (
-                    <Icon.Users className="w-4 h-auto cursor-pointer rounded text-gray-500 dark:text-gray-400" />
-                  )}
-                </div>
-              </Tooltip>
-            )}
             {memo.pinned && <Icon.Bookmark className="w-4 h-auto rounded text-green-600" />}
             {!readonly && (
               <>

web/src/components/Settings/MemberSection.tsx

-import { Button, Input } from "@mui/joy";
+import { Button, Dropdown, Input, Menu, MenuButton } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import * as api from "@/helpers/api";
@@ -6,7 +6,7 @@ import { useUserStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
 import { showCommonDialog } from "../Dialog/CommonDialog";
-import Dropdown from "../kit/Dropdown";
+import Icon from "../Icon";
 
 interface State {
   createUserUsername: string;
@@ -163,8 +163,11 @@ const PreferencesSection = () => {
                     {currentUser?.id === user.id ? (
                       <span>{t("common.yourself")}</span>
                     ) : (
-                      <Dropdown
-                        actions={
+                      <Dropdown>
+                        <MenuButton size="sm">
+                          <Icon.MoreVertical className="w-4 h-auto" />
+                        </MenuButton>
+                        <Menu>
                           <>
                             <button
                               className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
@@ -196,8 +199,8 @@ const PreferencesSection = () => {
                               </>
                             )}
                           </>
-                        }
-                      />
+                        </Menu>
+                      </Dropdown>
                     )}
                   </td>
                 </tr>

web/src/components/Settings/MyAccountSection.tsx

@@ -53,7 +53,7 @@ const MyAccountSection = () => {
         <p className="title-text">Open ID</p>
         <div className="w-full flex flex-row justify-start items-center">
           <Input className="grow mr-2" value={user.openId} readOnly />
-          <Button className="shrink-0" color="warning" onClick={handleResetOpenIdBtnClick}>
+          <Button className="shrink-0" color="neutral" variant="outlined" onClick={handleResetOpenIdBtnClick}>
             <Icon.RefreshCw className="h-4 w-4" />
           </Button>
         </div>

web/src/components/UserBanner.tsx

@@ -38,7 +38,7 @@ const UserBanner = () => {
   return (
     <div className="flex flex-row justify-between items-center relative w-full h-auto px-2 flex-nowrap shrink-0">
       <Dropdown
-        className="w-full"
+        className="w-auto"
         trigger={
           <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
             <UserAvatar avatarUrl={user?.avatarUrl} />

web/src/helpers/datetime.ts

@@ -5,10 +5,6 @@ export function convertToMillis(localSetting: LocalSetting) {
   return hoursToMillis;
 }
 
-export function getNowTimeStamp(): number {
-  return Date.now();
-}
-
 export function getTimeStampByDate(t: Date | number | string): number {
   if (typeof t === "string") {
     t = t.replaceAll("-", "/");
@@ -113,7 +109,6 @@ export function getDateString(t?: Date | number | string, locale = i18n.language
  * - "x months ago"
  * - "last year"
  * - "x years ago"
- *
  */
 export const getRelativeTimeString = (time: number, locale = i18n.language, formatStyle: "long" | "short" | "narrow" = "long"): string => {
   const pastTimeMillis = Date.now() - time;

web/src/helpers/utils.ts

@@ -2,21 +2,6 @@ export const isNullorUndefined = (value: any) => {
   return value === null || value === undefined;
 };
 
-export function getOSVersion(): "Windows" | "MacOS" | "Linux" | "Unknown" {
-  const appVersion = navigator.userAgent;
-  let detectedOS: "Windows" | "MacOS" | "Linux" | "Unknown" = "Unknown";
-
-  if (appVersion.indexOf("Win") != -1) {
-    detectedOS = "Windows";
-  } else if (appVersion.indexOf("Mac") != -1) {
-    detectedOS = "MacOS";
-  } else if (appVersion.indexOf("Linux") != -1) {
-    detectedOS = "Linux";
-  }
-
-  return detectedOS;
-}
-
 export const getElementBounding = (element: HTMLElement, relativeEl?: HTMLElement) => {
   const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
   const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
@@ -67,14 +52,6 @@ export const getElementBounding = (element: HTMLElement, relativeEl?: HTMLElemen
   });
 };
 
-export const parseHTMLToRawText = (htmlStr: string): string => {
-  const tempEl = document.createElement("div");
-  tempEl.className = "memo-content-text";
-  tempEl.innerHTML = htmlStr;
-  const text = tempEl.innerText;
-  return text;
-};
-
 export function absolutifyLink(rel: string): string {
   const anchor = document.createElement("a");
   anchor.setAttribute("href", rel);
@@ -107,11 +84,6 @@ export const formatBytes = (bytes: number) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
 };
 
-export const getContentQueryParam = (): string | undefined => {
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get("content") ?? undefined;
-};
-
 export const clearContentQueryParam = () => {
   const urlParams = new URLSearchParams(window.location.search);
   urlParams.delete("content");

web/src/pages/Archived.tsx

@@ -4,7 +4,6 @@ import ArchivedMemo from "@/components/ArchivedMemo";
 import Empty from "@/components/Empty";
 import MemoFilter from "@/components/MemoFilter";
 import MobileHeader from "@/components/MobileHeader";
-import SearchBar from "@/components/SearchBar";
 import useLoading from "@/hooks/useLoading";
 import { useFilterStore, useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
@@ -40,9 +39,6 @@ const Archived = () => {
     <section className="w-full min-h-full flex flex-col md:flex-row justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <div className="archived-memo-page">
-        <div className="mb-2 mt-2 w-full">
-          <SearchBar />
-        </div>
         <MemoFilter />
         {loadingState.isLoading ? (
           <div className="tip-text-container">

web/src/pages/DailyReview.tsx

@@ -19,15 +19,13 @@ import { findNearestLanguageMatch, useTranslate } from "@/utils/i18n";
 const DailyReview = () => {
   const t = useTranslate();
   const memoStore = useMemoStore();
-  const memos = memoStore.state.memos;
-
   const userStore = useUserStore();
   const { localSetting } = userStore.state.user as User;
   const [currentDateStamp, setCurrentDateStamp] = useState(getDateStampByDate(getNormalizedDateString()));
   const [showDatePicker, toggleShowDatePicker] = useToggle(false);
   const memosElRef = useRef<HTMLDivElement>(null);
   const currentDate = new Date(currentDateStamp);
-  const dailyMemos = memos
+  const dailyMemos = memoStore.state.memos
     .filter((m) => {
       const displayTimestamp = getTimeStampByDate(m.displayTs);
       const currentDateStampWithOffset = currentDateStamp + convertToMillis(localSetting);

web/src/pages/Explore.tsx

@@ -5,17 +5,15 @@ import Empty from "@/components/Empty";
 import Memo from "@/components/Memo";
 import MemoFilter from "@/components/MemoFilter";
 import MobileHeader from "@/components/MobileHeader";
-import SearchBar from "@/components/SearchBar";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import useLoading from "@/hooks/useLoading";
 import { TAG_REG } from "@/labs/marked/parser";
-import { useFilterStore, useGlobalStore, useMemoStore } from "@/store/module";
+import { useFilterStore, useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 
 const Explore = () => {
   const t = useTranslate();
   const location = useLocation();
-  const globalStore = useGlobalStore();
   const filterStore = useFilterStore();
   const memoStore = useMemoStore();
   const filter = filterStore.state;
@@ -91,11 +89,6 @@ const Explore = () => {
   return (
     <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
-      {globalStore.isDev() && (
-        <div className="mb-4 mt-2 w-full">
-          <SearchBar />
-        </div>
-      )}
       {!loadingState.isLoading && (
         <main className="relative w-full h-auto flex flex-col justify-start items-start">
           <MemoFilter />