fix(editor): filter RelationList to only show referencing memos

- Filter out COMMENT type relations, only show REFERENCE type
- When editing a memo, only show relations where current memo is the source
- Pass memoName through EditorMetadata to RelationList for filtering
This commit is contained in:
Johnny 2026-01-11 22:41:20 +08:00
parent 7053edae27
commit 9a3451b9d1
4 changed files with 19 additions and 11 deletions

View File

@ -5,7 +5,7 @@ import AttachmentList from "./AttachmentList";
import LocationDisplay from "./LocationDisplay";
import RelationList from "./RelationList";
export const EditorMetadata: FC<EditorMetadataProps> = () => {
export const EditorMetadata: FC<EditorMetadataProps> = ({ memoName }) => {
const { state, actions, dispatch } = useEditorContext();
return (
@ -17,7 +17,11 @@ export const EditorMetadata: FC<EditorMetadataProps> = () => {
onRemoveLocalFile={(previewUrl) => dispatch(actions.removeLocalFile(previewUrl))}
/>
<RelationList relations={state.metadata.relations} onRelationsChange={(relations) => dispatch(actions.setMetadata({ relations }))} />
<RelationList
relations={state.metadata.relations}
onRelationsChange={(relations) => dispatch(actions.setMetadata({ relations }))}
memoName={memoName}
/>
{state.metadata.location && (
<LocationDisplay location={state.metadata.location} onRemove={() => dispatch(actions.setMetadata({ location: undefined }))} />

View File

@ -5,12 +5,13 @@ import { useEffect, useState } from "react";
import RelationCard from "@/components/MemoView/components/metadata/RelationCard";
import { memoServiceClient } from "@/connect";
import type { MemoRelation } from "@/types/proto/api/v1/memo_service_pb";
import { MemoRelation_Memo, MemoRelation_MemoSchema } from "@/types/proto/api/v1/memo_service_pb";
import { MemoRelation_Memo, MemoRelation_MemoSchema, MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
interface RelationListProps {
relations: MemoRelation[];
onRelationsChange?: (relations: MemoRelation[]) => void;
parentPage?: string;
memoName?: string;
}
const RelationItemCard: FC<{
@ -37,12 +38,13 @@ const RelationItemCard: FC<{
);
};
const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, parentPage }) => {
const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, parentPage, memoName }) => {
const referenceRelations = relations.filter((r) => r.type === MemoRelation_Type.REFERENCE && (!memoName || r.memo?.name === memoName));
const [fetchedMemos, setFetchedMemos] = useState<Record<string, MemoRelation_Memo>>({});
useEffect(() => {
(async () => {
const missingSnippetRelations = relations.filter((relation) => !relation.relatedMemo?.snippet && relation.relatedMemo?.name);
const missingSnippetRelations = referenceRelations.filter((relation) => !relation.relatedMemo?.snippet && relation.relatedMemo?.name);
if (missingSnippetRelations.length > 0) {
const requests = missingSnippetRelations.map(async (relation) => {
const memo = await memoServiceClient.getMemo({ name: relation.relatedMemo!.name });
@ -58,7 +60,7 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
});
}
})();
}, [relations]);
}, [referenceRelations]);
const handleDeleteRelation = (memoName: string) => {
if (onRelationsChange) {
@ -66,7 +68,7 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
}
};
if (relations.length === 0) {
if (referenceRelations.length === 0) {
return null;
}
@ -74,11 +76,11 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
<div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
<div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-border bg-muted/30">
<LinkIcon className="w-3.5 h-3.5 text-muted-foreground" />
<span className="text-xs font-medium text-muted-foreground">Relations ({relations.length})</span>
<span className="text-xs font-medium text-muted-foreground">Relations ({referenceRelations.length})</span>
</div>
<div className="p-1 sm:p-1.5 flex flex-col gap-0.5">
{relations.map((relation) => {
{referenceRelations.map((relation) => {
const relatedMemo = relation.relatedMemo!;
const memo = relatedMemo.snippet ? relatedMemo : fetchedMemos[relatedMemo.name] || relatedMemo;
return <RelationItemCard key={memo.name} memo={memo} onRemove={() => handleDeleteRelation(memo.name)} parentPage={parentPage} />;

View File

@ -146,7 +146,7 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
{/* Metadata and toolbar grouped together at bottom */}
<div className="w-full flex flex-col gap-2">
<EditorMetadata />
<EditorMetadata memoName={memoName} />
<EditorToolbar onSave={handleSave} onCancel={onCancel} memoName={memoName} />
</div>
</div>

View File

@ -26,7 +26,9 @@ export interface EditorToolbarProps {
memoName?: string;
}
export interface EditorMetadataProps {}
export interface EditorMetadataProps {
memoName?: string;
}
export interface FocusModeOverlayProps {
isActive: boolean;