chore(web): migration svelte 5 syntax (#13883)

web/src/lib/components/shared-components/context-menu/menu-option.svelte

@@ -3,16 +3,27 @@
   import { generateId } from '$lib/utils/generate-id';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
 
-  export let text: string;
-  export let subtitle = '';
-  export let icon = '';
-  export let activeColor = 'bg-slate-300';
-  export let textColor = 'text-immich-fg dark:text-immich-dark-bg';
-  export let onClick: () => void;
+  interface Props {
+    text: string;
+    subtitle?: string;
+    icon?: string;
+    activeColor?: string;
+    textColor?: string;
+    onClick: () => void;
+  }
+
+  let {
+    text,
+    subtitle = '',
+    icon = '',
+    activeColor = 'bg-slate-300',
+    textColor = 'text-immich-fg dark:text-immich-dark-bg',
+    onClick,
+  }: Props = $props();
 
   let id: string = generateId();
 
-  $: isActive = $selectedIdStore === id;
+  let isActive = $derived($selectedIdStore === id);
 
   const handleClick = () => {
     $optionClickCallbackStore?.();
@@ -20,13 +31,13 @@
   };
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <li
   {id}
-  on:click={handleClick}
-  on:mouseover={() => ($selectedIdStore = id)}
-  on:mouseleave={() => ($selectedIdStore = undefined)}
+  onclick={handleClick}
+  onmouseover={() => ($selectedIdStore = id)}
+  onmouseleave={() => ($selectedIdStore = undefined)}
   class="w-full p-4 text-left text-sm font-medium {textColor} focus:outline-none focus:ring-2 focus:ring-inset cursor-pointer border-gray-200 flex gap-2 items-center {isActive
     ? activeColor
     : 'bg-slate-100'}"