From c5116d39a9b807cc19536f63c4c8d41582a15cd4 Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Wed, 8 Apr 2026 14:38:20 -0400
Subject: [PATCH] Move pull request labels to sidebar

---
 .../_protected/$owner/$repo/pull.$pullId.tsx  | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx b/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
index a8e1c57..7d9af6b 100644
--- a/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
+++ b/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
@@ -219,25 +219,6 @@ function PullDetailPage() {
 						</span>
 					</div>
 
-					{/* Labels */}
-					{pr.labels.length > 0 && (
-						<div className="flex flex-wrap items-center gap-1.5">
-							{pr.labels.map((label) => (
-								<span
-									key={label.name}
-									className="rounded-full border px-2.5 py-0.5 text-xs font-medium"
-									style={{
-										borderColor: `#${label.color}40`,
-										backgroundColor: `#${label.color}15`,
-										color: `#${label.color}`,
-									}}
-								>
-									{label.name}
-								</span>
-							))}
-						</div>
-					)}
-
 					{/* Body */}
 					{pr.body ? (
 						<div className="rounded-lg border bg-surface-0 p-5">
@@ -354,6 +335,29 @@ function PullDetailPage() {
 
 				{/* Right sidebar: Metadata */}
 				<aside className="flex h-fit flex-col gap-6 xl:sticky xl:top-10">
+					{/* Labels */}
+					<SidebarSection title="Labels">
+						{pr.labels.length > 0 ? (
+							<div className="flex flex-wrap gap-1.5">
+								{pr.labels.map((label) => (
+									<span
+										key={label.name}
+										className="label-pill rounded-full px-2.5 py-0.5 text-xs font-medium"
+										style={
+											{
+												"--label-color": `#${label.color}`,
+											} as React.CSSProperties
+										}
+									>
+										{label.name}
+									</span>
+								))}
+							</div>
+						) : (
+							<p className="text-xs text-muted-foreground">No labels</p>
+						)}
+					</SidebarSection>
+
 					{/* Reviewers */}
 					<SidebarSection title="Reviewers">
 						{pr.requestedReviewers.length > 0 ? (
@@ -819,7 +823,7 @@ function PullDetailPageSkeleton() {
 				</div>
 
 				<aside className="flex h-fit flex-col gap-6 xl:sticky xl:top-10">
-					{[0, 1, 2].map((section) => (
+					{[0, 1, 2, 3].map((section) => (
 						<div key={section} className="flex flex-col gap-2.5">
 							<Skeleton className="h-3 w-20" />
 							<div className="flex flex-col gap-2">