优化归档页、图标

README.md

@@ -4,6 +4,8 @@
 
 #### v0.29.1-2补丁
 1. 修改设置页面commit基础链接
+2. 优化图标样式
+3. 归档页面允许设置表情
 
 #### v0.29.1-2
 1. 置顶内容新增自动折叠；置顶效果及图标改为全局显示

web/src/components/MemoReactionListView/MemoReactionListView.tsx

@@ -1,6 +1,5 @@
 import { memo } from "react";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { State } from "@/types/proto/api/v1/common_pb";
 import type { Memo, Reaction } from "@/types/proto/api/v1/memo_service_pb";
 import { useReactionGroups } from "./hooks";
 import ReactionSelector from "./ReactionSelector";
@@ -15,7 +14,6 @@ const MemoReactionListView = (props: Props) => {
   const { memo: memoData, reactions } = props;
   const currentUser = useCurrentUser();
   const reactionGroup = useReactionGroups(reactions);
-  const readonly = memoData.state === State.ARCHIVED;
 
   if (reactions.length === 0) {
     return null;
@@ -26,7 +24,7 @@ const MemoReactionListView = (props: Props) => {
       {Array.from(reactionGroup).map(([reactionType, users]) => (
         <ReactionView key={`${reactionType.toString()} ${users.length}`} memo={memoData} reactionType={reactionType} users={users} />
       ))}
-      {!readonly && currentUser && <ReactionSelector memo={memoData} />}
+      {currentUser && <ReactionSelector memo={memoData} />}
     </div>
   );
 };

web/src/components/MemoReactionListView/ReactionView.tsx

@@ -1,7 +1,6 @@
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { cn } from "@/lib/utils";
-import { State } from "@/types/proto/api/v1/common_pb";
 import type { Memo } from "@/types/proto/api/v1/memo_service_pb";
 import type { User } from "@/types/proto/api/v1/user_service_pb";
 import { formatReactionTooltip, useReactionActions } from "./hooks";
@@ -16,16 +15,15 @@ const ReactionView = (props: Props) => {
   const { memo, reactionType, users } = props;
   const currentUser = useCurrentUser();
   const hasReaction = users.some((user) => currentUser && user.username === currentUser.username);
-  const readonly = memo.state === State.ARCHIVED;
 
   const { handleReactionClick } = useReactionActions({ memo });
 
   const handleClick = () => {
-    if (!currentUser || readonly) return;
+    if (!currentUser) return;
     handleReactionClick(reactionType);
   };
 
-  const isClickable = currentUser && !readonly;
+  const isClickable = Boolean(currentUser);
 
   return (
     <TooltipProvider>

web/src/components/MemoView/components/MemoHeader.tsx

@@ -1,7 +1,7 @@
-import { BookmarkIcon } from "lucide-react";
+import { ArchiveIcon, BookmarkIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { Link } from "react-router-dom";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import i18n from "@/i18n";
 import { cn } from "@/lib/utils";
@@ -12,7 +12,6 @@ import MemoActionMenu from "../../MemoActionMenu";
 import { ReactionSelector } from "../../MemoReactionListView";
 import UserAvatar from "../../UserAvatar";
 import VisibilityIcon from "../../VisibilityIcon";
-import { useMemoActions } from "../hooks";
 import { useMemoViewContext, useMemoViewDerived } from "../MemoViewContext";
 import type { MemoHeaderProps } from "../types";
 
@@ -28,8 +27,6 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
     navigateTo(`/${memo.name}`, { state: { from: parentPage } });
   }, [memo.name, parentPage, navigateTo]);
 
-  const { unpinMemo } = useMemoActions(memo);
-
   const timeValue = isArchived ? (
     memoDisplayTime?.toLocaleString(i18n.language)
   ) : (
@@ -58,7 +55,7 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
       </div>
 
       <div className="flex flex-row justify-end items-center select-none shrink-0 gap-2">
-        {currentUser && !isArchived && (
+        {currentUser && (
           <ReactionSelector
             className={cn("border-none w-auto h-auto", reactionSelectorOpen && "block!", "block sm:hidden sm:group-hover:block")}
             memo={memo}
@@ -66,6 +63,32 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
           />
         )}
 
+        {showPinned && memo.pinned && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex justify-center items-center rounded-md">
+                <BookmarkIcon className="w-4 h-auto text-muted-foreground" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("common.pinned")}</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+
+        {isArchived && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex justify-center items-center rounded-md">
+                <ArchiveIcon className="w-4 h-auto text-muted-foreground" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("common.archived")}</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+
         {showVisibility && (
           <Tooltip>
             <TooltipTrigger>
@@ -79,21 +102,6 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
           </Tooltip>
         )}
 
-        {showPinned && memo.pinned && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className="cursor-pointer">
-                  <BookmarkIcon className="w-4 h-auto text-primary" onClick={unpinMemo} />
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{t("common.unpin")}</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-
         <MemoActionMenu memo={memo} readonly={readonly} onEdit={openEditor} />
       </div>
     </div>

web/src/components/MemoView/hooks/index.ts

@@ -1,3 +1,2 @@
 export { useImagePreview } from "./useImagePreview";
-export { useMemoActions } from "./useMemoActions";
 export { useMemoHandlers } from "./useMemoHandlers";

web/src/components/MemoView/hooks/useMemoActions.ts

@@ -1,13 +0,0 @@
-import { useUpdateMemo } from "@/hooks/useMemoQueries";
-import type { Memo } from "@/types/proto/api/v1/memo_service_pb";
-
-export const useMemoActions = (memo: Memo) => {
-  const { mutateAsync: updateMemo } = useUpdateMemo();
-
-  const unpinMemo = async () => {
-    if (!memo.pinned) return;
-    await updateMemo({ update: { name: memo.name, pinned: false }, updateMask: ["pinned"] });
-  };
-
-  return { unpinMemo };
-};