feat(profile): add Pantheon follows leaderboard behind a flag

Rank the people you follow by watch time, in a drawer opened from an
avatar pill on your own profile. Reuses the social-activity pill
(AvatarPill, fed by the already-loaded following list, so the leaderboard
query only fires when the drawer opens) and the flair-chip decoration for
the top-3 medals.

- VIP follows rank by minutes; free follows are unranked, blurred with a
  placeholder, and grouped under a "Free members" divider.
- The viewer is always woven in: VIP viewers match on minutes from their
  own stats, free viewers on locally computed plays, with a "go VIP" CTA
  and an "unlock your watch-time rank" hint.
- Top-3 get gold/silver/bronze medals; extra glow when the podium spot is
  the viewer.
- Gated behind the Leaderboard preview flag (Pantheon).

Author: vladjerca

projects/client/i18n/meta/en.json

@@ -4395,6 +4395,38 @@
       "default": "All time",
       "description": "Text shown to indicate the users all-time stats."
     },
+    "stat_label_plays": {
+      "default": "plays",
+      "description": "Label for the number of plays in a stat row."
+    },
+    "stat_label_hours": {
+      "default": "hours",
+      "description": "Label for a watch-time value expressed in hours."
+    },
+    "text_following": {
+      "default": "Following",
+      "description": "Label for the follows pill on a profile that opens the leaderboard."
+    },
+    "text_leaderboard_free_section": {
+      "default": "Free members",
+      "description": "Divider label separating ranked VIP entries from unranked free members on the leaderboard."
+    },
+    "text_leaderboard_upsell_footer": {
+      "default": "Upgrade to VIP to see where you rank amongst your friends",
+      "description": "Upsell text on the pinned free-viewer card at the bottom of the leaderboard drawer."
+    },
+    "header_leaderboard": {
+      "default": "Pantheon",
+      "description": "Product feature name for the drawer that ranks the people a user follows by watch time. Keep as the loanword 'Pantheon' (transliterate if needed); do not translate literally to 'temple'."
+    },
+    "button_label_open_leaderboard": {
+      "default": "Open follows leaderboard",
+      "description": "Accessible label for the button that opens the leaderboard drawer."
+    },
+    "text_leaderboard_you": {
+      "default": "You",
+      "description": "Label marking the viewer's own entry in the leaderboard."
+    },
     "text_view_all": {
       "default": "View all",
       "description": "Text for the button that allows users to view all items in a list."
@@ -7983,6 +8015,14 @@
       "default": "Start rewatching sessions for shows you've already seen, check in or mark watched episodes directly from the session drawer.",
       "description": "Description for the Rewatch preview feature."
     },
+    "preview_feature_title_leaderboard": {
+      "default": "Pantheon",
+      "description": "Product feature name for the follows watch-time ranking preview feature. Keep as the loanword 'Pantheon' (transliterate if needed); do not translate literally to 'temple'."
+    },
+    "preview_feature_description_leaderboard": {
+      "default": "Rank the people you follow by watch time and see where you land among them.",
+      "description": "Description for the Pantheon (follows watch-time ranking) preview feature."
+    },
     "header_official_links": {
       "default": "Official Links",
       "description": "Header for the official links section, with official links for a show or movie, like the official site, instagram, etc.."

projects/client/src/lib/components/avatar-pill/AvatarPill.svelte

@@ -79,11 +79,19 @@
 
   .trakt-avatar-pill {
     --height-pill-label: calc(var(--font-size-text) + var(--ni-2));
+    --pill-avatar-size: var(--ni-28);
+
+    // Preferred avatar overlap. Tightened by the container query below when the
+    // pill's container (opt-in via `container: avatar-pill / inline-size`) is
+    // too narrow to fit the pill at this spacing.
+    --avatar-overlap: calc(var(--pill-avatar-size) * -0.5);
 
     display: inline-flex;
     align-items: center;
     gap: var(--ni-4);
     height: var(--ni-36);
+    max-width: 100%;
+    min-width: 0;
     padding: 0 var(--ni-8);
     box-sizing: border-box;
     border-radius: var(--border-radius-xxl);
@@ -110,6 +118,7 @@
     display: inline-flex;
     align-items: center;
     pointer-events: none;
+    flex: 0 0 auto;
 
     margin-inline-end: var(--ni-4);
 
@@ -121,16 +130,43 @@
     }
   }
 
