Migrates to svelte 5

web/src/lib/components/notification/notification_dropdown.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
-    import { page } from "$app/stores";
+    import { page } from "$app/state";
     import type { Notification } from "$lib/models/notification";
     import {
         notifications_index,
@@ -16,24 +16,23 @@
     import emptyStateNotificationLight from "$lib/assets/svgs/empty_states/empty_state_notification_light.svg";
     import { theme } from "$lib/stores/theme_store";
 
-    let notifications: Notification[] = [];
+    let notifications: Notification[] = $state([]);
 
     const pagination = {
-        page: $page.data.notifications.page,
-        totalPages: $page.data.notifications.totalPages,
+        page: page.data.notifications.page,
+        totalPages: page.data.notifications.totalPages,
     };
 
-    let loadingNextPage: boolean = false;
-    let isOpen = false;
+    let loadingNextPage: boolean = $state(false);
+    let isOpen = $state(false);
 
-    $: unreadCount = notifications.reduce(
-        (value, n) => (value += n.seen ? 0 : 1),
-        0,
+    let unreadCount = $derived(
+        notifications.reduce((value, n) => (value += n.seen ? 0 : 1), 0),
     );
 
     onMount(() => {
-        if (!notifications.length && $page.data.notifications?.items?.length) {
-            notifications = $page.data.notifications.items;
+        if (!notifications.length && page.data.notifications?.items?.length) {
+            notifications = page.data.notifications.items;
         }
     });
 
@@ -88,18 +87,21 @@
         loadingNextPage = false;
     }
 
-    async function handleNotificationClick(e: CustomEvent) {
-        await notifications_mark_as_seen(e.detail.notification);
-        e.detail.notification.seen = true;
+    async function handleNotificationClick(data: {
+        notification: Notification;
+        link: string | null;
+    }) {
+        await notifications_mark_as_seen(data.notification);
+        data.notification.seen = true;
         notifications = notifications;
 
-        if (e.detail.link) {
-            goto(e.detail.link);
+        if (data.link) {
+            goto(data.link);
         }
     }
 </script>
 
-<svelte:window on:mouseup={handleWindowClick} />
+<svelte:window onmouseup={handleWindowClick} />
 
 <div class="dropdown relative">
     {#if unreadCount > 0}
@@ -110,7 +112,11 @@
         </div>
     {/if}
     <div class="dropdown-toggle">
-        <button on:click={toggleMenu} class="btn-icon">
+        <button
+            aria-label="Toggle notification dropdown"
+            onclick={toggleMenu}
+            class="btn-icon"
+        >
             <i class="fa fa-bell"></i>
         </button>
     </div>
@@ -119,7 +125,7 @@
         <ul
             class="menu absolute bg-menu-background border border-input-border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-scroll mt-4 max-h-96 w-72"
             class:none={isOpen}
-            on:scroll={onListScroll}
+            onscroll={onListScroll}
             style="z-index: 1001"
             in:fly={{ y: -10, duration: 150 }}
             out:fly={{ y: -10, duration: 150 }}
@@ -131,13 +137,14 @@
             {:else if notifications.length}
                 {#each notifications as notification}
                     <NotificationCard
-                        on:click={handleNotificationClick}
+                        onclick={(data) => handleNotificationClick(data)}
                         {notification}
                     ></NotificationCard>
                 {/each}
             {:else}
                 <div class="text-center p-8">
-                    <img class="mx-auto"
+                    <img
+                        class="mx-auto"
                         src={$theme === "light"
                             ? emptyStateNotificationLight
                             : emptyStateNotificationDark}