Add drag-to-reorder for sites in the agentic UI sidebar by bcotrim · Pull Request #4134 · Automattic/studio

bcotrim · 2026-07-08T20:52:06Z

Related issues

Related to STU-1985 (splitting Agentic UI: Simplify Sidebar with new Site-Centric Focus #3998 into reviewable pieces)
Extracted from Agentic UI: Simplify Sidebar with new Site-Centric Focus #3998 (extract-site-centric-sidebar)

How AI was used in this PR

Claude Code ported the ReorderableList component verbatim from #3998 (Shaun's commit, preserved as author), adapted the order-persistence wiring from the reference branch onto trunk's group-based sidebar, and adapted/extended the tests. All changes reviewed and verified locally (lint, typecheck, unit tests).

Proposed Changes

Sites in the agentic UI sidebar can now be reordered by dragging, so users can arrange their list to match how they work instead of being stuck with an imposed order.

Dragging a site's header row lifts it into a floating preview with a drop placeholder and smooth FLIP animations (disabled under prefers-reduced-motion); clicks, chat links, and action buttons keep working as before.
While a drag is active, every site's chat sublist collapses so rows are uniform and long lists are easy to rearrange, and dragging near the sidebar's top or bottom edge auto-scrolls the list.
The order persists via the same per-site sortOrder appdata field the legacy sidebar uses, so a custom order survives restarts and stays consistent between both sidebars. The renderer owns the order for the session — seeded once at startup, changed only by drags — so background refetches can never reorder or flicker the list; the saved order is also patched into the persisted query cache so a reload paints the right order immediately (review feedback). In the browser (studio ui / hosted), where there is no appdata, the order is kept in localStorage.
Behavior change: the sidebar previously sorted sites by most-recent chat activity; it now uses the stored sortOrder (falling back to name), so the list stays stable and only changes when the user rearranges it. Chats not assigned to a known site (the old "Unassigned" group) are no longer shown; that logic gets cleaned up in a follow-up PR.

The drag mechanics live in a generic ReorderableList component (pointer-event based, 4px drag threshold, drop hit-testing against rects captured at drag start, post-drag click suppression) that later pieces of the #3998 split will reuse.

Testing Instructions

npm start, open the agentic UI with a few sites created.
Drag a site by its header row: a floating preview follows the pointer, a placeholder marks the drop slot, and other rows animate out of the way. Drop it and confirm the new order.
Restart the app — the order should persist.
Confirm normal interactions still work: clicking a site header toggles its chats, chat links navigate, the status/new-chat/menu buttons work, and dragging from the chat sublist does not reorder.
Check the drag visuals in both light and dark mode.

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

(ported from origin/extract-site-centric-sidebar cbddbce; component files verbatim) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…rder

…unmount" This reverts commit 3de30d2.

wpmobilebot · 2026-07-09T10:28:35Z

📊 Performance Test Results

Comparing bf36769 vs trunk

app-size

Metric	trunk	`bf36769`	Diff	Change
App Size (Mac)	1350.34 MB	1350.35 MB	+0.01 MB	⚪ 0.0%

site-editor

Metric	trunk	`bf36769`	Diff	Change
load	1060 ms	1083 ms	+23 ms	⚪ 0.0%

site-startup

Metric	trunk	`bf36769`	Diff	Change
siteCreation	7055 ms	7039 ms	16 ms	⚪ 0.0%
siteStartup	2861 ms	2865 ms	+4 ms	⚪ 0.0%

Results are median values from multiple test runs.

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

…leList

katinthehatsite

The changes mostly look good. I noticed one brief flash of the old order if I change the order and then refresh the app (cmd + r). The old sort order briefly flashes and then I could see the new order:

Screen.Recording.2026-07-13.at.1.49.43.PM.mov

katinthehatsite

Additionally observation is that if you have a lot of sites, I am finding that the dragging and scrollbar interaction gets awkward when you cannot drag the desired site to the btottom easily:

Screen.Recording.2026-07-13.at.1.53.31.PM.mov

bcotrim · 2026-07-13T13:18:36Z

Additionally observation is that if you have a lot of sites, I am finding that the dragging and scrollbar interaction gets awkward when you cannot drag the desired site to the btottom easily:

nice find @katinthehatsite I added 2 new changes that should improve that behavior

Chats are now collapsed when dragging
Scroll when moving to the edges.

…on reload

…load

bcotrim · 2026-07-13T14:32:53Z

@katinthehatsite the flickering issue should be resolved now, can you take another look, please?

katinthehatsite

I think this looks good now, I don't see the same issues as before and the interaction with the scrollbar is much better 👍

…rder # Conflicts: # apps/ui/src/components/site-list/index.test.tsx # apps/ui/src/components/site-list/index.tsx

## Related issues - Related to STU-1985 - Final extraction from #3998 (built on the already-landed #4131, #4133, and #4134) ## How AI was used in this PR Claude (Fable 5) extracted and adapted this change from the #3998 reference branch under close direction, preserving Shaun Andrews' original work via co-authored commits, and re-verified the result (typecheck, unit tests, light/dark visual pass in the browser UI). Code was human-reviewed throughout. ## Proposed Changes This is the capstone of the site-centric sidebar work: the sidebar becomes a flat list of sites, with no per-site chat sublists. - Clicking a site opens its most recent (non-archived) chat, or starts a new chat when the site has none. Chat history is no longer browsed from the sidebar — that moved below the composer in #4133. - Each site row carries a single activity indicator that aggregates all of the site's sessions, with priority: live-site sync > needs an answer > working > new message. This keeps long site lists calm while still surfacing what needs attention. - Row quick actions (site actions menu + start/stop status button) appear on hover/focus; drag-to-reorder from #4134 keeps working on the flat rows. - Status colors move to shared `--studio-color-status-*` tokens: the wpds palette has no vivid status colors (`--wpds-color-fg-content-success` resolves to near-black at dot size), which also fixes the session header's running dot rendering almost black. - Chrome polish: full-bleed 44px site icon with overlaid status badge in the site dropdown, flattened site icons, a visible hover tint on the sidebar create button, the floating sidebar toggle moved to the bottom-left, and aligned settings-header padding. Two product decisions to be aware of (intentional for now): - **Unread "new message" badges are in-memory only** — they reset (seed as all-seen) on every launch. - **The current chat is indicated via `aria-current` + active-row styling**, not the literal "Current chat" label from the mockups. ## Testing Instructions - Start Studio with `npm start` and enable the `Agentic UI` feature flag. - Confirm the sidebar shows a flat list of sites (no chat sublists): clicking a site with chats opens its latest chat; a site without chats opens the new-chat view. - Hover a row: the site actions menu and start/stop button appear; right side shows a green dot for running sites, a play affordance for stopped ones. - Send a prompt on one site, switch to another: the first row shows a working spinner, then a "New message" badge when the turn completes; answering a pending question clears the "Needs an answer" indicator. - Drag a site row to reorder; the order persists across restarts. - Delete a site you're currently viewing and confirm you land back on the home view. - Check the sidebar and site dropdown in **both light and dark mode**. ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors? 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Shaun Andrews <191598+shaunandrews@users.noreply.github.com>

shaunandrews and others added 2 commits July 8, 2026 21:41

Extract the sidebar's drag-reorder into a shared ReorderableList

35faffd

(ported from origin/extract-site-centric-sidebar cbddbce; component files verbatim) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Wire sidebar site drag-reorder with order persisted via appdata sortO…

9e41055

…rder

github-actions Bot assigned bcotrim Jul 8, 2026

bcotrim added 3 commits July 9, 2026 10:06

Hide the unassigned chats group in the sidebar

21e6123

Debounce sidebar sort-order saves and flush pending order on unmount

3de30d2

Revert "Debounce sidebar sort-order saves and flush pending order on …

a129031

…unmount" This reverts commit 3de30d2.

bcotrim requested review from a team and katinthehatsite July 9, 2026 09:52

bcotrim marked this pull request as ready for review July 9, 2026 09:52

Trim unused ReorderableList knobs and shrink the manual-order overlay

212bf59

Fix manual-order comparator NaN and harden drag teardown in Reorderab…

3c617e1

…leList

katinthehatsite reviewed Jul 13, 2026

View reviewed changes

Comment thread apps/ui/src/components/reorderable-list/index.tsx Outdated

Drop redundant onReorder doc comment

2f76214

bcotrim requested a review from katinthehatsite July 13, 2026 11:17

katinthehatsite reviewed Jul 13, 2026

View reviewed changes

Collapse chat sublists and auto-scroll at list edges while dragging

16bea62

bcotrim added 3 commits July 13, 2026 14:24

Patch sites cache optimistically on reorder to fix stale-order flash …

f8f3bad

…on reload

Hold dropped order until data catches up and focus the dropped site row

00ffeaf

Make the renderer own the session site order, seeded once from first …

6c2c5ce

…load

bcotrim requested a review from katinthehatsite July 13, 2026 14:32

katinthehatsite approved these changes Jul 14, 2026

View reviewed changes

Merge remote-tracking branch 'origin/trunk' into add-sidebar-site-reo…

bf36769

…rder # Conflicts: # apps/ui/src/components/site-list/index.test.tsx # apps/ui/src/components/site-list/index.tsx

bcotrim enabled auto-merge (squash) July 14, 2026 08:54

bcotrim merged commit da97cf1 into trunk Jul 14, 2026
11 checks passed

bcotrim deleted the add-sidebar-site-reorder branch July 14, 2026 09:18

bcotrim mentioned this pull request Jul 14, 2026

Agentic UI: Make the sidebar site-centric #4191

Merged

1 task

This was referenced Jul 16, 2026

Agentic UI: Return to the last visited session instead of the first site #4130

Open

Agentic UI: Simplify Sidebar with new Site-Centric Focus #3998

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add drag-to-reorder for sites in the agentic UI sidebar#4134

Add drag-to-reorder for sites in the agentic UI sidebar#4134
bcotrim merged 13 commits into
trunkfrom
add-sidebar-site-reorder

bcotrim commented Jul 8, 2026 •

edited

Loading

Uh oh!

wpmobilebot commented Jul 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

katinthehatsite left a comment

Uh oh!

katinthehatsite left a comment

Uh oh!

bcotrim commented Jul 13, 2026

Uh oh!

bcotrim commented Jul 13, 2026

Uh oh!

katinthehatsite left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

bcotrim commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

wpmobilebot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

Uh oh!

katinthehatsite left a comment

Choose a reason for hiding this comment

Uh oh!

katinthehatsite left a comment

Choose a reason for hiding this comment

Uh oh!

bcotrim commented Jul 13, 2026

Uh oh!

bcotrim commented Jul 13, 2026

Uh oh!

katinthehatsite left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bcotrim commented Jul 8, 2026 •

edited

Loading

wpmobilebot commented Jul 9, 2026 •

edited

Loading