Skip to content

ui: Replace browser alerts with custom modern toast notifications.#442

Open
Prakshil wants to merge 1 commit into
Charushi06:mainfrom
Prakshil:feat/modern-toast-notifications
Open

ui: Replace browser alerts with custom modern toast notifications.#442
Prakshil wants to merge 1 commit into
Charushi06:mainfrom
Prakshil:feat/modern-toast-notifications

Conversation

@Prakshil
Copy link
Copy Markdown

@Prakshil Prakshil commented May 19, 2026

Related Issue

Closes #257

Summary

This PR modernizes the notification system by completely replacing the project's native browser alert() and confirm() dialogs with a custom, zero-dependency Vanilla JavaScript toast notification and modal system. This significantly improves the UI/UX consistency, maintains the project's glassmorphism aesthetic, and avoids the jarring flow interruptions caused by default browser dialogs.

Changes Made

  • Created a Custom Notification System (toast.js): Implemented a lightweight ToastManager class to handle both slide-in toasts and confirmation modals without relying on heavy external React libraries.
  • Removed Blocking Alerts: Refactored over a dozen synchronous alert() calls across store.js and app.js, replacing them with non-blocking Toast.show() calls for success, error, warning, and info messages.
  • Modernized Confirmations: Replaced the native confirm() dialog for task deletion with an asynchronous, beautifully styled await Toast.confirm() modal.
  • Enhanced Styling (index.css): Added styles and @keyframes animations for top-right sliding toasts and a fading modal backdrop. The components use existing CSS variables to automatically adapt to the application's Light/Dark mode toggles.
  • Updated Documentation: Added the new "Smart Notifications" feature to the README.md and updated the project structure tree.

Testing

  • Validation Testing: Attempted to add an empty task and verified that the warning toast slides in from the top-right and auto-dismisses.
  • Interaction Testing: Finished a Focus session to ensure the success toast correctly fires.
  • Promise Resolution Testing: Clicked "delete" on a task to ensure the new custom confirm modal appears, intercepts the action, and accurately resolves the promise based on clicking "Confirm" or "Cancel".
  • Theme Testing: Toggled between Light Mode and Dark Mode to verify that the toast and modal backgrounds/text colors adapt seamlessly to the CSS variables.

Screenshots

image

Checklist

  • Code follows project style
  • Tested locally
  • No unrelated changes included
  • Documentation updated (if applicable)

@Prakshil
Copy link
Copy Markdown
Author

I have successfully implemented the Notification toasts , please review it and merge it.
thank you.

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.

UI Enhancement: Replace Default Browser Notifications with Themed Toast Notifications

1 participant