LearnNewsExamplesServices
Frontmatter
id8141
titleSortZone: Animate dashboard items to fill space during window drag
stateClosed
labels
enhancementai
assigneestobiu
createdAtDec 19, 2025, 12:01 PM
updatedAtDec 19, 2025, 1:46 PM
githubUrlhttps://github.com/neomjs/neo/issues/8141
authortobiu
commentsCount1
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtDec 19, 2025, 1:46 PM

SortZone: Animate dashboard items to fill space during window drag

Closed v11.17.0 enhancementai
tobiu
tobiu commented on Dec 19, 2025, 12:01 PM

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:

  1. On Drag Exit (Window Drag Start):
    • The placeholder should be hidden.
    • The remaining dashboard items should animate (grow/slide) to fill the available space, as if the dragged item was removed.
  2. On Drag Re-entry:
    • The dashboard items should animate back (shrink/slide) to their original "sort mode" positions.
    • The placeholder should reappear.

Technical Strategy:

  • CSS: Update SortZone.scss to include width and height in transition-property to enable smooth resizing.
  • JS (SortZone):
    • Implement a "Snapshot" system to cache the original layout state.
    • Implement a calculateFlexLayout helper to compute the "expanded" layout for the remaining items (respecting flex and fixed dimensions).
    • In startWindowDrag, apply the "expanded" styles and hide the placeholder.
    • In onDragBoundaryEntry (or equivalent re-entry hook), restore the cached "original" styles and show the placeholder.
tobiu added the enhancement label on Dec 19, 2025, 12:01 PM
tobiu added the ai label on Dec 19, 2025, 12:01 PM
tobiu assigned to @tobiu on Dec 19, 2025, 12:01 PM
tobiu referenced in commit 9cbe10e - "SortZone: Animate dashboard items to fill space during window drag #8141" on Dec 19, 2025, 1:42 PM
tobiu
tobiu Dec 19, 2025, 1:44 PM

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, and top for a smooth "fill space" animation.

2. Robust Layout Calculation: We implemented calculateExpandedLayout which:

  • Infers Gaps & Padding: Instead of parsing CSS, it analyzes the cached itemRects snapshot 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' flex configs.

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 itemRects and show the placeholder. This creates a seamless "snap back" effect.
  • Cleanup (Drag End): We refactored onDragEnd to 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.scss to include width and height in the transition-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.

tobiu closed this issue on Dec 19, 2025, 1:46 PM
tobiu cross-referenced by #8142 on Dec 19, 2025, 1:51 PM