feat(ui): use motion for page, tab, switch and press gestures animation

[bajrangCoder]

• Better motion(WAAPI) based animation for page open/close, tab switch, switch on settings page, press gestures etc.
• nice and smooth animation and visual feedback for editor tab drag and better scrolling

[greptile-apps]

Greptile Summary

This PR integrates the Motion library to replace CSS-only transitions with WAAPI-driven animations across the app's core UI surfaces. All new JavaScript-driven animations correctly guard against the body.no-animation class, addressing the concern raised in previous review rounds.

• Page & dialog animations: wcPage.js fades pages in/out on connect/hide; dialogs/style.scss adds CSS keyframe enter animations for the prompt/mask (still correctly suppressed by animation: none !important).
• Tab indicator: tabView.js adds a spring-driven sliding indicator via MutationObserver; also fixes passive: false on the touchmove listener and null-guards currentTab on swipe.
• Settings & switch toggles: settingsPage.js adds press-scale and hover-background animations (hover gated behind matchMedia(\"(hover: hover)\")); checkbox/index.js migrates the switch thumb from a ::after pseudo-element to a real .handle DOM node driven by a Motion spring; conflicting CSS transitions removed from settingsPage.scss.
• Tab reorder drag: editorFileTab.js is significantly refactored with live FLIP animation during drag, a settle-clone animation on drop, and a dynamically ramped scroll speed.

Confidence Score: 4/5

Safe to merge with the minor hover-cleanup pattern addressed; the core animation paths and no-animation guards are correctly implemented throughout.

The animations are well-guarded throughout, the passive-listener bug is fixed, the CSS transition conflicts are removed, and the tab indicator restore lifecycle is correctly hooked into the show event rather than willconnect. The remaining new observations are minor: the hover cleanup writes a hard-coded transparent inline style instead of clearing it, and page event listeners registered in tabView.js are never paired with off() calls. Neither causes a user-visible defect in current usage.

src/components/settingsPage.js (hover cleanup inline-style pattern) and src/components/tabView.js (page listener accumulation).

Important Files Changed

Filename	Overview
src/components/WebComponents/wcPage.js	Added Motion fade-in on connectedCallback and fade-out on hide(), with no-animation guards; added press-scale animation on the back button.
src/components/tabView.js	Added spring-driven tab indicator via MutationObserver; fixed passive:false on touchmove; added null-guard for currentTab; registered page lifecycle hooks without corresponding off() calls.
src/components/checkbox/index.js	Replaced CSS-only toggle with a Motion spring animation; introduced explicit isSwitch parameter and real DOM handle element instead of ::after pseudo-element.
src/components/settingsPage.js	Added press-scale and hover-background animations for list items; hover correctly gated behind matchMedia; hover cleanup uses hard-coded transparent instead of clearing the inline style.
src/handlers/editorFileTab.js	Major refactor of tab-drag: live FLIP reorder animation during drag, settle-clone animation on drop, dynamic scroll speed ramp, null-guard for elementFromPoint, and proper state reset in cleanupDrag.
src/dialogs/style.scss	Added CSS keyframe enter animations for prompt dialog and mask; exit uses a CSS transition; animations respect body.no-animation via animation:none !important.
src/components/settingsPage.scss	Removed conflicting background-color CSS transition, removed CSS transform transition on switch handle, migrated ::after pseudo-element to a real .handle element.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant User
    participant WCPage
    participant PageHandler
    participant TabView
    participant Motion

    Note over User,Motion: Page open
    User->>WCPage: navigate to page
    WCPage->>Motion: animate(opacity 0 to 1, 140ms)
    WCPage->>TabView: connectedCallback - show event
    TabView->>Motion: animate indicator to active tab (spring)

    Note over User,Motion: Tab switch
    User->>TabView: click tab / swipe
    TabView->>TabView: changeTab() classList update
    TabView->>Motion: animate indicator (spring stiffness 380)

    Note over User,Motion: Page swap
    WCPage->>PageHandler: onshow - handlePagesForSmoothExperience
    PageHandler->>WCPage: replaceEl (detach, add placeholder)
    WCPage-->>TabView: willdisconnect - observer.disconnect()
    PageHandler->>WCPage: restoreEl - onRestore - willconnect
    WCPage-->>TabView: willconnect - observer.observe()
    WCPage->>TabView: connectedCallback - show - update()
    TabView->>Motion: re-animate indicator to current active tab

    Note over User,Motion: Page close
    User->>WCPage: back button press animation via Motion
    WCPage->>Motion: animate(opacity 1 to 0, 120ms)
    Motion-->>WCPage: then() remove() and handler.remove()

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant User
    participant WCPage
    participant PageHandler
    participant TabView
    participant Motion

    Note over User,Motion: Page open
    User->>WCPage: navigate to page
    WCPage->>Motion: animate(opacity 0 to 1, 140ms)
    WCPage->>TabView: connectedCallback - show event
    TabView->>Motion: animate indicator to active tab (spring)

    Note over User,Motion: Tab switch
    User->>TabView: click tab / swipe
    TabView->>TabView: changeTab() classList update
    TabView->>Motion: animate indicator (spring stiffness 380)

    Note over User,Motion: Page swap
    WCPage->>PageHandler: onshow - handlePagesForSmoothExperience
    PageHandler->>WCPage: replaceEl (detach, add placeholder)
    WCPage-->>TabView: willdisconnect - observer.disconnect()
    PageHandler->>WCPage: restoreEl - onRestore - willconnect
    WCPage-->>TabView: willconnect - observer.observe()
    WCPage->>TabView: connectedCallback - show - update()
    TabView->>Motion: re-animate indicator to current active tab

    Note over User,Motion: Page close
    User->>WCPage: back button press animation via Motion
    WCPage->>Motion: animate(opacity 1 to 0, 120ms)
    Motion-->>WCPage: then() remove() and handler.remove()

Loading

_{Reviews (6): Last reviewed commit: "fix" | Re-trigger Greptile}