feat(dashnote): optimize workspace UI for mobile

[thephez]

Summary

• Optimize the Dashnote workspace for small screens: convert modals to bottom sheets, add a mobile action sheet and info drawer in the note editor, surface the activity drawer from the mobile nav, and enlarge tap targets across login and the note list
• Pin the note list search row below the workspace header with a translucent backdrop and show "Edited" / "Updated …" status in the mobile editor header; keep mobile pull-to-refresh from bumping the search bar
• Extract MobileActionSheet into a shared component with focus trap, aria-labelledby, and focus restoration; split swipe handling into pointer vs mouse paths with pointer capture and touch-action: pan-y so vertical scroll stays smooth
• Add MobileActionSheet tests and expand NoteList / NoteEditor / e2e coverage for the mobile flows

Summary by CodeRabbit

• New Features

  • Enhanced mobile experience with dedicated action menus for notes
  • Added swipe-to-reveal gestures for quick note actions on mobile devices
  • Introduced Activity panel toggle on mobile navigation
  • Improved mobile note editor with optimized button layouts and controls

• Style

  • Enhanced responsive design across all screen sizes with better mobile-specific layouts and spacing

• Tests

  • Expanded test coverage for mobile interactions, gestures, and responsive behavior

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR implements comprehensive mobile responsiveness and gesture-based interactions for the Dashnote example app, introducing a reusable MobileActionSheet component, responsive styling for modals, swipe-gesture handling in the note list, a condensed mobile editor with action sheets, refined delete state tracking, and updated E2E test infrastructure with mobile-specific helpers.

Changes

Mobile UI Responsiveness & Gestures

Layer / File(s)	Summary
Mobile Action Sheet Component & Focus Management example-apps/dashnote/src/components/MobileActionSheet.tsx, test/MobileActionSheet.test.tsx	New MobileActionSheet component renders a bottom-sheet dialog with captured focus management, Escape-to-close, Tab focus trapping, and focus restoration. Tests verify labeling, focus behavior, backdrop interaction, and focus cycling.
Responsive Modal & Dialog Styling example-apps/dashnote/src/components/Modal.tsx, example-apps/dashnote/src/components/LoginModal.tsx, test/LoginModal.test.tsx	Modal and LoginModal add max-md Tailwind classes for mobile sizing, padding, rounding, and border removal. Buttons and links updated for responsive layout. Test added for Sign in button and Dash Bridge link visibility.
App-Level Responsive Setup & Activity Panel Wiring example-apps/dashnote/src/App.tsx, example-apps/dashnote/src/components/AppShell.tsx, test/App.test.tsx	App detects desktop via media query and positions Toaster conditionally. AppShell receives onOpenActivity callback and renders a mobile-only Activity navigation button. Test verifies activity panel opens via shell action.
Editor Mobile UI & Action Sheets example-apps/dashnote/src/components/NoteEditor.tsx, example-apps/dashnote/src/styles/globals.css, test/NoteEditor.test.tsx	NoteEditor adds mobile state, condensed header status, mobile-only Note actions button, and two action sheets (note actions and info). Read-only sign-in affordance becomes a visible CTA instead of overlay. Input/textarea use mobile-note-editor-field class with custom mobile focus styling. Tests cover mobile Save visibility, delete actions, metadata display, and sign-in CTA.
List Mobile UI with Swipe Gesture Handling example-apps/dashnote/src/components/NoteList.tsx, test/NoteList.test.tsx	NoteList implements swipe-left gesture detection with threshold-based row action reveal, pointer capture/release, and vertical movement cancellation. Rows translate based on drag state; swipe actions are hidden from tab order and accessibility. Mobile action sheets replace inline buttons. Header/search includes sticky positioning and refreshing indicator. Comprehensive tests cover gesture thresholds, accessibility, and row closing behavior.
Delete Flow Refinement & Target Tracking example-apps/dashnote/src/components/NotesWorkspace.tsx, test/NotesWorkspace.test.tsx	NotesWorkspace introduces DeleteTarget state (note id + title) and requestDeleteNote helper. confirmDelete uses targeted id for deletion and clears state after success. NoteList receives delete callbacks and permission flags. Tests verify delete confirmation flow without unintended note selection.
E2E Test Infrastructure & Mobile Support example-apps/dashnote/test/e2e/fixtures.ts, example-apps/dashnote/test/e2e/notes.spec.ts	Adds openMobileDrawerIfNeeded for mobile sidebar access and waitForSaveComplete with mobile/desktop-specific completion checks. Updates delete flow to route through Note actions sheet on mobile. Expands mobile test coverage with swipe assertions, action sheet interactions, and delete confirmation dialogs. Optimizes context cleanup via Promise.allSettled.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• dashpay/platform-tutorials#82: Updates delete flow in NotesWorkspace and DeleteNoteModal with delete-confirmation routing and DeleteTarget state tracking.
• dashpay/platform-tutorials#81: Extends E2E test fixtures and synchronization helpers in example-apps/dashnote/test/e2e/ that this PR's mobile test infrastructure builds upon.
• dashpay/platform-tutorials#83: Implements the onOpenActivity callback mechanism and ActivityPanel rendering that this PR wires into AppShell for mobile activity access.

Poem

🐰 A mobile gesture dances through each row,
Swiping left to make the actions show.
Action sheets rise like morning dew,
Focus traps and Escape keys too.
Dashnote adapts with grace and care,
Small screens smile—responsive everywhere! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.59% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main objective of the PR: optimizing the Dashnote workspace UI for mobile devices, which is the central theme across all file changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

example-apps/dashnote/src/App.tsx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

example-apps/dashnote/src/components/AppShell.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

example-apps/dashnote/src/components/LoginModal.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

• 14 others

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@example-apps/dashnote/src/styles/globals.css`:
- Around line 96-101: The mobile focus styles for
.mobile-note-editor-field:focus and .mobile-note-editor-field:focus-visible
currently remove all focus cues; change them to a subtle accessible focus
indicator instead of removing outline/box-shadow—replace the outline: none and
box-shadow: none with a modest ring (e.g., a thin outline or low-opacity
box-shadow and visible offset) and preserve focus-visible behavior so keyboard
users on mobile/tablet still see a clear but unobtrusive focus state for
.mobile-note-editor-field.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 678c707f-756a-4490-a4d5-ef246b3751c6

📥 Commits

Reviewing files that changed from the base of the PR and between b34ca54 and 42630e7.

📒 Files selected for processing (17)

• example-apps/dashnote/src/App.tsx
• example-apps/dashnote/src/components/AppShell.tsx
• example-apps/dashnote/src/components/LoginModal.tsx
• example-apps/dashnote/src/components/MobileActionSheet.tsx
• example-apps/dashnote/src/components/Modal.tsx
• example-apps/dashnote/src/components/NoteEditor.tsx
• example-apps/dashnote/src/components/NoteList.tsx
• example-apps/dashnote/src/components/NotesWorkspace.tsx
• example-apps/dashnote/src/styles/globals.css
• example-apps/dashnote/test/App.test.tsx
• example-apps/dashnote/test/LoginModal.test.tsx
• example-apps/dashnote/test/MobileActionSheet.test.tsx
• example-apps/dashnote/test/NoteEditor.test.tsx
• example-apps/dashnote/test/NoteList.test.tsx
• example-apps/dashnote/test/NotesWorkspace.test.tsx
• example-apps/dashnote/test/e2e/fixtures.ts
• example-apps/dashnote/test/e2e/notes.spec.ts