Auto show current time indicator

apps/frontend/src/features/booking/components/booking-timeline.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { ChevronLeft, ChevronRight, Dumbbell, Plus, UserX, Users } from 'lucide-react';
+import { useEffect, useRef } from 'react';
 import { useBooking } from '../booking-provider';
 import type { BookingCourtSchedule, BookingTimelineSegment } from '../booking.types';
 import { timeToMinutes } from '../lib/booking-time';
@@ -20,6 +21,9 @@ export function BookingTimeline() {
     errorMessage,
   } = useBooking();
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const prevCurrentTimeRef = useRef<string | null>(null);
+
   const rangeStart = timeToMinutes(visibleTimeRange.start);
   const rangeEnd = timeToMinutes(visibleTimeRange.end);
   const totalMinutes = rangeEnd - rangeStart;
@@ -29,6 +33,25 @@ export function BookingTimeline() {
     left: ((timeToMinutes(hour) - rangeStart) / totalMinutes) * 100,
   }));
 
+  useEffect(() => {
+    if (!currentTime || !scrollRef.current) return;
+    if (currentTime === prevCurrentTimeRef.current) return;
+    prevCurrentTimeRef.current = currentTime;
+
+    const container = scrollRef.current;
+    const indicatorLeft =
+      courtInfoWidth + ((timeToMinutes(currentTime) - rangeStart) / totalMinutes) * gridWidth;
+    const targetScroll = indicatorLeft - container.clientWidth / 2;
+    const clampedScroll = Math.max(
+      0,
+      Math.min(targetScroll, container.scrollWidth - container.clientWidth)
+    );
+
+    requestAnimationFrame(() => {
+      container.scrollTo({ left: clampedScroll, behavior: 'smooth' });
+    });
+  }, [currentTime, rangeStart, totalMinutes, gridWidth]);
+
   return (
     <section className="overflow-hidden rounded-lg border bg-card/85 shadow-sm">
       <div className="flex items-center justify-between gap-4 border-b px-4 py-4">
@@ -58,7 +81,7 @@ export function BookingTimeline() {
       )}
 
       {!isLoading && !isError && schedules.length > 0 && (
-        <div className="booking-scrollbar overflow-x-auto overflow-y-hidden">
+        <div ref={scrollRef} className="booking-scrollbar overflow-x-auto overflow-y-hidden">
           <div className="relative min-w-full" style={{ width: courtInfoWidth + gridWidth }}>
             <TimelineHeader
               timelineMarks={timelineMarks}