Back to Source Monitor

Toast Stacking: Container Controller, Templates, and Integration

.vbw-planning/milestones/polish-and-reliability/phases/03-toast-stacking/PLAN-01-SUMMARY.md

0.13.01.2 KB
Original Source

What Was Built

  • New notification_container_controller.js Stimulus controller: MutationObserver-based toast overflow capping (max 3 visible), expand/collapse with click-outside, "+N more" badge, "Clear all" action, debounced recalculation via requestAnimationFrame, accessibility (aria-hidden + inert on hidden toasts)
  • Modified notification_controller.js: dispatches notification:dismissed custom event before fade-out, error-level toasts get 10s auto-dismiss (vs 5s default)
  • Layout template wired with data-controller="notification-container", list target, badge with count, and clear-all button
  • Toast partial includes data-level attribute for error delay detection
  • Controller registered in application.js

Files Modified

  • app/assets/javascripts/source_monitor/controllers/notification_container_controller.js (CREATE, 131 lines)
  • app/assets/javascripts/source_monitor/controllers/notification_controller.js (MODIFY, +11 lines)
  • app/views/layouts/source_monitor/application.html.erb (MODIFY, +22/-2 lines)
  • app/views/source_monitor/shared/_toast.html.erb (MODIFY, +1 line)
  • app/assets/javascripts/source_monitor/application.js (MODIFY, +2 lines)