···

       
1
       
1
       
 
       
import { createSignal, For, Show } from "solid-js";

     

       
2
       
2
       
+
       
import { createStore } from "solid-js/store";

     

       
2
       
3
       
 
       


     

       
3
       
4
       
 
       
export type Notification = {

     

       
4
       
5
       
 
       
  id: string;

     
···

       
8
       
9
       
 
       
  type?: "info" | "success" | "error";

     

       
9
       
10
       
 
       
};

     

       
10
       
11
       
 
       


     

       
11
       
11
       
-
       
const [notifications, setNotifications] = createSignal<Notification[]>([]);

     

       
12
       
12
       
+
       
const [notifications, setNotifications] = createStore<Notification[]>([]);

     

       
12
       
13
       
 
       
const [removingIds, setRemovingIds] = createSignal<Set<string>>(new Set());

     

       
13
       
14
       
 
       


     

       
14
       
15
       
 
       
export const addNotification = (notification: Omit<Notification, "id">) => {

     

       
15
       
16
       
 
       
  const id = `notification-${Date.now()}-${Math.random()}`;

     

       
16
       
16
       
-
       
  setNotifications([...notifications(), { ...notification, id }]);

     

       
17
       
17
       
+
       
  setNotifications(notifications.length, { ...notification, id });

     

       
17
       
18
       
 
       
  return id;

     

       
18
       
19
       
 
       
};

     

       
19
       
20
       
 
       


     

       
20
       
21
       
 
       
export const updateNotification = (id: string, updates: Partial<Notification>) => {

     

       
21
       
21
       
-
       
  setNotifications(notifications().map((n) => (n.id === id ? { ...n, ...updates } : n)));

     

       
22
       
22
       
+
       
  setNotifications((n) => n.id === id, updates);

     

       
22
       
23
       
 
       
};

     

       
23
       
24
       
 
       


     

       
24
       
25
       
 
       
export const removeNotification = (id: string) => {

     

       
25
       
26
       
 
       
  setRemovingIds(new Set([...removingIds(), id]));

     

       
26
       
27
       
 
       
  setTimeout(() => {

     

       
27
       
27
       
-
       
    setNotifications(notifications().filter((n) => n.id !== id));

     

       
28
       
28
       
+
       
    setNotifications((n) => n.filter((notification) => notification.id !== id));

     

       
28
       
29
       
 
       
    setRemovingIds((ids) => {

     

       
29
       
30
       
 
       
      const newIds = new Set(ids);

     

       
30
       
31
       
 
       
      newIds.delete(id);

     
···

       
36
       
37
       
 
       
export const NotificationContainer = () => {

     

       
37
       
38
       
 
       
  return (

     

       
38
       
39
       
 
       
    <div class="pointer-events-none fixed bottom-4 left-4 z-50 flex flex-col gap-2">

     

       
39
       
39
       
-
       
      <For each={notifications()}>

     

       
40
       
40
       
+
       
      <For each={notifications}>

     

       
40
       
41
       
 
       
        {(notification) => (

     

       
41
       
42
       
 
       
          <div

     

       
42
       
43
       
 
       
            class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto flex min-w-64 flex-col gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 shadow-md select-none dark:border-neutral-700"