From fc43f8657166798f38e21175815e898364d323b5 Mon Sep 17 00:00:00 2001
From: Johnny <yourselfhosted@gmail.com>
Date: Sun, 9 Nov 2025 07:23:31 +0800
Subject: [PATCH] chore(web): unify Location/Attachments/Relations components
 (#5241)

Co-authored-by: Claude <noreply@anthropic.com>
---
 web/src/components/MemoAttachmentListView.tsx | 113 -------------
 .../MemoEditor/AttachmentListView.tsx         |  71 --------
 .../components/MemoEditor/LocationView.tsx    |  34 ----
 .../MemoEditor/RelationListView.tsx           |  55 -------
 web/src/components/MemoEditor/index.tsx       |  11 +-
 web/src/components/MemoLocationView.tsx       |  35 ----
 web/src/components/MemoRelationListView.tsx   | 110 -------------
 web/src/components/MemoView.tsx               |  10 +-
 .../memo-metadata/AttachmentCard.tsx          |  96 +++++++++++
 .../memo-metadata/AttachmentList.tsx          | 144 +++++++++++++++++
 .../memo-metadata/LocationDisplay.tsx         |  62 +++++++
 .../memo-metadata/MetadataBadge.tsx           |  46 ++++++
 .../components/memo-metadata/MetadataCard.tsx |  26 +++
 .../components/memo-metadata/RelationCard.tsx |  61 +++++++
 .../components/memo-metadata/RelationList.tsx | 153 ++++++++++++++++++
 web/src/components/memo-metadata/index.ts     |  17 ++
 web/src/components/memo-metadata/types.ts     |  10 ++
 17 files changed, 624 insertions(+), 430 deletions(-)
 delete mode 100644 web/src/components/MemoAttachmentListView.tsx
 delete mode 100644 web/src/components/MemoEditor/AttachmentListView.tsx
 delete mode 100644 web/src/components/MemoEditor/LocationView.tsx
 delete mode 100644 web/src/components/MemoEditor/RelationListView.tsx
 delete mode 100644 web/src/components/MemoLocationView.tsx
 delete mode 100644 web/src/components/MemoRelationListView.tsx
 create mode 100644 web/src/components/memo-metadata/AttachmentCard.tsx
 create mode 100644 web/src/components/memo-metadata/AttachmentList.tsx
 create mode 100644 web/src/components/memo-metadata/LocationDisplay.tsx
 create mode 100644 web/src/components/memo-metadata/MetadataBadge.tsx
 create mode 100644 web/src/components/memo-metadata/MetadataCard.tsx
 create mode 100644 web/src/components/memo-metadata/RelationCard.tsx
 create mode 100644 web/src/components/memo-metadata/RelationList.tsx
 create mode 100644 web/src/components/memo-metadata/index.ts
 create mode 100644 web/src/components/memo-metadata/types.ts

diff --git a/web/src/components/MemoAttachmentListView.tsx b/web/src/components/MemoAttachmentListView.tsx
deleted file mode 100644
index 7749fb0e2..000000000
--- a/web/src/components/MemoAttachmentListView.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { memo, useState } from "react";
-import { cn } from "@/lib/utils";
-import { Attachment } from "@/types/proto/api/v1/attachment_service";
-import { getAttachmentThumbnailUrl, getAttachmentType, getAttachmentUrl } from "@/utils/attachment";
-import MemoAttachment from "./MemoAttachment";
-import PreviewImageDialog from "./PreviewImageDialog";
-
-const MemoAttachmentListView = ({ attachments = [] }: { attachments: Attachment[] }) => {
-  const [previewImage, setPreviewImage] = useState<{ open: boolean; urls: string[]; index: number }>({
-    open: false,
-    urls: [],
-    index: 0,
-  });
-  const mediaAttachments: Attachment[] = [];
-  const otherAttachments: Attachment[] = [];
-
-  attachments.forEach((attachment) => {
-    const type = getAttachmentType(attachment);
-    if (type === "image/*" || type === "video/*") {
-      mediaAttachments.push(attachment);
-      return;
-    }
-
-    otherAttachments.push(attachment);
-  });
-
-  const handleImageClick = (imgUrl: string) => {
-    const imgUrls = mediaAttachments
-      .filter((attachment) => getAttachmentType(attachment) === "image/*")
-      .map((attachment) => getAttachmentUrl(attachment));
-    const index = imgUrls.findIndex((url) => url === imgUrl);
-    setPreviewImage({ open: true, urls: imgUrls, index });
-  };
-
-  const MediaCard = ({ attachment, className }: { attachment: Attachment; className?: string }) => {
-    const type = getAttachmentType(attachment);
-    const attachmentUrl = getAttachmentUrl(attachment);
-    const attachmentThumbnailUrl = getAttachmentThumbnailUrl(attachment);
-
-    if (type === "image/*") {
-      return (
-        <img
-          className={cn("cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain transition-colors", className)}
-          src={attachmentThumbnailUrl}
-          onError={(e) => {
-            // Fallback to original image if thumbnail fails
-            const target = e.target as HTMLImageElement;
-            if (target.src.includes("?thumbnail=true")) {
-              console.warn("Thumbnail failed, falling back to original image:", attachmentUrl);
-              target.src = attachmentUrl;
-            }
-          }}
-          onClick={() => handleImageClick(attachmentUrl)}
-          decoding="async"
-          loading="lazy"
-        />
-      );
-    } else if (type === "video/*") {
-      return (
-        <video
-          className={cn(
-            "cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain bg-muted transition-colors",
-            className,
-          )}
-          preload="metadata"
-          crossOrigin="anonymous"
-          src={attachmentUrl}
-          controls
-        />
-      );
-    } else {
-      return <></>;
-    }
-  };
-
-  const MediaList = ({ attachments = [] }: { attachments: Attachment[] }) => {
-    const cards = attachments.map((attachment) => (
-      <div key={attachment.name} className="max-w-[60%] w-fit flex flex-col justify-start items-start shrink-0">
-        <MediaCard className="max-h-64 grow" attachment={attachment} />
-      </div>
-    ));
-
-    return <div className="w-full flex flex-row justify-start overflow-auto gap-2">{cards}</div>;
-  };
-
-  const OtherList = ({ attachments = [] }: { attachments: Attachment[] }) => {
-    if (attachments.length === 0) return <></>;
-
-    return (
-      <div className="w-full flex flex-row justify-start overflow-auto gap-2">
-        {otherAttachments.map((attachment) => (
-          <MemoAttachment key={attachment.name} attachment={attachment} />
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <>
-      {mediaAttachments.length > 0 && <MediaList attachments={mediaAttachments} />}
-      <OtherList attachments={otherAttachments} />
-
-      <PreviewImageDialog
-        open={previewImage.open}
-        onOpenChange={(open) => setPreviewImage((prev) => ({ ...prev, open }))}
-        imgUrls={previewImage.urls}
-        initialIndex={previewImage.index}
-      />
-    </>
-  );
-};
-
-export default memo(MemoAttachmentListView);
diff --git a/web/src/components/MemoEditor/AttachmentListView.tsx b/web/src/components/MemoEditor/AttachmentListView.tsx
deleted file mode 100644
index 613294912..000000000
--- a/web/src/components/MemoEditor/AttachmentListView.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { DndContext, closestCenter, MouseSensor, TouchSensor, useSensor, useSensors, DragEndEvent } from "@dnd-kit/core";
-import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { FileIcon, XIcon } from "lucide-react";
-import { Attachment } from "@/types/proto/api/v1/attachment_service";
-import { getAttachmentThumbnailUrl, getAttachmentType } from "@/utils/attachment";
-import SortableItem from "./SortableItem";
-
-interface Props {
-  attachmentList: Attachment[];
-  setAttachmentList: (attachmentList: Attachment[]) => void;
-}
-
-const AttachmentListView = (props: Props) => {
-  const { attachmentList, setAttachmentList } = props;
-  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
-
-  const handleDeleteAttachment = async (name: string) => {
-    setAttachmentList(attachmentList.filter((attachment) => attachment.name !== name));
-  };
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-
-    if (over && active.id !== over.id) {
-      const oldIndex = attachmentList.findIndex((attachment) => attachment.name === active.id);
-      const newIndex = attachmentList.findIndex((attachment) => attachment.name === over.id);
-
-      setAttachmentList(arrayMove(attachmentList, oldIndex, newIndex));
-    }
-  };
-
-  return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <SortableContext items={attachmentList.map((attachment) => attachment.name)} strategy={verticalListSortingStrategy}>
-        {attachmentList.length > 0 && (
-          <div className="w-full flex flex-row justify-start flex-wrap gap-2 mt-2 max-h-[50vh] overflow-y-auto">
-            {attachmentList.map((attachment) => {
-              return (
-                <div
-                  key={attachment.name}
-                  className="group relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background text-secondary-foreground text-xs transition-colors hover:bg-accent"
-                >
-                  <SortableItem id={attachment.name} className="flex items-center gap-1.5 min-w-0">
-                    {getAttachmentType(attachment) === "image/*" ? (
-                      <img
-                        src={getAttachmentThumbnailUrl(attachment)}
-                        alt={attachment.filename}
-                        className="w-5 h-5 shrink-0 object-cover rounded"
-                      />
-                    ) : (
-                      <FileIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
-                    )}
-                    <span className="truncate max-w-[160px]">{attachment.filename}</span>
-                  </SortableItem>
-                  <button
-                    className="shrink-0 rounded hover:bg-accent transition-colors p-0.5"
-                    onClick={() => handleDeleteAttachment(attachment.name)}
-                  >
-                    <XIcon className="w-3 h-3 text-muted-foreground hover:text-foreground" />
-                  </button>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </SortableContext>
-    </DndContext>
-  );
-};
-
-export default AttachmentListView;
diff --git a/web/src/components/MemoEditor/LocationView.tsx b/web/src/components/MemoEditor/LocationView.tsx
deleted file mode 100644
index 253130b8a..000000000
--- a/web/src/components/MemoEditor/LocationView.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { MapPinIcon, XIcon } from "lucide-react";
-import { Location } from "@/types/proto/api/v1/memo_service";
-
-interface Props {
-  location?: Location;
-  onRemove: () => void;
-}
-
-const LocationView = (props: Props) => {
-  if (!props.location) {
-    return null;
-  }
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-2 mt-2">
-      <div className="group relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background text-secondary-foreground text-xs transition-colors hover:bg-accent">
-        <MapPinIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
-        <span className="truncate max-w-[160px]">{props.location.placeholder}</span>
-        <button
-          className="shrink-0 rounded hover:bg-accent transition-colors p-0.5"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            props.onRemove();
-          }}
-        >
-          <XIcon className="w-3 h-3 text-muted-foreground hover:text-foreground" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default LocationView;
diff --git a/web/src/components/MemoEditor/RelationListView.tsx b/web/src/components/MemoEditor/RelationListView.tsx
deleted file mode 100644
index af2dd69d0..000000000
--- a/web/src/components/MemoEditor/RelationListView.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { LinkIcon, XIcon } from "lucide-react";
-import { observer } from "mobx-react-lite";
-import { useEffect, useState } from "react";
-import { memoStore } from "@/store";
-import { Memo, MemoRelation, MemoRelation_Type } from "@/types/proto/api/v1/memo_service";
-
-interface Props {
-  relationList: MemoRelation[];
-  setRelationList: (relationList: MemoRelation[]) => void;
-}
-
-const RelationListView = observer((props: Props) => {
-  const { relationList, setRelationList } = props;
-  const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
-
-  useEffect(() => {
-    (async () => {
-      const requests = relationList
-        .filter((relation) => relation.type === MemoRelation_Type.REFERENCE)
-        .map(async (relation) => {
-          return await memoStore.getOrFetchMemoByName(relation.relatedMemo!.name, { skipStore: true });
-        });
-      const list = await Promise.all(requests);
-      setReferencingMemoList(list);
-    })();
-  }, [relationList]);
-
-  const handleDeleteRelation = async (memo: Memo) => {
-    setRelationList(relationList.filter((relation) => relation.relatedMemo?.name !== memo.name));
-  };
-
-  return (
-    <>
-      {referencingMemoList.length > 0 && (
-        <div className="w-full flex flex-row gap-2 mt-2 flex-wrap">
-          {referencingMemoList.map((memo) => {
-            return (
-              <div
-                key={memo.name}
-                className="group relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background text-secondary-foreground text-xs transition-colors hover:bg-accent cursor-pointer"
-                onClick={() => handleDeleteRelation(memo)}
-              >
-                <LinkIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
-                <span className="truncate max-w-[160px]">{memo.snippet}</span>
-                <XIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-});
-
-export default RelationListView;
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 4b48d7401..e9868ca75 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -20,12 +20,10 @@ import { Location, Memo, MemoRelation, MemoRelation_Type, Visibility } from "@/t
 import { useTranslate } from "@/utils/i18n";
 import { convertVisibilityFromString } from "@/utils/memo";
 import DateTimeInput from "../DateTimeInput";
+import { LocationDisplay, AttachmentList, RelationList } from "../memo-metadata";
 import InsertMenu from "./ActionButton/InsertMenu";
 import VisibilitySelector from "./ActionButton/VisibilitySelector";
-import AttachmentListView from "./AttachmentListView";
 import Editor, { EditorRefActions } from "./Editor";
-import LocationView from "./LocationView";
-import RelationListView from "./RelationListView";
 import { handleEditorKeydownWithMarkdownShortcuts, hyperlinkHighlightedText } from "./handlers";
 import { MemoEditorContext } from "./types";
 
@@ -490,7 +488,8 @@ const MemoEditor = observer((props: Props) => {
         onCompositionEnd={handleCompositionEnd}
       >
         <Editor ref={editorRef} {...editorConfig} />
-        <LocationView
+        <LocationDisplay
+          mode="edit"
           location={state.location}
           onRemove={() =>
             setState((prevState) => ({
@@ -499,8 +498,8 @@ const MemoEditor = observer((props: Props) => {
             }))
           }
         />
-        <AttachmentListView attachmentList={state.attachmentList} setAttachmentList={handleSetAttachmentList} />
-        <RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
+        <AttachmentList mode="edit" attachments={state.attachmentList} onAttachmentsChange={handleSetAttachmentList} />
+        <RelationList mode="edit" relations={referenceRelations} onRelationsChange={handleSetRelationList} />
         <div className="relative w-full flex flex-row justify-between items-center pt-2 gap-2" onFocus={(e) => e.stopPropagation()}>
           <div className="flex flex-row justify-start items-center gap-1">
             <InsertMenu
diff --git a/web/src/components/MemoLocationView.tsx b/web/src/components/MemoLocationView.tsx
deleted file mode 100644
index e2f39c037..000000000
--- a/web/src/components/MemoLocationView.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { LatLng } from "leaflet";
-import { MapPinIcon } from "lucide-react";
-import { useState } from "react";
-import { Location } from "@/types/proto/api/v1/memo_service";
-import LeafletMap from "./LeafletMap";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-
-interface Props {
-  location: Location;
-}
-
-const MemoLocationView: React.FC<Props> = (props: Props) => {
-  const { location } = props;
-  const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
-
-  return (
-    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-      <PopoverTrigger asChild>
-        <p className="w-full flex flex-row gap-0.5 items-center text-muted-foreground hover:text-foreground cursor-pointer transition-colors">
-          <MapPinIcon className="w-4 h-auto shrink-0" />
-          <span className="text-sm font-normal text-ellipsis whitespace-nowrap overflow-hidden">
-            {location.placeholder ? location.placeholder : `[${location.latitude}, ${location.longitude}]`}
-          </span>
-        </p>
-      </PopoverTrigger>
-      <PopoverContent align="start">
-        <div className="min-w-80 sm:w-lg flex flex-col justify-start items-start">
-          <LeafletMap latlng={new LatLng(location.latitude, location.longitude)} readonly={true} />
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export default MemoLocationView;
diff --git a/web/src/components/MemoRelationListView.tsx b/web/src/components/MemoRelationListView.tsx
deleted file mode 100644
index 7699a1dbc..000000000
--- a/web/src/components/MemoRelationListView.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { LinkIcon, MilestoneIcon } from "lucide-react";
-import { memo, useState } from "react";
-import { Link } from "react-router-dom";
-import { cn } from "@/lib/utils";
-import { extractMemoIdFromName } from "@/store/common";
-import { Memo, MemoRelation } from "@/types/proto/api/v1/memo_service";
-import { useTranslate } from "@/utils/i18n";
-
-interface Props {
-  memo: Memo;
-  relations: MemoRelation[];
-  parentPage?: string;
-}
-
-const MemoRelationListView = (props: Props) => {
-  const t = useTranslate();
-  const { memo, relations: relationList, parentPage } = props;
-  const referencingMemoList = relationList
-    .filter((relation) => relation.memo?.name === memo.name && relation.relatedMemo?.name !== memo.name)
-    .map((relation) => relation.relatedMemo!);
-  const referencedMemoList = relationList
-    .filter((relation) => relation.memo?.name !== memo.name && relation.relatedMemo?.name === memo.name)
-    .map((relation) => relation.memo!);
-  const [selectedTab, setSelectedTab] = useState<"referencing" | "referenced">(
-    referencingMemoList.length === 0 ? "referenced" : "referencing",
-  );
-
-  if (referencingMemoList.length + referencedMemoList.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1.5 bg-muted/50 rounded-lg border border-border">
-      <div className="w-full flex flex-row justify-start items-center mb-1 gap-3 opacity-60">
-        {referencingMemoList.length > 0 && (
-          <button
-            className={cn(
-              "w-auto flex flex-row justify-start items-center text-xs gap-0.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded px-1 py-0.5 transition-colors",
-              selectedTab === "referencing" && "text-foreground bg-accent",
-            )}
-            onClick={() => setSelectedTab("referencing")}
-          >
-            <LinkIcon className="w-3 h-auto shrink-0 opacity-70" />
-            <span>{t("common.referencing")}</span>
-            <span className="opacity-80">({referencingMemoList.length})</span>
-          </button>
-        )}
-        {referencedMemoList.length > 0 && (
-          <button
-            className={cn(
-              "w-auto flex flex-row justify-start items-center text-xs gap-0.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded px-1 py-0.5 transition-colors",
-              selectedTab === "referenced" && "text-foreground bg-accent",
-            )}
-            onClick={() => setSelectedTab("referenced")}
-          >
-            <MilestoneIcon className="w-3 h-auto shrink-0 opacity-70" />
-            <span>{t("common.referenced-by")}</span>
-            <span className="opacity-80">({referencedMemoList.length})</span>
-          </button>
-        )}
-      </div>
-      {selectedTab === "referencing" && referencingMemoList.length > 0 && (
-        <div className="w-full flex flex-col justify-start items-start">
-          {referencingMemoList.map((memo) => {
-            return (
-              <Link
-                key={memo.name}
-                className="w-full flex flex-row justify-start items-center text-sm leading-5 text-muted-foreground hover:text-foreground hover:bg-accent rounded px-2 py-1 transition-colors"
-                to={`/${memo.name}`}
-                viewTransition
-                state={{
-                  from: parentPage,
-                }}
-              >
-                <span className="text-xs opacity-60 leading-4 border border-border font-mono px-1 rounded-full mr-1">
-                  {extractMemoIdFromName(memo.name).slice(0, 6)}
-                </span>
-                <span className="truncate">{memo.snippet}</span>
-              </Link>
-            );
-          })}
-        </div>
-      )}
-      {selectedTab === "referenced" && referencedMemoList.length > 0 && (
-        <div className="w-full flex flex-col justify-start items-start">
-          {referencedMemoList.map((memo) => {
-            return (
-              <Link
-                key={memo.name}
-                className="w-full flex flex-row justify-start items-center text-sm leading-5 text-muted-foreground hover:text-foreground hover:bg-accent rounded px-2 py-1 transition-colors"
-                to={`/${memo.name}`}
-                viewTransition
-                state={{
-                  from: parentPage,
-                }}
-              >
-                <span className="text-xs opacity-60 leading-4 border border-border font-mono px-1 rounded-full mr-1">
-                  {extractMemoIdFromName(memo.name).slice(0, 6)}
-                </span>
-                <span className="truncate">{memo.snippet}</span>
-              </Link>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default memo(MemoRelationListView);
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 8d0384059..3040084b8 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -14,16 +14,14 @@ import { useTranslate } from "@/utils/i18n";
 import { convertVisibilityToString } from "@/utils/memo";
 import { isSuperUser } from "@/utils/user";
 import MemoActionMenu from "./MemoActionMenu";
-import MemoAttachmentListView from "./MemoAttachmentListView";
 import MemoContent from "./MemoContent";
 import MemoEditor from "./MemoEditor";
-import MemoLocationView from "./MemoLocationView";
 import MemoReactionistView from "./MemoReactionListView";
-import MemoRelationListView from "./MemoRelationListView";
 import PreviewImageDialog from "./PreviewImageDialog";
 import ReactionSelector from "./ReactionSelector";
 import UserAvatar from "./UserAvatar";
 import VisibilityIcon from "./VisibilityIcon";
+import { LocationDisplay, AttachmentList, RelationList } from "./memo-metadata";
 
 interface Props {
   memo: Memo;
@@ -256,9 +254,9 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
           compact={memo.pinned ? false : props.compact} // Always show full content when pinned.
           parentPage={parentPage}
         />
-        {memo.location && <MemoLocationView location={memo.location} />}
-        <MemoAttachmentListView attachments={memo.attachments} />
-        <MemoRelationListView memo={memo} relations={referencedMemos} parentPage={parentPage} />
+        {memo.location && <LocationDisplay mode="view" location={memo.location} />}
+        <AttachmentList mode="view" attachments={memo.attachments} />
+        <RelationList mode="view" relations={referencedMemos} currentMemoName={memo.name} parentPage={parentPage} />
         <MemoReactionistView memo={memo} reactions={memo.reactions} />
       </div>
       {nsfw && !showNSFWContent && (
diff --git a/web/src/components/memo-metadata/AttachmentCard.tsx b/web/src/components/memo-metadata/AttachmentCard.tsx
new file mode 100644
index 000000000..4b60f03ee
--- /dev/null
+++ b/web/src/components/memo-metadata/AttachmentCard.tsx
@@ -0,0 +1,96 @@
+import { FileIcon, XIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Attachment } from "@/types/proto/api/v1/attachment_service";
+import { getAttachmentThumbnailUrl, getAttachmentType, getAttachmentUrl } from "@/utils/attachment";
+import { DisplayMode } from "./types";
+
+interface AttachmentCardProps {
+  attachment: Attachment;
+  mode: DisplayMode;
+  onRemove?: () => void;
+  onClick?: () => void;
+  className?: string;
+  showThumbnail?: boolean;
+}
+
+/**
+ * Shared attachment card component
+ * Displays thumbnails for images in both modes, with size variations
+ */
+const AttachmentCard = ({ attachment, mode, onRemove, onClick, className, showThumbnail = true }: AttachmentCardProps) => {
+  const type = getAttachmentType(attachment);
+  const attachmentUrl = getAttachmentUrl(attachment);
+  const attachmentThumbnailUrl = getAttachmentThumbnailUrl(attachment);
+  const isMedia = type === "image/*" || type === "video/*";
+
+  // Editor mode - compact badge style with thumbnail
+  if (mode === "edit") {
+    return (
+      <div
+        className={cn(
+          "group relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background text-secondary-foreground text-xs transition-colors hover:bg-accent",
+          className,
+        )}
+      >
+        {showThumbnail && type === "image/*" ? (
+          <img src={attachmentThumbnailUrl} alt={attachment.filename} className="w-5 h-5 shrink-0 object-cover rounded" />
+        ) : (
+          <FileIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+        )}
+        <span className="truncate max-w-[160px]">{attachment.filename}</span>
+        {onRemove && (
+          <button
+            className="shrink-0 rounded hover:bg-accent transition-colors p-0.5"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemove();
+            }}
+          >
+            <XIcon className="w-3 h-3 text-muted-foreground hover:text-foreground" />
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  // View mode - media gets special treatment
+  if (isMedia) {
+    if (type === "image/*") {
+      return (
+        <img
+          className={cn("cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain transition-colors", className)}
+          src={attachmentThumbnailUrl}
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            if (target.src.includes("?thumbnail=true")) {
+              target.src = attachmentUrl;
+            }
+          }}
+          onClick={onClick}
+          decoding="async"
+          loading="lazy"
+          alt={attachment.filename}
+        />
+      );
+    } else if (type === "video/*") {
+      return (
+        <video
+          className={cn(
+            "cursor-pointer h-full w-auto rounded-lg border border-border/60 object-contain bg-muted transition-colors",
+            className,
+          )}
+          preload="metadata"
+          crossOrigin="anonymous"
+          src={attachmentUrl}
+          controls
+        />
+      );
+    }
+  }
+
+  // View mode - non-media files (will be handled by parent component for proper file card display)
+  return null;
+};
+
+export default AttachmentCard;
diff --git a/web/src/components/memo-metadata/AttachmentList.tsx b/web/src/components/memo-metadata/AttachmentList.tsx
new file mode 100644
index 000000000..bf1010fae
--- /dev/null
+++ b/web/src/components/memo-metadata/AttachmentList.tsx
@@ -0,0 +1,144 @@
+import { DndContext, closestCenter, MouseSensor, TouchSensor, useSensor, useSensors, DragEndEvent } from "@dnd-kit/core";
+import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useState } from "react";
+import { Attachment } from "@/types/proto/api/v1/attachment_service";
+import { getAttachmentType, getAttachmentUrl } from "@/utils/attachment";
+import MemoAttachment from "../MemoAttachment";
+import SortableItem from "../MemoEditor/SortableItem";
+import PreviewImageDialog from "../PreviewImageDialog";
+import AttachmentCard from "./AttachmentCard";
+import { BaseMetadataProps } from "./types";
+
+interface AttachmentListProps extends BaseMetadataProps {
+  attachments: Attachment[];
+  onAttachmentsChange?: (attachments: Attachment[]) => void;
+}
+
+/**
+ * Unified AttachmentList component for both editor and view modes
+ *
+ * Editor mode:
+ * - Shows all attachments as sortable badges with thumbnails
+ * - Supports drag-and-drop reordering
+ * - Shows remove buttons
+ *
+ * View mode:
+ * - Separates media (images/videos) from other files
+ * - Shows media in gallery layout with preview
+ * - Shows other files as clickable cards
+ */
+const AttachmentList = ({ attachments, mode, onAttachmentsChange }: AttachmentListProps) => {
+  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
+  const [previewImage, setPreviewImage] = useState<{ open: boolean; urls: string[]; index: number }>({
+    open: false,
+    urls: [],
+    index: 0,
+  });
+
+  const handleDeleteAttachment = (name: string) => {
+    if (onAttachmentsChange) {
+      onAttachmentsChange(attachments.filter((attachment) => attachment.name !== name));
+    }
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id && onAttachmentsChange) {
+      const oldIndex = attachments.findIndex((attachment) => attachment.name === active.id);
+      const newIndex = attachments.findIndex((attachment) => attachment.name === over.id);
+      onAttachmentsChange(arrayMove(attachments, oldIndex, newIndex));
+    }
+  };
+
+  const handleImageClick = (imgUrl: string, mediaAttachments: Attachment[]) => {
+    const imgUrls = mediaAttachments
+      .filter((attachment) => getAttachmentType(attachment) === "image/*")
+      .map((attachment) => getAttachmentUrl(attachment));
+    const index = imgUrls.findIndex((url) => url === imgUrl);
+    setPreviewImage({ open: true, urls: imgUrls, index });
+  };
+
+  // Editor mode: Show all attachments as sortable badges
+  if (mode === "edit") {
+    if (attachments.length === 0) {
+      return null;
+    }
+
+    return (
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={attachments.map((attachment) => attachment.name)} strategy={verticalListSortingStrategy}>
+          <div className="w-full flex flex-row justify-start flex-wrap gap-2 mt-2 max-h-[50vh] overflow-y-auto">
+            {attachments.map((attachment) => (
+              <div key={attachment.name}>
+                <SortableItem id={attachment.name} className="flex items-center gap-1.5 min-w-0">
+                  <AttachmentCard
+                    attachment={attachment}
+                    mode="edit"
+                    onRemove={() => handleDeleteAttachment(attachment.name)}
+                    showThumbnail={true}
+                  />
+                </SortableItem>
+              </div>
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+    );
+  }
+
+  // View mode: Separate media from other files
+  const mediaAttachments: Attachment[] = [];
+  const otherAttachments: Attachment[] = [];
+
+  attachments.forEach((attachment) => {
+    const type = getAttachmentType(attachment);
+    if (type === "image/*" || type === "video/*") {
+      mediaAttachments.push(attachment);
+    } else {
+      otherAttachments.push(attachment);
+    }
+  });
+
+  return (
+    <>
+      {/* Media Gallery */}
+      {mediaAttachments.length > 0 && (
+        <div className="w-full flex flex-row justify-start overflow-auto gap-2">
+          {mediaAttachments.map((attachment) => (
+            <div key={attachment.name} className="max-w-[60%] w-fit flex flex-col justify-start items-start shrink-0">
+              <AttachmentCard
+                attachment={attachment}
+                mode="view"
+                onClick={() => {
+                  const attachmentUrl = getAttachmentUrl(attachment);
+                  handleImageClick(attachmentUrl, mediaAttachments);
+                }}
+                className="max-h-64 grow"
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Other Files */}
+      {otherAttachments.length > 0 && (
+        <div className="w-full flex flex-row justify-start overflow-auto gap-2">
+          {otherAttachments.map((attachment) => (
+            <MemoAttachment key={attachment.name} attachment={attachment} />
+          ))}
+        </div>
+      )}
+
+      {/* Image Preview Dialog */}
+      <PreviewImageDialog
+        open={previewImage.open}
+        onOpenChange={(open) => setPreviewImage((prev) => ({ ...prev, open }))}
+        imgUrls={previewImage.urls}
+        initialIndex={previewImage.index}
+      />
+    </>
+  );
+};
+
+export default AttachmentList;
diff --git a/web/src/components/memo-metadata/LocationDisplay.tsx b/web/src/components/memo-metadata/LocationDisplay.tsx
new file mode 100644
index 000000000..1c57f508a
--- /dev/null
+++ b/web/src/components/memo-metadata/LocationDisplay.tsx
@@ -0,0 +1,62 @@
+import { LatLng } from "leaflet";
+import { ExternalLinkIcon, MapPinIcon } from "lucide-react";
+import { useState } from "react";
+import { Location } from "@/types/proto/api/v1/memo_service";
+import LeafletMap from "../LeafletMap";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import MetadataBadge from "./MetadataBadge";
+import { BaseMetadataProps } from "./types";
+
+interface LocationDisplayProps extends BaseMetadataProps {
+  location?: Location;
+  onRemove?: () => void;
+  onClick?: () => void;
+}
+
+/**
+ * Unified Location component for both editor and view modes
+ *
+ * Editor mode: Shows badge with remove button
+ * View mode: Shows badge with popover map on click
+ */
+const LocationDisplay = ({ location, mode, onRemove, onClick, className }: LocationDisplayProps) => {
+  const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
+
+  if (!location) {
+    return null;
+  }
+
+  const displayText = location.placeholder || `[${location.latitude}, ${location.longitude}]`;
+
+  // Editor mode: Simple badge with remove button
+  if (mode === "edit") {
+    return (
+      <div className="w-full flex flex-row flex-wrap gap-2 mt-2">
+        <MetadataBadge icon={<MapPinIcon className="w-3.5 h-3.5" />} onRemove={onRemove} onClick={onClick} className={className}>
+          {displayText}
+        </MetadataBadge>
+      </div>
+    );
+  }
+
+  // View mode: Badge with popover map
+  return (
+    <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+      <PopoverTrigger asChild>
+        <div className="w-full flex flex-row flex-wrap gap-2">
+          <MetadataBadge icon={<MapPinIcon className="w-3.5 h-3.5" />} onClick={() => setPopoverOpen(true)} className={className}>
+            <span>{displayText}</span>
+            <ExternalLinkIcon className="w-2.5 h-2.5 ml-1 opacity-50" />
+          </MetadataBadge>
+        </div>
+      </PopoverTrigger>
+      <PopoverContent align="start">
+        <div className="min-w-80 sm:w-lg flex flex-col justify-start items-start">
+          <LeafletMap latlng={new LatLng(location.latitude, location.longitude)} readonly={true} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default LocationDisplay;
diff --git a/web/src/components/memo-metadata/MetadataBadge.tsx b/web/src/components/memo-metadata/MetadataBadge.tsx
new file mode 100644
index 000000000..2ce092af2
--- /dev/null
+++ b/web/src/components/memo-metadata/MetadataBadge.tsx
@@ -0,0 +1,46 @@
+import { XIcon } from "lucide-react";
+import { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface MetadataBadgeProps {
+  icon: ReactNode;
+  children: ReactNode;
+  onRemove?: () => void;
+  onClick?: () => void;
+  className?: string;
+  maxWidth?: string;
+}
+
+/**
+ * Shared badge component for metadata display (Location, Tags, etc.)
+ * Provides consistent styling across editor and view modes
+ */
+const MetadataBadge = ({ icon, children, onRemove, onClick, className, maxWidth = "max-w-[160px]" }: MetadataBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        "group relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background text-secondary-foreground text-xs transition-colors",
+        onClick && "cursor-pointer hover:bg-accent",
+        className,
+      )}
+      onClick={onClick}
+    >
+      <span className="shrink-0 text-muted-foreground">{icon}</span>
+      <span className={cn("truncate", maxWidth)}>{children}</span>
+      {onRemove && (
+        <button
+          className="shrink-0 rounded hover:bg-accent transition-colors p-0.5"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onRemove();
+          }}
+        >
+          <XIcon className="w-3 h-3 text-muted-foreground hover:text-foreground" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default MetadataBadge;
diff --git a/web/src/components/memo-metadata/MetadataCard.tsx b/web/src/components/memo-metadata/MetadataCard.tsx
new file mode 100644
index 000000000..3c66d2dd3
--- /dev/null
+++ b/web/src/components/memo-metadata/MetadataCard.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface MetadataCardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Shared card component for structured metadata (Relations, Comments, etc.)
+ * Provides consistent card styling across editor and view modes
+ */
+const MetadataCard = ({ children, className }: MetadataCardProps) => {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1.5 bg-muted/50 rounded-lg border border-border",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default MetadataCard;
diff --git a/web/src/components/memo-metadata/RelationCard.tsx b/web/src/components/memo-metadata/RelationCard.tsx
new file mode 100644
index 000000000..9ae34dafb
--- /dev/null
+++ b/web/src/components/memo-metadata/RelationCard.tsx
@@ -0,0 +1,61 @@
+import { LinkIcon, XIcon } from "lucide-react";
+import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
+import { extractMemoIdFromName } from "@/store/common";
+import { MemoRelation_Memo } from "@/types/proto/api/v1/memo_service";
+import { DisplayMode } from "./types";
+
+interface RelationCardProps {
+  memo: MemoRelation_Memo;
+  mode: DisplayMode;
+  onRemove?: () => void;
+  parentPage?: string;
+  className?: string;
+}
+
+/**
+ * Shared relation card component for displaying linked memos
+ *
+ * Editor mode: Badge with remove button, click to remove
+ * View mode: Link with memo ID and snippet, click to navigate
+ */
+const RelationCard = ({ memo, mode, onRemove, parentPage, className }: RelationCardProps) => {
+  const memoId = extractMemoIdFromName(memo.name);
+
+  // Editor mode: Badge with remove
+  if (mode === "edit") {
+    return (
+      <div
+        className={cn(
+          "group relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background text-secondary-foreground text-xs transition-colors hover:bg-accent cursor-pointer",
+          className,
+        )}
+        onClick={onRemove}
+      >
+        <LinkIcon className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+        <span className="truncate max-w-[160px]">{memo.snippet}</span>
+        <XIcon className="w-3 h-3 shrink-0 text-muted-foreground" />
+      </div>
+    );
+  }
+
+  // View mode: Navigable link with ID and snippet
+  return (
+    <Link
+      className={cn(
+        "w-full flex flex-row justify-start items-center text-sm leading-5 text-muted-foreground hover:text-foreground hover:bg-accent rounded px-2 py-1 transition-colors",
+        className,
+      )}
+      to={`/${memo.name}`}
+      viewTransition
+      state={{
+        from: parentPage,
+      }}
+    >
+      <span className="text-xs opacity-60 leading-4 border border-border font-mono px-1 rounded-full mr-1">{memoId.slice(0, 6)}</span>
+      <span className="truncate">{memo.snippet}</span>
+    </Link>
+  );
+};
+
+export default RelationCard;
diff --git a/web/src/components/memo-metadata/RelationList.tsx b/web/src/components/memo-metadata/RelationList.tsx
new file mode 100644
index 000000000..85ff0f4da
--- /dev/null
+++ b/web/src/components/memo-metadata/RelationList.tsx
@@ -0,0 +1,153 @@
+import { LinkIcon, MilestoneIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { memoStore } from "@/store";
+import { Memo, MemoRelation, MemoRelation_Type } from "@/types/proto/api/v1/memo_service";
+import { useTranslate } from "@/utils/i18n";
+import MetadataCard from "./MetadataCard";
+import RelationCard from "./RelationCard";
+import { BaseMetadataProps } from "./types";
+
+interface RelationListProps extends BaseMetadataProps {
+  relations: MemoRelation[];
+  currentMemoName?: string;
+  onRelationsChange?: (relations: MemoRelation[]) => void;
+  parentPage?: string;
+}
+
+/**
+ * Unified RelationList component for both editor and view modes
+ *
+ * Editor mode:
+ * - Shows only outgoing relations (referencing)
+ * - Badge-style display with remove buttons
+ * - Compact inline layout
+ *
+ * View mode:
+ * - Shows bidirectional relations in tabbed card
+ * - "Referencing" tab: Memos this memo links to
+ * - "Referenced by" tab: Memos that link to this memo
+ * - Navigable links with memo IDs
+ */
+const RelationList = observer(({ relations, currentMemoName, mode, onRelationsChange, parentPage, className }: RelationListProps) => {
+  const t = useTranslate();
+  const [referencingMemos, setReferencingMemos] = useState<Memo[]>([]);
+  const [selectedTab, setSelectedTab] = useState<"referencing" | "referenced">("referencing");
+
+  // Get referencing and referenced relations
+  const referencingRelations = relations.filter(
+    (relation) =>
+      relation.type === MemoRelation_Type.REFERENCE &&
+      (mode === "edit" || relation.memo?.name === currentMemoName) &&
+      relation.relatedMemo?.name !== currentMemoName,
+  );
+
+  const referencedRelations = relations.filter(
+    (relation) =>
+      relation.type === MemoRelation_Type.REFERENCE &&
+      relation.memo?.name !== currentMemoName &&
+      relation.relatedMemo?.name === currentMemoName,
+  );
+
+  // Fetch full memo details for editor mode
+  useEffect(() => {
+    if (mode === "edit" && referencingRelations.length > 0) {
+      (async () => {
+        const requests = referencingRelations.map(async (relation) => {
+          return await memoStore.getOrFetchMemoByName(relation.relatedMemo!.name, { skipStore: true });
+        });
+        const list = await Promise.all(requests);
+        setReferencingMemos(list);
+      })();
+    }
+  }, [mode, relations]);
+
+  const handleDeleteRelation = (memoName: string) => {
+    if (onRelationsChange) {
+      onRelationsChange(relations.filter((relation) => relation.relatedMemo?.name !== memoName));
+    }
+  };
+
+  // Editor mode: Simple badge list
+  if (mode === "edit") {
+    if (referencingMemos.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className="w-full flex flex-row gap-2 mt-2 flex-wrap">
+        {referencingMemos.map((memo) => (
+          <RelationCard
+            key={memo.name}
+            memo={{ name: memo.name, snippet: memo.snippet }}
+            mode="edit"
+            onRemove={() => handleDeleteRelation(memo.name)}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  // View mode: Tabbed card with bidirectional relations
+  if (referencingRelations.length === 0 && referencedRelations.length === 0) {
+    return null;
+  }
+
+  // Auto-select tab based on which has content
+  const activeTab = referencingRelations.length === 0 ? "referenced" : selectedTab;
+
+  return (
+    <MetadataCard className={className}>
+      {/* Tabs */}
+      <div className="w-full flex flex-row justify-start items-center mb-1 gap-3 opacity-60">
+        {referencingRelations.length > 0 && (
+          <button
+            className={cn(
+              "w-auto flex flex-row justify-start items-center text-xs gap-0.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded px-1 py-0.5 transition-colors",
+              activeTab === "referencing" && "text-foreground bg-accent",
+            )}
+            onClick={() => setSelectedTab("referencing")}
+          >
+            <LinkIcon className="w-3 h-auto shrink-0 opacity-70" />
+            <span>{t("common.referencing")}</span>
+            <span className="opacity-80">({referencingRelations.length})</span>
+          </button>
+        )}
+        {referencedRelations.length > 0 && (
+          <button
+            className={cn(
+              "w-auto flex flex-row justify-start items-center text-xs gap-0.5 text-muted-foreground hover:text-foreground hover:bg-accent rounded px-1 py-0.5 transition-colors",
+              activeTab === "referenced" && "text-foreground bg-accent",
+            )}
+            onClick={() => setSelectedTab("referenced")}
+          >
+            <MilestoneIcon className="w-3 h-auto shrink-0 opacity-70" />
+            <span>{t("common.referenced-by")}</span>
+            <span className="opacity-80">({referencedRelations.length})</span>
+          </button>
+        )}
+      </div>
+
+      {/* Referencing List */}
+      {activeTab === "referencing" && referencingRelations.length > 0 && (
+        <div className="w-full flex flex-col justify-start items-start">
+          {referencingRelations.map((relation) => (
+            <RelationCard key={relation.relatedMemo!.name} memo={relation.relatedMemo!} mode="view" parentPage={parentPage} />
+          ))}
+        </div>
+      )}
+
+      {/* Referenced List */}
+      {activeTab === "referenced" && referencedRelations.length > 0 && (
+        <div className="w-full flex flex-col justify-start items-start">
+          {referencedRelations.map((relation) => (
+            <RelationCard key={relation.memo!.name} memo={relation.memo!} mode="view" parentPage={parentPage} />
+          ))}
+        </div>
+      )}
+    </MetadataCard>
+  );
+});
+
+export default RelationList;
diff --git a/web/src/components/memo-metadata/index.ts b/web/src/components/memo-metadata/index.ts
new file mode 100644
index 000000000..78fa92ba7
--- /dev/null
+++ b/web/src/components/memo-metadata/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Unified memo metadata components
+ * Provides consistent styling and behavior across editor and view modes
+ */
+
+export { default as LocationDisplay } from "./LocationDisplay";
+export { default as AttachmentList } from "./AttachmentList";
+export { default as RelationList } from "./RelationList";
+
+// Base components (can be used for other metadata types)
+export { default as MetadataBadge } from "./MetadataBadge";
+export { default as MetadataCard } from "./MetadataCard";
+export { default as AttachmentCard } from "./AttachmentCard";
+export { default as RelationCard } from "./RelationCard";
+
+// Types
+export type { DisplayMode, BaseMetadataProps } from "./types";
diff --git a/web/src/components/memo-metadata/types.ts b/web/src/components/memo-metadata/types.ts
new file mode 100644
index 000000000..34f2214a4
--- /dev/null
+++ b/web/src/components/memo-metadata/types.ts
@@ -0,0 +1,10 @@
+/**
+ * Common types for memo metadata components
+ */
+
+export type DisplayMode = "edit" | "view";
+
+export interface BaseMetadataProps {
+  mode: DisplayMode;
+  className?: string;
+}