Bug: In-app toast notifications render incorrectly and cannot be dismissed

[kRyxar87t]

Problem

The in-app toast notification system is not functioning correctly.

When a Focus Session completes:

• The completion sound plays successfully.
• The toast notification appears as plain, unstyled HTML.
• The close (×) button does not dismiss the notification.
• During testing, duplicate completion toasts were also observed.

Current Behavior

After a Focus Session ends, two plain text toast notifications appear in the top-right corner. The notifications are missing their intended styling, the close button does not remove them, and duplicate notifications may appear for a single session completion.

Expected Behavior

• A properly styled toast notification should appear.
• The notification should be dismissible using the close (×) button.
• Only one completion toast should be displayed per completed session.

Steps to Reproduce

1. Clone and run the latest version of the application.
2. Open Focus Mode.
3. Start a Focus Session.
4. Wait until the timer finishes.
5. Observe the notification displayed after completion.

Screenshots

See attached screenshot showing:

• Plain, unstyled toast notifications.
• Duplicate completion notifications.
• Non-functional close button.

Environment

• Browser: Brave (Chromium)
• Version: Latest
• OS: macOS

Additional Context

The issue is reproducible on the latest main branch without any local modifications.

During investigation, it was observed that:

• Toast elements are created successfully.
• The generated toast elements render without their expected styling.
• The close button does not dismiss the notification.
• Duplicate completion notifications can appear after a single focus session.

This appears to be an issue with the existing toast notification implementation rather than the Focus Timer itself.

[shrutig-blip]

Hi! I'm interested in working on this issue. I've gone through the description and would love to contribute. Could you please assign it to me? Thanks!