Skip to content

fix: replace FullscreenModal with Drawer for non-camera dialogs#142

Closed
fx wants to merge 10 commits intomainfrom
fix/136-use-drawer-for-non-camera-modals
Closed

fix: replace FullscreenModal with Drawer for non-camera dialogs#142
fx wants to merge 10 commits intomainfrom
fix/136-use-drawer-for-non-camera-modals

Conversation

@fx
Copy link
Owner

@fx fx commented Jul 16, 2025

Closes #136

Summary

  • Installed Vaul library for drawer functionality
  • Created a new reusable Drawer component using Vaul
  • Replaced FullscreenModal with Drawer in EntityBrowser
  • CameraCard continues to use FullscreenModal as required
  • Added accessibility attributes (aria-describedby and Title) to the Drawer component
  • Implemented proper test mocking based on Testing with vaul drawer emilkowalski/vaul#13

Testing

  • All tests pass locally (npm test)
  • Linting passes (npm run lint)
  • TypeScript checks pass (npm run typecheck)
  • Built successfully (npm run build:ha)
  • CI checks passing

Test Evidence

Test Files  39 passed (39)
     Tests  465 passed  < /dev/null |  2 skipped (467)

Implementation Details

  • The Drawer component supports all four directions (left, right, top, bottom) with right as default
  • Uses Vaul which is built on top of Radix Dialog primitives
  • Includes smooth slide-in animations, click outside to close, and ESC key support
  • Maintains proper z-index management without arbitrary values as per Radix UI best practices
  • Test mocking configured via vitest alias resolution to avoid runtime issues in test environment

@fx
Copy link
Owner Author

fx commented Jul 16, 2025

Closing this PR due to testing challenges with Vaul library. The library causes issues in the test environment that would require significant workarounds. Will create a follow-up issue to investigate alternative drawer solutions that are more test-friendly.

fx added 4 commits July 16, 2025 01:29
- Created proper mock for Vaul library based on GitHub issue solution
- Configured vitest to use the mock via resolve alias
- All tests now pass with the drawer implementation
- Fixed linting and formatting issues
- Add AppTaskbar test to verify add item button behavior
- Add Dashboard integration test for entity browser flow
- Update existing Dashboard test to verify event handling
- Fix nested button issue in ScreenTaskbarButton
- Update dashboardStore to accept null for setCurrentScreen
@fx
Copy link
Owner Author

fx commented Jul 16, 2025

Closing PR due to persistent issues with Vaul drawer implementation. The drawer opens but has dimension/styling issues that are difficult to resolve. Will revisit with a different approach or library in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fullscreen modal should only be used for CameraCard

1 participant