feat(web): enhance ux/ui of the album list page (#8499)

* feat(web): enhance ux/ui of the album list page

* fix unit tests

* feat(web): enhance ux/ui of the album list page

* fix unit tests

* small styling

* better dot

* lint

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -1,30 +1,40 @@
 <script lang="ts">
-  import { clickOutside } from '$lib/utils/click-outside';
   import { quintOut } from 'svelte/easing';
   import { slide } from 'svelte/transition';
+  import { clickOutside } from '$lib/utils/click-outside';
 
   export let direction: 'left' | 'right' = 'right';
   export let x = 0;
   export let y = 0;
 
-  let menuElement: HTMLDivElement;
+  export let menuElement: HTMLDivElement | undefined = undefined;
+
   let left: number;
   let top: number;
 
-  $: if (menuElement) {
-    const rect = menuElement.getBoundingClientRect();
-    const directionWidth = direction === 'left' ? rect.width : 0;
+  // We need to bind clientHeight since the bounding box may return a height
+  // of zero when starting the 'slide' animation.
+  let height: number;
 
-    left = Math.min(window.innerWidth - rect.width, x - directionWidth);
-    top = Math.min(window.innerHeight - rect.height, y);
+  $: {
+    if (menuElement) {
+      const rect = menuElement.getBoundingClientRect();
+      const directionWidth = direction === 'left' ? rect.width : 0;
+      const menuHeight = Math.min(menuElement.clientHeight, height) || 0;
+
+      left = Math.min(window.innerWidth - rect.width, x - directionWidth);
+      top = Math.min(window.innerHeight - menuHeight, y);
+    }
   }
 </script>
 
 <div
-  transition:slide={{ duration: 200, easing: quintOut }}
   bind:this={menuElement}
+  bind:clientHeight={height}
+  transition:slide={{ duration: 250, easing: quintOut }}
   class="absolute z-10 min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg"
-  style="left: {left}px; top: {top}px;"
+  style:top="{top}px"
+  style:left="{left}px"
   role="menu"
   use:clickOutside
   on:outclick

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+
+  export let direction: 'left' | 'right' = 'right';
+  export let x = 0;
+  export let y = 0;
+  export let isOpen = false;
+  export let onClose: (() => unknown) | undefined;
+
+  let uniqueKey = {};
+  let contextMenuElement: HTMLDivElement;
+
+  const reopenContextMenu = async (event: MouseEvent) => {
+    const contextMenuEvent = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      clientX: event.x,
+      clientY: event.y,
+    });
+
+    const elements = document.elementsFromPoint(event.x, event.y);
+
+    if (elements.includes(contextMenuElement)) {
+      // User right-clicked on the context menu itself, we keep the context
+      // menu as is
+      return;
+    }
+
+    closeContextMenu();
+    await tick();
+    uniqueKey = {};
+
+    // Event will bubble through the DOM tree
+    const sectionIndex = elements.indexOf(event.target as Element);
+    elements.at(sectionIndex + 1)?.dispatchEvent(contextMenuEvent);
+  };
+
+  const closeContextMenu = () => {
+    onClose?.();
+  };
+</script>
+
+{#key uniqueKey}
+  {#if isOpen}
+    <section
+      class="fixed left-0 top-0 z-10 flex h-screen w-screen"
+      on:contextmenu|preventDefault={reopenContextMenu}
+      role="presentation"
+    >
+      <ContextMenu
+        {x}
+        {y}
+        {direction}
+        on:outclick={closeContextMenu}
+        on:escape={closeContextMenu}
+        bind:menuElement={contextMenuElement}
+      >
+        <slot />
+      </ContextMenu>
+    </section>
+  {/if}
+{/key}