chore: add disable filter to renderer context

web/src/components/MemoContent/Tag.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { useContext } from "react";
 import { useFilterStore } from "@/store/module";
 import { RendererContext } from "./types";
@@ -11,7 +12,7 @@ const Tag: React.FC<Props> = ({ content }: Props) => {
   const filterStore = useFilterStore();
 
   const handleTagClick = () => {
-    if (context.readonly) {
+    if (context.disableFilter) {
       return;
     }
 
@@ -24,7 +25,13 @@ const Tag: React.FC<Props> = ({ content }: Props) => {
   };
 
   return (
-    <span className="cursor-pointer inline-block w-auto text-blue-600 dark:text-blue-400 hover:opacity-80" onClick={handleTagClick}>
+    <span
+      className={classNames(
+        "inline-block w-auto text-blue-600 dark:text-blue-400",
+        context.disableFilter ? "" : "cursor-pointer hover:opacity-80"
+      )}
+      onClick={handleTagClick}
+    >
       #{content}
     </span>
   );

web/src/components/MemoContent/index.tsx

@@ -9,6 +9,7 @@ interface Props {
   nodes: Node[];
   memoId?: number;
   readonly?: boolean;
+  disableFilter?: boolean;
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
 }
@@ -35,6 +36,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         nodes,
         memoId,
         readonly: !allowEdit,
+        disableFilter: props.disableFilter,
       }}
     >
       <div className={`w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300 ${className || ""}`}>

web/src/components/MemoContent/types/context.ts

@@ -5,6 +5,7 @@ interface Context {
   nodes: Node[];
   memoId?: number;
   readonly?: boolean;
+  disableFilter?: boolean;
 }
 
 export const RendererContext = createContext<Context>({

web/src/components/MemoView.tsx

@@ -32,7 +32,7 @@ interface Props {
   memo: Memo;
   showCreator?: boolean;
   showVisibility?: boolean;
-  showPinnedStyle?: boolean;
+  showPinned?: boolean;
   className?: string;
 }
 
@@ -166,7 +166,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
 
   return (
     <div
-      className={classNames("group memo-wrapper", "memos-" + memo.id, memo.pinned && props.showPinnedStyle ? "pinned" : "", className)}
+      className={classNames("group memo-wrapper", "memos-" + memo.id, memo.pinned && props.showPinned ? "pinned" : "", className)}
       ref={memoContainerRef}
     >
       <div className="memo-top-wrapper mb-1">
@@ -189,7 +189,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           <span className="text-sm text-gray-400 select-none" onClick={handleGotoMemoDetailPage}>
             {displayTime}
           </span>
-          {props.showPinnedStyle && memo.pinned && (
+          {props.showPinned && memo.pinned && (
             <>
               <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
               <Tooltip title={"Pinned"} placement="top">
@@ -217,10 +217,12 @@ const MemoView: React.FC<Props> = (props: Props) => {
               </span>
               <div className="more-action-btns-wrapper">
                 <div className="more-action-btns-container min-w-[6em]">
-                  <span className="btn" onClick={handleTogglePinMemoBtnClick}>
+                  {props.showPinned && (
-                    {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
+                    <span className="btn" onClick={handleTogglePinMemoBtnClick}>
-                    {memo.pinned ? t("common.unpin") : t("common.pin")}
+                      {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
-                  </span>
+                      {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")}

web/src/components/ShareMemoDialog.tsx

@@ -112,7 +112,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
           >
             <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span>
             <div className="w-full px-6 text-base pb-4">
-              <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={true} />
+              <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={true} disableFilter />
               <MemoResourceListView resourceList={memo.resources} />
             </div>
             <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6">

web/src/pages/Home.tsx

@@ -73,7 +73,7 @@ const Home = () => {
           <div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
             <MemoFilter className="px-2 pb-2" />
             {sortedMemos.map((memo) => (
-              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinnedStyle />
+              <MemoView key={`${memo.id}-${memo.updateTime}`} memo={memo} showVisibility showPinned />
             ))}
             {isRequesting ? (
               <div className="flex flex-col justify-start items-center w-full my-4">

web/src/pages/UserProfile.tsx

@@ -107,7 +107,7 @@ const UserProfile = () => {
               </div>
               <MemoFilter className="px-2 pb-3" />
               {sortedMemos.map((memo) => (
-                <MemoView key={memo.id} memo={memo} showVisibility showPinnedStyle />
+                <MemoView key={memo.id} memo={memo} showVisibility showPinned />
               ))}
               {isRequesting ? (
                 <div className="flex flex-col justify-start items-center w-full my-4">