-
- {t("common.relations")}
- (Beta)
-
-
-
-
+
+
+
{memo.createTime ? timestampDate(memo.createTime).toLocaleString() : "—"}
+ {hasUpdated && (
+
+ {t("common.last-updated-at")}: {memo.updateTime ? timestampDate(memo.updateTime).toLocaleString() : "—"}
+
+ )}
-
-
{t("common.created-at")}
-
{memo.createTime ? timestampDate(memo.createTime).toLocaleString() : "—"}
-
-
- {!isEqual(memo.createTime, memo.updateTime) && (
-
-
{t("common.last-updated-at")}
-
{memo.updateTime ? timestampDate(memo.updateTime).toLocaleString() : "—"}
-
- )}
-
- {hasSpecialProperty && (
-
-
{t("common.properties")}
+ {propertyBadges.length > 0 && (
+
- {property.hasLink && (
-
-
- {t("memo.links")}
+ {propertyBadges.map(({ icon: Icon, labelKey }) => (
+
+
+ {t(labelKey)}
- )}
- {property.hasTaskList && (
-
-
- {t("memo.to-do")}
-
- )}
- {property.hasCode && (
-
-
- {t("memo.code")}
-
- )}
+ ))}
-
+
)}
{memo.tags.length > 0 && (
-
-
- {t("common.tags")}
- ({memo.tags.length})
-
+
{memo.tags.map((tag) => (
-
+
{tag}
))}
-
+
)}
{sharePanelOpen &&
setSharePanelOpen(false)} />}
diff --git a/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx b/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
index 7d2b502bb..9c058a9d3 100644
--- a/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
+++ b/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
@@ -8,10 +8,9 @@ import MemoDetailSidebar from "./MemoDetailSidebar";
interface Props {
memo: Memo;
- parentPage?: string;
}
-const MemoDetailSidebarDrawer = ({ memo, parentPage }: Props) => {
+const MemoDetailSidebarDrawer = ({ memo }: Props) => {
const location = useLocation();
const [open, setOpen] = useState(false);
@@ -27,7 +26,7 @@ const MemoDetailSidebarDrawer = ({ memo, parentPage }: Props) => {
-
+
);
diff --git a/web/src/components/MemoSharePanel.tsx b/web/src/components/MemoDetailSidebar/MemoSharePanel.tsx
similarity index 100%
rename from web/src/components/MemoSharePanel.tsx
rename to web/src/components/MemoDetailSidebar/MemoSharePanel.tsx
diff --git a/web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx b/web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx
deleted file mode 100644
index 3731766c2..000000000
--- a/web/src/components/MemoRelationForceGraph/MemoRelationForceGraph.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from "react-force-graph-2d";
-import { extractMemoIdFromName } from "@/helpers/resource-names";
-import useNavigateTo from "@/hooks/useNavigateTo";
-import { cn } from "@/lib/utils";
-import { Memo, MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
-import { LinkType, NodeType } from "./types";
-import { convertMemoRelationsToGraphData } from "./utils";
-
-interface Props {
- memo: Memo;
- className?: string;
- parentPage?: string;
-}
-
-const MAIN_NODE_COLOR = "#14b8a6";
-const DEFAULT_NODE_COLOR = "#a1a1aa";
-
-const MemoRelationForceGraph = ({ className, memo, parentPage }: Props) => {
- const navigateTo = useNavigateTo();
- const [mode] = useState<"light">("light");
- const containerRef = useRef(null);
- const graphRef = useRef, LinkObject> | undefined>(undefined);
- const [graphSize, setGraphSize] = useState({ width: 0, height: 0 });
-
- useEffect(() => {
- if (!containerRef.current) return;
- setGraphSize(containerRef.current.getBoundingClientRect());
- }, []);
-
- const onNodeClick = (node: NodeObject) => {
- if (node.memo.name === memo.name) return;
- navigateTo(`/${memo.name}`, {
- state: {
- from: parentPage,
- },
- });
- };
-
- return (
-
- (node.id === memo.name ? MAIN_NODE_COLOR : DEFAULT_NODE_COLOR)}
- nodeRelSize={3}
- nodeLabel={(node) => extractMemoIdFromName(node.memo.name).slice(0, 6).toLowerCase()}
- linkColor={() => (mode === "light" ? "#e4e4e7" : "#3f3f46")}
- graphData={convertMemoRelationsToGraphData(memo.relations.filter((r) => r.type === MemoRelation_Type.REFERENCE))}
- onNodeClick={onNodeClick}
- linkDirectionalArrowLength={3}
- linkDirectionalArrowRelPos={1}
- linkCurvature={0.25}
- />
-
- );
-};
-
-export default MemoRelationForceGraph;
diff --git a/web/src/components/MemoRelationForceGraph/index.ts b/web/src/components/MemoRelationForceGraph/index.ts
deleted file mode 100644
index f89b461bd..000000000
--- a/web/src/components/MemoRelationForceGraph/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import MemoRelationForceGraph from "./MemoRelationForceGraph";
-
-export * from "./utils";
-
-export default MemoRelationForceGraph;
diff --git a/web/src/components/MemoRelationForceGraph/types.ts b/web/src/components/MemoRelationForceGraph/types.ts
deleted file mode 100644
index 6786b7cd0..000000000
--- a/web/src/components/MemoRelationForceGraph/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { MemoRelation_Memo } from "@/types/proto/api/v1/memo_service_pb";
-
-export interface NodeType {
- memo: MemoRelation_Memo;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface LinkType {
- // ...add more additional properties relevant to the link here.
-}
diff --git a/web/src/components/MemoRelationForceGraph/utils.ts b/web/src/components/MemoRelationForceGraph/utils.ts
deleted file mode 100644
index f65f410a4..000000000
--- a/web/src/components/MemoRelationForceGraph/utils.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { GraphData, LinkObject, NodeObject } from "react-force-graph-2d";
-import { MemoRelation, MemoRelation_Memo } from "@/types/proto/api/v1/memo_service_pb";
-import { LinkType, NodeType } from "./types";
-
-export const convertMemoRelationsToGraphData = (memoRelations: MemoRelation[]): GraphData => {
- const nodesMap = new Map>();
- const links: LinkObject[] = [];
-
- // Iterate through memoRelations to populate nodes and links.
- memoRelations.forEach((relation) => {
- const memo = relation.memo as MemoRelation_Memo;
- const relatedMemo = relation.relatedMemo as MemoRelation_Memo;
-
- // Add memo node if not already present.
- if (!nodesMap.has(memo.name)) {
- nodesMap.set(memo.name, { id: memo.name, memo });
- }
-
- // Add related_memo node if not already present.
- if (!nodesMap.has(relatedMemo.name)) {
- nodesMap.set(relatedMemo.name, { id: relatedMemo.name, memo: relatedMemo });
- }
-
- // Create link between memo and relatedMemo.
- links.push({
- source: memo.name,
- target: relatedMemo.name,
- type: relation.type, // Include the type of relation as a property of the link.
- });
- });
-
- return {
- nodes: Array.from(nodesMap.values()),
- links,
- };
-};
diff --git a/web/src/hooks/useMemoDetailError.ts b/web/src/hooks/useMemoDetailError.ts
new file mode 100644
index 000000000..f1f6b7366
--- /dev/null
+++ b/web/src/hooks/useMemoDetailError.ts
@@ -0,0 +1,44 @@
+import { Code, ConnectError } from "@connectrpc/connect";
+import { useEffect } from "react";
+import { toast } from "react-hot-toast";
+import useNavigateTo from "@/hooks/useNavigateTo";
+import { AUTH_REASON_PROTECTED_MEMO, redirectOnAuthFailure } from "@/utils/auth-redirect";
+
+interface UseMemoDetailErrorOptions {
+ error: Error | null;
+ pathname: string;
+ search: string;
+ hash: string;
+}
+
+const useMemoDetailError = ({ error, pathname, search, hash }: UseMemoDetailErrorOptions) => {
+ const navigateTo = useNavigateTo();
+
+ useEffect(() => {
+ if (!error) {
+ return;
+ }
+
+ if (error instanceof ConnectError) {
+ if (error.code === Code.Unauthenticated) {
+ redirectOnAuthFailure(true, {
+ redirect: `${pathname}${search}${hash}`,
+ reason: AUTH_REASON_PROTECTED_MEMO,
+ });
+ return;
+ }
+
+ if (error.code === Code.PermissionDenied || error.code === Code.NotFound) {
+ navigateTo("/404", { replace: true });
+ return;
+ }
+
+ toast.error(error.message);
+ return;
+ }
+
+ toast.error(error.message);
+ }, [error, hash, pathname, search, navigateTo]);
+};
+
+export default useMemoDetailError;
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 6b761ab3d..d346afcdd 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -1,70 +1,36 @@
-import { Code, ConnectError } from "@connectrpc/connect";
-import { ArrowUpLeftFromCircleIcon, MessageCircleIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "react-hot-toast";
+import { ArrowUpLeftFromCircleIcon } from "lucide-react";
+import { useEffect } from "react";
import { Link, useLocation, useParams } from "react-router-dom";
+import MemoCommentSection from "@/components/MemoCommentSection";
import { MemoDetailSidebar, MemoDetailSidebarDrawer } from "@/components/MemoDetailSidebar";
-import MemoEditor from "@/components/MemoEditor";
import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
-import { Button } from "@/components/ui/button";
-import { extractMemoIdFromName, memoNamePrefix } from "@/helpers/resource-names";
-import useCurrentUser from "@/hooks/useCurrentUser";
+import { memoNamePrefix } from "@/helpers/resource-names";
import useMediaQuery from "@/hooks/useMediaQuery";
+import useMemoDetailError from "@/hooks/useMemoDetailError";
import { useMemo, useMemoComments } from "@/hooks/useMemoQueries";
-import useNavigateTo from "@/hooks/useNavigateTo";
import { cn } from "@/lib/utils";
-import { AUTH_REASON_PROTECTED_MEMO, redirectOnAuthFailure } from "@/utils/auth-redirect";
-import { useTranslate } from "@/utils/i18n";
const MemoDetail = () => {
- const t = useTranslate();
const md = useMediaQuery("md");
const params = useParams();
- const navigateTo = useNavigateTo();
const location = useLocation();
const { state: locationState, hash } = location;
- const currentUser = useCurrentUser();
- const uid = params.uid;
- const memoName = `${memoNamePrefix}${uid}`;
- const [showCommentEditor, setShowCommentEditor] = useState(false);
+ const memoName = `${memoNamePrefix}${params.uid}`;
- // Fetch main memo with React Query
const { data: memo, error, isLoading } = useMemo(memoName, { enabled: !!memoName });
- // Handle errors
- useEffect(() => {
- if (!error) {
- return;
- }
+ useMemoDetailError({
+ error: error as Error | null,
+ pathname: location.pathname,
+ search: location.search,
+ hash: location.hash,
+ });
- if (error instanceof ConnectError) {
- if (error.code === Code.Unauthenticated) {
- redirectOnAuthFailure(true, {
- redirect: `${location.pathname}${location.search}${location.hash}`,
- reason: AUTH_REASON_PROTECTED_MEMO,
- });
- return;
- }
-
- if (error.code === Code.PermissionDenied || error.code === Code.NotFound) {
- navigateTo("/404", { replace: true });
- return;
- }
-
- toast.error(error.message);
- return;
- }
-
- toast.error((error as Error).message);
- }, [error, location.hash, location.pathname, location.search, navigateTo]);
-
- // Fetch parent memo if exists
const { data: parentMemo } = useMemo(memo?.parent || "", {
enabled: !!memo?.parent,
});
- // Fetch all comments for this memo in a single query
const { data: commentsResponse } = useMemoComments(memoName, {
enabled: !!memo,
});
@@ -76,26 +42,15 @@ const MemoDetail = () => {
el?.scrollIntoView({ behavior: "smooth", block: "center" });
}, [hash, comments]);
- const showCreateCommentButton = currentUser && !showCommentEditor;
-
if (isLoading || !memo) {
return null;
}
- const handleShowCommentEditor = () => {
- setShowCommentEditor(true);
- };
-
- const handleCommentCreated = async (_memoCommentName: string) => {
- // React Query will auto-refetch due to invalidation in the mutation
- setShowCommentEditor(false);
- };
-
return (
{!md && (
-
+
)}
@@ -115,7 +70,6 @@ const MemoDetail = () => {
)}
{
showVisibility
showPinned
/>
-
-
-
- {comments.length === 0 ? (
- showCreateCommentButton && (
-
-
-
- )
- ) : (
-
-
-
- {t("memo.comment.self")}
- ({comments.length})
-
- {showCreateCommentButton && (
-
- )}
-
- )}
- {showCommentEditor && (
-
- setShowCommentEditor(false)}
- />
-
- )}
- {comments.map((comment) => (
-
- ))}
-
-
-
+
)}