Redesigned Sync

[shaunandrews]

An experimental redesign of the Sync tab that presents a more prescribed system of Local -> Staging -> Production. The design is meant to abstractly represent server racks, with your local Studio site at the top, staging in the middle, and production at the bottom. Users can connect one site to each rack, and then push/pull between.

Proposed Changes

• Rewrite sync-server-rack.tsx to render three explicit slots (Local, Staging, Production) instead of dynamically mapping connected sites
• Add EmptySlot component (dashed border + "Connect" button) and FilledSlot component (Pull/Push buttons + Replace/Disconnect menu)
• Add connectingSlot to Redux state so the site selector modal knows which slot is being filled
• Add environmentFilter prop to SyncSitesModalSelector to prioritize matching-environment sites and update the modal title
• Add getSlotForSite() helper that maps development environment to the staging slot
• Push arrows only render between filled adjacent slots
• Remove sticky "Connect another site" footer — empty slots have their own connect buttons

Testing Instructions

1. Open the Sync tab for any local site
2. Empty state: All three racks show — Local at top, Staging and Production below with dashed borders and "Connect" buttons
3. Connect a staging site: Click Connect on the staging slot → modal opens with "Connect a staging site" title, staging sites sorted to top → select one → slot fills
4. Connect a production site: Same flow for production slot
5. Replace: Click ⋮ menu → Replace → modal opens → pick new site → old disconnects, new connects
6. Disconnect: Click ⋮ menu → Disconnect → confirmation dialog → slot empties
7. Push arrows: Only appear between filled adjacent slots (Local→Staging when staging filled, Staging→Production when both filled, Local→Production when only production filled)
8. Push/Pull buttons: Open the existing sync dialog correctly