Adding User Notifications to Your Svelte Kanban Board

In our Kanban board application, we've already implemented a robust task management system with the ability to add, move, and delete tasks. We've also added localStorage persistence so users' tasks remain available even after refreshing the browser. Now, let's enhance the user experience further by adding notifications.

Notifications provide immediate feedback to users when they perform actions in your application. This feedback is crucial for a good user experience, as it confirms that an action was successful or alerts users to errors. Without notifications, users might be left wondering if their action had any effect, especially in applications where changes might not be immediately visible.

In our Kanban board, we'll implement notifications that appear when users add new tasks. These notifications will:

1. Appear briefly at the bottom right of the screen
2. Automatically disappear after a few seconds
3. Use visual styling to indicate success
4. Provide context about what task was added

This type of feedback is especially valuable when combined with our localStorage persistence. Now, not only will users' tasks be saved automatically, but they'll also receive confirmation when new tasks are added to the system.

Let's build a notification system that's reusable, visually appealing, and integrates seamlessly with our existing Kanban board application.

The first step in creating our notification system is to build a reusable notification component. This component will be responsible for displaying a single notification message with appropriate styling and handling its own dismissal after a set time.

Let's create a new file called Notification.svelte in our components directory:

<script>
  import { slide } from 'svelte/transition';
  
  let { message, type = 'info' } = $props();
  let visible = $state(true);
  
  setTimeout(() => {
    visible = false;
  }, 3000);
</script>

{#if visible}
  <div 
    class="notification {type}" 
    transition:slide|local={{ duration: 300 }}
    role="alert"
  >
    {message}
  </div>
{/if}