Skip to content

Replace custom site and option pickers with pi-tui SelectList#2812

Open
youknowriad wants to merge 1 commit intotrunkfrom
use-pi-tui-select-list
Open

Replace custom site and option pickers with pi-tui SelectList#2812
youknowriad wants to merge 1 commit intotrunkfrom
use-pi-tui-select-list

Conversation

@youknowriad
Copy link
Contributor

Related issues

How AI was used in this PR

AI explored the codebase, designed a refactoring plan to adopt pi-tui's SelectList component, and implemented the changes. The plan identified that SelectList already handles list rendering, scrolling, keyboard navigation, and selection — eliminating the need for custom implementations. AI built in custom logic for features SelectList doesn't cover (tab switching, contains-based filtering, browser-open-on-tab).

Proposed Changes

  • Site picker: Replaced ~100 lines of custom list rendering (formatSiteRow, getSitePickerRows, getVisibleWindow, getScrollInfo, sitePickerPageSize) with SelectList. Maintains custom tab switching (local/WordPress.com), contains-based search filtering, and tab-to-open-browser.
  • Option picker: Replaced ~30 lines of manual up/down/enter navigation with SelectList's built-in handling.
  • Editor bottom bar: Added showBottomBar flag to hide hint/status line while site picker is visible, reducing visual clutter.
  • Input routing: Refactored to forward navigation keys (up/down/enter) to SelectList while keeping custom keys (tab/left/right/escape/backspace/chars) for site picker features.
  • Filtering: Inlined getFilteredSitePickerItems() into rebuildSitePickerList() to avoid indirection; SelectList is recreated on every query change with pre-filtered items (working around SelectList's prefix-only filtering).

Testing Instructions

  1. Run npm run cli:build && node apps/cli/dist/cli/main.js ai
  2. Press down arrow to open site picker
  3. Verify navigation (up/down arrows move selection, → switches to WordPress.com, ← back to local)
  4. Verify search (type letters to filter, backspace to delete, esc to clear query)
  5. Verify selection (enter to select, tab to open in browser)
  6. Verify visual alignment: [Local] tab and indicator should align with prompt text
  7. Verify spacing: empty line between tab header and list, between search line and list

Pre-merge Checklist

  • TypeScript typecheck passes
  • Tests pass (21 tests in cli/ai)
  • Linting passes
  • Manual testing of site picker navigation, filtering, selection, and tab switching

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Mar 16, 2026

📊 Performance Test Results

Comparing 60e545e vs trunk

app-size

Metric trunk 60e545e Diff Change
App Size (Mac) 1279.98 MB 1279.98 MB 0.01 MB ⚪ 0.0%

site-editor

Metric trunk 60e545e Diff Change
load 1893 ms 1985 ms +92 ms 🔴 4.9%

site-startup

Metric trunk 60e545e Diff Change
siteCreation 7088 ms 7145 ms +57 ms 🔴 0.8%
siteStartup 3922 ms 3925 ms +3 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

Adopt SelectList component for both site picker and option picker, deleting ~120 lines of custom list rendering, pagination, and navigation code. Both pickers now delegate scrolling, selection, and keyboard handling to SelectList, while keeping custom features (tab switching, contains-based search filtering, browser-open-on-tab) as thin wrappers.

Minor UX changes: selection prefix changes from ❯ to →, navigation wraps around, scroll indicator format changes. Hide editor bottom bar (hints + status message) while site picker is visible.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@youknowriad youknowriad force-pushed the use-pi-tui-select-list branch from dcd14ad to 60e545e Compare March 16, 2026 11:12
@taipeicoder
Copy link
Contributor

@youknowriad I get stuck when first switching to remote sites, then about 3 minutes later the message "Not logged in. Use /login first." shows up.

@youknowriad
Copy link
Contributor Author

What's the expected outcome when switching to remote sites, since we don't have copy...?

@taipeicoder
Copy link
Contributor

I think the next step would be to copy the remote site locally and then be able to push it. Currently it's functionless.

@youknowriad
Copy link
Contributor Author

I get stuck when first switching to remote sites, then about 3 minutes later the message "Not logged in. Use /login first." shows up.

I don't reproduce this btw.

@youknowriad
Copy link
Contributor Author

My guess is that we may not handle expired tokens properly or things like that but it seems to be out of scope of the current PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants