ember-market-frontend/hooks/use-chromebook-scroll.tsx

import { useEffect, useRef } from 'react';

/**
 * Hook to enhance scrolling behavior for Chromebooks and touch devices
 */
export function useChromebookScroll() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // Enhanced scrolling for Chromebooks
    const handleTouchStart = (e: TouchEvent) => {
      // Prevent default touch behavior that might interfere with scrolling
      if (e.touches.length === 1) {
        // Single touch - allow normal scrolling
        return;
      }
      
      // Multi-touch - prevent zoom gestures
      if (e.touches.length > 1) {
        e.preventDefault();
      }
    };

    const handleTouchMove = (e: TouchEvent) => {
      // Allow momentum scrolling on Chromebooks
      if (e.touches.length === 1) {
        // Single touch scrolling - allow default behavior
        return;
      }
      
      // Multi-touch - prevent zoom
      if (e.touches.length > 1) {
        e.preventDefault();
      }
    };

    const handleWheel = (e: WheelEvent) => {
      // Enhanced wheel scrolling for Chromebook trackpads
      const delta = e.deltaY;
      const container = e.currentTarget as HTMLElement;
      
      // Smooth scrolling for Chromebook trackpads
      if (Math.abs(delta) > 0) {
        container.scrollBy({
          top: delta * 0.5, // Reduce scroll speed for better control
          behavior: 'smooth'
        });
      }
    };

    // Add event listeners
    container.addEventListener('touchstart', handleTouchStart, { passive: false });
    container.addEventListener('touchmove', handleTouchMove, { passive: false });
    container.addEventListener('wheel', handleWheel, { passive: true });

    // Cleanup
    return () => {
      container.removeEventListener('touchstart', handleTouchStart);
      container.removeEventListener('touchmove', handleTouchMove);
      container.removeEventListener('wheel', handleWheel);
    };
  }, []);

  return containerRef;
}

/**
 * Hook for smooth scrolling to bottom (useful for chat interfaces)
 */
export function useSmoothScrollToBottom() {
  const scrollToBottom = (container: HTMLElement) => {
    container.scrollTo({
      top: container.scrollHeight,
      behavior: 'smooth'
    });
  };

  const scrollToBottomInstant = (container: HTMLElement) => {
    container.scrollTop = container.scrollHeight;
  };

  return { scrollToBottom, scrollToBottomInstant };
}