From efa2737b4b8d9401d1d7fd0c7dc75c2642ead6aa Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@aly.codes>
Date: Wed, 29 Jul 2026 21:23:10 -0400
Subject: [PATCH] Refine pull request branch display

---
 src/components/repo/RepoRecordView.tsx |  4 +++
 src/pages/PullPage.tsx                 | 36 ++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/repo/RepoRecordView.tsx b/src/components/repo/RepoRecordView.tsx
index cd0b038..1951bb8 100644
--- a/src/components/repo/RepoRecordView.tsx
+++ b/src/components/repo/RepoRecordView.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom'
+import type { ReactNode } from 'react'
 import type { ResolvedActor } from '../../lib/actor'
 import { ProfileAvatar } from '../profile/ProfileAvatar'
 import { MarkdownContent } from '../shared/MarkdownContent'
@@ -8,6 +9,7 @@ type RepoRecordViewProps = {
   author: ResolvedActor
   body?: string
   createdAt: string
+  details?: ReactNode
   mentions?: string[]
   references?: string[]
   title: string
@@ -17,6 +19,7 @@ export function RepoRecordView({
   author,
   body,
   createdAt,
+  details,
   mentions,
   references,
   title,
@@ -69,6 +72,7 @@ export function RepoRecordView({
             <RecordCount label="References" count={references.length} />
           )}
         </dl>
+        {details && <div className="mt-4">{details}</div>}
       </header>
 
       {body && (
diff --git a/src/pages/PullPage.tsx b/src/pages/PullPage.tsx
index 622dd3b..1cb9e60 100644
--- a/src/pages/PullPage.tsx
+++ b/src/pages/PullPage.tsx
@@ -1,4 +1,5 @@
 import { useParams, useSearchParams } from 'react-router-dom'
+import { IconArrowRight, IconGitBranch } from '@tabler/icons-react'
 import { PageContainer } from '../components/layout/PageContainer'
 import { ProfileByline } from '../components/profile/ProfileByline'
 import { PullChanges } from '../components/repo/PullChanges'
@@ -74,8 +75,11 @@ export function PullPage() {
           ]}
         />
         <section className="space-y-6">
-          <PullBranches pull={pull.value} />
-          <RepoRecordView author={recordAuthor} {...pull.value} />
+          <RepoRecordView
+            author={recordAuthor}
+            {...pull.value}
+            details={<PullBranches pull={pull.value} />}
+          />
           <Tabs
             ariaLabel="Pull request sections"
             items={[
@@ -104,8 +108,30 @@ export function PullPage() {
 function PullBranches({ pull }: { pull: PullPageData['record']['value'] }) {
   const source = pull.source?.branch ?? 'unknown source'
   return (
-    <p className="font-mono text-sm text-ctp-subtext-0">
-      {source} <span aria-hidden="true">→</span> {pull.target.branch}
-    </p>
+    <div
+      className="flex flex-wrap items-center gap-3 rounded bg-ctp-surface-0 px-3 py-2"
+      aria-label="Branches"
+    >
+      <Branch branch={source} label="Source" />
+      <IconArrowRight size={18} stroke={1.75} className="text-ctp-overlay-1" aria-hidden="true" />
+      <Branch branch={pull.target.branch} label="Target" />
+    </div>
+  )
+}
+
+function Branch({ branch, label }: { branch: string; label: string }) {
+  return (
+    <div className="min-w-0">
+      <p className="text-xs font-medium text-ctp-overlay-1">{label}</p>
+      <p className="mt-1 flex items-center gap-2 font-mono text-sm text-ctp-text">
+        <IconGitBranch
+          size={16}
+          stroke={1.75}
+          className="shrink-0 text-ctp-lavender"
+          aria-hidden="true"
+        />
+        <span className="truncate">{branch}</span>
+      </p>
+    </div>
   )
 }
-- 
2.51.2