Frontmatter
| id | 8141 |
| title | SortZone: Animate dashboard items to fill space during window drag |
| state | Closed |
| labels | enhancementai |
| assignees | tobiu |
| createdAt | Dec 19, 2025, 12:01 PM |
| updatedAt | Dec 19, 2025, 1:46 PM |
| githubUrl | https://github.com/neomjs/neo/issues/8141 |
| author | tobiu |
| commentsCount | 1 |
| parentIssue | null |
| subIssues | [] |
| subIssuesCompleted | 0 |
| subIssuesTotal | 0 |
| blockedBy | [] |
| blocking | [] |
| closedAt | Dec 19, 2025, 1:46 PM |
SortZone: Animate dashboard items to fill space during window drag

Input from Gemini:
✦ The implementation of this feature involved several key refinements to the initial strategy to ensure a robust and high-quality UX.
1. Full-Geometry Animation Strategy: Instead of simply clearing styles, we implemented a system that calculates a specific "Target Layout" for the remaining dashboard items when a component is dragged out. This allows us to use CSS transitions on
width,height,left, andtopfor a smooth "fill space" animation.2. Robust Layout Calculation: We implemented
calculateExpandedLayoutwhich:
- Infers Gaps & Padding: Instead of parsing CSS, it analyzes the cached
itemRectssnapshot to mathematically derive the container's start/end offsets (padding) and the inter-item gaps. This ensures the "Expanded" layout perfectly respects the original design tokens (e.g., the 20px gaps in the AgentOS dashboard) without hardcoding them.- Flex-Aware Distribution: It distributes the available space (total size minus offsets and gaps) proportionally based on the items'
flexconfigs.3. State Management & Restoration:
- Window Drag Start: We hide the placeholder and apply the calculated "Expanded" styles to the siblings.
- Re-entry (Drag Move): When dragging back into the zone, we restore the original layout snapshot (position and size) from
itemRectsand show the placeholder. This creates a seamless "snap back" effect.- Cleanup (Drag End): We refactored
onDragEndto safely handle the complex state transitions (window vs. in-app), ensuring the drag proxy is removed and the component is either moved back (if dropped in-app) or left alone (if dropped in window), while correctly cleaning up the placeholder.4. CSS Updates:
- Updated
SortZone.scssto includewidthandheightin thetransition-property, enabling the smooth resizing effects.This approach delivers a premium feel where the dashboard intelligently reflows to fill the void left by a detached window, and gracefully restores itself when the window returns.
Objective: Improve the UX when dragging a dashboard item out into a new window. Currently, the placeholder remains, leaving a "hole" in the dashboard layout.
Desired Behavior:
Technical Strategy:
SortZone.scssto includewidthandheightintransition-propertyto enable smooth resizing.calculateFlexLayouthelper to compute the "expanded" layout for the remaining items (respectingflexand fixed dimensions).startWindowDrag, apply the "expanded" styles and hide the placeholder.onDragBoundaryEntry(or equivalent re-entry hook), restore the cached "original" styles and show the placeholder.