File size: 3,039 Bytes
1f21206 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | type Props = {
workDir?: string | null
repoName?: string | null
branch?: string | null
sourceWorkDir?: string | null
isWorktree?: boolean
worktreeSlug?: string | null
worktreePath?: string | null
compact?: boolean
}
function basename(path: string | null | undefined): string {
return path?.split('/').filter(Boolean).pop() || ''
}
export function ProjectContextChip({
workDir,
repoName,
branch,
sourceWorkDir,
isWorktree = false,
worktreeSlug,
worktreePath,
compact = false,
}: Props) {
const labelRoot = isWorktree ? (sourceWorkDir || workDir) : workDir
const label = branch ? (repoName || basename(labelRoot)) : (basename(labelRoot) || repoName || '')
const worktreeName = worktreeSlug || basename(worktreePath) || 'isolated'
const title = [
label,
branch ? `branch: ${branch}` : null,
isWorktree ? `worktree: ${worktreeName}` : null,
worktreePath ? `worktree cwd: ${worktreePath}` : null,
workDir ? `cwd: ${workDir}` : null,
].filter(Boolean).join('\n')
if (!label) return null
return (
<div
title={title}
className={`inline-flex max-w-full items-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] text-[var(--color-text-secondary)] ${
compact ? 'gap-1.5 px-3 py-1.5 text-xs' : 'gap-2 px-4 py-2 text-sm'
}`}
>
{branch ? (
<svg width={compact ? 15 : 18} height={compact ? 15 : 18} viewBox="0 0 16 16" fill="currentColor" className="shrink-0 text-[var(--color-text-secondary)]">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
</svg>
) : (
<span className={`material-symbols-outlined text-[var(--color-text-secondary)] ${compact ? 'text-[15px]' : 'text-[18px]'}`}>folder</span>
)}
<span className="truncate font-medium text-[var(--color-text-primary)]">{label}</span>
{branch ? (
<>
<span className="text-[var(--color-text-tertiary)]">|</span>
<span className="truncate">{branch}</span>
</>
) : null}
{isWorktree ? (
<>
<span className="text-[var(--color-text-tertiary)]">|</span>
<span className="shrink-0 rounded-full border border-[var(--color-border)] px-1.5 py-0.5 text-[10px] font-medium uppercase leading-none text-[var(--color-text-tertiary)]">
worktree
</span>
<span className="max-w-[12rem] truncate">{worktreeName}</span>
</>
) : null}
</div>
)
}
|