chore: tweak memo view

2025-06-05 22:09:59 +02:00 · 2024-02-08 22:52:49 +08:00
parent 4081a6f5ad
commit 60efd3ac32
7 changed files with 153 additions and 211 deletions
--- a/web/src/components/MemoActionMenu.tsx
+++ b/web/src/components/MemoActionMenu.tsx
@ -0,0 +1,128 @@
+import { Divider, Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
+import copy from "copy-to-clipboard";
+import toast from "react-hot-toast";
+import Icon from "@/components/Icon";
+import { useMemoStore } from "@/store/v1";
+import { RowStatus } from "@/types/proto/api/v2/common";
+import { Memo } from "@/types/proto/api/v2/memo_service";
+import { useTranslate } from "@/utils/i18n";
+import { showCommonDialog } from "./Dialog/CommonDialog";
+import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
+import showShareMemoDialog from "./ShareMemoDialog";
+
+interface Props {
+  memo: Memo;
+  showPinned?: boolean;
+}
+
+const MemoActionMenu = (props: Props) => {
+  const { memo, showPinned } = props;
+  const t = useTranslate();
+  const memoStore = useMemoStore();
+
+  const handleTogglePinMemoBtnClick = async () => {
+    try {
+      if (memo.pinned) {
+        await memoStore.updateMemo(
+          {
+            id: memo.id,
+            pinned: false,
+          },
+          ["pinned"],
+        );
+      } else {
+        await memoStore.updateMemo(
+          {
+            id: memo.id,
+            pinned: true,
+          },
+          ["pinned"],
+        );
+      }
+    } catch (error) {
+      // do nth
+    }
+  };
+
+  const handleEditMemoClick = () => {
+    showMemoEditorDialog({
+      memoId: memo.id,
+      cacheKey: `${memo.id}-${memo.updateTime}`,
+    });
+  };
+
+  const handleArchiveMemoClick = async () => {
+    try {
+      await memoStore.updateMemo(
+        {
+          id: memo.id,
+          rowStatus: RowStatus.ARCHIVED,
+        },
+        ["row_status"],
+      );
+    } catch (error: any) {
+      console.error(error);
+      toast.error(error.response.data.message);
+    }
+  };
+
+  const handleDeleteMemoClick = async () => {
+    showCommonDialog({
+      title: t("memo.delete-memo"),
+      content: t("memo.delete-confirm"),
+      style: "danger",
+      dialogName: "delete-memo-dialog",
+      onConfirm: async () => {
+        await memoStore.deleteMemo(memo.id);
+      },
+    });
+  };
+
+  const handleCopyMemoId = () => {
+    copy(memo.name);
+    toast.success("Copied to clipboard!");
+  };
+
+  return (
+    <Dropdown>
+      <MenuButton slots={{ root: "div" }}>
+        <span className="h-7 w-7 flex justify-center items-center rounded-full hover:opacity-70">
+          <Icon.MoreHorizontal className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
+        </span>
+      </MenuButton>
+      <Menu className="text-sm" size="sm" placement="bottom-end">
+        {showPinned && (
+          <MenuItem onClick={handleTogglePinMemoBtnClick}>
+            {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto" /> : <Icon.BookmarkPlus className="w-4 h-auto" />}
+            {memo.pinned ? t("common.unpin") : t("common.pin")}
+          </MenuItem>
+        )}
+        <MenuItem onClick={handleEditMemoClick}>
+          <Icon.Edit3 className="w-4 h-auto" />
+          {t("common.edit")}
+        </MenuItem>
+        <MenuItem onClick={() => showShareMemoDialog(memo)}>
+          <Icon.Share className="w-4 h-auto" />
+          {t("common.share")}
+        </MenuItem>
+        <Divider className="!my-1" />
+        <MenuItem color="warning" onClick={handleArchiveMemoClick}>
+          <Icon.Archive className="w-4 h-auto" />
+          {t("common.archive")}
+        </MenuItem>
+        <MenuItem color="danger" onClick={handleDeleteMemoClick}>
+          <Icon.Trash className="w-4 h-auto" />
+          {t("common.delete")}
+        </MenuItem>
+        <Divider className="!my-1" />
+        <div className="-mt-0.5 pl-2 pr-2 text-xs text-gray-400">
+          <div className="font-mono max-w-20 cursor-pointer truncate" onClick={handleCopyMemoId}>
+            ID: {memo.name}
+          </div>
+        </div>
+      </Menu>
+    </Dropdown>
+  );
+};
+
+export default MemoActionMenu;
--- a/web/src/components/MemoReactionListView.tsx
+++ b/web/src/components/MemoReactionListView.tsx
@ -33,12 +33,12 @@ const MemoReactionListView = (props: Props) => {
  }, [reactions]);

  return (
-    (currentUser || reactionGroup.size > 0) && (
+    reactions.length > 0 && (
      <div className="w-full mt-2 flex flex-row justify-start items-start flex-wrap gap-1 select-none">
-        {currentUser && <ReactionSelector memo={memo} />}
        {Array.from(reactionGroup).map(([reactionType, users]) => {
          return <ReactionView key={`${reactionType.toString()} ${users.length}`} memo={memo} reactionType={reactionType} users={users} />;
        })}
+        {currentUser && <ReactionSelector memo={memo} />}
      </div>
    )
  );
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@ -1,33 +1,27 @@
-import { Divider, Tooltip } from "@mui/joy";
+import { Tooltip } from "@mui/joy";
 import classNames from "classnames";
-import copy from "copy-to-clipboard";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { UNKNOWN_ID } from "@/helpers/consts";
 import { getRelativeTimeString, getTimeStampByDate } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
-import { useUserStore, extractUsernameFromName, useMemoStore } from "@/store/v1";
-import { RowStatus } from "@/types/proto/api/v2/common";
+import { useUserStore, extractUsernameFromName } from "@/store/v1";
 import { MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
 import { Memo, Visibility } from "@/types/proto/api/v2/memo_service";
 import { useTranslate } from "@/utils/i18n";
 import { convertVisibilityToString } from "@/utils/memo";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
-import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
+import MemoActionMenu from "./MemoActionMenu";
 import MemoContent from "./MemoContent";
-import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
 import MemoReactionistView from "./MemoReactionListView";
 import MemoRelationListView from "./MemoRelationListView";
 import MemoResourceListView from "./MemoResourceListView";
 import showPreviewImageDialog from "./PreviewImageDialog";
-import showShareMemoDialog from "./ShareMemoDialog";
+import ReactionSelector from "./ReactionSelector";
 import UserAvatar from "./UserAvatar";
 import VisibilityIcon from "./VisibilityIcon";
-import "@/less/memo.less";

 interface Props {
  memo: Memo;
@ -42,7 +36,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
  const t = useTranslate();
  const navigateTo = useNavigateTo();
  const { i18n } = useTranslation();
-  const memoStore = useMemoStore();
+  const currentUser = useCurrentUser();
  const userStore = useUserStore();
  const user = useCurrentUser();
  const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(getTimeStampByDate(memo.displayTime)));
@ -80,81 +74,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
    }
  };

-  const handleTogglePinMemoBtnClick = async () => {
-    try {
-      if (memo.pinned) {
-        await memoStore.updateMemo(
-          {
-            id: memo.id,
-            pinned: false,
-          },
-          ["pinned"],
-        );
-      } else {
-        await memoStore.updateMemo(
-          {
-            id: memo.id,
-            pinned: true,
-          },
-          ["pinned"],
-        );
-      }
-    } catch (error) {
-      // do nth
-    }
-  };
-
-  const handleEditMemoClick = () => {
-    showMemoEditorDialog({
-      memoId: memo.id,
-      cacheKey: `${memo.id}-${memo.updateTime}`,
-    });
-  };
-
-  const handleMarkMemoClick = () => {
-    showMemoEditorDialog({
-      relationList: [
-        {
-          memoId: UNKNOWN_ID,
-          relatedMemoId: memo.id,
-          type: MemoRelation_Type.REFERENCE,
-        },
-      ],
-    });
-  };
-
-  const handleArchiveMemoClick = async () => {
-    try {
-      await memoStore.updateMemo(
-        {
-          id: memo.id,
-          rowStatus: RowStatus.ARCHIVED,
-        },
-        ["row_status"],
-      );
-    } catch (error: any) {
-      console.error(error);
-      toast.error(error.response.data.message);
-    }
-  };
-
-  const handleDeleteMemoClick = async () => {
-    showCommonDialog({
-      title: t("memo.delete-memo"),
-      content: t("memo.delete-confirm"),
-      style: "danger",
-      dialogName: "delete-memo-dialog",
-      onConfirm: async () => {
-        await memoStore.deleteMemo(memo.id);
-      },
-    });
-  };
-
-  const handleCopyMemoId = () => {
-    copy(memo.name);
-    toast.success("Copied to clipboard!");
-  };
-
  const handleMemoContentClick = useCallback(async (e: React.MouseEvent) => {
    const targetEl = e.target as HTMLElement;

@ -168,11 +87,16 @@ const MemoView: React.FC<Props> = (props: Props) => {

  return (
    <div
-      className={classNames("group memo-wrapper", "memos-" + memo.id, memo.pinned && props.showPinned ? "pinned" : "", className)}
+      className={classNames(
+        "group relative flex flex-col justify-start items-start w-full px-4 pt-2 pb-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
+        "memos-" + memo.id,
+        memo.pinned && props.showPinned && "border-gray-200 border dark:border-zinc-700",
+        className,
+      )}
      ref={memoContainerRef}
    >
-      <div className="memo-top-wrapper mb-1">
-        <div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
+      <div className="w-full flex flex-row justify-between items-center mb-1">
+        <div className="w-auto flex flex-row justify-start items-center mr-1">
          {props.showCreator && creator && (
            <>
              <Link to={`/u/${encodeURIComponent(extractUsernameFromName(memo.creator))}`} unstable_viewTransition>
@ -200,62 +124,20 @@ const MemoView: React.FC<Props> = (props: Props) => {
            </>
          )}
        </div>
-        <div className="btns-container space-x-2">
-          <div className="w-auto hidden group-hover:flex flex-row justify-between items-center">
+        <div className="flex flex-row justify-end items-center">
+          <div className="w-auto hidden group-hover:flex flex-row justify-between items-center gap-1">
            {props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
              <>
                <Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility).toLowerCase()}` as any)} placement="top">
-                  <span>
+                  <span className="h-7 w-7 flex justify-center items-center rounded-full border dark:border-zinc-700 hover:opacity-70">
                    <VisibilityIcon visibility={memo.visibility} />
                  </span>
                </Tooltip>
              </>
            )}
+            {currentUser && memo.reactions.length === 0 && <ReactionSelector memo={memo} />}
          </div>
-          {!readonly && (
-            <>
-              <span className="btn more-action-btn">
-                <Icon.MoreVertical className="icon-img" />
-              </span>
-              <div className="more-action-btns-wrapper">
-                <div className="more-action-btns-container min-w-[6em]">
-                  {props.showPinned && (
-                    <span className="btn" onClick={handleTogglePinMemoBtnClick}>
-                      {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
-                      {memo.pinned ? t("common.unpin") : t("common.pin")}
-                    </span>
-                  )}
-                  <span className="btn" onClick={handleEditMemoClick}>
-                    <Icon.Edit3 className="w-4 h-auto mr-2" />
-                    {t("common.edit")}
-                  </span>
-                  <span className="btn" onClick={handleMarkMemoClick}>
-                    <Icon.Link className="w-4 h-auto mr-2" />
-                    {t("common.mark")}
-                  </span>
-                  <span className="btn" onClick={() => showShareMemoDialog(memo)}>
-                    <Icon.Share className="w-4 h-auto mr-2" />
-                    {t("common.share")}
-                  </span>
-                  <Divider className="!my-1" />
-                  <span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
-                    <Icon.Archive className="w-4 h-auto mr-2" />
-                    {t("common.archive")}
-                  </span>
-                  <span className="btn text-red-600" onClick={handleDeleteMemoClick}>
-                    <Icon.Trash className="w-4 h-auto mr-2" />
-                    {t("common.delete")}
-                  </span>
-                  <Divider className="!my-1" />
-                  <div className="w-full pl-3 pr-2 text-xs text-gray-400">
-                    <div className="font-mono max-w-20 cursor-pointer truncate" onClick={handleCopyMemoId}>
-                      ID: {memo.name}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
+          {!readonly && <MemoActionMenu memo={memo} showPinned={props.showPinned} />}
        </div>
      </div>
      <MemoContent
--- a/web/src/components/ReactionSelector.tsx
+++ b/web/src/components/ReactionSelector.tsx
@ -56,9 +56,9 @@ const ReactionSelector = (props: Props) => {

  return (
    <Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}>
-      <MenuButton slots={{ root: "div" }} slotProps={{}}>
-        <span className="h-7 w-7 flex justify-center items-center rounded-full border dark:border-zinc-700 hover:opacity-80">
-          <Icon.Smile className="w-4 h-4 mx-auto dark:text-gray-400" />
+      <MenuButton slots={{ root: "div" }}>
+        <span className="h-7 w-7 flex justify-center items-center rounded-full border dark:border-zinc-700 hover:opacity-70">
+          <Icon.SmilePlus className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
        </span>
      </MenuButton>
      <Menu className="relative text-sm" component="div" size="sm" placement="bottom-start">
--- a/web/src/components/ReactionView.tsx
+++ b/web/src/components/ReactionView.tsx
@ -96,7 +96,7 @@ const ReactionView = (props: Props) => {
        className={classNames(
          "h-7 border px-2 py-0.5 rounded-full font-memo flex flex-row justify-center items-center gap-1 dark:border-zinc-700",
          currenUser && "cursor-pointer",
-          hasReaction && "bg-blue-50 border-blue-100 dark:bg-zinc-900",
+          hasReaction && "bg-blue-100 border-blue-200 dark:bg-zinc-900",
        )}
        onClick={handleReactionClick}
      >
--- a/web/src/components/VisibilityIcon.tsx
+++ b/web/src/components/VisibilityIcon.tsx
@ -21,7 +21,7 @@ const VisibilityIcon = (props: Props) => {
    return null;
  }

-  return <VIcon className={classNames("w-4 h-auto text-gray-400")} />;
+  return <VIcon className={classNames("w-4 h-auto text-gray-500 dark:text-gray-400")} />;
 };

 export default VisibilityIcon;
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@ -1,68 +0,0 @@
-.memo-wrapper {
-  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;
-
-  &.pinned {
-    @apply border-gray-200 border dark:border-zinc-700;
-  }
-
-  > .memo-top-wrapper {
-    @apply flex flex-row justify-between items-center w-full h-6;
-
-    > .btns-container {
-      @apply flex flex-row justify-end items-center relative shrink-0;
-
-      > .more-action-btns-wrapper {
-        @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
-
-        > .more-action-btns-container {
-          @apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
-          box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
-
-          > .btn {
-            @apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer select-none dark:text-gray-300;
-
-            &.archive-btn {
-              @apply text-orange-600;
-            }
-          }
-        }
-      }
-
-      .btn {
-        @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-auto opacity-50 cursor-default hover:bg-transparent;
-
-          > .icon-img {
-            @apply w-4 h-auto dark:text-gray-300;
-          }
-
-          &:hover {
-            & + .more-action-btns-wrapper {
-              display: flex;
-            }
-          }
-        }
-      }
-
-      .final-confirm {
-        color: red;
-      }
-    }
-  }
-
-  > .memo-content-wrapper {
-    @apply mt-1;
-
-    > .memo-content-text {
-      .tag-span {
-        @apply cursor-pointer hover:opacity-80;
-      }
-
-      .img {
-        @apply max-w-xs;
-      }
-    }
-  }
-}