From 3cb2332bc06b41eb9e39d3e18705bd5d1764b250 Mon Sep 17 00:00:00 2001
From: Jiang Bohan <bhjiang@outlook.com>
Date: Thu, 21 May 2026 17:55:38 +0800
Subject: [PATCH] feat(issues): align metadata trigger with sibling sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reshape the sidebar metadata trigger so it visually matches the Pull
requests / Details / Parent issue headers (muted "Metadata · N" row
instead of an icon+label button). Clicking still opens the existing
JSON dialog — folding the bag inline pushed the rest of the sidebar
down too much when the payload was large.
---
 .../views/issues/components/issue-detail.tsx  | 56 ++++++++++---------
 packages/views/locales/en/issues.json         |  1 -
 packages/views/locales/zh-Hans/issues.json    |  1 -
 3 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/packages/views/issues/components/issue-detail.tsx b/packages/views/issues/components/issue-detail.tsx
index 0792c31184..22488df43a 100644
--- a/packages/views/issues/components/issue-detail.tsx
+++ b/packages/views/issues/components/issue-detail.tsx
@@ -7,7 +7,6 @@ import { AppLink } from "../../navigation";
 import { useNavigation } from "../../navigation";
 import {
   Archive,
-  Braces,
   Calendar,
   CalendarClock,
   CalendarDays,
@@ -36,8 +35,8 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "@multica/ui/components/ui/tooltip";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@multica/ui/components/ui/dialog";
 import { Popover, PopoverTrigger, PopoverContent } from "@multica/ui/components/ui/popover";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@multica/ui/components/ui/dialog";
 import { Checkbox } from "@multica/ui/components/ui/checkbox";
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@multica/ui/components/ui/command";
 import { AvatarGroup, AvatarGroupCount } from "@multica/ui/components/ui/avatar";
@@ -653,7 +652,7 @@ export function IssueDetail({ issueId, onDelete, onDone, defaultSidebarOpen = tr
   const [detailsOpen, setDetailsOpen] = useState(true);
   const [parentIssueOpen, setParentIssueOpen] = useState(true);
   const [pullRequestsOpen, setPullRequestsOpen] = useState(true);
-  const [metadataDialogOpen, setMetadataDialogOpen] = useState(false);
+  const [metadataOpen, setMetadataOpen] = useState(false);
   const [tokenUsageOpen, setTokenUsageOpen] = useState(true);
   const githubSettings = useGitHubSettings();
 
@@ -1450,31 +1449,36 @@ export function IssueDetail({ issueId, onDelete, onDone, defaultSidebarOpen = tr
         </div>
       )}
 
-      {/* Metadata — agent-facing free-form KV bag. The values almost never
-          mean anything to humans, so we don't render them in the sidebar;
-          instead a small button reveals the raw JSON on demand. Button
-          hides itself when the bag is empty to keep the sidebar quiet. */}
+      {/* Metadata — agent-facing free-form KV bag. The values almost
+          never mean anything to humans, so the trigger row matches the
+          sibling section headers (Pull requests / Details / Parent issue)
+          but clicking opens a dialog with the raw JSON instead of expanding
+          inline — the payload can be large and pushing the rest of the
+          sidebar down was noisy. */}
       {Object.keys(issue.metadata ?? {}).length > 0 && (
-        <button
-          type="button"
-          onClick={() => setMetadataDialogOpen(true)}
-          className="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent/70 hover:text-foreground"
-        >
-          <Braces className="!size-3 shrink-0 stroke-[2.5]" />
-          {t(($) => $.detail.section_metadata)}
-        </button>
+        <>
+          <button
+            type="button"
+            className="flex w-full items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent/70 hover:text-foreground"
+            onClick={() => setMetadataOpen(true)}
+          >
+            {t(($) => $.detail.section_metadata)}
+            <span className="tabular-nums">
+              · {Object.keys(issue.metadata ?? {}).length}
+            </span>
+          </button>
+          <Dialog open={metadataOpen} onOpenChange={setMetadataOpen}>
+            <DialogContent className="max-w-2xl">
+              <DialogHeader>
+                <DialogTitle>{t(($) => $.detail.section_metadata)}</DialogTitle>
+              </DialogHeader>
+              <pre className="max-h-[60vh] overflow-auto rounded-md bg-muted p-3 font-mono text-xs">
+                {JSON.stringify(issue.metadata ?? {}, null, 2)}
+              </pre>
+            </DialogContent>
+          </Dialog>
+        </>
       )}
-
-      <Dialog open={metadataDialogOpen} onOpenChange={setMetadataDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t(($) => $.detail.metadata_dialog_title)}</DialogTitle>
-          </DialogHeader>
-          <pre className="max-h-[60vh] overflow-auto rounded-md bg-muted p-3 font-mono text-xs">
-            {JSON.stringify(issue.metadata ?? {}, null, 2)}
-          </pre>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 
diff --git a/packages/views/locales/en/issues.json b/packages/views/locales/en/issues.json
index 7563a65fbd..eafeeaa55b 100644
--- a/packages/views/locales/en/issues.json
+++ b/packages/views/locales/en/issues.json
@@ -143,7 +143,6 @@
     "section_parent_issue": "Parent issue",
     "section_pull_requests": "Pull requests",
     "section_metadata": "Metadata",
-    "metadata_dialog_title": "Metadata",
     "section_details": "Details",
     "section_token_usage": "Token usage",
     "pull_requests_loading": "Loading…",
diff --git a/packages/views/locales/zh-Hans/issues.json b/packages/views/locales/zh-Hans/issues.json
index aa3305873b..67dae78ac3 100644
--- a/packages/views/locales/zh-Hans/issues.json
+++ b/packages/views/locales/zh-Hans/issues.json
@@ -142,7 +142,6 @@
     "section_parent_issue": "父 issue",
     "section_pull_requests": "Pull Request",
     "section_metadata": "元数据",
-    "metadata_dialog_title": "元数据",
     "section_details": "详情",
     "section_token_usage": "Token 用量",
     "pull_requests_loading": "加载中…",