| 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> |
| ) |
| } |
|
|
