From 664b8c56290026ba2beb7b75db24c684824b8670 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 26 Feb 2026 23:18:11 +0800
Subject: [PATCH] fix(ui): unify metadata component styles across MemoView and
 MemoEditor

Align header padding, text color, background tokens, and item row styles
across CodeBlock, AttachmentList, RelationList, and LocationDisplay so all
metadata panels follow the same visual pattern.
---
 web/src/components/MemoContent/CodeBlock.tsx         | 12 ++++++------
 .../MemoEditor/components/AttachmentList.tsx         |  4 ++--
 .../MemoEditor/components/LocationDisplay.tsx        |  2 +-
 .../MemoEditor/components/RelationList.tsx           |  4 ++--
 .../MemoView/components/metadata/AttachmentList.tsx  |  4 ++--
 .../MemoView/components/metadata/LocationDisplay.tsx |  2 +-
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index 8dfa91a3..f74e1c7f 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -115,17 +115,17 @@ export const CodeBlock = ({ children, className, node: _node, ...props }: CodeBl
   };
 
   return (
-    <pre className="relative my-2 rounded-lg border border-border bg-muted/30 overflow-hidden">
+    <pre className="relative my-2 rounded-lg border border-border bg-muted/20 overflow-hidden">
       {/* Header with language label and copy button */}
-      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-accent/50">
-        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide select-none">{language || "text"}</span>
+      <div className="flex items-center justify-between px-2 py-1 border-b border-border bg-muted/30">
+        <span className="text-xs text-foreground select-none">{language || "text"}</span>
         <button
           onClick={handleCopy}
           className={cn(
-            "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-xs font-medium",
-            "transition-all duration-200",
+            "inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs",
+            "transition-colors duration-200",
             "hover:bg-accent active:scale-95",
-            copied ? "text-primary bg-primary/10" : "text-muted-foreground",
+            copied ? "text-primary" : "text-muted-foreground hover:text-foreground",
           )}
           aria-label={copied ? "Copied" : "Copy code"}
           title={copied ? "Copied!" : "Copy code"}
diff --git a/web/src/components/MemoEditor/components/AttachmentList.tsx b/web/src/components/MemoEditor/components/AttachmentList.tsx
index dda1d3bd..a35416d6 100644
--- a/web/src/components/MemoEditor/components/AttachmentList.tsx
+++ b/web/src/components/MemoEditor/components/AttachmentList.tsx
@@ -139,9 +139,9 @@ const AttachmentList: FC<AttachmentListProps> = ({ attachments, localFiles = [],
 
   return (
     <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">
+      <div className="flex items-center gap-1.5 px-2 py-1 border-b border-border bg-muted/30">
         <PaperclipIcon className="w-3.5 h-3.5 text-muted-foreground" />
-        <span className="text-xs text-muted-foreground">Attachments ({items.length})</span>
+        <span className="text-xs text-foreground">Attachments ({items.length})</span>
       </div>
 
       <div className="p-1 sm:p-1.5 flex flex-col gap-0.5">
diff --git a/web/src/components/MemoEditor/components/LocationDisplay.tsx b/web/src/components/MemoEditor/components/LocationDisplay.tsx
index 3db21e53..0daf6079 100644
--- a/web/src/components/MemoEditor/components/LocationDisplay.tsx
+++ b/web/src/components/MemoEditor/components/LocationDisplay.tsx
@@ -15,7 +15,7 @@ const LocationDisplay: FC<LocationDisplayProps> = ({ location, onRemove, classNa
   return (
     <div
       className={cn(
-        "relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-border bg-background hover:bg-accent/20 transition-all w-full",
+        "relative flex items-center gap-1.5 px-1.5 py-1 rounded border border-border bg-muted/20 hover:bg-accent/20 transition-all w-full",
         className,
       )}
     >
diff --git a/web/src/components/MemoEditor/components/RelationList.tsx b/web/src/components/MemoEditor/components/RelationList.tsx
index ae97692d..dc042df1 100644
--- a/web/src/components/MemoEditor/components/RelationList.tsx
+++ b/web/src/components/MemoEditor/components/RelationList.tsx
@@ -74,9 +74,9 @@ const RelationList: FC<RelationListProps> = ({ relations, onRelationsChange, par
 
   return (
     <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">
+      <div className="flex items-center gap-1.5 px-2 py-1 border-b border-border bg-muted/30">
         <LinkIcon className="w-3.5 h-3.5 text-muted-foreground" />
-        <span className="text-xs text-muted-foreground">Relations ({referenceRelations.length})</span>
+        <span className="text-xs text-foreground">Relations ({referenceRelations.length})</span>
       </div>
 
       <div className="p-1 sm:p-1.5 flex flex-col gap-0.5">
diff --git a/web/src/components/MemoView/components/metadata/AttachmentList.tsx b/web/src/components/MemoView/components/metadata/AttachmentList.tsx
index bb3e8a0f..ce18cea3 100644
--- a/web/src/components/MemoView/components/metadata/AttachmentList.tsx
+++ b/web/src/components/MemoView/components/metadata/AttachmentList.tsx
@@ -37,7 +37,7 @@ const DocumentItem = ({ attachment }: { attachment: Attachment }) => {
   const fileSizeLabel = attachment.size ? formatFileSize(Number(attachment.size)) : undefined;
 
   return (
-    <div className="flex items-center gap-1 px-1.5 py-1 rounded hover:bg-accent/20 transition-colors whitespace-nowrap">
+    <div className="flex items-center gap-1 px-1 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-accent/20 transition-colors whitespace-nowrap">
       <div className="shrink-0 w-5 h-5 rounded overflow-hidden bg-muted/40 flex items-center justify-center">
         <FileIcon className="w-3 h-3 text-muted-foreground" />
       </div>
@@ -136,7 +136,7 @@ const AttachmentList = ({ attachments }: AttachmentListProps) => {
       <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
         <SectionHeader icon={PaperclipIcon} title="Attachments" count={attachments.length} />
 
-        <div className="p-2 flex flex-col gap-1">
+        <div className="p-1.5 flex flex-col gap-1">
           {mediaItems.length > 0 && <MediaGrid attachments={mediaItems} onImageClick={handleImageClick} />}
 
           {mediaItems.length > 0 && docItems.length > 0 && <div className="border-t mt-1 border-border opacity-60" />}
diff --git a/web/src/components/MemoView/components/metadata/LocationDisplay.tsx b/web/src/components/MemoView/components/metadata/LocationDisplay.tsx
index 991d254c..675defd0 100644
--- a/web/src/components/MemoView/components/metadata/LocationDisplay.tsx
+++ b/web/src/components/MemoView/components/metadata/LocationDisplay.tsx
@@ -26,7 +26,7 @@ const LocationDisplay = ({ location, className }: LocationDisplayProps) => {
         <div
           className={cn(
             "w-auto max-w-full flex flex-row gap-2 cursor-pointer",
-            "relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-background hover:bg-accent text-secondary-foreground text-xs transition-colors",
+            "relative inline-flex items-center gap-1.5 px-2 h-7 rounded-md border border-border bg-muted/20 hover:bg-accent/20 text-muted-foreground hover:text-foreground text-xs transition-colors",
             className,
           )}
           onClick={() => setPopoverOpen(true)}