coracle/flotilla
1
6
Fork 23
Code Issues 42 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

feat: redesign toast notifications for UX #148

Merged
hodlbod merged 1 commits from userAdityaa/flotilla:branch-refine-toast into dev 2026-04-04 16:45:50 +00:00
Conversation 7 Commits 1 Files Changed 1
+74 -7
userAdityaa commented 2026-04-03 21:14:41 +00:00
Collaborator
Copy Link
Copy Source

Description

The X button has been removed from toasts, and users can now swipe up to dismiss them. On mobile, toasts appear at the top of the screen, ensuring they no longer cover the bottom navigation. On desktop, toasts are positioned in the top-right corner, following the familiar Slack/Discord style. Action toasts, such as “Sending… Cancel,” retain the Cancel button and remain visible until the action completes or is cancelled, while regular toasts will auto-dismiss after a short period.

Testing

  • Desktop: Top-right, transition, auto-dismiss
  • Mobile: Top, swipe-to-dismiss, no bottom nav overlap
  • Action toasts: “Sending… Cancel” stays until done

Screenshots of the changes

Before (Desktop View) After (Desktop View)
Screenshot 2026-04-04 at 2.49.46 AM.png Screenshot 2026-04-04 at 2.50.24 AM.png
Before (Mobile View) After (Mobile View)
Screenshot 2026-04-04 at 2.52.05 AM.png Screenshot 2026-04-04 at 2.52.52 AM.png
Request canceling state
Screenshot 2026-04-04 at 2.54.01 AM.png

Resolves #137

### Description The X button has been removed from toasts, and users can now swipe up to dismiss them. On mobile, toasts appear at the top of the screen, ensuring they no longer cover the bottom navigation. On desktop, toasts are positioned in the top-right corner, following the familiar Slack/Discord style. Action toasts, such as “Sending… Cancel,” retain the Cancel button and remain visible until the action completes or is cancelled, while regular toasts will auto-dismiss after a short period. ### Testing - Desktop: Top-right, transition, auto-dismiss - Mobile: Top, swipe-to-dismiss, no bottom nav overlap - Action toasts: “Sending… Cancel” stays until done ### Screenshots of the changes |Before (Desktop View) | After (Desktop View)| |----|----| |<img width="1440" alt="Screenshot 2026-04-04 at 2.49.46 AM.png" src="attachments/a2a34c0e-cec4-4c40-8e5b-1774a1d34488">|<img width="1440" alt="Screenshot 2026-04-04 at 2.50.24 AM.png" src="attachments/fc6d1b6c-122a-43cd-aa96-17fd5f7bba1f">| |Before (Mobile View) | After (Mobile View)| |----|----| |<img width="197" alt="Screenshot 2026-04-04 at 2.52.05 AM.png" src="attachments/9ebca572-faec-401e-b2bb-959b84096cad">|<img width="197" alt="Screenshot 2026-04-04 at 2.52.52 AM.png" src="attachments/e5db387e-9f94-4a51-a48a-90257eaa3995">| |Request canceling state| |----| |<img width="1440" alt="Screenshot 2026-04-04 at 2.54.01 AM.png" src="attachments/031ec15e-dacf-4144-8d36-c6ebaae58b7b">| Resolves #137
Screenshot 2026-04-04 at 2.49.46 AM.png
412 KiB
Screenshot 2026-04-04 at 2.50.24 AM.png
348 KiB
Screenshot 2026-04-04 at 2.52.05 AM.png
93 KiB
Screenshot 2026-04-04 at 2.52.52 AM.png
73 KiB
Screenshot 2026-04-04 at 2.54.01 AM.png
460 KiB
userAdityaa commented 2026-04-03 21:17:40 +00:00
Author
Collaborator
Copy Link
Copy Source

Swipe to Dismiss Screencast

**Swipe to Dismiss Screencast** <video src="attachments/b4c2ade2-6caf-4984-9f5d-7bc3effe36e7" title="Screen Recording 2026-04-04 at 3.01.17 AM.mov" controls></video>
Screen Recording 2026-04-04 at 3.01.17 AM.mov
322 KiB
userAdityaa changed title from feat: redesign toast notifications for mobile UX to feat: redesign toast notifications for UX 2026-04-03 21:20:15 +00:00
hodlbod commented 2026-04-04 00:55:53 +00:00
Owner
Copy Link
Copy Source

Code changes look pretty good, a few refinements:

  • On mobile, toast should be closer to the top of the screen
  • Play with safe insets in app.css and make sure the toast is positioned within those
  • Modify position when swiping so there's immediate user feedback
  • Add an x button to the top right of the toast, similar to the one on modals
Code changes look pretty good, a few refinements: - On mobile, toast should be closer to the top of the screen - Play with safe insets in app.css and make sure the toast is positioned within those - Modify position when swiping so there's immediate user feedback - Add an x button to the top right of the toast, similar to the one on modals
userAdityaa commented 2026-04-04 06:29:43 +00:00
Author
Collaborator
Copy Link
Copy Source

