From ed90cd59242a70d1e8a827400b8bca88bcf157a7 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Fri, 13 Mar 2026 12:38:17 +0300
Subject: [PATCH] feat: smooth scroll to schedule section when filtering from
 cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/sections/Schedule.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/sections/Schedule.tsx b/src/components/sections/Schedule.tsx
index dbef668..8bfbb96 100644
--- a/src/components/sections/Schedule.tsx
+++ b/src/components/sections/Schedule.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback } from "react";
 import { CalendarDays, Users, LayoutGrid } from "lucide-react";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
@@ -31,6 +31,21 @@ export function Schedule({ data: schedule, classItems }: ScheduleProps) {
 
   const isAllMode = locationMode === "all";
 
+  const scrollToSchedule = useCallback(() => {
+    const el = document.getElementById("schedule");
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, []);
+
+  const setFilterTrainerFromCard = useCallback((trainer: string | null) => {
+    setFilterTrainer(trainer);
+    if (trainer) scrollToSchedule();
+  }, [scrollToSchedule]);
+
+  const setFilterTypeFromCard = useCallback((type: string | null) => {
+    setFilterType(type);
+    if (type) scrollToSchedule();
+  }, [scrollToSchedule]);
+
   const typeDots = useMemo(() => buildTypeDots(classItems), [classItems]);
 
   // Build days: either from one location or merged from all
@@ -271,9 +286,9 @@ export function Schedule({ data: schedule, classItems }: ScheduleProps) {
               typeDots={typeDots}
               filteredDays={filteredDays}
               filterType={filterType}
-              setFilterType={setFilterType}
+              setFilterType={setFilterTypeFromCard}
               filterTrainer={filterTrainer}
-              setFilterTrainer={setFilterTrainer}
+              setFilterTrainer={setFilterTrainerFromCard}
               hasActiveFilter={hasActiveFilter}
               clearFilters={clearFilters}
               showLocation={isAllMode}
@@ -291,7 +306,7 @@ export function Schedule({ data: schedule, classItems }: ScheduleProps) {
                   key={day.day}
                   className={filteredDays.length === 1 ? "w-full max-w-[340px]" : ""}
                 >
-                  <DayCard day={day} typeDots={typeDots} showLocation={isAllMode} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainer} filterType={filterType} setFilterType={setFilterType} />
+                  <DayCard day={day} typeDots={typeDots} showLocation={isAllMode} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainerFromCard} filterType={filterType} setFilterType={setFilterTypeFromCard} />
                 </div>
               ))}
 
@@ -310,9 +325,9 @@ export function Schedule({ data: schedule, classItems }: ScheduleProps) {
             typeDots={typeDots}
             filteredDays={filteredDays}
             filterType={filterType}
-            setFilterType={setFilterType}
+            setFilterType={setFilterTypeFromCard}
             filterTrainer={filterTrainer}
-            setFilterTrainer={setFilterTrainer}
+            setFilterTrainer={setFilterTrainerFromCard}
             showLocation={isAllMode}
           />
         </Reveal>