feat(popup): opens popup menu in a drawer on mobile

Fixes #2736

Author: seferturan

projects/client/src/lib/components/buttons/popup/PopupMenu.svelte

@@ -1,52 +1,74 @@
 <script lang="ts">
+  import Drawer from "$lib/components/drawer/Drawer.svelte";
   import MoreIcon from "$lib/components/icons/MoreIcon.svelte";
-  import { usePortal } from "$lib/features/portal/usePortal";
+  import { useMedia, WellKnownMediaQuery } from "$lib/stores/css/useMedia";
   import { disableTransitionOn } from "$lib/utils/actions/disableTransitionOn";
   import { slide } from "svelte/transition";
   import type { PopupMenuProps } from "./PopupMenuProps";
+  import { usePopupMenu } from "./_internal/usePopupMenu";
 
   const {
     items,
     mode = "overlay",
     size = "small",
     icon,
     label,
+    title,
     ...props
   }: PopupMenuProps = $props();
 
-  const { portalTrigger, portal, isOpened } = usePortal();
-</script>
+  const isMobile = useMedia(WellKnownMediaQuery.mobile);
+  const variant = $derived($isMobile ? "drawer" : "portal");
 
-<button
-  use:disableTransitionOn={"touch"}
-  use:portalTrigger
-  aria-haspopup="true"
-  aria-label={label}
-  aria-expanded={$isOpened}
-  class="trakt-popup-menu-button"
-  data-mode={mode}
-  data-size={size}
-  class:has-custom-icon={!!icon}
-  {...props}
->
-  {#if icon}
-    {@render icon()}
-  {:else}
-    <MoreIcon {size} />
-  {/if}
-</button>
+  const { menuTrigger, portal, isOpened, close } = $derived(
+    usePopupMenu({ variant }),
+  );
+</script>
 
-{#if $isOpened}
-  <div
-    use:portal
-    class="trakt-popup-menu-container"
-    transition:slide={{ duration: 150 }}
+{#key variant}
+  <button
+    use:disableTransitionOn={"touch"}
+    use:menuTrigger
+    aria-haspopup="true"
+    aria-label={label}
+    aria-expanded={$isOpened}
+    class="trakt-popup-menu-button"
+    data-mode={mode}
+    data-size={size}
+    data-variant={variant}
+    class:has-custom-icon={!!icon}
+    class:has-drawer-open={$isOpened && variant === "drawer"}
+    {...props}
   >
-    <div class="spacer"></div>
-    <ul>
-      {@render items()}
-    </ul>
-  </div>
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <MoreIcon {size} />
+    {/if}
+  </button>
+{/key}
+
+{#if variant === "drawer"}
+  {#if $isOpened}
+    <Drawer onClose={close} {title} size="auto">
+      <ul class="popup-menu-drawer-item">
+        {@render items()}
+      </ul>
+    </Drawer>
+  {/if}
+{:else}
+  {#if $isOpened}
+    <div
+      use:portal
+      class="trakt-popup-menu-container"
+      transition:slide={{ duration: 150 }}
+    >
+      <div class="spacer"></div>
+      <ul>
+        {@render items()}
+      </ul>
+    </div>
+  {/if}
 {/if}
 
 <style lang="scss">
@@ -143,6 +165,7 @@
       }
     }
 
+    &.has-drawer-open,
     &[data-popup-state="opened"] {
       :global(svg) {
         transform: rotate(90deg);
@@ -187,4 +210,17 @@
       height: calc($button-size + $button-padding * 2 + var(--list-padding));
     }
   }
+
+  .popup-menu-drawer-item {
+    all: unset;
+
+    display: grid;
+    grid-template-columns: 100%;
+    gap: var(--gap-xxs);
+
+    :global(li) {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
 </style>

projects/client/src/lib/components/buttons/popup/PopupMenuProps.ts

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 export type PopupMenuProps =
   & {
     items: Snippet;
+    title: string;
     icon?: Snippet;
     mode?: 'overlay' | 'standalone';
     size?: 'small' | 'normal';

projects/client/src/lib/components/buttons/popup/_internal/usePopupMenu.ts

@@ -0,0 +1,43 @@
+import { usePortal } from '$lib/features/portal/usePortal.ts';
+import { NOOP_FN } from '$lib/utils/constants.ts';
+import { BehaviorSubject } from 'rxjs';
+
+type UsePopupMenuProps = {
+  variant: 'portal' | 'drawer';
+};
+
+export function usePopupMenu({ variant }: UsePopupMenuProps) {
+  if (variant === 'portal') {
+    const { portalTrigger, ...rest } = usePortal();
+
+    return {
+      menuTrigger: portalTrigger,
+      ...rest,
+    };
+  }
+
+  const isOpened = new BehaviorSubject(false);
+
+  const openMenu = () => {
+    isOpened.next(true);
+  };
+
+  const menuTrigger = (targetNode: HTMLElement) => {
+    targetNode.addEventListener('click', openMenu);
+
+    return {
+      destroy() {
+        targetNode.removeEventListener('click', openMenu);
+      },
+    };
+  };
+
+  return {
+    menuTrigger,
+    portal: NOOP_FN,
+    isOpened: isOpened.asObservable(),
+    close: () => {
+      isOpened.next(false);
+    },
+  };
+}

projects/client/src/lib/features/calendar/CalendarMediaCard.svelte

@@ -69,7 +69,10 @@
   <RenderFor audience="authenticated">
     <CardActionBar>
       {#snippet actions()}
-        <PopupMenu label={m.button_label_popup_menu({ title: media.title })}>
+        <PopupMenu
+          label={m.button_label_popup_menu({ title: media.title })}
+          title={media.title}
+        >
           {#snippet items()}
             {@render popupActions()}
           {/snippet}

projects/client/src/lib/features/portal/usePortal.ts

@@ -5,7 +5,6 @@ import { usePopupHelpers } from '$lib/features/portal/_internal/usePopupHelpers.
 import { clickOutside } from '$lib/utils/actions/clickOutside.ts';
 import { NOOP_FN } from '$lib/utils/constants.ts';
 import { BehaviorSubject } from 'rxjs';
-import { onMount } from 'svelte';
 import { isTargetContained } from './_internal/isTargetContained.ts';
 import type { PopupPlacement } from './_internal/models/PopupPlacement.ts';
 
@@ -74,15 +73,14 @@ export function usePortal(props?: PortalProps) {
       closeHandler();
     };
     const toggleAroundTarget = () => toggleHandler(targetNode);
+    const { destroy: destroyClickOutside } = clickOutside(targetNode);
 
-    onMount(() => {
-      clickOutside(targetNode);
-      targetNode.addEventListener('clickoutside', closeAroundTarget);
-      targetNode.addEventListener('click', toggleAroundTarget);
-    });
+    targetNode.addEventListener('clickoutside', closeAroundTarget);
+    targetNode.addEventListener('click', toggleAroundTarget);
 
     return {
       destroy() {
+        destroyClickOutside();
         targetNode.removeEventListener('clickoutside', closeAroundTarget);
         targetNode.removeEventListener('click', toggleAroundTarget);
         removeHelpers(null);

projects/client/src/lib/sections/lists/components/EpisodeCard.svelte

@@ -46,7 +46,10 @@
   {#if externalPopupActions}
     <CardActionBar>
       {#snippet actions()}
-        <PopupMenu label={m.button_label_popup_menu({ title: episode.title })}>
+        <PopupMenu
+          label={m.button_label_popup_menu({ title: episode.title })}
+          title={episode.title}
+        >
           {#snippet items()}
             {@render externalPopupActions()}
           {/snippet}

projects/client/src/lib/sections/lists/components/MediaCard.svelte

@@ -42,7 +42,10 @@
   {#if popupActions}
     <CardActionBar>
       {#snippet actions()}
-        <PopupMenu label={m.button_label_popup_menu({ title: media.title })}>
+        <PopupMenu
+          label={m.button_label_popup_menu({ title: media.title })}
+          title={media.title}
+        >
           {#snippet items()}
             {@render popupActions()}
           {/snippet}

projects/client/src/lib/sections/lists/components/MediaSummaryCard.svelte

@@ -38,9 +38,7 @@
   } & SeasonCardProps;
 
   type ItemCardProps =
-    | MediaCardProps
-    | EpisodeSummaryProps
-    | SeasonSummaryProps;
+    MediaCardProps | EpisodeSummaryProps | SeasonSummaryProps;
 
   type SummaryCardProps = {
     contextualTag?: Snippet;
@@ -159,6 +157,7 @@
         <PopupMenu
           label={m.button_label_popup_menu({ title: media.title })}
           mode="standalone"
+          title={media.title}
         >
           {#snippet items()}
             {@render popupActions()}

projects/client/src/lib/sections/lists/components/SeasonItem.svelte

@@ -77,6 +77,7 @@
               label={m.button_label_popup_menu({
                 title: seasonLabel(season.number),
               })}
+              title={seasonLabel(season.number)}
             >
               {#snippet items()}
                 {@render popupActions()}

projects/client/src/lib/sections/lists/season/_internal/SeasonPopupMenu.svelte

@@ -23,6 +23,7 @@
 <PopupMenu
   label={m.button_label_popup_menu({ title })}
   mode="standalone"
+  {title}
   {disabled}
 >
   {#snippet items()}