jellytau/src/lib/components/library/AlphabetScrollBar.svelte

<!-- TRACES: UR-007 | DR-007, DR-262 -->
<script lang="ts">
  /**
   * A vertical A-Z index strip for long, alphabetically-sorted lists.
   * Tapping or dragging a letter jumps to the first item that starts with it.
   *
   * The parent owns the actual scrolling: it passes `availableLetters`
   * (which letters have items) and an `onJump(letter)` callback.
   *
   * The strip's floor is the scroll container's own bottom edge, measured — not
   * the viewport minus a guess at the bottom bars. See alphabetStrip.ts for why
   * that distinction is the whole bug (DR-262).
   */

  import { stripHeightFor } from "./alphabetStrip";

  const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
  const HASH = "#"; // bucket for names starting with a digit/symbol

  interface Props {
    /** Uppercase letters (or "#") that currently have at least one item. */
    availableLetters: Set<string>;
    /** Called with the chosen letter when the user picks one. */
    onJump: (letter: string) => void;
  }

  let { availableLetters, onJump }: Props = $props();

  let container = $state<HTMLDivElement | null>(null);
  let stripHeight = $state(0);

  /**
   * Nearest scrollable ancestor. Resolved by computed `overflow-y` rather than
   * by tag name: the library routes scroll in a `<main>`, but the root shell
   * scrolls in a plain `<div>`, and a `closest("main")` that misses falls back
   * to the viewport — which is exactly the too-tall strip this replaced.
   */
  function nearestScroller(el: HTMLElement | null): HTMLElement | null {
    let node = el?.parentElement ?? null;
    while (node) {
      const overflowY = getComputedStyle(node).overflowY;
      if (overflowY === "auto" || overflowY === "scroll") return node;
      node = node.parentElement;
    }
    return null;
  }

  function measure() {
    if (!container) return;
    const scroller = nearestScroller(container);
    stripHeight = stripHeightFor({
      stripTop: container.getBoundingClientRect().top,
      scrollerBottom: scroller?.getBoundingClientRect().bottom ?? null,
      viewportHeight: window.innerHeight,
    });
  }

  $effect(() => {
    measure();
    const scroller = nearestScroller(container);
    // Observing the scroller is what makes the mini player showing or hiding
    // re-measure: it is an in-flow sibling, so the scroller resizes when it
    // appears. No store subscription and no platform guess needed.
    const ro = new ResizeObserver(measure);
    if (scroller) ro.observe(scroller);
    scroller?.addEventListener("scroll", measure, { passive: true });
    window.addEventListener("resize", measure);
    return () => {
      ro.disconnect();
      scroller?.removeEventListener("scroll", measure);
      window.removeEventListener("resize", measure);
    };
  });

  const letters = $derived([HASH, ...ALPHABET]);
  let activeLetter = $state<string | null>(null);

  function jumpTo(letter: string) {
    if (!availableLetters.has(letter)) return;
    activeLetter = letter;
    onJump(letter);
  }

  // Allow dragging a finger/mouse down the strip to scrub through letters.
  function letterAt(clientY: number): string | null {
    const el = document.elementFromPoint(
      // x is supplied by the caller via the bound container; we read from the
      // element under the pointer instead to stay layout-agnostic.
      lastClientX,
      clientY,
    );
    const letter = el?.getAttribute?.("data-letter");
    return letter ?? null;
  }

  let lastClientX = $state(0);
  let isScrubbing = $state(false);

  function handlePointerDown(e: PointerEvent) {
    isScrubbing = true;
    lastClientX = e.clientX;
    const letter = letterAt(e.clientY);
    if (letter) jumpTo(letter);
  }

  function handlePointerMove(e: PointerEvent) {
    if (!isScrubbing) return;
    lastClientX = e.clientX;
    const letter = letterAt(e.clientY);
    if (letter && letter !== activeLetter) jumpTo(letter);
  }

  function handlePointerUp() {
    isScrubbing = false;
  }
</script>

<svelte:window onpointerup={handlePointerUp} onpointercancel={handlePointerUp} />

<div
  bind:this={container}
  class="flex flex-col items-center justify-between select-none touch-none py-1"
  style="height: {stripHeight}px"
  onpointerdown={handlePointerDown}
  onpointermove={handlePointerMove}
  role="navigation"
  aria-label="Jump to letter"
>
  {#each letters as letter (letter)}
    {@const enabled = availableLetters.has(letter)}
    <button
      type="button"
      data-letter={letter}
      disabled={!enabled}
      onclick={() => jumpTo(letter)}
      class="w-5 leading-tight text-[10px] sm:text-xs font-semibold transition-colors
        {enabled
        ? 'text-gray-400 hover:text-[var(--color-jellyfin)]'
        : 'text-gray-700 cursor-default'}
        {activeLetter === letter && enabled ? 'text-[var(--color-jellyfin)] scale-125' : ''}"
      aria-label={`Jump to ${letter}`}
    >
      {letter}
    </button>
  {/each}
</div>