Skip to content

UI-A3 — Smoother transitions (dialogs, dropdowns, tree, tabs) #172

Description

@ZhuchkaTriplesix

Epic: #170
Depends on: #173, #171 (UI-A1, UI-A2)

Source: docs/motion-and-high-refresh.md §4.4

Goal

Upgrade interaction choreography beyond token swap: enter/exit transitions, expand/collapse height, and content cross-fades.

Scope

Area Change
Dialogs (app_dialog.dart) Retune blur+scale to standard/enter; backdrop and card share one curve
Dropdowns (querya_dropdown.dart) Add menu enter scale+fade (currently hover-only)
Connection tree (connections_panel_pg_tree.dart + siblings) AnimatedSize for expand/collapse; keep chevron rotation
Workspace tabs (workspace_panel.dart) AnimatedSwitcher cross-fade on content switch
Hover rows Already tokenized in A2; verify feel at 120 Hz

Optional if time: subtle first-paint fade on result grid rows (no per-scroll cost).

Acceptance Criteria

  • Tree nodes expand/collapse with height animation (no pop-in).
  • Dropdown menu opens with fade+scale enter.
  • Workspace panel content cross-fades on tab change.
  • Dialog open/close feels smooth at 120 Hz (manual check).
  • Layout tests green; no overflow regressions.

Tests

  • Widget tests for AnimatedSize tree node (expanded/collapsed state).
  • Existing layout tests unchanged in final geometry.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfrontendTheme parser epic label: frontendmotionAnimation system, transitions, motion tokenstestsTheme parser epic

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions