refactor: asset viewer context menu

web/src/lib/actions/context-menu-navigation.ts

@@ -10,7 +10,7 @@ interface Options {
   /**
    * The container element that with direct children that should be navigated.
    */
-  container: HTMLElement;
+  container?: HTMLElement;
   /**
    * Indicates if the dropdown is open.
    */
@@ -52,7 +52,11 @@ export const contextMenuNavigation: Action<HTMLElement, Options> = (node, option
       await tick();
     }
 
-    const children = Array.from(container?.children).filter((child) => child.tagName !== 'HR') as HTMLElement[];
+    if (!container) {
+      return;
+    }
+
+    const children = Array.from(container.children).filter((child) => child.tagName !== 'HR') as HTMLElement[];
     if (children.length === 0) {
       return;
     }

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

@@ -54,8 +54,8 @@
 
   let isOpen = $state(false);
   let contextMenuPosition = $state({ x: 0, y: 0 });
-  let menuContainer: HTMLUListElement = $state();
-  let buttonContainer: HTMLDivElement = $state();
+  let menuContainer: HTMLUListElement | undefined = $state();
+  let buttonContainer: HTMLDivElement | undefined = $state();
 
   const id = generateId();
   const buttonId = `context-menu-button-${id}`;
@@ -84,9 +84,10 @@
   };
 
   const onResize = () => {
-    if (!isOpen) {
+    if (!isOpen || !buttonContainer) {
       return;
     }
+
     contextMenuPosition = getContextMenuPositionFromBoundingRect(buttonContainer.getBoundingClientRect(), align);
   };
 
@@ -104,17 +105,19 @@
   };
 
   const focusButton = () => {
-    const button: HTMLButtonElement | null = buttonContainer.querySelector(`#${buttonId}`);
+    const button = buttonContainer?.querySelector(`#${buttonId}`) as HTMLButtonElement | null;
     button?.focus();
   };
-  run(() => {
+
+  $effect(() => {
     if (isOpen) {
       $optionClickCallbackStore = handleOptionClick;
     }
   });
 </script>
 
 <svelte:window onresize={onResize} />
+
 <div
   use:contextMenuNavigation={{
     closeDropdown,

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { quintOut } from 'svelte/easing';
   import { slide } from 'svelte/transition';
   import { clickOutside } from '$lib/actions/click-outside';
@@ -28,19 +26,19 @@
     ariaLabel = undefined,
     ariaLabelledBy = undefined,
     ariaActiveDescendant = undefined,
-    menuElement = $bindable(undefined),
+    menuElement = $bindable(),
     onClose = undefined,
     children,
   }: Props = $props();
 
-  let left: number = $state();
-  let top: number = $state();
+  let left: number = $state(0);
+  let top: number = $state(0);
 
   // We need to bind clientHeight since the bounding box may return a height
   // of zero when starting the 'slide' animation.
-  let height: number = $state();
+  let height: number = $state(0);
 
-  run(() => {
+  $effect(() => {
     if (menuElement) {
       const rect = menuElement.getBoundingClientRect();
       const directionWidth = direction === 'left' ? rect.width : 0;