Thanks for the feedback @hodlbod, I’ve pushed the requested changes. Summary:

  • Toast is now closer to the top on mobile (0.5rem below safe area).
  • Safe area insets are respected using CSS variables for left, right, and top.
  • Swiping gives immediate feedback with live position updates.
  • Added an X button at the top right, overlapping the corner like in modals (For this, I moved the close (X) button closer to the corner.)

Screenshots after Refinement

Screenshot 2026-04-04 at 12.09.26 PM.png

localhost_1847_settings_profile(iPhone 14 Pro Max).png

Should I add the screenshots to the main PR description, or keep them in the comments as refinement updates?

Thanks for the feedback @hodlbod, I’ve pushed the requested changes. Summary: - Toast is now closer to the top on mobile (0.5rem below safe area). - Safe area insets are respected using CSS variables for left, right, and top. - Swiping gives immediate feedback with live position updates. - Added an X button at the top right, overlapping the corner like in modals (For this, I moved the close (X) button closer to the corner.) ## Screenshots after Refinement <img width="1438" alt="Screenshot 2026-04-04 at 12.09.26 PM.png" src="attachments/10385a04-d0f0-47fa-95ba-94e08fd3a77e"> ![localhost_1847_settings_profile(iPhone 14 Pro Max).png](/attachments/1c77520d-e4c4-4d10-91fc-bdaa448a8806) Should I add the screenshots to the main PR description, or keep them in the comments as refinement updates?
Screenshot 2026-04-04 at 12.09.26 PM.png
356 KiB
localhost_1847_settings_profile(iPhone 14 Pro Max).png
302 KiB
userAdityaa commented 2026-04-04 06:55:01 +00:00
Author
Collaborator
Copy Link
Copy Source

@hodlbod what do you think about this? Should we refactor the modal to use a corner close button similar to the toast refactor, or go the opposite way if that fits better?

If we go with the opposite approach, I’ll refactor the toast to use that same close button style.

@hodlbod what do you think about this? Should we refactor the modal to use a corner close button similar to the toast refactor, or go the opposite way if that fits better? > If we go with the opposite approach, I’ll refactor the toast to use that same close button style.
hodlbod commented 2026-04-04 14:45:44 +00:00
Owner
Copy Link
Copy Source

Getting there, a few things:

  • On mobile, I think we can remove the x button since users will expect to be able to swipe to dismiss
  • On desktop, let's put the toast in the bottom left where it was
  • I think swipe to dismiss could still use some refinement, users might flick quickly but not meet the 40 px threshold for dismissing. They might also move it slowly up past the threshold, then change their mind about dismissing, in which case it should go back to its original position rather than disappear. We should also animate its return to its original place. To do that, we need to measure whether a gesture was fast enough, maybe <400ms. See the attached video for an illustration of what I mean.
Getting there, a few things: - On mobile, I think we can remove the x button since users will expect to be able to swipe to dismiss - On desktop, let's put the toast in the bottom left where it was - I think swipe to dismiss could still use some refinement, users might flick quickly but not meet the 40 px threshold for dismissing. They might also move it slowly up past the threshold, then change their mind about dismissing, in which case it should go back to its original position rather than disappear. We should also animate its return to its original place. To do that, we need to measure whether a gesture was fast enough, maybe <400ms. See the attached video for an illustration of what I mean.
Screen Recording 2026-04-04 at 7.41.43 AM.mov
1.7 MiB
👍 1
userAdityaa commented 2026-04-04 16:12:29 +00:00
Author
Collaborator
Copy Link
Copy Source

Hey @hodlbod, by its previous position on desktop, do you mean the bottom-right rather than the bottom-left? I’ve moved the toast to the bottom-right now. Also, regarding swipe-to-dismiss, please check the attached video.

Previous placement for desktop toast
Screenshot 2026-04-04 at 9.55.47 PM.png

Hey @hodlbod, by its previous position on desktop, do you mean the bottom-right rather than the bottom-left? I’ve moved the toast to the bottom-right now. Also, regarding swipe-to-dismiss, please check the attached video. **Previous placement for desktop toast** <img width="1437" alt="Screenshot 2026-04-04 at 9.55.47 PM.png" src="attachments/0b63e50a-0f69-444a-9655-ad9f5627acc1">
Screen Recording 2026-04-04 at 9.50.55 PM.mov
1.0 MiB
Screenshot 2026-04-04 at 9.55.47 PM.png
401 KiB
hodlbod commented 2026-04-04 16:45:30 +00:00
Owner
Copy Link
Copy Source

Great, looks good, thank you!

Great, looks good, thank you!
🚀 1
hodlbod added 1 commit 2026-04-04 16:45:35 +00:00
feat: redesign toast notifications for mobile UX 4f98608bbe
hodlbod force-pushed branch-refine-toast from 1b98dde7ef to 4f98608bbe 2026-04-04 16:45:35 +00:00 Compare
hodlbod merged commit 80df16f97b into dev 2026-04-04 16:45:50 +00:00
hodlbod deleted branch branch-refine-toast 2026-04-04 16:45:50 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#148
Delete Branch "userAdityaa/flotilla:branch-refine-toast"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?