fix(directory-picker-browse): advertise the path editor and walk the panes with the draft

The Select Workspace Directory dialog hid its one route into typing a path
behind an invisible click target, and once the editor opened the panes stayed
on whatever level was listed when it opened — so the typed text and the list
under it disagreed for the whole edit.

The edit zone now carries a pencil glyph at the bar's right edge and lights in
the editor's own footprint on hover/focus (the bar keeps one height across the
swap). While editing, the panes follow the draft: a directory part no pane
lists is scanned after a 250ms rest and lands in place, so typing deeper
descends and erasing segments steps back up without leaving the editor, and a
final segment nobody matches releases the prefix filter instead of emptying
the pane it is being spelled into. The draft-following scan is speculative and
silent on failure; Enter still owns the view from submission until landing and
remains the only path that surfaces an error.
This commit is contained in:
creatixchu
2026-08-03 11:24:35 +08:00
parent 8bf606ba80
commit 79072e356c
11 changed files with 345 additions and 45 deletions

View File

@@ -53,7 +53,8 @@
display: flex;
align-items: center;
gap: 4px;
min-height: 20px;
/* The path editor's height: crumb mode and edit mode occupy the same bar. */
min-height: 24px;
}
/* Deep chains scroll inside the trail (the effect pins the tail into view)
@@ -118,17 +119,52 @@
color: var(--dsw-alias-label-tertiary);
}
/* The empty remainder of the bar: invisible, but a real click target that
* flips the bar into path-edit mode. */
/* The empty remainder of the bar: a real click target that flips the bar
* into path-edit mode. The zone itself stays flush with the crumbs; the
* pencil glyph seated at its right edge is the standing affordance, and
* hover/focus lights the zone in the editor's own rounded shape so the
* gesture reads before the click. */
.crumbEditZone {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 0 34px;
min-width: 34px;
align-self: stretch;
border: none;
/* The editor's own height, so hover previews the input's exact footprint
* and the bar does not resize when the two swap. */
height: 24px;
padding: 0 6px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
cursor: text;
}
.crumbEditZone:hover,
.crumbEditZone:focus-visible {
border-color: var(--dsw-alias-border-l2);
outline: none;
}
.crumbEditGlyph {
flex: none;
color: var(--dsw-alias-label-tertiary);
}
.crumbEditZone:hover .crumbEditGlyph,
.crumbEditZone:focus-visible .crumbEditGlyph {
color: var(--dsw-alias-label-primary);
}
.crumbEditZone:disabled {
border-color: transparent;
cursor: default;
}
.crumbEditZone:disabled .crumbEditGlyph {
color: var(--dsw-alias-label-caption);
}
.pathInput {
box-sizing: border-box;
flex: 1 1 0;