wip

Author: seferturan

projects/client/src/lib/components/drawer/Drawer.svelte

@@ -33,6 +33,9 @@
     variant?: "default" | "vip";
     drilldown?: ListDrilldownLinkProps;
     headerVariant?: "default" | "overlay";
+    // Raise this drawer (and its underlay) above a base-layer drawer, so a
+    // drawer stacked on top of another still closes on outside tap.
+    elevated?: boolean;
   };
 
   const {
@@ -50,12 +53,15 @@
     variant = "default",
     drilldown,
     headerVariant = "default",
+    elevated = false,
   }: DrawerProps = $props();
 
   const isMobile = useMedia(WellKnownMediaQuery.mobile);
   const slideAxis = $derived($isMobile ? "y" : "x");
 
-  const { portal } = $derived(useDrawerPortal({ hasAutoClose, onClose }));
+  const { portal } = $derived(
+    useDrawerPortal({ hasAutoClose, onClose, elevated }),
+  );
 
   const trap = $derived((element: HTMLElement) => {
     if (trapSelector) {
@@ -94,6 +100,7 @@
 <div
   class={drawerClass}
   data-size={size}
+  data-elevated={elevated}
   data-header-variant={headerVariant}
   style:--drawer-header-overlay-opacity={headerOverlayOpacity}
   transition:slide={{ duration: 150, axis: slideAxis }}
@@ -194,6 +201,12 @@
     position: fixed;
     box-sizing: border-box;
 
+    // Stacked above a base-layer drawer; its underlay (layer-menu + 2) must
+    // still sit below it so outside taps land on the underlay, not the drawer.
+    &[data-elevated="true"] {
+      z-index: calc(var(--layer-menu) + 3);
+    }
+
     top: 0;
     bottom: 0;
     inset-inline-end: 0;

projects/client/src/lib/components/drawer/_internal/useDrawerPortal.ts

@@ -6,9 +6,12 @@ import { onMount } from 'svelte';
 type DrawerPortalProps = {
   hasAutoClose: boolean;
   onClose: () => void;
+  elevated?: boolean;
 };
 
-export function useDrawerPortal({ hasAutoClose, onClose }: DrawerPortalProps) {
+export function useDrawerPortal(
+  { hasAutoClose, onClose, elevated }: DrawerPortalProps,
+) {
   const portal = (element: HTMLElement) => {
     // The route the drawer was opened on. When a cached page mounts the drawer
     // synchronously during the arriving navigation, afterNavigate would fire
@@ -21,7 +24,7 @@ export function useDrawerPortal({ hasAutoClose, onClose }: DrawerPortalProps) {
         return;
       }
 
-      const newUnderlay = createUnderlay();
+      const newUnderlay = createUnderlay({ elevated });
 
       document.body.appendChild(newUnderlay);
       document.body.appendChild(element);

projects/client/src/lib/components/summary/RatingList.svelte

@@ -33,6 +33,10 @@
     ratings: MediaRating;
     entry: MediaEntry | EpisodeEntry;
     drilldown?: TraktRatingDrilldown;
+    // Alternative to `drilldown`: open a locally-mounted drawer instead of
+    // navigating via a URL. Used by the episode drawer, which can't route to
+    // a `view=` drawer without replacing itself.
+    onDrilldown?: () => void;
     variant?: "all" | "external";
     isLoading?: boolean;
   };
@@ -42,6 +46,7 @@
     ratings,
     entry,
     drilldown,
+    onDrilldown,
     variant = "all",
     isLoading = false,
   }: RatingListProps = $props();
@@ -107,7 +112,17 @@
     </RatingItem>
   {/if}
 
-  {#if drilldown}
+  {#if onDrilldown}
+    <ActionButton
+      classList="trakt-ratings-drilldown-button"
+      onclick={onDrilldown}
+      label={i18n.viewBreakdownLabel()}
+      style="ghost"
+      size="small"
+    >
+      <CaretRightIcon />
+    </ActionButton>
+  {:else if drilldown}
     <ActionButton
       classList="trakt-ratings-drilldown-button"
       href={drilldown.href}

projects/client/src/lib/features/portal/_internal/createUnderlay.ts

@@ -1,6 +1,12 @@
 import { PORTAL_UNDERLAY_ID } from './constants.ts';
 
-export const createUnderlay = () => {
+type CreateUnderlayOptions = {
+  // Raise the underlay above a base-layer drawer so a stacked drawer's
+  // outside-tap target sits on top of the drawer beneath it.
+  elevated?: boolean;
+};
+
+export const createUnderlay = ({ elevated }: CreateUnderlayOptions = {}) => {
   const underlay = document.createElement('div');
 
   underlay.id = PORTAL_UNDERLAY_ID;
@@ -11,7 +17,9 @@ export const createUnderlay = () => {
   underlay.style.width = '100%';
   underlay.style.height = '100%';
 
-  underlay.style.zIndex = 'calc(var(--layer-menu) - 1)';
+  underlay.style.zIndex = elevated
+    ? 'calc(var(--layer-menu) + 2)'
+    : 'calc(var(--layer-menu) - 1)';
 
   return underlay;
 };

projects/client/src/lib/sections/summary/components/_internal/SocialActivitiesButton.svelte

@@ -15,9 +15,13 @@
   type SocialActivitiesButtonProps = {
     target: MediaSocialQueryTarget;
     title: string;
+    // When provided, open a locally-mounted drawer instead of navigating to
+    // the `view=social` URL drawer (used by the episode drawer, which can't
+    // route without replacing itself).
+    onclick?: () => void;
   };
 
-  const { target, title }: SocialActivitiesButtonProps = $props();
+  const { target, title, onclick }: SocialActivitiesButtonProps = $props();
 
   const target$ = fromRune(() => target);
   const {
@@ -41,52 +45,65 @@
   const drawerLink = $derived(buildDrawerLink(SummaryDrawers.Social));
 </script>
 
+{#snippet content()}
+  <span class="social-activities-content">
+    {#if hasWatchers}
+      <span class="trakt-social-activities-avatar-stack" aria-hidden="true">
+        {#each watchers as watcher, index (watcher.key)}
+          <span
+            class="trakt-social-activities-avatar"
+            style:z-index={avatarStackCount - index}
+          >
+            <UserAvatar user={watcher.user} size="small" />
+          </span>
+        {/each}
+      </span>
+    {/if}
+
+    <span
+      class="trakt-social-activities-label"
+      class:is-text-only={activityCount === 0}
+    >
+      {#if activityCount > 0}
+        <span class="trakt-social-activities-count bold">
+          {activityCountLabel}
+        </span>
+        <span class="trakt-social-activities-text">
+          {activityCount === 1
+            ? m.text_social_activity()
+            : m.text_social_activities()}
+        </span>
+      {:else}
+        <span class="trakt-social-activities-text">
+          {m.text_no_activity()}
+        </span>
+      {/if}
+    </span>
+  </span>
+{/snippet}
+
 <div class="trakt-social-activities-button-link-wrapper">
   {#if isInitialLoading}
     <div class="social-activities-skeleton" role="status" aria-busy="true">
       <span class="skeleton-count"></span>
       <span class="skeleton-label"></span>
     </div>
+  {:else if onclick}
+    <button
+      type="button"
+      class="social-activities-trigger"
+      onclick={onclick}
+      aria-label={m.link_label_view_social_activities({ title })}
+    >
+      {@render content()}
+    </button>
   {:else}
     <Link
       {...drawerLink}
       color="inherit"
       label={m.link_label_view_social_activities({ title })}
     >
-      <span class="social-activities-content">
-        {#if hasWatchers}
-          <span class="trakt-social-activities-avatar-stack" aria-hidden="true">
-            {#each watchers as watcher, index (watcher.key)}
-              <span
-                class="trakt-social-activities-avatar"
-                style:z-index={avatarStackCount - index}
-              >
-                <UserAvatar user={watcher.user} size="small" />
-              </span>
-            {/each}
-          </span>
-        {/if}
-
-        <span
-          class="trakt-social-activities-label"
-          class:is-text-only={activityCount === 0}
-        >
-          {#if activityCount > 0}
-            <span class="trakt-social-activities-count bold">
-              {activityCountLabel}
-            </span>
-            <span class="trakt-social-activities-text">
-              {activityCount === 1
-                ? m.text_social_activity()
-                : m.text_social_activities()}
-            </span>
-          {:else}
-            <span class="trakt-social-activities-text">
-              {m.text_no_activity()}
-            </span>
-          {/if}
-        </span>
-      </span>
+      {@render content()}
     </Link>
   {/if}
 </div>
@@ -102,6 +119,18 @@
       text-decoration: none;
     }
 
+    .social-activities-trigger {
+      appearance: none;
+      background: none;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      font: inherit;
+      color: inherit;
+      cursor: pointer;
+      text-align: start;
+    }
+
     @include for-tablet-sm-and-below {
       align-self: center;
     }

projects/client/src/lib/sections/summary/components/episode-drawer/EpisodeDrawerHost.svelte

@@ -10,9 +10,13 @@
   import DrawerCastSection from "$lib/sections/summary/components/_internal/DrawerCastSection.svelte";
   import MediaStats from "$lib/sections/summary/components/details/_internal/MediaStats.svelte";
   import MediaStatsSkeleton from "$lib/sections/summary/components/details/_internal/MediaStatsSkeleton.svelte";
+  import RatingsDrawer from "$lib/sections/summary/components/rating/RatingsDrawer.svelte";
   import SeasonEpisodesTab from "$lib/sections/summary/components/seasons/SeasonEpisodesTab.svelte";
+  import SocialDrawerHost from "$lib/sections/summary/components/social/SocialDrawerHost.svelte";
+  import { episodeActivityTitle } from "$lib/utils/intl/episodeActivityTitle.ts";
   import { episodeNumberLabel } from "$lib/utils/intl/episodeNumberLabel.ts";
   import { fromRune } from "$lib/utils/store/fromRune.svelte.ts";
+  import { writable } from "$lib/utils/store/WritableSubject.ts";
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
   import EpisodeInfoHeader from "./_internal/EpisodeInfoHeader.svelte";
@@ -38,6 +42,19 @@
   let isOpen = $state(false);
   let activeTab = $state("info");
 
+  // Ratings distribution and social activities open as drawers stacked on top
+  // of this one, mounted locally (not via the `view=` URL param, which would
+  // replace this drawer and resolve show-scoped data instead of the episode).
+  const isRatingsOpen = writable(false);
+  const isSocialOpen = writable(false);
+
+  const socialTarget = $derived({
+    type: "episode" as const,
+    slug: show.slug,
+    season,
+    episode,
+  });
+
   const params$ = fromRune(() => ({
     slug: show.slug,
     season,
@@ -87,6 +104,10 @@
       ? `${numberLabel} - ${$episodeEntry.title}`
       : numberLabel;
   });
+
+  const socialTitle = $derived(
+    $episodeEntry ? episodeActivityTitle($episodeEntry, show) : show.title,
+  );
 </script>
 
 {#snippet infoIcon()}
@@ -158,6 +179,10 @@
         entry={$episodeEntry}
         crew={$crew}
         isCrewLoading={$isPeopleLoading}
+        {socialTarget}
+        {socialTitle}
+        onRatingsOpen={() => isRatingsOpen.set(true)}
+        onSocialOpen={() => isSocialOpen.set(true)}
       />
 
       <TabView
@@ -188,6 +213,27 @@
   {/if}
 </Drawer>
 
+{#if $isRatingsOpen && $episodeEntry}
+  <RatingsDrawer
+    type="episode"
+    episode={$episodeEntry}
+    {show}
+    crew={$crew}
+    {seasons}
+    elevated
+    onClose={() => isRatingsOpen.set(false)}
+  />
+{/if}
+
+{#if $isSocialOpen}
+  <SocialDrawerHost
+    target={socialTarget}
+    title={socialTitle}
+    elevated
+    onClose={() => isSocialOpen.set(false)}
+  />
+{/if}
+
 <style lang="scss">
   :global(.trakt-drawer.trakt-episode-drawer) {
     gap: var(--ni-0);