From 06862ab010219f2ef478446d03f6cf705ae344e4 Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Fri, 9 Jan 2026 09:59:54 +0000
Subject: [PATCH] Fix GitHub PR button display and refactor RepoCard styling
 (Vibe Kanban) (#1872)

* Both issues have been fixed:

**1. Fixed translation parameter mismatch** (`RepoCard.tsx:170, 176`)
- Changed `{ prNumber }` to `{ number: prNumber }` to match the translation key `Open PR #{{number}}`

**2. Refactored PR badge styling** (`RepoCard.tsx:156-180`)
- Replaced hardcoded Tailwind colors with design system tokens:
  - Merged badge: `bg-panel text-success` (uses semantic success color)
  - Open PR button/badge: `bg-panel text-normal hover:bg-tertiary transition-colors`
- Updated spacing to use consistent tokens: `gap-half`, `px-base`, `py-half`
- Changed border radius from `rounded-full` to `rounded-sm` to match other UI elements in the panel

* Both fixes are complete:

1. **Added spacing** - Added `mt-half` to the PR status row container (line 158) to create visual separation from the Actions row below

2. **Made merged PRs clickable** - When `prStatus === 'merged'` and `prUrl` is available, it now renders a clickable `<button>` with:
   - The external link icon (`ArrowSquareOutIcon`)
   - Hover state (`hover:bg-tertiary`)
   - Same transition effect as the open PR button

* improve styles
---
 .../components/ui-new/primitives/RepoCard.tsx | 69 +++++++++++--------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/ui-new/primitives/RepoCard.tsx b/frontend/src/components/ui-new/primitives/RepoCard.tsx
index 00c94dd4..b657dee2 100644
--- a/frontend/src/components/ui-new/primitives/RepoCard.tsx
+++ b/frontend/src/components/ui-new/primitives/RepoCard.tsx
@@ -94,7 +94,7 @@ export function RepoCard({
         <div className="flex items-center justify-center">
           <CrosshairIcon className="size-icon-sm text-low" weight="bold" />
         </div>
-        <div className="flex-1 min-w-0">
+        <div className="flex-1 min-w-0 flex">
           <DropdownMenu>
             <DropdownMenuTriggerButton
               label={targetBranch}
@@ -119,6 +119,24 @@ export function RepoCard({
               )}
             </DropdownMenuContent>
           </DropdownMenu>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                className="flex items-center justify-center p-1.5 rounded hover:bg-tertiary text-low hover:text-base transition-colors"
+                title="Repo actions"
+              >
+                <ArrowSquareOutIcon className="size-icon-base" weight="bold" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem icon={CopyIcon} onClick={onCopyPath}>
+                {tCommon('actions.copyPath')}
+              </DropdownMenuItem>
+              <DropdownMenuItem icon={CodeIcon} onClick={onOpenInEditor}>
+                {tCommon('actions.openInIde')}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
 
         {/* Commits badge */}
@@ -155,56 +173,49 @@ export function RepoCard({
 
       {/* PR status row */}
       {prNumber && (
-        <div className="flex items-center gap-half">
+        <div className="flex items-center gap-half my-base">
           {prStatus === 'merged' ? (
-            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-100/70 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-sm font-medium">
-              <CheckCircleIcon className="size-icon-xs" weight="fill" />
-              {t('git.pr.merged', { prNumber })}
-            </span>
+            prUrl ? (
+              <button
+                onClick={() => window.open(prUrl, '_blank')}
+                className="inline-flex items-center gap-half px-base py-half rounded-sm bg-panel text-success hover:bg-tertiary text-sm font-medium transition-colors"
+              >
+                <CheckCircleIcon className="size-icon-xs" weight="fill" />
+                {t('git.pr.merged', { prNumber })}
+                <ArrowSquareOutIcon className="size-icon-xs" weight="bold" />
+              </button>
+            ) : (
+              <span className="inline-flex items-center gap-half px-base py-half rounded-sm bg-panel text-success text-sm font-medium">
+                <CheckCircleIcon className="size-icon-xs" weight="fill" />
+                {t('git.pr.merged', { prNumber })}
+              </span>
+            )
           ) : prUrl ? (
             <button
               onClick={() => window.open(prUrl, '_blank')}
-              className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-sky-100/60 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 hover:underline text-sm font-medium"
+              className="inline-flex items-center gap-half px-base py-half rounded-sm bg-panel text-normal hover:bg-tertiary text-sm font-medium transition-colors"
             >
               <GitPullRequestIcon className="size-icon-xs" weight="fill" />
-              {t('git.pr.open', { prNumber })}
+              {t('git.pr.open', { number: prNumber })}
               <ArrowSquareOutIcon className="size-icon-xs" weight="bold" />
             </button>
           ) : (
-            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-sky-100/60 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 text-sm font-medium">
+            <span className="inline-flex items-center gap-half px-base py-half rounded-sm bg-panel text-normal text-sm font-medium">
               <GitPullRequestIcon className="size-icon-xs" weight="fill" />
-              {t('git.pr.open', { prNumber })}
+              {t('git.pr.open', { number: prNumber })}
             </span>
           )}
         </div>
       )}
 
       {/* Actions row */}
-      <div className="flex items-center gap-half">
+      <div className="my-base">
         <SplitButton
           options={repoActionOptions}
           selectedValue={selectedAction}
           onSelectionChange={setSelectedAction}
           onAction={(action) => onActionsClick?.(action)}
         />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              className="flex items-center justify-center p-1.5 rounded hover:bg-tertiary text-low hover:text-base transition-colors"
-              title="Repo actions"
-            >
-              <ArrowSquareOutIcon className="size-icon-base" weight="bold" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem icon={CopyIcon} onClick={onCopyPath}>
-              {tCommon('actions.copyPath')}
-            </DropdownMenuItem>
-            <DropdownMenuItem icon={CodeIcon} onClick={onOpenInEditor}>
-              {tCommon('actions.openInIde')}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
       </div>
     </CollapsibleSection>
   );