+ {suggestionsRef.current.map((tag, i) => (
+
+ );
+};
+
+export default TagSuggestions;
diff --git a/web/src/components/MemoEditorV1/Editor/index.tsx b/web/src/components/MemoEditorV1/Editor/index.tsx
new file mode 100644
index 000000000..41fa11eb8
--- /dev/null
+++ b/web/src/components/MemoEditorV1/Editor/index.tsx
@@ -0,0 +1,162 @@
+import classNames from "classnames";
+import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef } from "react";
+import TagSuggestions from "./TagSuggestions";
+
+export interface EditorRefActions {
+ focus: FunctionType;
+ scrollToCursor: FunctionType;
+ insertText: (text: string, prefix?: string, suffix?: string) => void;
+ removeText: (start: number, length: number) => void;
+ setContent: (text: string) => void;
+ getContent: () => string;
+ getSelectedContent: () => string;
+ getCursorPosition: () => number;
+ setCursorPosition: (startPos: number, endPos?: number) => void;
+ getCursorLineNumber: () => number;
+ getLine: (lineNumber: number) => string;
+ setLine: (lineNumber: number, text: string) => void;
+}
+
+interface Props {
+ className: string;
+ initialContent: string;
+ placeholder: string;
+ tools?: ReactNode;
+ onContentChange: (content: string) => void;
+ onPaste: (event: React.ClipboardEvent) => void;
+}
+
+const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef autocomplete(tag)}
+ className={classNames(
+ "rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-700",
+ i === selected ? "bg-zinc-300 dark:bg-zinc-700" : ""
+ )}
+ >
+ #{tag}
+
+ ))}
+
+
+
+ );
+});
+
+export default Editor;
diff --git a/web/src/components/MemoEditorV1/MemoEditorDialog.tsx b/web/src/components/MemoEditorV1/MemoEditorDialog.tsx
new file mode 100644
index 000000000..57e878436
--- /dev/null
+++ b/web/src/components/MemoEditorV1/MemoEditorDialog.tsx
@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { useGlobalStore, useTagStore } from "@/store/module";
+import MemoEditor from ".";
+import { generateDialog } from "../Dialog";
+import Icon from "../Icon";
+
+interface Props extends DialogProps {
+ memoId?: MemoId;
+ relationList?: MemoRelation[];
+}
+
+const MemoEditorDialog: React.FC
+
+
+ 
+
+
+ {systemStatus.customizedProfile.name}
+
+
+
+ );
+};
+
+export default function showMemoEditorDialog(props: Pick
+ {referencingMemoList.map((memo) => {
+ return (
+
+ )}
+
+ );
+};
+
+export default RelationListView;
diff --git a/web/src/components/MemoEditorV1/ResourceListView.tsx b/web/src/components/MemoEditorV1/ResourceListView.tsx
new file mode 100644
index 000000000..be9af0897
--- /dev/null
+++ b/web/src/components/MemoEditorV1/ResourceListView.tsx
@@ -0,0 +1,42 @@
+import { Resource } from "@/types/proto/api/v2/resource_service";
+import Icon from "../Icon";
+import ResourceIcon from "../ResourceIcon";
+
+interface Props {
+ resourceList: Resource[];
+ setResourceList: (resourceList: Resource[]) => void;
+}
+
+const ResourceListView = (props: Props) => {
+ const { resourceList, setResourceList } = props;
+
+ const handleDeleteResource = async (resourceId: ResourceId) => {
+ setResourceList(resourceList.filter((resource) => resource.id !== resourceId));
+ };
+
+ return (
+ <>
+ {resourceList.length > 0 && (
+ handleDeleteRelation(memo)}
+ >
+
+ );
+ })}
+
+ {resourceList.map((resource) => {
+ return (
+
+ )}
+
+ );
+};
+
+export default ResourceListView;
diff --git a/web/src/components/MemoEditorV1/index.tsx b/web/src/components/MemoEditorV1/index.tsx
new file mode 100644
index 000000000..61db7a452
--- /dev/null
+++ b/web/src/components/MemoEditorV1/index.tsx
@@ -0,0 +1,454 @@
+import { Select, Option, Button, IconButton, Divider } from "@mui/joy";
+import { uniqBy } from "lodash-es";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import useLocalStorage from "react-use/lib/useLocalStorage";
+import { memoServiceClient } from "@/grpcweb";
+import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "@/helpers/consts";
+import { useGlobalStore, useResourceStore } from "@/store/module";
+import { useMemoV1Store, useUserV1Store } from "@/store/v1";
+import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
+import { Visibility } from "@/types/proto/api/v2/memo_service";
+import { Resource } from "@/types/proto/api/v2/resource_service";
+import { UserSetting } from "@/types/proto/api/v2/user_service";
+import { useTranslate } from "@/utils/i18n";
+import { convertVisibilityFromString, convertVisibilityToString } from "@/utils/memo";
+import showCreateMemoRelationDialog from "../CreateMemoRelationDialog";
+import showCreateResourceDialog from "../CreateResourceDialog";
+import Icon from "../Icon";
+import VisibilityIconV1 from "../VisibilityIconV1";
+import TagSelector from "./ActionButton/TagSelector";
+import Editor, { EditorRefActions } from "./Editor";
+import RelationListView from "./RelationListView";
+import ResourceListView from "./ResourceListView";
+
+interface Props {
+ className?: string;
+ editorClassName?: string;
+ cacheKey?: string;
+ memoId?: number;
+ relationList?: MemoRelation[];
+ onConfirm?: (memoId: number) => void;
+}
+
+interface State {
+ memoVisibility: Visibility;
+ resourceList: Resource[];
+ relationList: MemoRelation[];
+ isUploadingResource: boolean;
+ isRequesting: boolean;
+}
+
+const MemoEditor = (props: Props) => {
+ const { className, editorClassName, cacheKey, memoId, onConfirm } = props;
+ const { i18n } = useTranslation();
+ const t = useTranslate();
+ const contentCacheKey = `memo-editor-${cacheKey}`;
+ const [contentCache, setContentCache] = useLocalStorage
+ handleDeleteResource(resource.id)}
+ />
+
+ );
+ })}
+
+
+ );
+};
+
+export default MemoEditor;
diff --git a/web/src/components/MemoRelationListViewV1.tsx b/web/src/components/MemoRelationListViewV1.tsx
new file mode 100644
index 000000000..0423c0570
--- /dev/null
+++ b/web/src/components/MemoRelationListViewV1.tsx
@@ -0,0 +1,83 @@
+import { Tooltip } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useMemoV1Store } from "@/store/v1";
+import { MemoRelation } from "@/types/proto/api/v2/memo_relation_service";
+import { Memo } from "@/types/proto/api/v2/memo_service";
+import Icon from "./Icon";
+
+interface Props {
+ memo: Memo;
+ relationList: MemoRelation[];
+}
+
+const MemoRelationListViewV1 = (props: Props) => {
+ const { memo, relationList } = props;
+ const memoStore = useMemoV1Store();
+ const [referencingMemoList, setReferencingMemoList] = useState
+
+
+ handleTagSelectorClick(tag)} />
+
+
+
+
+
+
+
+
+
+
+
+ e.stopPropagation()}>
+ }
+ onChange={(_, visibility) => {
+ if (visibility) {
+ handleMemoVisibilityChange(visibility);
+ }
+ }}
+ >
+ {[Visibility.PRIVATE, Visibility.PROTECTED, Visibility.PUBLIC].map((item) => (
+
+ ))}
+
+
+
+
+
+
+ {referencingMemoList.map((memo) => {
+ return (
+
+ )}
+ {referencedMemoList.length > 0 && (
+
+
+
+
+ #{memo.id}
+ {memo.content}
+
+
+ );
+ })}
+
+ {referencedMemoList.map((memo) => {
+ return (
+
+ )}
+
+ );
+};
+
+export default MemoRelationListViewV1;
diff --git a/web/src/components/TimelineMemo.tsx b/web/src/components/TimelineMemo.tsx
new file mode 100644
index 000000000..9e82ec1e9
--- /dev/null
+++ b/web/src/components/TimelineMemo.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import Icon from "@/components/Icon";
+import MemoContentV1 from "@/components/MemoContentV1";
+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";
+
+interface Props {
+ memo: Memo;
+}
+
+const TimelineMemo = (props: Props) => {
+ const { memo } = props;
+ const memoStore = useMemoV1Store();
+ const [resources, setResources] = useState
+
+
+
+ #{memo.id}
+ {memo.content}
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default TimelineMemo;
diff --git a/web/src/components/VisibilityIconV1.tsx b/web/src/components/VisibilityIconV1.tsx
new file mode 100644
index 000000000..dfbd8a897
--- /dev/null
+++ b/web/src/components/VisibilityIconV1.tsx
@@ -0,0 +1,27 @@
+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
+ {getTimeString(memo.displayTime)}
+
+
- {dailyMemos.length === 0 && (
+ {sortedMemos.length === 0 && (
{t("message.no-data")}
- {dailyMemos.map((memo, index) => (
+ {sortedMemos.map((memo, index) => (
() }, (set, get) => ({
getState: () => get(),
+ fetchMemos: async (request: Partial) => {
+ const { memos } = await memoServiceClient.listMemos(request);
+ return memos;
+ },
getOrFetchMemoById: async (id: MemoId) => {
const memo = get().memoById.get(id);
if (memo) {
@@ -29,6 +33,18 @@ export const useMemoV1Store = create(
getMemoById: (id: number) => {
return get().memoById.get(id);
},
+ createMemo: async (request: CreateMemoRequest) => {
+ const { memo } = await memoServiceClient.createMemo(request);
+ if (!memo) {
+ throw new Error("Memo not found");
+ }
+
+ set((state) => {
+ state.memoById.set(memo.id, memo);
+ return state;
+ });
+ return memo;
+ },
updateMemo: async (update: Partial, updateMask: string[]) => {
const { memo } = await memoServiceClient.updateMemo({
id: update.id!,
@@ -55,5 +71,17 @@ export const useMemoV1Store = create(
return state;
});
},
+ fetchMemoResources: async (id: number) => {
+ const { resources } = await memoServiceClient.listMemoResources({
+ id,
+ });
+ return resources;
+ },
+ fetchMemoRelations: async (id: number) => {
+ const { relations } = await memoServiceClient.listMemoRelations({
+ id,
+ });
+ return relations;
+ },
}))
);
diff --git a/web/src/utils/memo.ts b/web/src/utils/memo.ts
new file mode 100644
index 000000000..532741586
--- /dev/null
+++ b/web/src/utils/memo.ts
@@ -0,0 +1,27 @@
+import { Visibility } from "@/types/proto/api/v2/memo_service";
+
+export const convertVisibilityFromString = (visibility: string) => {
+ switch (visibility) {
+ case "PUBLIC":
+ return Visibility.PUBLIC;
+ case "PROTECTED":
+ return Visibility.PROTECTED;
+ case "PRIVATE":
+ return Visibility.PRIVATE;
+ default:
+ return Visibility.PUBLIC;
+ }
+};
+
+export const convertVisibilityToString = (visibility: Visibility) => {
+ switch (visibility) {
+ case Visibility.PUBLIC:
+ return "PUBLIC";
+ case Visibility.PROTECTED:
+ return "PROTECTED";
+ case Visibility.PRIVATE:
+ return "PRIVATE";
+ default:
+ return "PRIVATE";
+ }
+};
- relation.type === "REFERENCE")} />
+
diff --git a/web/src/store/v1/memo.ts b/web/src/store/v1/memo.ts
index 35eeea28f..07a3fc642 100644
--- a/web/src/store/v1/memo.ts
+++ b/web/src/store/v1/memo.ts
@@ -1,11 +1,15 @@
import { create } from "zustand";
import { combine } from "zustand/middleware";
import { memoServiceClient } from "@/grpcweb";
-import { Memo } from "@/types/proto/api/v2/memo_service";
+import { CreateMemoRequest, ListMemosRequest, Memo } from "@/types/proto/api/v2/memo_service";
export const useMemoV1Store = create(
combine({ memoById: new Map
- {getTimeString(memo.displayTs)}
-
-
- {index !== dailyMemos.length - 1 && (
+ {index !== sortedMemos.length - 1 && (
)}
))}
-
{selectedDateStamp === currentDateStamp && (
@@ -126,10 +106,9 @@ const Timeline = () => {
-
)}