Improve onboarding browse button (#4423)

Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
Brennan Benson
2026-06-01 20:57:08 -07:00
committed by GitHub
co-authored by Orca
parent 58d36e4c1c
commit d136abd10c
2 changed files with 24 additions and 8 deletions
@@ -42,10 +42,23 @@ describe('RepoStep', () => {
const html = renderRepoStep()
expect(html).not.toContain('Project already added')
expect(html).toContain('Open a folder')
expect(html).toContain('Browse for a folder')
expect(html).toContain('Clone a repo')
})
it('presents the local-folder card itself as the browse action', () => {
const html = renderRepoStep()
expect(html).toContain('border-border bg-muted/30')
expect(html).toContain('focus:border-foreground/70')
expect(html).toContain('focus:ring-2 focus:ring-inset focus:ring-foreground/25')
expect(html).toContain('autofocus=""')
expect(html).toContain('Browse for a folder')
expect(html).toContain('group-hover:translate-x-0.5')
expect(html).toContain('w-fit max-w-[calc(100%-3.75rem)]')
expect(html).toContain('Want to import many repos at once? Select the parent folder.')
})
it('disables nested import actions when no repositories are selected', () => {
const html = renderRepoStep({
nestedScan: {
@@ -233,25 +233,28 @@ export function RepoStep({
) : (
<button
type="button"
className="group w-full rounded-xl border border-border bg-muted/30 p-5 text-left transition hover:border-foreground/40 hover:bg-muted/60 disabled:opacity-60"
className="group w-full rounded-xl border border-border bg-muted/30 p-5 text-left transition hover:border-foreground/40 hover:bg-muted/60 focus:border-foreground/70 focus:bg-muted/40 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-foreground/25 disabled:opacity-60"
disabled={disabled}
autoFocus={!disabled}
onClick={onOpenFolder}
>
<div className="flex items-center gap-4">
<div className="flex min-w-0 items-center gap-4">
<div className="grid size-11 shrink-0 place-items-center rounded-lg bg-muted text-foreground">
<FolderOpen className="size-5" />
</div>
<div className="min-w-0 flex-1">
<div className="text-base font-semibold text-foreground">Open a folder</div>
<div className="flex min-w-0 items-center gap-2">
<div className="min-w-0 text-base font-semibold text-foreground">
Browse for a folder
</div>
<ArrowRight className="size-4 shrink-0 text-muted-foreground transition group-hover:translate-x-0.5 group-hover:text-foreground" />
</div>
<div className="mt-0.5 text-[13px] text-muted-foreground">
Choose any local directory, git repo or not.
</div>
</div>
<span className="shrink-0 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition group-hover:border-foreground/40">
Browse...
</span>
</div>
<div className="ml-[3.75rem] mt-3 flex items-center gap-2 rounded-lg border border-border bg-muted px-3 py-2 text-[12px] text-muted-foreground">
<div className="ml-[3.75rem] mt-3 flex w-fit max-w-[calc(100%-3.75rem)] items-center gap-2 rounded-lg border border-border bg-muted px-3 py-2 text-[12px] text-muted-foreground">
<span className="grid size-6 shrink-0 place-items-center rounded-md border border-border bg-background text-foreground">
<Lightbulb className="size-3.5" />
</span>