chore: update memo header (#1497)

* chore: update memo header

* chore: update

web/package.json

@@ -10,6 +10,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/joy": "^5.0.0-alpha.67",
+    "@radix-ui/react-tooltip": "^1.0.5",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.27.2",
     "copy-to-clipboard": "^3.3.2",

web/src/components/CreateShortcutDialog.tsx

@@ -7,7 +7,7 @@ import { filterConsts, getDefaultFilter, relationConsts } from "@/helpers/filter
 import useLoading from "@/hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import Selector from "./base/Selector";
+import Selector from "./kit/Selector";
 import "@/less/create-shortcut-dialog.less";
 
 interface Props extends DialogProps {

web/src/components/Memo.tsx

@@ -5,6 +5,8 @@ import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useEditorStore, useFilterStore, useMemoStore, useUserStore } from "@/store/module";
+import Tooltip from "./kit/Tooltip";
+import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
@@ -97,6 +99,18 @@ const Memo: React.FC<Props> = (props: Props) => {
     }
   };
 
+  const handleDeleteMemoClick = async () => {
+    showCommonDialog({
+      title: "Delete memo",
+      content: "Are you sure to delete this memo?",
+      style: "warning",
+      dialogName: "delete-memo-dialog",
+      onConfirm: async () => {
+        await memoStore.deleteMemoById(memo.id);
+      },
+    });
+  };
+
   const handleGenerateMemoImageBtnClick = () => {
     showShareMemo(memo);
   };
@@ -189,7 +203,6 @@ const Memo: React.FC<Props> = (props: Props) => {
 
   return (
     <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`} ref={memoContainerRef}>
-      {memo.pinned && <div className="corner-container"></div>}
       <div className="memo-top-wrapper">
         <div className="status-text-container">
           <Link className="time-text" to={`/m/${memo.id}`} onClick={handleMemoCreatedTimeClick}>
@@ -200,35 +213,45 @@ const Memo: React.FC<Props> = (props: Props) => {
               @{memo.creatorName}
             </Link>
           )}
-          {memo.visibility !== "PRIVATE" && !isVisitorMode && (
-            <>
-              <span className="text-xs mx-1 font-mono text-gray-200 dark:text-gray-600">/</span>
-              <span className="text-sm text-gray-400 cursor-pointer" onClick={() => handleMemoVisibilityClick(memo.visibility)}>
-                {t(`memo.visibility.${memo.visibility.toLowerCase()}`)}
-              </span>
-            </>
-          )}
         </div>
         {!isVisitorMode && (
-          <div className="btns-container">
+          <div className="btns-container space-x-2">
+            {memo.visibility !== "PRIVATE" && (
+              <Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}`)} side="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" />}
             <span className="btn more-action-btn">
               <Icon.MoreHorizontal className="icon-img" />
             </span>
             <div className="more-action-btns-wrapper">
               <div className="more-action-btns-container">
-                <div className="btns-container">
-                  <div className="btn" onClick={handleTogglePinMemoBtnClick}>
-                    <Icon.Flag className={`icon-img ${memo.pinned ? "text-green-600" : ""}`} />
-                    <span className="tip-text">{memo.pinned ? t("common.unpin") : t("common.pin")}</span>
-                  </div>
-                  <div className="btn" onClick={handleEditMemoClick}>
-                    <Icon.Edit3 className="icon-img" />
-                    <span className="tip-text">{t("common.edit")}</span>
-                  </div>
-                  <div className="btn" onClick={handleGenerateMemoImageBtnClick}>
-                    <Icon.Share className="icon-img" />
-                    <span className="tip-text">{t("common.share")}</span>
+                <div className="w-full flex flex-row justify-between px-3 py-2 mb-1 border-b dark:border-zinc-700">
+                  <Tooltip title={memo.pinned ? t("common.unpin") : t("common.pin")} side="top">
+                    <div onClick={handleTogglePinMemoBtnClick}>
+                      {memo.pinned ? (
+                        <Icon.Bookmark className="w-4 h-auto cursor-pointer rounded text-green-600" />
+                      ) : (
+                        <Icon.BookmarkPlus className="w-4 h-auto cursor-pointer rounded dark:text-gray-400" />
+                      )}
                     </div>
+                  </Tooltip>
+                  <Tooltip title={t("common.edit")} side="top">
+                    <Icon.Edit3 className="w-4 h-auto cursor-pointer rounded dark:text-gray-400" onClick={handleEditMemoClick} />
+                  </Tooltip>
+                  <Tooltip title={t("common.share")} side="top">
+                    <Icon.Share
+                      className="w-4 h-auto cursor-pointer rounded dark:text-gray-400"
+                      onClick={handleGenerateMemoImageBtnClick}
+                    />
+                  </Tooltip>
                 </div>
                 <span className="btn" onClick={handleCopyLink}>
                   {t("memo.copy-link")}
