ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-01-31 06:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve PR display and interaction in worktree components

Browse Source 
- Updated WorktreeActionsDropdown to use DropdownMenuItem for better interaction with PR links.
- Enhanced WorktreeTab to include hover and active states for buttons, and improved accessibility with updated titles and aria-labels.
- Ensured PR URLs are safely opened only if they exist, enhancing user experience and preventing errors.
This commit is contained in:
Cody Seibert
2025-12-19 20:46:23 -05:00
parent ec7c2892c2
commit bb5f68c2f0
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
View File

@@ -185,13 +185,18 @@ export function WorktreeActionsDropdown({
{/* Show PR info and Address Comments button if PR exists */}
{!worktree.isMain && hasPR && worktree.pr && (
<>
<DropdownMenuLabel className="text-xs flex items-center gap-2">
<GitPullRequest className="w-3 h-3" />
<DropdownMenuItem
onClick={() => {
window.open(worktree.pr!.url, "_blank");
}}
className="text-xs"
>
<GitPullRequest className="w-3 h-3 mr-2" />
PR #{worktree.pr.number}
<span className="ml-auto text-[10px] bg-green-500/20 text-green-600 px-1.5 py-0.5 rounded">
<span className="ml-auto text-[10px] bg-green-500/20 text-green-600 px-1.5 py-0.5 rounded uppercase">
{worktree.pr.state}
</span>
</DropdownMenuLabel>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
// Convert stored PR info to the full PRInfo format for the handler

16
apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
View File

@@ -157,7 +157,7 @@ export function WorktreeTab({
className={cn(
"ml-1.5 inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors",
"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background",
"appearance-none cursor-pointer", // Reset button appearance but keep cursor
"appearance-none cursor-pointer hover:opacity-80 active:opacity-70", // Reset button appearance but keep cursor, add hover/active states
prStateClasses
)}
style={{
@@ -165,24 +165,28 @@ export function WorktreeTab({
backgroundImage: "none",
boxShadow: "none",
}}
title={prLabel}
aria-label={prLabel}
title={`${prLabel} - Click to open`}
aria-label={`${prLabel} - Click to open pull request`}
onClick={(e) => {
e.stopPropagation(); // Prevent triggering worktree selection
window.open(worktree.pr.url, "_blank", "noopener,noreferrer");
if (worktree.pr?.url) {
window.open(worktree.pr.url, "_blank", "noopener,noreferrer");
}
}}
onKeyDown={(e) => {
// Prevent event from bubbling to parent button
e.stopPropagation();
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
window.open(worktree.pr.url, "_blank", "noopener,noreferrer");
if (worktree.pr?.url) {
window.open(worktree.pr.url, "_blank", "noopener,noreferrer");
}
}
}}
>
<GitPullRequest className={cn("w-3 h-3", getStatusColorClass())} aria-hidden="true" />
<span aria-hidden="true" className={isSelected ? "text-foreground font-semibold" : ""}>
#{worktree.pr.number}
PR #{worktree.pr.number}
</span>
<span className={cn("capitalize", getStatusColorClass())} aria-hidden="true">
{prState}