experiment: better web picker using @pierre/tree - #31208
Merged
Hona merged 16 commits intoJun 16, 2026
Merged
Conversation
Copy link
Copy Markdown
Member
Sorry, something went wrong.
Copy link
Copy Markdown
Contributor
There was a problem hiding this comment.
Pull request overview
This PR experiments with a new desktop “v2” directory/file picker built on @pierre/trees, aiming to keep shell-style path completion while adding lazy, server-backed filesystem navigation with directory preloading.
Changes:
- Patches @pierre/trees to surface expansion events (onExpansionChange) so the app can lazily fetch directory contents on expand/collapse.
- Adds a new Solid-based DialogSelectDirectoryV2 (and CSS) that integrates path input autocomplete with a lazily-loaded Pierre tree browser.
- Introduces shared directory-tree path utilities plus focused unit tests, and wires v2 into directory picking and file search flows behind a desktop + feature-flag gate.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file| File | Description |
|---|---|
| patches/@pierre%2Ftrees@1.0.0-beta.4.patch | Adds expansion event plumbing to @pierre/trees so consumers can react to expand/collapse. |
| packages/app/src/components/pierre-tree.test.ts | Verifies onExpansionChange is reported by the patched Pierre tree. |
| packages/app/src/components/directory-tree.ts | Adds shared helpers for mapping server listings to Pierre paths + selection/policy utilities. |
| packages/app/src/components/directory-tree.test.ts | Unit tests for the new directory-tree helpers and selection policy. |
| packages/app/src/components/directory-picker.tsx | Routes desktop picking to v2 dialog behind newLayoutDesigns() flag; adds cancel/selection discipline. |
| packages/app/src/components/dialog-select-file.tsx | Uses the new picker UI for “files only” search on desktop behind the same flag. |
| packages/app/src/components/dialog-select-directory.tsx | Exports helper functions reused by the v2 picker implementation. |
| packages/app/src/components/dialog-select-directory-v2.tsx | New Pierre-tree-based picker UI with autocomplete, lazy loading, and preloading. |
| packages/app/src/components/dialog-select-directory-v2.css | Styling for the v2 picker UI and Pierre tree overrides. |
| packages/app/package.json | Adds @pierre/trees dependency to the app workspace. |
| package.json | Registers a Bun patch for @pierre/trees@1.0.0-beta.4. |
| bun.lock | Lockfile updates for the new dependency + patch mapping. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Sorry, something went wrong.
Comment thread
packages/app/src/components/directory-picker.tsx
Comment on lines
+34
to
+39
| if (platform.platform === "desktop" && settings.general.newLayoutDesigns()) { | ||
| void import("./dialog-select-directory-v2").then(({ DialogSelectDirectoryV2 }) => { | ||
| dialog.show(() => <DialogSelectDirectoryV2 {...input} onSelect={onSelect} />, cancel) | ||
| }) | ||
| return | ||
| } |
Comment thread
packages/app/src/components/dialog-select-directory-v2.tsx
Outdated
Comment on lines
+80
to
+103
| async function load(path: string, preload = true) { | ||
| const key = path.replace(/\/+$/, "") | ||
| setError(false) | ||
| const absolute = absoluteTreePath(root(), key) | ||
| const request = | ||
| listings.get(key) ?? | ||
| sdk.client.file | ||
| .list({ directory: absolute, path: "" }) | ||
| .then((result) => result.data ?? []) | ||
| .catch(() => undefined) | ||
| listings.set(key, request) | ||
| const nodes = await request | ||
| if (!nodes) { | ||
| listings.delete(key) | ||
| setError(true) | ||
| return | ||
| } | ||
| tree?.batch( | ||
| policy.entries(key, nodes).map((item) => ({ type: "add", path: item })), | ||
| ) | ||
| if (preload && advanceTreePreload(advanced, key)) { | ||
| void Promise.all(preloadTreeDirectories(key, nodes).map((directory) => load(directory, false))) | ||
| } | ||
| } |
Comment thread
packages/app/src/components/dialog-select-directory-v2.tsx
Outdated
| }} | ||
| > | ||
| <Show when={loading()}><div class="directory-picker-v2-state">{language.t("common.loading")}</div></Show> | ||
| <Show when={!loading() && error()}><div class="directory-picker-v2-state">Unable to read this folder</div></Show> |
…-tree-picker # Conflicts: # package.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reviewers
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Pierre patch
Verification