chore: remove component v1 suffix

web/src/components/MemoContent/index.tsx

@@ -11,7 +11,7 @@ interface Props {
   onMemoContentClick?: (e: React.MouseEvent) => void;
 }
 
-const MemoContentV1: React.FC<Props> = (props: Props) => {
+const MemoContent: React.FC<Props> = (props: Props) => {
   const { className, content, onMemoContentClick } = props;
   const [nodes, setNodes] = useState<Node[]>(props.nodes ?? []);
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
@@ -51,4 +51,4 @@ const MemoContentV1: React.FC<Props> = (props: Props) => {
   );
 };
 
-export default MemoContentV1;
+export default MemoContent;

web/src/components/MemoEditor/index.tsx

@@ -17,7 +17,7 @@ import { convertVisibilityFromString, convertVisibilityToString } from "@/utils/
 import showCreateMemoRelationDialog from "../CreateMemoRelationDialog";
 import showCreateResourceDialog from "../CreateResourceDialog";
 import Icon from "../Icon";
-import VisibilityIconV1 from "../VisibilityIconV1";
+import VisibilityIcon from "../VisibilityIcon";
 import TagSelector from "./ActionButton/TagSelector";
 import Editor, { EditorRefActions } from "./Editor";
 import RelationListView from "./RelationListView";
@@ -427,7 +427,7 @@ const MemoEditor = (props: Props) => {
           <Select
             variant="plain"
             value={state.memoVisibility}
-            startDecorator={<VisibilityIconV1 visibility={state.memoVisibility} />}
+            startDecorator={<VisibilityIcon visibility={state.memoVisibility} />}
             onChange={(_, visibility) => {
               if (visibility) {
                 handleMemoVisibilityChange(visibility);

web/src/components/MemoRelationListView.tsx

@@ -11,7 +11,7 @@ interface Props {
   relationList: MemoRelation[];
 }
 
-const MemoRelationListViewV1 = (props: Props) => {
+const MemoRelationListView = (props: Props) => {
   const { memo, relationList } = props;
   const memoStore = useMemoV1Store();
   const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
@@ -80,4 +80,4 @@ const MemoRelationListViewV1 = (props: Props) => {
   );
 };
 
-export default MemoRelationListViewV1;
+export default MemoRelationListView;

web/src/components/MemoView.tsx

@@ -18,14 +18,14 @@ import { convertVisibilityToString } from "@/utils/memo";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
-import MemoContentV1 from "./MemoContentV1";
+import MemoContent from "./MemoContent";
-import showMemoEditorDialog from "./MemoEditorV1/MemoEditorDialog";
+import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
-import MemoRelationListViewV1 from "./MemoRelationListViewV1";
+import MemoRelationListView from "./MemoRelationListView";
 import MemoResourceListView from "./MemoResourceListView";
 import showPreviewImageDialog from "./PreviewImageDialog";
-import showShareMemoDialogV1 from "./ShareMemoDialogV1";
+import showShareMemoDialog from "./ShareMemoDialog";
 import UserAvatar from "./UserAvatar";
-import VisibilityIconV1 from "./VisibilityIconV1";
+import VisibilityIcon from "./VisibilityIcon";
 import "@/less/memo.less";
 
 interface Props {
@@ -37,7 +37,7 @@ interface Props {
   lazyRendering?: boolean;
 }
 
-const MemoViewV1: React.FC<Props> = (props: Props) => {
+const MemoView: React.FC<Props> = (props: Props) => {
   const { memo, lazyRendering } = props;
   const t = useTranslate();
   const navigateTo = useNavigateTo();
@@ -263,7 +263,7 @@ const MemoViewV1: React.FC<Props> = (props: Props) => {
                 <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
                 <Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility)}` as any)} placement="top">
                   <span>
-                    <VisibilityIconV1 visibility={memo.visibility} />
+                    <VisibilityIcon visibility={memo.visibility} />
                   </span>
                 </Tooltip>
               </>
@@ -294,7 +294,7 @@ const MemoViewV1: React.FC<Props> = (props: Props) => {
                       {t("common.mark")}
                     </span>
                   )}
-                  <span className="btn" onClick={() => showShareMemoDialogV1(memo)}>
+                  <span className="btn" onClick={() => showShareMemoDialog(memo)}>
                     <Icon.Share className="w-4 h-auto mr-2" />
                     {t("common.share")}
                   </span>
@@ -325,11 +325,11 @@ const MemoViewV1: React.FC<Props> = (props: Props) => {
           </Link>
         </div>
       )}
-      <MemoContentV1 content={memo.content} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
+      <MemoContent content={memo.content} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
       <MemoResourceListView resourceList={resources} />
-      <MemoRelationListViewV1 memo={memo} relationList={referenceRelations} />
+      <MemoRelationListView memo={memo} relationList={referenceRelations} />
     </div>
   );
 };
 
-export default memo(MemoViewV1);
+export default memo(MemoView);

web/src/components/Settings/PreferencesSection.tsx

@@ -2,11 +2,12 @@ import { Button, Divider, Input, Option, Select } from "@mui/joy";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
-import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
 import { useGlobalStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
+import { Visibility } from "@/types/proto/api/v2/memo_service";
 import { UserSetting } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
+import { convertVisibilityFromString, convertVisibilityToString } from "@/utils/memo";
 import AppearanceSelect from "../AppearanceSelect";
 import Icon from "../Icon";
 import LocaleSelect from "../LocaleSelect";
@@ -87,18 +88,20 @@ const PreferencesSection = () => {
         <Select
           className="!min-w-fit"
           value={setting.memoVisibility}
-          startDecorator={<VisibilityIcon visibility={setting.memoVisibility as Visibility} />}
+          startDecorator={<VisibilityIcon visibility={convertVisibilityFromString(setting.memoVisibility)} />}
           onChange={(_, visibility) => {
             if (visibility) {
               handleDefaultMemoVisibilityChanged(visibility);
             }
           }}
         >
-          {VISIBILITY_SELECTOR_ITEMS.map((item) => (
+          {[Visibility.PRIVATE, Visibility.PROTECTED, Visibility.PUBLIC]
-            <Option key={item} value={item} className="whitespace-nowrap">
+            .map((v) => convertVisibilityToString(v))
-              {t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
+            .map((item) => (
-            </Option>
+              <Option key={item} value={item} className="whitespace-nowrap">
-          ))}
+                {t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
+              </Option>
+            ))}
         </Select>
       </div>
 

web/src/components/ShareMemoDialog.tsx

@@ -11,7 +11,7 @@ import { Resource } from "@/types/proto/api/v2/resource_service";
 import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
-import MemoContentV1 from "./MemoContentV1";
+import MemoContent from "./MemoContent";
 import MemoResourceListView from "./MemoResourceListView";
 import UserAvatar from "./UserAvatar";
 import "@/less/share-memo-dialog.less";
@@ -20,7 +20,7 @@ interface Props extends DialogProps {
   memo: Memo;
 }
 
-const ShareMemoDialogV1: React.FC<Props> = (props: Props) => {
+const ShareMemoDialog: React.FC<Props> = (props: Props) => {
   const { memo, destroy } = props;
   const t = useTranslate();
   const userV1Store = useUserV1Store();
@@ -104,7 +104,7 @@ const ShareMemoDialogV1: React.FC<Props> = (props: Props) => {
           >
             <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getTimeString(memo.displayTime)}</span>
             <div className="w-full px-6 text-base pb-4">
-              <MemoContentV1 content={memo.content} />
+              <MemoContent content={memo.content} />
               <MemoResourceListView resourceList={resources} />
             </div>
             <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
@@ -125,13 +125,13 @@ const ShareMemoDialogV1: React.FC<Props> = (props: Props) => {
   );
 };
 
-export default function showShareMemoDialogV1(memo: Memo): void {
+export default function showShareMemoDialog(memo: Memo): void {
   generateDialog(
     {
-      className: "share-memo-dialog-v1",
+      className: "share-memo-dialog",
-      dialogName: "share-memo-dialog-v1",
+      dialogName: "share-memo-dialog",
     },
-    ShareMemoDialogV1,
+    ShareMemoDialog,
     { memo }
   );
 }

web/src/components/TimelineMemo.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
 import Icon from "@/components/Icon";
-import MemoContentV1 from "@/components/MemoContentV1";
+import MemoContent from "@/components/MemoContent";
 import MemoResourceListView from "@/components/MemoResourceListView";
 import { getTimeString } from "@/helpers/datetime";
 import { useMemoV1Store } from "@/store/v1";
 import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import { Resource } from "@/types/proto/api/v2/resource_service";
-import MemoRelationListViewV1 from "./MemoRelationListViewV1";
+import MemoRelationListView from "./MemoRelationListView";
 
 interface Props {
   memo: Memo;
@@ -35,9 +35,9 @@ const TimelineMemo = (props: Props) => {
         <Icon.Dot className="w-5 h-auto opacity-60" />
         <span className="opacity-60">#{memo.id}</span>
       </div>
-      <MemoContentV1 content={memo.content} nodes={memo.nodes} />
+      <MemoContent content={memo.content} nodes={memo.nodes} />
       <MemoResourceListView resourceList={resources} />
-      <MemoRelationListViewV1 memo={memo} relationList={relations} />
+      <MemoRelationListView memo={memo} relationList={relations} />
     </div>
   );
 };

web/src/components/VisibilityIcon.tsx

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+import { Visibility } from "@/types/proto/api/v2/memo_service";
 import Icon from "./Icon";
 
 interface Props {
@@ -9,11 +10,11 @@ const VisibilityIcon = (props: Props) => {
   const { visibility } = props;
 
   let VIcon = null;
-  if (visibility === "PRIVATE") {
+  if (visibility === Visibility.PRIVATE) {
     VIcon = Icon.Lock;
-  } else if (visibility === "PROTECTED") {
+  } else if (visibility === Visibility.PROTECTED) {
     VIcon = Icon.Users;
-  } else if (visibility === "PUBLIC") {
+  } else if (visibility === Visibility.PUBLIC) {
     VIcon = Icon.Globe2;
   }
   if (!VIcon) {

web/src/components/VisibilityIconV1.tsx

@@ -1,27 +0,0 @@
-import classNames from "classnames";
-import { Visibility } from "@/types/proto/api/v2/memo_service";
-import Icon from "./Icon";
-
-interface Props {
-  visibility: Visibility;
-}
-
-const VisibilityIcon = (props: Props) => {
-  const { visibility } = props;
-
-  let VIcon = null;
-  if (visibility === Visibility.PRIVATE) {
-    VIcon = Icon.Lock;
-  } else if (visibility === Visibility.PROTECTED) {
-    VIcon = Icon.Users;
-  } else if (visibility === Visibility.PUBLIC) {
-    VIcon = Icon.Globe2;
-  }
-  if (!VIcon) {
-    return null;
-  }
-
-  return <VIcon className={classNames("w-4 h-auto text-gray-400")} />;
-};
-
-export default VisibilityIcon;

web/src/helpers/consts.ts

@@ -7,8 +7,6 @@ export const ANIMATION_DURATION = 200;
 // millisecond in a day
 export const DAILY_TIMESTAMP = 3600 * 24 * 1000;
 
-export const VISIBILITY_SELECTOR_ITEMS = ["PRIVATE", "PROTECTED", "PUBLIC"] as const;
-
 // space width for tab action in editor
 export const TAB_SPACE_WIDTH = 2;
 

web/src/pages/Archived.tsx

@@ -4,7 +4,7 @@ import toast from "react-hot-toast";
 import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
-import MemoContentV1 from "@/components/MemoContentV1";
+import MemoContent from "@/components/MemoContent";
 import MobileHeader from "@/components/MobileHeader";
 import { memoServiceClient } from "@/grpcweb";
 import { getDateTimeString } from "@/helpers/datetime";
@@ -104,7 +104,7 @@ const Archived = () => {
                     </Tooltip>
                   </div>
                 </div>
-                <MemoContentV1 content={memo.content} nodes={memo.nodes} />
+                <MemoContent content={memo.content} nodes={memo.nodes} />
               </div>
             ))}
           </div>

web/src/pages/Explore.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import Empty from "@/components/Empty";
 import MemoFilter from "@/components/MemoFilter";
-import MemoViewV1 from "@/components/MemoViewV1";
+import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import { getTimeStampByDate } from "@/helpers/datetime";
@@ -56,7 +56,7 @@ const Explore = () => {
       <div className="relative w-full h-auto flex flex-col justify-start items-start px-4 sm:px-6">
         <MemoFilter />
         {sortedMemos.map((memo) => (
-          <MemoViewV1 key={memo.id} memo={memo} lazyRendering showCreator showParent />
+          <MemoView key={memo.id} memo={memo} lazyRendering showCreator showParent />
         ))}
 
         {isRequesting && (

web/src/pages/Home.tsx

@@ -2,9 +2,9 @@ import { useEffect, useRef, useState } from "react";
 import Empty from "@/components/Empty";
 import HomeSidebar from "@/components/HomeSidebar";
 import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
-import MemoEditorV1 from "@/components/MemoEditorV1";
+import MemoEditor from "@/components/MemoEditor";
 import MemoFilter from "@/components/MemoFilter";
-import MemoViewV1 from "@/components/MemoViewV1";
+import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import { getTimeStampByDate } from "@/helpers/datetime";
@@ -67,11 +67,11 @@ const Home = () => {
       <div className="w-full sm:pt-3 md:pt-6">
         <MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
         <div className="w-full px-4 sm:px-6 md:pr-2">
-          <MemoEditorV1 className="mb-2" cacheKey="home-memo-editor" onConfirm={handleMemoCreated} />
+          <MemoEditor className="mb-2" cacheKey="home-memo-editor" onConfirm={handleMemoCreated} />
           <div className="flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll pb-28 hide-scrollbar">
             <MemoFilter />
             {sortedMemos.map((memo) => (
-              <MemoViewV1 key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
+              <MemoView key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
             ))}
             {isRequesting && (
               <div className="flex flex-col justify-start items-center w-full my-8">

web/src/pages/MemoDetail.tsx

@@ -4,16 +4,16 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link, useParams } from "react-router-dom";
 import Icon from "@/components/Icon";
-import MemoContentV1 from "@/components/MemoContentV1";
+import MemoContent from "@/components/MemoContent";
-import MemoEditorV1 from "@/components/MemoEditorV1";
+import MemoEditor from "@/components/MemoEditor";
-import showMemoEditorDialog from "@/components/MemoEditorV1/MemoEditorDialog";
+import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog";
-import MemoRelationListViewV1 from "@/components/MemoRelationListViewV1";
+import MemoRelationListView from "@/components/MemoRelationListView";
 import MemoResourceListView from "@/components/MemoResourceListView";
-import MemoViewV1 from "@/components/MemoViewV1";
+import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
-import showShareMemoDialogV1 from "@/components/ShareMemoDialogV1";
+import showShareMemoDialog from "@/components/ShareMemoDialog";
 import UserAvatar from "@/components/UserAvatar";
-import VisibilityIconV1 from "@/components/VisibilityIconV1";
+import VisibilityIcon from "@/components/VisibilityIcon";
 import { UNKNOWN_ID } from "@/helpers/consts";
 import { getDateTimeString } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
@@ -141,9 +141,9 @@ const MemoDetail = () => {
           <div className="w-full mb-2 flex flex-row justify-start items-center">
             <span className="text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</span>
           </div>
-          <MemoContentV1 content={memo.content} />
+          <MemoContent content={memo.content} />
           <MemoResourceListView resourceList={resources} />
-          <MemoRelationListViewV1 memo={memo} relationList={referenceRelations} />
+          <MemoRelationListView memo={memo} relationList={referenceRelations} />
           <div className="w-full mt-4 flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center gap-2">
             <div className="flex flex-row justify-start items-center">
               <Tooltip title={"Identifier"} placement="top">
@@ -165,7 +165,7 @@ const MemoDetail = () => {
                     className="w-auto text-sm"
                     variant="plain"
                     value={memo.visibility}
-                    startDecorator={<VisibilityIconV1 visibility={memo.visibility} />}
+                    startDecorator={<VisibilityIcon visibility={memo.visibility} />}
                     onChange={(_, visibility) => {
                       if (visibility) {
                         handleMemoVisibilityOptionChanged(visibility);
@@ -195,7 +195,7 @@ const MemoDetail = () => {
                 </IconButton>
               </Tooltip>
               <Tooltip title={"Share"} placement="top">
-                <IconButton size="sm" onClick={() => showShareMemoDialogV1(memo)}>
+                <IconButton size="sm" onClick={() => showShareMemoDialog(memo)}>
                   <Icon.Share className="w-4 h-auto text-gray-600 dark:text-gray-400" />
                 </IconButton>
               </Tooltip>
@@ -217,14 +217,14 @@ const MemoDetail = () => {
                   <span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
                 </div>
                 {comments.map((comment) => (
-                  <MemoViewV1 key={comment.id} memo={comment} showCreator />
+                  <MemoView key={comment.id} memo={comment} showCreator />
                 ))}
               </>
             )}
 
             {/* Only show comment editor when user login */}
             {currentUser && (
-              <MemoEditorV1
+              <MemoEditor
                 key={memo.id}
                 cacheKey={`comment-editor-${memo.id}`}
                 relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: MemoRelation_Type.COMMENT }]}

web/src/pages/Timeline.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import useToggle from "react-use/lib/useToggle";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
-import MemoEditorV1 from "@/components/MemoEditorV1";
+import MemoEditor from "@/components/MemoEditor";
 import MobileHeader from "@/components/MobileHeader";
 import TimelineMemo from "@/components/TimelineMemo";
 import DatePicker from "@/components/kit/DatePicker";
@@ -108,7 +108,7 @@ const Timeline = () => {
               ))}
               {selectedDateStamp === currentDateStamp && (
                 <div className="w-full pl-0 sm:pl-12 sm:mt-4">
-                  <MemoEditorV1 cacheKey="timeline-editor" onConfirm={handleMemoCreate} />
+                  <MemoEditor cacheKey="timeline-editor" onConfirm={handleMemoCreate} />
                 </div>
               )}
             </div>

web/src/pages/UserProfile.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import Empty from "@/components/Empty";
-import MemoViewV1 from "@/components/MemoViewV1";
+import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import UserAvatar from "@/components/UserAvatar";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
@@ -79,7 +79,7 @@ const UserProfile = () => {
                 <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
               </div>
               {memos.map((memo) => (
-                <MemoViewV1 key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
+                <MemoView key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle showParent />
               ))}
               {isRequesting && (
                 <div className="flex flex-col justify-start items-center w-full my-8">