-  .avatar {
-    --pill-avatar-size: var(--ni-28);
+  // When the pill sits in an opted-in container, size it to the space
+  // available: `100cqi` is the container's inline size, minus any inline space
+  // the container reserves for siblings the pill must not sit under
+  // (`--avatar-pill-reserved-inline`). The avatar overlap then scales from the
+  // preferred 50% while there's room toward ~78% as the space narrows, so all
+  // avatars stay visible without overflowing. Inert when no `avatar-pill`
+  // container ancestor exists.
+  @container avatar-pill (min-width: 0px) {
+    .trakt-avatar-pill {
+      --pill-available: calc(
+        100cqi - var(--avatar-pill-reserved-inline, 0px)
+      );
+
+      max-width: var(--pill-available);
+    }
 
+    .avatar-stack {
+      --avatar-overlap: calc(
+        -1 *
+          clamp(
+            var(--pill-avatar-size) * 0.5,
+            var(--pill-avatar-size) * 0.78 -
+              (var(--pill-available) - 210px) * 0.5,
+            var(--pill-avatar-size) * 0.78
+          )
+      );
+    }
+  }
+
+  .avatar {
     position: relative;
 
     width: var(--pill-avatar-size);
     height: var(--pill-avatar-size);
     flex: 0 0 var(--pill-avatar-size);
 
-    margin-inline-start: calc(var(--pill-avatar-size) * -0.5);
+    margin-inline-start: var(--avatar-overlap);
 
     border-radius: 50%;
     overflow: hidden;
@@ -155,6 +191,8 @@
     align-items: center;
     gap: var(--ni-4);
     height: var(--height-pill-label);
+    min-width: 0;
+    flex: 0 1 auto;
     padding-inline-end: var(--ni-4);
 
     &.is-text-only {
@@ -164,15 +202,20 @@
 
   .pill-text {
     opacity: 0.85;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .pill-count {
+    flex: 0 0 auto;
     font-variant-numeric: tabular-nums;
   }
 
   .pill-caret {
     display: inline-flex;
     align-items: center;
+    flex: 0 0 auto;
 
     // Cancel the pill's flex gap so the caret sits flush against the label.
     margin-inline-start: calc(-1 * var(--ni-4));

projects/client/src/lib/components/badge/VipUpsellBadge.svelte

@@ -1,8 +1,49 @@
 <script lang="ts">
+  import SparkleStarIcon from "$lib/components/icons/SparkleStarIcon.svelte";
   import * as m from "$lib/features/i18n/messages";
-  import VipBadgeContent from "./_internal/VipBadgeContent.svelte";
 </script>
 
-<VipBadgeContent>
-  {m.badge_text_get_vip()}
-</VipBadgeContent>
+<div class="trakt-vip-upsell-badge">
+  <span class="upsell-sparkle" aria-hidden="true">
+    <SparkleStarIcon />
+  </span>
+  <p class="uppercase">{m.badge_text_get_vip()}</p>
+</div>
+
+<style lang="scss">
+  .trakt-vip-upsell-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-xs);
+
+    padding: var(--ni-8) var(--ni-12);
+    height: var(--ni-28);
+    box-sizing: border-box;
+    border-radius: var(--border-radius-xl);
+
+    // Inviting purple gradient + soft glow instead of the flat red - the upsell
+    // should feel aspirational, not like a paywall.
+    background: linear-gradient(
+      135deg,
+      var(--purple-400),
+      var(--purple-600)
+    );
+    color: var(--color-foreground-vip-badge);
+    box-shadow: 0 var(--ni-2) var(--ni-12)
+      color-mix(in srgb, var(--purple-500) 45%, transparent);
+
+    p {
+      font-weight: 700;
+      white-space: nowrap;
+    }
+
+    .upsell-sparkle {
+      display: inline-flex;
+
+      :global(svg) {
+        width: var(--ni-16);
+        height: var(--ni-16);
+      }
+    }
+  }
+</style>

projects/client/src/lib/components/icons/SparkleStarIcon.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 256 256"
+  fill="none"
+>
+  <path
+    fill="currentColor"
+    d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144Z"
+  />
+</svg>

projects/client/src/lib/components/icons/TrendLineUpIcon.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 256 256"
+  fill="none"
+>
+  <path
+    fill="currentColor"
+    d="M240,56v64a8,8,0,0,1-16,0V75.31l-82.34,82.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,212.69,64H168a8,8,0,0,1,0-16h64A8,8,0,0,1,240,56Z"
+  />
+</svg>

projects/client/src/lib/features/feature-flag/models/FeatureFlag.ts

@@ -7,4 +7,5 @@ export enum FeatureFlag {
   SmartRelated = 'smart-related',
   SmartRecommendations = 'smart-recommendations',
   Rewatching = 'rewatching',
+  Leaderboard = 'leaderboard',
 }

projects/client/src/lib/features/feature-flag/models/featureFlagDefinitions.ts

@@ -3,6 +3,7 @@ import CalendarIcon from '$lib/components/icons/CalendarIcon.svelte';
 import EditModeIcon from '$lib/components/icons/EditModeIcon.svelte';
 import FastRewindIcon from '$lib/components/icons/FastRewindIcon.svelte';
 import FavoriteIcon from '$lib/components/icons/FavoriteIcon.svelte';
+import PeopleIcon from '$lib/components/icons/PeopleIcon.svelte';
 import PlexLibraryIcon from '$lib/components/icons/PlexLibraryIcon.svelte';
 import { m } from '$lib/features/i18n/messages.ts';
 import { UrlBuilder } from '$lib/utils/url/UrlBuilder.ts';
@@ -98,4 +99,9 @@ export const featureFlagDefinitions: FeatureFlagDefinitions = {
     title: () => m.preview_feature_title_rewatch(),
     description: () => m.preview_feature_description_rewatch(),
   },
+  [FeatureFlag.Leaderboard]: {
+    icon: PeopleIcon,
+    title: () => m.preview_feature_title_leaderboard(),
+    description: () => m.preview_feature_description_leaderboard(),
+  },
 };

projects/client/src/lib/sections/profile-banner/ProfilePageBanner.svelte

@@ -2,10 +2,13 @@
   import VipBadge from "$lib/components/badge/VipBadge.svelte";
   import SettingsButton from "$lib/components/buttons/settings/SettingsButton.svelte";
   import ShareButton from "$lib/components/buttons/share/ShareButton.svelte";
+  import { FeatureFlag } from "$lib/features/feature-flag/models/FeatureFlag.ts";
+  import { useFeatureFlag } from "$lib/features/feature-flag/useFeatureFlag.ts";
   import { useIsMe } from "$lib/features/auth/stores/useIsMe";
   import { useUser } from "$lib/features/auth/stores/useUser";
   import * as m from "$lib/features/i18n/messages.ts";
   import RenderFor from "$lib/guards/RenderFor.svelte";
+  import LeaderboardPill from "$lib/sections/profile/leaderboard/LeaderboardPill.svelte";
   import MatchPill from "$lib/sections/profile/components/MatchPill.svelte";
   import ProfileAbout from "$lib/sections/profile/components/ProfileAbout.svelte";
   import { toDisplayableName } from "$lib/utils/profile/toDisplayableName";
@@ -31,6 +34,9 @@
   const { isMe } = $derived(useIsMe(slug));
   const { followStatus } = $derived(useFollowUserRequest(slug));
 
+  const { isEnabled } = useFeatureFlag();
+  const leaderboardEnabled = isEnabled(FeatureFlag.Leaderboard);
+
   const shareableSlug = $derived($isMe ? $user.slug : slug);
   const isBlocked = $derived($blocked.has(slug));
   const isPending = $derived($followStatus === "pending");
@@ -74,6 +80,8 @@
         <RenderFor audience="authenticated">
           <MatchPill {slug} />
         </RenderFor>
+      {:else if $isMe && $leaderboardEnabled}
+        <LeaderboardPill />
       {/if}
     </div>
     <div class="profile-actions">
@@ -137,6 +145,13 @@
     align-items: center;
     gap: var(--gap-s);
 
+    // Query container for the leaderboard pill. Its width is driven by layout
+    // (not the pill's content), so the pill can size to the space available
+    // without a feedback loop. The pill may use the whole row except the
+    // profile image and its gap, so reserve that inline space.
+    container: avatar-pill / inline-size;
+    --avatar-pill-reserved-inline: calc(var(--ni-64) + var(--gap-s));
+
     :global(.trakt-profile-image) {
       display: flex;
       flex-direction: column;
@@ -154,6 +169,8 @@
       gap: var(--gap-xs);
       flex-wrap: wrap;
 
+      --avatar-pill-reserved-inline: calc(var(--ni-40) + var(--gap-xs));
+
       span.ellipsis {
         white-space: normal;
       }
@@ -184,6 +201,10 @@
     gap: var(--gap-s);
     flex-shrink: 0;
 
+    // Pin to the top so the icons clear the taller details column (name +
+    // location + leaderboard/match pill) instead of overlapping it.
+    align-self: flex-start;
+
     position: relative;
     z-index: var(--layer-raised);
 

projects/client/src/lib/sections/profile/ProfileDrawer.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
   import { page } from "$app/state";
+  import { FeatureFlag } from "$lib/features/feature-flag/models/FeatureFlag.ts";
+  import { useFeatureFlag } from "$lib/features/feature-flag/useFeatureFlag.ts";
   import ScreenTimeDrawerHost from "../stats/ScreenTimeDrawerHost.svelte";
   import MatchDrawerHost from "./_internal/MatchDrawerHost.svelte";
   import {
     ProfileDrawers,
     profileDrawerNavigation,
   } from "./_internal/profileDrawerNavigation.ts";
   import ActivityDrawerHost from "./components/_internal/drawers/ActivityDrawerHost.svelte";
+  import LeaderboardDrawerHost from "./leaderboard/LeaderboardDrawerHost.svelte";
   import type { DisplayableProfileProps } from "./DisplayableProfileProps.ts";
 
   const { slug, profile }: DisplayableProfileProps = $props();
 
   const { drawer, sourceCommentId, close } = $derived(
     profileDrawerNavigation(page.url.searchParams),
   );
+
+  const { isEnabled } = useFeatureFlag();
+  const leaderboardEnabled = isEnabled(FeatureFlag.Leaderboard);
 </script>
 
 {#if drawer === ProfileDrawers.ScreenTime}
@@ -22,4 +28,6 @@
   <ActivityDrawerHost {sourceCommentId} onClose={close} />
 {:else if drawer === ProfileDrawers.Match}
   <MatchDrawerHost {slug} {profile} onClose={close} />
+{:else if drawer === ProfileDrawers.Leaderboard && $leaderboardEnabled}
+  <LeaderboardDrawerHost {slug} onClose={close} />
 {/if}

projects/client/src/lib/sections/profile/_internal/profileDrawerNavigation.ts

@@ -7,6 +7,7 @@ export enum ProfileDrawers {
   Activity = 'activity',
   ScreenTime = 'screen-time',
   Match = 'match',
+  Leaderboard = 'leaderboard',
 }
 
 const profileDrawerParams = {
@@ -21,6 +22,8 @@ function mapToDrawer(value: string | Nil) {
       return ProfileDrawers.ScreenTime;
     case ProfileDrawers.Match:
       return ProfileDrawers.Match;
+    case ProfileDrawers.Leaderboard:
+      return ProfileDrawers.Leaderboard;
     default:
       return null;
   }
@@ -43,5 +46,7 @@ export function profileDrawerNavigation(searchParams?: URLSearchParams) {
       ),
     buildScreenTimeDrawerLink: () => buildDrawerLink(ProfileDrawers.ScreenTime),
     buildMatchDrawerLink: () => buildDrawerLink(ProfileDrawers.Match),
+    buildLeaderboardDrawerLink: () =>
+      buildDrawerLink(ProfileDrawers.Leaderboard),
   };
 }