Skip to content

wip(drawer): port JS implementation to pure Rust/Leptos #34

@max-wells

Description

@max-wells

Summary

The current Drawer component (app_crates/registry/src/ui/drawer.rs) delegates all behavior to the JavaScript implementation in public/app_components/vaul_drawer.js. A full Rust/Leptos port exists in app/src/domain/tests/drawer_tofix.rs but was reverted because it didn't match the JS behavior correctly.

Goal

Make drawer_tofix.rs behavior-identical to the JS implementation, then promote it to replace drawer.rs (eliminating the JS dependency).

What needs fixing

  • Verify open/close animation sequencing matches JS (data-state, hidden, transform transitions)
  • Verify drag-to-close behavior (velocity threshold, close threshold, damping on reverse drag)
  • Verify overlay opacity animation during drag
  • Verify body scroll lock / unlock
  • Verify focus trap (Tab/Shift+Tab cycling, focus restore on close)
  • Verify wrapper scale animation ([data-vaul-drawer-wrapper])
  • Verify all positions: Bottom, Left, Right
  • Verify both variants: Inset, Floating

Test demos needed

Add demos in app/src/domain/tests/ that exercise the Rust impl in isolation:

  • Basic open/close (bottom)
  • Side drawers (left, right) — both inset and floating
  • Non-dismissible drawer
  • Nested drawer
  • Scrollable content (drag prevention while scrolled)
  • Focus trap

Files

  • Rust port: app/src/domain/tests/drawer_tofix.rs
  • Current JS-backed impl: app_crates/registry/src/ui/drawer.rs
  • Existing demos (using JS impl): app_crates/registry/src/demos/demo_drawer*.rs
  • Test page: app/src/domain/tests/page_test.rs

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions