fix(landing): support horizontal wheel story navigation

Author: waleedlatif1

apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx

@@ -421,4 +421,74 @@ describe('FeaturedCustomer touch navigation', () => {
     expect(touch('touchend', 250, 200, 1, 0, previousPreview).defaultPrevented).toBe(true)
     expect(currentStory()).toBe('1 of 2: Rivian')
   })
+
+  describe('wheel navigation', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+      Object.defineProperty(rail, 'clientWidth', { value: 390 })
+    })
+
+    function wheel(options: WheelEventInit) {
+      const event = new WheelEvent('wheel', { bubbles: true, cancelable: true, ...options })
+      act(() => rail.dispatchEvent(event))
+      return event
+    }
+
+    it('accumulates horizontal movement and navigates only once until the gesture ends', () => {
+      wheel({ deltaX: 20, deltaY: 2 })
+      expect(currentStory()).toBe('1 of 2: Rivian')
+      act(() => vi.advanceTimersByTime(20))
+      expect(wheel({ deltaX: 35, deltaY: 3 }).defaultPrevented).toBe(true)
+      expect(currentStory()).toBe('2 of 2: eXp Realty')
+
+      for (let index = 0; index < 5; index += 1) {
+        act(() => vi.advanceTimersByTime(100))
+        wheel({ deltaX: -80 })
+        expect(currentStory()).toBe('2 of 2: eXp Realty')
+      }
+
+      act(() => vi.advanceTimersByTime(250))
+      wheel({ deltaX: -80 })
+      expect(currentStory()).toBe('1 of 2: Rivian')
+      act(() => vi.advanceTimersByTime(250))
+      wheel({ deltaX: -80 })
+      expect(currentStory()).toBe('1 of 2: Rivian')
+    })
+
+    it.each([
+      { deltaY: 80, shiftKey: true },
+      { deltaX: 80, shiftKey: true },
+      { deltaY: 4, deltaMode: 1, shiftKey: true },
+      { deltaY: 1, deltaMode: 2, shiftKey: true },
+    ])('supports horizontal and Shift+wheel deltas: %j', (options) => {
+      expect(wheel(options).defaultPrevented).toBe(true)
+      expect(currentStory()).toBe('2 of 2: eXp Realty')
+    })
+
+    it.each([
+      { deltaY: 120 },
+      { deltaX: 20, deltaY: 120 },
+      { deltaX: 120, ctrlKey: true },
+      { deltaY: 120, ctrlKey: true, shiftKey: true },
+      { deltaX: 120, metaKey: true },
+    ])('preserves browser scrolling and zoom: %j', (options) => {
+      expect(wheel(options).defaultPrevented).toBe(false)
+      expect(currentStory()).toBe('1 of 2: Rivian')
+    })
+
+    it('discards incomplete movement after an idle gap or vertical scrolling', () => {
+      wheel({ deltaX: 30 })
+      act(() => vi.advanceTimersByTime(250))
+      wheel({ deltaX: 30 })
+      expect(currentStory()).toBe('1 of 2: Rivian')
+      wheel({ deltaY: 100 })
+      wheel({ deltaX: 30 })
+      expect(currentStory()).toBe('1 of 2: Rivian')
+    })
+
+    it('removes the wheel listener when the carousel unmounts', () => {
+      act(() => root.render(null))
+      expect(wheel({ deltaX: 120 }).defaultPrevented).toBe(false)
+    })
+  })
 })

apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type TouchEvent, useRef, useState } from 'react'
+import { type TouchEvent, useEffect, useRef, useState } from 'react'
 import { cn } from '@sim/emcn'
 import {
   FeaturedCustomerCard,
@@ -13,6 +13,9 @@ import {
   LANDING_STAGE_RADIUS,
 } from '@/app/(landing)/components/landing-layout'
 
+const WHEEL_GESTURE_GAP_MS = 200
+const WHEEL_THRESHOLD_PX = 50
+
 const CUSTOMER_STORIES: FeaturedCustomerStory[] = [
   {
     id: 'rivian',
@@ -53,6 +56,7 @@ const CUSTOMER_STORIES: FeaturedCustomerStory[] = [
  * between stories, with the arrow that has nowhere to go disabled.
  */
 export function FeaturedCustomer() {
+  const railRef = useRef<HTMLDivElement>(null)
   const touchStartRef = useRef<{ id: number; x: number; y: number } | null>(null)
   const [activeIndex, setActiveIndex] = useState(0)
   const [previewedIndex, setPreviewedIndex] = useState<number | null>(null)
@@ -61,6 +65,50 @@ export function FeaturedCustomer() {
   const nextStory =
     activeIndex < CUSTOMER_STORIES.length - 1 ? CUSTOMER_STORIES[activeIndex + 1] : null
 
+  useEffect(() => {
+    const rail = railRef.current
+    if (!rail) return
+
+    let distance = 0
+    let lastEventAt = 0
+    let advanced = false
+
+    const handleWheel = (event: WheelEvent) => {
+      if (event.ctrlKey || event.metaKey) return
+
+      const now = performance.now()
+      if (now - lastEventAt > WHEEL_GESTURE_GAP_MS) {
+        distance = 0
+        advanced = false
+      }
+      lastEventAt = now
+
+      const deltaX = event.shiftKey && event.deltaX === 0 ? event.deltaY : event.deltaX
+      const deltaY = event.shiftKey ? 0 : event.deltaY
+      if (deltaX === 0 || Math.abs(deltaX) <= Math.abs(deltaY)) {
+        distance = 0
+        return
+      }
+
+      event.preventDefault()
+      if (advanced) return
+
+      const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? rail.clientWidth : 1
+      distance += deltaX * unit
+      if (Math.abs(distance) < WHEEL_THRESHOLD_PX) return
+
+      advanced = true
+      const direction = distance > 0 ? 1 : -1
+      setPreviewedIndex(null)
+      setActiveIndex((index) =>
+        Math.max(0, Math.min(CUSTOMER_STORIES.length - 1, index + direction))
+      )
+    }
+
+    rail.addEventListener('wheel', handleWheel, { passive: false })
+    return () => rail.removeEventListener('wheel', handleWheel)
+  }, [])
+
   function handleTouchStart(event: TouchEvent<HTMLDivElement>) {
     const touch = event.touches[0]
     touchStartRef.current =
@@ -116,6 +164,7 @@ export function FeaturedCustomer() {
         </div>
 
         <div
+          ref={railRef}
           data-customer-carousel-rail='true'
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}