oss-slu/pao_surgery_simulator

Implement Toast Notifications for UX Feedback

已關閉

#70 建立於 2026年4月13日

 (0 則留言) (0 個反應) (0 位負責人)JavaScript (5 個分叉)auto 404
enhancementgood first issue

倉庫指標

星標
 (1 顆星)
PR 合併指標
 (PR 指標待抓取)

描述

Description

Currently, when a user logs in incorrectly or successfully uploads a heavy 3D DICOM file, our feedback mechanisms are limited. To make the app feel more like a modern, polished product, we need a global notification system (Toasts) to display success and error messages cleanly in the corner of the screen without disrupting the layout.

Task

  • Install a lightweight notification library like react-toastify or react-hot-toast.
  • Set up the global Toast container at the top level of the app (e.g., in App.js).
  • Trigger an Error Toast when a user inputs invalid credentials on the Login/Signup pages.
  • Trigger a Success Toast when a user successfully uploads a new scan.
  • Trigger a Success Toast confirming "Logged out successfully" when the user clicks the navigation logout button.

Acceptance Criteria

  • Notifications appear on screen for key actions (login errors, successful uploads).
  • Notifications automatically dismiss themselves after 3-5 seconds.
  • The UI feels responsive and communicates backend states clearly to the end-user.

貢獻者指南