BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(session): enhance BranchPickerDialog with improved layout and new worktree session description

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-01-17 22:15:28 +02:00
parent 7aa4d79b1d
commit 1ce24d474c
2 changed files with 121 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/session/BranchPickerDialog.tsx
+81 -77
View File
@@ -4,6 +4,7 @@ import {
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogDescription,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@@ -136,9 +137,15 @@ export function BranchPickerDialog({
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-xl max-h-[80vh] flex flex-col overflow-hidden gap-3"> <DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden gap-3">
<DialogHeader className="flex-shrink-0"> <DialogHeader className="flex-shrink-0">
<DialogTitle>Branches & Worktrees</DialogTitle> <DialogTitle className="flex items-center gap-2">
<RiGitBranchLine className="h-5 w-5" />
Branches & Worktrees
</DialogTitle>
<DialogDescription>
Start a new worktree session from any local branch
</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="relative flex-shrink-0"> <div className="relative flex-shrink-0">
@@ -152,7 +159,7 @@ export function BranchPickerDialog({
</div> </div>
<div className="flex-1 min-h-0 overflow-y-auto"> <div className="flex-1 min-h-0 overflow-y-auto">
<div className="space-y-2"> <div className="space-y-1">
{gitRepoProjects.length === 0 ? ( {gitRepoProjects.length === 0 ? (
<div className="text-center py-8 text-muted-foreground"> <div className="text-center py-8 text-muted-foreground">
No git repositories found No git repositories found
@@ -172,11 +179,11 @@ export function BranchPickerDialog({
.filter(b => !worktreeBranches.has(b)); .filter(b => !worktreeBranches.has(b));
return ( return (
<div key={project.id} className="rounded-lg border"> <div key={project.id} className="rounded-md">
<button <button
type="button" type="button"
onClick={() => toggleProject(project.id)} onClick={() => toggleProject(project.id)}
className="w-full flex items-center gap-2 p-3 hover:bg-muted/50 transition-colors rounded-t-lg" className="w-full flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/30 transition-colors rounded-md"
> >
<RiArrowRightSLine <RiArrowRightSLine
className={cn( className={cn(
@@ -197,93 +204,90 @@ export function BranchPickerDialog({
</span> </span>
)} )}
</button> </button>
{isExpanded && ( {isExpanded && (
<div className="border-t"> <div className="mt-1 space-y-1 pl-6">
{data?.loading ? ( {data?.loading ? (
<div className="p-4 text-center text-muted-foreground text-sm"> <div className="px-2 py-2 text-muted-foreground text-sm">
Loading branches... Loading branches...
</div> </div>
) : data?.error ? ( ) : data?.error ? (
<div className="p-4 text-center text-destructive text-sm"> <div className="px-2 py-2 text-destructive text-sm">
{data.error} {data.error}
</div> </div>
) : localBranches.length === 0 ? ( ) : localBranches.length === 0 ? (
<div className="p-4 text-center text-muted-foreground text-sm"> <div className="px-2 py-2 text-muted-foreground text-sm">
{searchQuery ? 'No matching branches' : 'No branches found'} {searchQuery ? 'No matching branches' : 'No branches found'}
</div> </div>
) : ( ) : (
<div className="divide-y overflow-hidden"> localBranches.map((branchName) => {
{localBranches.map((branchName) => { const branchDetails = branches?.branches[branchName];
const branchDetails = branches?.branches[branchName]; const isCurrent = branchDetails?.current;
const isCurrent = branchDetails?.current; const isCreating = creatingWorktree === `${project.id}:${branchName}`;
const isCreating = creatingWorktree === `${project.id}:${branchName}`;
return ( return (
<div <div
key={branchName} key={branchName}
className="flex items-center gap-2 px-3 py-2 hover:bg-muted/30 overflow-hidden" className="flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/30 rounded-md overflow-hidden"
> >
<RiGitBranchLine className="h-4 w-4 text-muted-foreground flex-shrink-0" /> <RiGitBranchLine className="h-4 w-4 text-muted-foreground flex-shrink-0" />
<div className="flex-1 min-w-0 overflow-hidden"> <div className="flex-1 min-w-0 overflow-hidden">
<div className="flex items-center gap-1.5 min-w-0"> <div className="flex items-center gap-1.5 min-w-0">
<span className={cn( <span className={cn(
'text-sm truncate', 'text-sm truncate',
isCurrent && 'font-medium text-primary' isCurrent && 'font-medium text-primary'
)}> )}>
{branchName} {branchName}
</span>
{isCurrent && (
<span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded flex-shrink-0 whitespace-nowrap">
current
</span> </span>
{isCurrent && ( )}
<span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded flex-shrink-0 whitespace-nowrap"> </div>
current <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
</span> {branchDetails?.commit && (
)} <span className="font-mono">
</div> {branchDetails.commit.slice(0, 7)}
<div className="flex items-center gap-1.5 text-xs text-muted-foreground"> </span>
{branchDetails?.commit && ( )}
<span className="font-mono"> {branchDetails?.ahead !== undefined && branchDetails.ahead > 0 && (
{branchDetails.commit.slice(0, 7)} <span className="text-[color:var(--status-success)]">
</span> ↑{branchDetails.ahead}
)} </span>
{branchDetails?.ahead !== undefined && branchDetails.ahead > 0 && ( )}
<span className="text-[color:var(--status-success)]"> {branchDetails?.behind !== undefined && branchDetails.behind > 0 && (
↑{branchDetails.ahead} <span className="text-[color:var(--status-warning)]">
</span> ↓{branchDetails.behind}
)} </span>
{branchDetails?.behind !== undefined && branchDetails.behind > 0 && ( )}
<span className="text-[color:var(--status-warning)]">
↓{branchDetails.behind}
</span>
)}
</div>
</div> </div>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={() => handleCreateWorktree(project, branchName)}
disabled={isCreating}
className="inline-flex h-7 px-2 items-center justify-center text-xs rounded-md bg-primary/10 hover:bg-primary/20 text-primary transition-colors disabled:opacity-50 flex-shrink-0"
>
{isCreating ? (
<RiLoader4Line className="h-3.5 w-3.5 animate-spin" />
) : (
<>
<RiAddLine className="h-3.5 w-3.5 mr-1" />
Worktree
</>
)}
</button>
</TooltipTrigger>
<TooltipContent side="left">
Create worktree for this branch
</TooltipContent>
</Tooltip>
</div> </div>
);
})} <Tooltip>
</div> <TooltipTrigger asChild>
<button
type="button"
onClick={() => handleCreateWorktree(project, branchName)}
disabled={isCreating}
className="inline-flex h-7 px-2 items-center justify-center text-xs rounded-md bg-primary/10 hover:bg-primary/20 text-primary transition-colors disabled:opacity-50 flex-shrink-0"
>
{isCreating ? (
<RiLoader4Line className="h-3.5 w-3.5 animate-spin" />
) : (
<>
<RiAddLine className="h-3.5 w-3.5 mr-1" />
Worktree
</>
)}
</button>
</TooltipTrigger>
<TooltipContent side="left">
Create worktree for this branch
</TooltipContent>
</Tooltip>
</div>
);
})
)} )}
</div> </div>
)} )}
packages/ui/src/components/session/SessionSidebar.tsx
+40 -41
View File
@@ -176,6 +176,8 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
isDragging, isDragging,
} = useSortable({ id }); } = useSortable({ id });
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
return ( return (
<div ref={setNodeRef} className={cn('relative', isDragging && 'opacity-40')}> <div ref={setNodeRef} className={cn('relative', isDragging && 'opacity-40')}>
{/* Sentinel for sticky detection */} {/* Sentinel for sticky detection */}
@@ -191,7 +193,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
{/* Project header - sticky like workspace groups */} {/* Project header - sticky like workspace groups */}
<div <div
className={cn( className={cn(
'sticky top-0 z-10 pt-2 pb-1.5 w-full text-left cursor-pointer group/project border-b', 'sticky top-0 z-10 pt-2 pb-1.5 w-full text-left cursor-pointer group/project border-b select-none',
!isDesktopRuntime && 'bg-sidebar', !isDesktopRuntime && 'bg-sidebar',
)} )}
style={{ style={{
@@ -206,6 +208,10 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
}} }}
onMouseEnter={() => onHoverChange(true)} onMouseEnter={() => onHoverChange(true)}
onMouseLeave={() => onHoverChange(false)} onMouseLeave={() => onHoverChange(false)}
onContextMenu={(event) => {
event.preventDefault();
setIsMenuOpen(true);
}}
> >
<div className="relative flex items-center gap-1 px-1" {...attributes}> <div className="relative flex items-center gap-1 px-1" {...attributes}>
{/* Project name with tooltip for path - draggable */} {/* Project name with tooltip for path - draggable */}
@@ -231,7 +237,10 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
</Tooltip> </Tooltip>
{/* Project menu */} {/* Project menu */}
<DropdownMenu> <DropdownMenu
open={isMenuOpen}
onOpenChange={setIsMenuOpen}
>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<button <button
type="button" type="button"
@@ -246,6 +255,24 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="min-w-[180px]"> <DropdownMenuContent align="end" className="min-w-[180px]">
{isRepo && !hideDirectoryControls && settingsAutoCreateWorktree && onNewSession && (
<DropdownMenuItem onClick={onNewSession}>
<RiAddLine className="mr-1.5 h-4 w-4" />
New Session
</DropdownMenuItem>
)}
{isRepo && !hideDirectoryControls && !settingsAutoCreateWorktree && onNewWorktreeSession && (
<DropdownMenuItem onClick={onNewWorktreeSession}>
<RiGitBranchLine className="mr-1.5 h-4 w-4" />
New Session in Worktree
</DropdownMenuItem>
)}
{isRepo && !hideDirectoryControls && onOpenBranchPicker && (
<DropdownMenuItem onClick={onOpenBranchPicker}>
<RiGitRepositoryLine className="mr-1.5 h-4 w-4" />
Browse Branches
</DropdownMenuItem>
)}
{isRepo && !hideDirectoryControls && ( {isRepo && !hideDirectoryControls && (
<DropdownMenuItem onClick={onOpenMultiRunLauncher}> <DropdownMenuItem onClick={onOpenMultiRunLauncher}>
<ArrowsMerge className="mr-1.5 h-4 w-4" /> <ArrowsMerge className="mr-1.5 h-4 w-4" />
@@ -262,7 +289,7 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
{isRepo && !hideDirectoryControls && onNewWorktreeSession && !settingsAutoCreateWorktree && ( {isRepo && !hideDirectoryControls && onNewWorktreeSession && settingsAutoCreateWorktree && (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button <button
@@ -272,8 +299,8 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
onNewWorktreeSession(); onNewWorktreeSession();
}} }}
className={cn( className={cn(
'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground flex-shrink-0', 'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground flex-shrink-0',
mobileVariant ? 'opacity-70' : 'opacity-0 group-hover/project:opacity-100', mobileVariant ? 'opacity-70' : 'opacity-100',
)} )}
aria-label="New session in worktree" aria-label="New session in worktree"
> >
@@ -285,47 +312,26 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
)} )}
{isRepo && !hideDirectoryControls && onOpenBranchPicker && ( {(!settingsAutoCreateWorktree || !isRepo) && (
<Tooltip delayDuration={700}> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onOpenBranchPicker(); onNewSession();
}} }}
className={cn( className="inline-flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
'inline-flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity', aria-label="New session"
mobileVariant ? 'opacity-70' : 'opacity-0 group-hover/project:opacity-100',
)}
aria-label="Browse branches"
> >
<RiGitRepositoryLine className="h-4 w-4" /> <RiAddLine className="h-4 w-4" />
</button> </button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="bottom" sideOffset={4}> <TooltipContent side="bottom" sideOffset={4}>
<p>Browse branches</p> <p>New session</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
)} )}
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onNewSession();
}}
className="inline-flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
aria-label="New session"
>
<RiAddLine className="h-4 w-4" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={4}>
<p>New session</p>
</TooltipContent>
</Tooltip>
</div> </div>
</div> </div>
@@ -357,9 +363,6 @@ const ProjectDragOverlay: React.FC<ProjectDragOverlayProps> = ({
)}> )}>
{projectLabel} {projectLabel}
</span> </span>
<span className="inline-flex h-6 w-6 items-center justify-center text-muted-foreground ml-auto">
<RiAddLine className="h-4 w-4" />
</span>
</div> </div>
</div> </div>
); );
@@ -1605,11 +1608,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
if (mobileVariant) { if (mobileVariant) {
setSessionSwitcherOpen(false); setSessionSwitcherOpen(false);
} }
if (settingsAutoCreateWorktree && isRepo) { openNewSessionDraft({ directoryOverride: project.normalizedPath });
createWorktreeSession();
} else {
openNewSessionDraft({ directoryOverride: project.normalizedPath });
}
}} }}
onNewWorktreeSession={() => { onNewWorktreeSession={() => {
if (projectKey !== activeProjectId) { if (projectKey !== activeProjectId) {