feat(web): add HorizontalScrollRow component

Reusable horizontally-scrolling row with left/right arrow buttons, scroll-boundary disabling, snap scrolling, and hover-reveal arrows. Used by M6a home page (Task 17). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 20:15:10 -04:00
parent e674869e06
commit 8f5eb21094
2 changed files with 138 additions and 0 deletions
@@ -0,0 +1,106 @@
+<script lang="ts" generics="T">
+  import { ChevronLeft, ChevronRight } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    items,
+    item,
+    ariaLabel
+  }: {
+    items: T[];
+    item?: Snippet<[T, number]>;
+    ariaLabel?: string;
+  } = $props();
+
+  let scroller: HTMLElement | undefined = $state();
+  let scrollLeft = $state(0);
+  let scrollWidth = $state(0);
+  let clientWidth = $state(0);
+
+  const atStart = $derived(scrollLeft <= 1);
+  const atEnd   = $derived(scrollLeft + clientWidth >= scrollWidth - 1);
+
+  function refreshMetrics() {
+    if (!scroller) return;
+    scrollLeft  = scroller.scrollLeft;
+    scrollWidth = scroller.scrollWidth;
+    clientWidth = scroller.clientWidth;
+  }
+
+  function page(direction: -1 | 1) {
+    if (!scroller) return;
+    const delta = direction * scroller.clientWidth * 0.85;
+    scroller.scrollBy({ left: delta, behavior: 'smooth' });
+    setTimeout(refreshMetrics, 350);
+  }
+
+  $effect(() => { refreshMetrics(); });
+</script>
+
+<div class="row relative" aria-label={ariaLabel}>
+  <button
+    type="button"
+    class="arrow arrow-left"
+    aria-label="Scroll left"
+    onclick={() => page(-1)}
+    disabled={atStart}
+  >
+    <ChevronLeft size={16} strokeWidth={1} />
+  </button>
+
+  <div
+    bind:this={scroller}
+    onscroll={refreshMetrics}
+    data-testid="scroll-container"
+    class="scroller flex gap-4 overflow-x-auto"
+  >
+    {#each items as it, i (i)}
+      {@render item?.(it, i)}
+    {/each}
+  </div>
+
+  <button
+    type="button"
+    class="arrow arrow-right"
+    aria-label="Scroll right"
+    onclick={() => page(1)}
+    disabled={atEnd}
+  >
+    <ChevronRight size={16} strokeWidth={1} />
+  </button>
+</div>
+
+<style>
+  .row { padding: 0 36px; }
+  .scroller {
+    scroll-snap-type: x mandatory;
+    scrollbar-width: thin;
+  }
+  .scroller > :global(*) {
+    flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+  .arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 32px;
+    height: 32px;
+    border-radius: 9999px;
+    background: var(--fs-iron);
+    color: var(--fs-vellum);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--fs-pewter);
+    z-index: 1;
+  }
+  .arrow:hover:not(:disabled) { color: var(--fs-parchment); }
+  .arrow:disabled { opacity: 0.3; cursor: not-allowed; }
+  .arrow-left  { left: 0; }
+  .arrow-right { right: 0; }
+  @media (hover: hover) {
+    .arrow { opacity: 0; transition: opacity 150ms ease; }
+    .row:hover .arrow { opacity: 1; }
+  }
+</style>