@@ -239,9 +262,12 @@ const Memo: React.FC<Props> = (props: Props) => {
                 <span className="btn" onClick={handleShowEmbedMemoDialog}>
                   {t("memo.embed")}
                 </span>
-                <span className="btn archive-btn" onClick={handleArchiveMemoClick}>
+                <span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
                   {t("common.archive")}
                 </span>
+                <span className="btn text-red-600" onClick={handleDeleteMemoClick}>
+                  {t("common.delete")}
+                </span>
               </div>
             </div>
           </div>

web/src/components/MemoEditor.tsx

@@ -8,7 +8,7 @@ import { TAB_SPACE_WIDTH, UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "@/helper
 import { useEditorStore, useGlobalStore, useFilterStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "@/store/module";
 import * as storage from "@/helpers/storage";
 import Icon from "./Icon";
-import Selector from "./base/Selector";
+import Selector from "./kit/Selector";
 import Editor, { EditorRefActions } from "./Editor/Editor";
 import ResourceIcon from "./ResourceIcon";
 import showResourcesSelectorDialog from "./ResourcesSelectorDialog";

web/src/components/MemoResources.tsx

 import { absolutifyLink } from "@/helpers/utils";
 import { getResourceUrl } from "@/utils/resource";
-import SquareDiv from "./base/SquareDiv";
+import SquareDiv from "./kit/SquareDiv";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import MemoResource from "./MemoResource";
 import "@/less/memo-resources.less";

web/src/components/ResourceItemDropdown.tsx

@@ -4,7 +4,7 @@ import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useResourceStore } from "@/store/module";
 import { getResourceUrl } from "@/utils/resource";
-import Dropdown from "./base/Dropdown";
+import Dropdown from "./kit/Dropdown";
 import Icon from "./Icon";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import showChangeResourceFilenameDialog from "./ChangeResourceFilenameDialog";

web/src/components/Settings/MemberSection.tsx

@@ -3,7 +3,7 @@ import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "@/store/module";
 import * as api from "@/helpers/api";
-import Dropdown from "../base/Dropdown";
+import Dropdown from "../kit/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
 import "@/less/settings/member-section.less";

web/src/components/Settings/SSOSection.tsx

@@ -3,7 +3,7 @@ import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import * as api from "@/helpers/api";
 import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
-import Dropdown from "../base/Dropdown";
+import Dropdown from "../kit/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 
 const SSOSection = () => {

web/src/components/Settings/StorageSection.tsx

@@ -6,7 +6,7 @@ import { useGlobalStore } from "@/store/module";
 import * as api from "@/helpers/api";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
 import showUpdateLocalStorageDialog from "../UpdateLocalStorageDialog";
-import Dropdown from "../base/Dropdown";
+import Dropdown from "../kit/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 
 const StorageSection = () => {

web/src/components/UserBanner.tsx

 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "@/store/module";
-import Dropdown from "./base/Dropdown";
+import Dropdown from "./kit/Dropdown";
 import Icon from "./Icon";
 import UserAvatar from "./UserAvatar";
 import showAboutSiteDialog from "./AboutSiteDialog";

web/src/components/kit/Tooltip.tsx

+import * as TooltipUI from "@radix-ui/react-tooltip";
+
+type Side = "top" | "right" | "bottom" | "left";
+
+interface Props {
+  title: string;
+  side: Side;
+  children: React.ReactNode;
+}
+
+const Tooltip = (props: Props) => {
+  const { title, side, children } = props;
+
+  return (
+    <TooltipUI.Provider delayDuration={0} skipDelayDuration={0}>
+      <TooltipUI.Root>
+        <TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger>
+        <TooltipUI.Portal>
+          <TooltipUI.Content
+            className="bg-zinc-800 text-gray-300 dark:bg-black shadow text-sm p-1 rounded-md z-[99999]"
+            side={side}
+            sideOffset={6}
+          >
+            {title}
+          </TooltipUI.Content>
+        </TooltipUI.Portal>
+      </TooltipUI.Root>
+    </TooltipUI.Provider>
+  );
+};
+
+export default Tooltip;

web/src/less/memo.less

@@ -9,16 +9,6 @@
     @apply border-gray-200 dark:border-zinc-600;
   }
 
-  > .corner-container {
-    @apply absolute top-0 right-0 z-1;
-
-    &::after {
-      @apply absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600 rounded-tr-md;
-      content: "";
-      border-width: 6px;
-    }
-  }
-
   > .memo-top-wrapper {
     @apply flex flex-row justify-between items-center w-full h-6 mb-1;
 
@@ -91,10 +81,10 @@
       }
 
       .btn {
-        @apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200 dark:hover:bg-zinc-600;
+        @apply flex flex-row justify-center items-center leading-6 text-sm rounded hover:bg-gray-200 dark:hover:bg-zinc-600;
 
         &.more-action-btn {
-          @apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;
+          @apply w-auto opacity-60 cursor-default hover:bg-transparent;
 
           > .icon-img {
             @apply w-4 h-auto dark:text-gray-300;

web/src/pages/DailyReview.tsx

@@ -11,7 +11,7 @@ import useToggle from "@/hooks/useToggle";
 import toImage from "@/labs/html2image";
 import showPreviewImageDialog from "@/components/PreviewImageDialog";
 import Icon from "@/components/Icon";
-import DatePicker from "@/components/base/DatePicker";
+import DatePicker from "@/components/kit/DatePicker";
 import DailyMemo from "@/components/DailyMemo";
 
 const DailyReview = () => {

web/src/pages/ResourcesDashboard.tsx

@@ -9,7 +9,7 @@ import Icon from "@/components/Icon";
 import ResourceCard from "@/components/ResourceCard";
 import ResourceSearchBar from "@/components/ResourceSearchBar";
 import MobileHeader from "@/components/MobileHeader";
-import Dropdown from "@/components/base/Dropdown";
+import Dropdown from "@/components/kit/Dropdown";
 import ResourceItem from "@/components/ResourceItem";
 import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import showCreateResourceDialog from "@/components/CreateResourceDialog";