feat: UI improvements — scrollbar, multi-filters, pricing fix, routing, modals

- Global page scrollbar styled with gold theme - Schedule: multi-select for class types and status tags - Pricing: fix tab switch blink (display toggle vs conditional render) - OpenDay: trainer name more prominent, section divider added - Team: browser back button closes trainer bio (history API) - Modals: block scroll + compensate scrollbar width to prevent layout shift - Header: remove booking button from desktop nav
2026-03-26 13:23:03 +03:00
parent 228e547e10
commit 8088b99a43
17 changed files with 275 additions and 229 deletions
--- a/public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774515538630.jpg
+++ b/public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774515538630.jpg
--- a/public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774515545926.jpg
+++ b/public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774515545926.jpg
--- a/public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774516098008.jpg
+++ b/public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774516098008.jpg
--- a/public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774516126607.jpg
+++ b/public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774516126607.jpg
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -83,3 +83,27 @@ body {
 .admin-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
 }
+
+/* ===== Global page scrollbar ===== */
+
+html {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(201, 169, 110, 0.3) #0a0a0a;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #0a0a0a;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(201, 169, 110, 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(201, 169, 110, 0.5);
+}
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -124,12 +124,6 @@ export function Header() {
              </a>
            );
          })}
-          <button
-            onClick={() => setBookingOpen(true)}
-            className="rounded-full bg-gold px-4 py-1.5 text-sm font-semibold text-black transition-all hover:bg-gold-light hover:shadow-lg hover:shadow-gold/20 cursor-pointer"
-          >
-            Записаться
-          </button>
        </nav>

        <div className="flex items-center gap-2 lg:hidden">
--- a/src/components/sections/OpenDay.tsx
+++ b/src/components/sections/OpenDay.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useState, useMemo } from "react";
-import { Calendar, Users, Sparkles } from "lucide-react";
+import { Calendar, Sparkles } from "lucide-react";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
 import { SignupModal } from "@/components/ui/SignupModal";
@@ -48,7 +48,8 @@ export function OpenDay({ data, popups }: OpenDayProps) {
  if (classes.length === 0) return null;

  return (
-    <section id="open-day" className="py-10 sm:py-14">
+    <section id="open-day" className="section-glow relative py-10 sm:py-14">
+      <div className="section-divider absolute top-0 left-0 right-0" />
      <div className="mx-auto max-w-6xl px-4">
        <Reveal>
          <SectionHeading centered>{event.title}</SectionHeading>
@@ -179,11 +180,8 @@ function ClassCard({
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <span className="text-xs text-gold font-medium">{cls.startTime}–{cls.endTime}</span>
-          <p className="text-sm font-medium text-white mt-0.5">{cls.style}</p>
-          <p className="text-xs text-neutral-400 flex items-center gap-1 mt-0.5">
-            <Users size={10} />
-            {cls.trainer}
-          </p>
+          <p className="text-sm font-bold text-white mt-1">{cls.trainer}</p>
+          <p className="text-xs text-neutral-400 mt-0.5">{cls.style}</p>
          {maxParticipants > 0 && (
            <p className={`text-[10px] mt-1 ${isFull ? "text-amber-400" : "text-neutral-500"}`}>
              {cls.bookingCount}/{maxParticipants} мест
--- a/src/components/sections/Pricing.tsx
+++ b/src/components/sections/Pricing.tsx
@@ -53,8 +53,7 @@ export function Pricing({ data: pricing }: PricingProps) {
        </Reveal>

        {/* Prices tab */}
-        {activeTab === "prices" && (
-          <Reveal>
+        <div className={activeTab === "prices" ? "block" : "hidden"}>
          <div className="mx-auto mt-10 max-w-4xl">
            <p className="mb-8 text-center text-sm text-neutral-500 dark:text-neutral-400">
              {pricing.subtitle}
@@ -129,14 +128,11 @@ export function Pricing({ data: pricing }: PricingProps) {
                </div>
              </div>
            )}
-
          </div>
-          </Reveal>
-        )}
+        </div>

        {/* Rental tab */}
-        {activeTab === "rental" && (
-          <Reveal>
+        <div className={activeTab === "rental" ? "block" : "hidden"}>
          <div className="mx-auto mt-10 max-w-2xl space-y-3">
            {pricing.rentalItems.map((item, i) => (
              <div
@@ -158,14 +154,11 @@ export function Pricing({ data: pricing }: PricingProps) {
                </span>
              </div>
            ))}
-
          </div>
-          </Reveal>
-        )}
+        </div>

        {/* Rules tab */}
-        {activeTab === "rules" && (
-          <Reveal>
+        <div className={activeTab === "rules" ? "block" : "hidden"}>
          <div className="mx-auto mt-10 max-w-2xl space-y-3">
            {pricing.rules.map((rule, i) => (
              <div
@@ -181,8 +174,7 @@ export function Pricing({ data: pricing }: PricingProps) {
              </div>
            ))}
          </div>
-          </Reveal>
-        )}
+        </div>
      </div>
    </section>
  );
--- a/src/components/sections/Schedule.tsx
+++ b/src/components/sections/Schedule.tsx
@@ -10,7 +10,7 @@ import { ScheduleFilters } from "./schedule/ScheduleFilters";
 import { MobileSchedule } from "./schedule/MobileSchedule";
 import { GroupView } from "./schedule/GroupView";
 import { buildTypeDots, shortAddress, startTimeMinutes, TIME_PRESETS } from "./schedule/constants";
-import type { StatusFilter, TimeFilter, ScheduleDayMerged, ScheduleClassWithLocation } from "./schedule/constants";
+import type { StatusTag, TimeFilter, ScheduleDayMerged, ScheduleClassWithLocation } from "./schedule/constants";
 import type { SiteContent } from "@/types/content";

 type ViewMode = "days" | "groups";
@@ -20,8 +20,8 @@ interface ScheduleState {
  locationMode: LocationMode;
  viewMode: ViewMode;
  filterTrainer: string | null;
-  filterType: string | null;
-  filterStatus: StatusFilter;
+  filterTypes: Set<string>;
+  filterStatusSet: Set<StatusTag>;
  filterTime: TimeFilter;
  filterDaySet: Set<string>;
  bookingGroup: string | null;
@@ -31,8 +31,8 @@ type ScheduleAction =
  | { type: "SET_LOCATION"; mode: LocationMode }
  | { type: "SET_VIEW"; mode: ViewMode }
  | { type: "SET_TRAINER"; value: string | null }
-  | { type: "SET_TYPE"; value: string | null }
-  | { type: "SET_STATUS"; value: StatusFilter }
+  | { type: "TOGGLE_TYPE"; value: string }
+  | { type: "TOGGLE_STATUS"; value: StatusTag }
  | { type: "SET_TIME"; value: TimeFilter }
  | { type: "TOGGLE_DAY"; day: string }
  | { type: "SET_BOOKING"; value: string | null }
@@ -42,8 +42,8 @@ const initialState: ScheduleState = {
  locationMode: "all",
  viewMode: "groups",
  filterTrainer: null,
-  filterType: null,
-  filterStatus: "all",
+  filterTypes: new Set(),
+  filterStatusSet: new Set(),
  filterTime: "all",
  filterDaySet: new Set(),
  bookingGroup: null,
@@ -57,10 +57,18 @@ function scheduleReducer(state: ScheduleState, action: ScheduleAction): Schedule
      return { ...state, viewMode: action.mode };
    case "SET_TRAINER":
      return { ...state, filterTrainer: action.value };
-    case "SET_TYPE":
-      return { ...state, filterType: action.value };
-    case "SET_STATUS":
-      return { ...state, filterStatus: action.value };
+    case "TOGGLE_TYPE": {
+      const next = new Set(state.filterTypes);
+      if (next.has(action.value)) next.delete(action.value);
+      else next.add(action.value);
+      return { ...state, filterTypes: next };
+    }
+    case "TOGGLE_STATUS": {
+      const next = new Set(state.filterStatusSet);
+      if (next.has(action.value)) next.delete(action.value);
+      else next.add(action.value);
+      return { ...state, filterStatusSet: next };
+    }
    case "SET_TIME":
      return { ...state, filterTime: action.value };
    case "TOGGLE_DAY": {
@@ -72,7 +80,7 @@ function scheduleReducer(state: ScheduleState, action: ScheduleAction): Schedule
    case "SET_BOOKING":
      return { ...state, bookingGroup: action.value };
    case "CLEAR_FILTERS":
-      return { ...state, filterTrainer: null, filterType: null, filterStatus: "all", filterTime: "all", filterDaySet: new Set() };
+      return { ...state, filterTrainer: null, filterTypes: new Set(), filterStatusSet: new Set(), filterTime: "all", filterDaySet: new Set() };
  }
 }

@@ -84,7 +92,7 @@ interface ScheduleProps {

 export function Schedule({ data: schedule, classItems, teamMembers }: ScheduleProps) {
  const [state, dispatch] = useReducer(scheduleReducer, initialState);
-  const { locationMode, viewMode, filterTrainer, filterType, filterStatus, filterTime, filterDaySet, bookingGroup } = state;
+  const { locationMode, viewMode, filterTrainer, filterTypes, filterStatusSet, filterTime, filterDaySet, bookingGroup } = state;

  const isAllMode = locationMode === "all";

@@ -94,8 +102,8 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
  }, []);

  const setFilterTrainer = useCallback((value: string | null) => dispatch({ type: "SET_TRAINER", value }), []);
-  const setFilterType = useCallback((value: string | null) => dispatch({ type: "SET_TYPE", value }), []);
-  const setFilterStatus = useCallback((value: StatusFilter) => dispatch({ type: "SET_STATUS", value }), []);
+  const toggleFilterType = useCallback((value: string) => dispatch({ type: "TOGGLE_TYPE", value }), []);
+  const toggleFilterStatus = useCallback((value: StatusTag) => dispatch({ type: "TOGGLE_STATUS", value }), []);
  const setFilterTime = useCallback((value: TimeFilter) => dispatch({ type: "SET_TIME", value }), []);

  const setFilterTrainerFromCard = useCallback((trainer: string | null) => {
@@ -103,9 +111,9 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
    if (trainer) scrollToSchedule();
  }, [scrollToSchedule]);

-  const setFilterTypeFromCard = useCallback((type: string | null) => {
-    dispatch({ type: "SET_TYPE", value: type });
-    if (type) scrollToSchedule();
+  const toggleFilterTypeFromCard = useCallback((type: string) => {
+    dispatch({ type: "TOGGLE_TYPE", value: type });
+    scrollToSchedule();
  }, [scrollToSchedule]);

  const typeDots = useMemo(() => buildTypeDots(classItems), [classItems]);
@@ -186,7 +194,7 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
    : null;

  const filteredDays: ScheduleDayMerged[] = useMemo(() => {
-    const noFilter = !filterTrainer && !filterType && filterStatus === "all" && filterTime === "all" && filterDaySet.size === 0;
+    const noFilter = !filterTrainer && filterTypes.size === 0 && filterStatusSet.size === 0 && filterTime === "all" && filterDaySet.size === 0;
    if (noFilter) return activeDays;

    // First filter by day names if any selected
@@ -200,10 +208,10 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
        classes: day.classes.filter(
          (cls) =>
            (!filterTrainer || cls.trainer === filterTrainer) &&
-            (!filterType || cls.type === filterType) &&
-            (filterStatus === "all" ||
-              (filterStatus === "hasSlots" && cls.hasSlots) ||
-              (filterStatus === "recruiting" && cls.recruiting)) &&
+            (filterTypes.size === 0 || filterTypes.has(cls.type)) &&
+            (filterStatusSet.size === 0 ||
+              (filterStatusSet.has("hasSlots") && cls.hasSlots) ||
+              (filterStatusSet.has("recruiting") && cls.recruiting)) &&
            (!activeTimeRange || (() => {
              const m = startTimeMinutes(cls.time);
              return m >= activeTimeRange[0] && m < activeTimeRange[1];
@@ -211,9 +219,9 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
        ),
      }))
      .filter((day) => day.classes.length > 0);
-  }, [activeDays, filterTrainer, filterType, filterStatus, filterTime, activeTimeRange, filterDaySet]);
+  }, [activeDays, filterTrainer, filterTypes, filterStatusSet, filterTime, activeTimeRange, filterDaySet]);

-  const hasActiveFilter = !!(filterTrainer || filterType || filterStatus !== "all" || filterTime !== "all" || filterDaySet.size > 0);
+  const hasActiveFilter = !!(filterTrainer || filterTypes.size > 0 || filterStatusSet.size > 0 || filterTime !== "all" || filterDaySet.size > 0);

  function clearFilters() {
    dispatch({ type: "CLEAR_FILTERS" });
@@ -338,11 +346,11 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
            types={types}
            hasAnySlots={hasAnySlots}
            hasAnyRecruiting={hasAnyRecruiting}
-            filterType={filterType}
-            setFilterType={setFilterType}
+            filterTypes={filterTypes}
+            toggleFilterType={toggleFilterType}
            filterTrainer={filterTrainer}
-            filterStatus={filterStatus}
-            setFilterStatus={setFilterStatus}
+            filterStatusSet={filterStatusSet}
+            toggleFilterStatus={toggleFilterStatus}
            filterTime={filterTime}
            setFilterTime={setFilterTime}
            availableDays={availableDays}
@@ -361,8 +369,8 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
            <MobileSchedule
              typeDots={typeDots}
              filteredDays={filteredDays}
-              filterType={filterType}
-              setFilterType={setFilterTypeFromCard}
+              filterTypes={filterTypes}
+              toggleFilterType={toggleFilterTypeFromCard}
              filterTrainer={filterTrainer}
              setFilterTrainer={setFilterTrainerFromCard}
              hasActiveFilter={hasActiveFilter}
@@ -382,7 +390,7 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
                  key={day.day}
                  className={filteredDays.length === 1 ? "w-full max-w-[340px]" : ""}
                >
-                  <DayCard day={day} typeDots={typeDots} showLocation={isAllMode} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainerFromCard} filterType={filterType} setFilterType={setFilterTypeFromCard} />
+                  <DayCard day={day} typeDots={typeDots} showLocation={isAllMode} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainerFromCard} filterTypes={filterTypes} toggleFilterType={toggleFilterTypeFromCard} />
                </div>
              ))}

@@ -400,8 +408,8 @@ export function Schedule({ data: schedule, classItems, teamMembers }: SchedulePr
          <GroupView
            typeDots={typeDots}
            filteredDays={filteredDays}
-            filterType={filterType}
-            setFilterType={setFilterTypeFromCard}
+            filterTypes={filterTypes}
+            toggleFilterType={toggleFilterTypeFromCard}
            filterTrainer={filterTrainer}
            setFilterTrainer={setFilterTrainerFromCard}
            showLocation={isAllMode}
--- a/src/components/sections/Team.tsx
+++ b/src/components/sections/Team.tsx
@@ -17,17 +17,38 @@ export function Team({ data: team, schedule }: TeamProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [showProfile, setShowProfile] = useState(false);

+  const openProfile = useCallback((index: number) => {
+    setActiveIndex(index);
+    setShowProfile(true);
+    history.pushState({ trainerProfile: true }, "");
+  }, []);
+
+  const closeProfile = useCallback(() => {
+    setShowProfile(false);
+  }, []);
+
  const openTrainerByName = useCallback((name: string) => {
    const idx = team.members.findIndex((m) => m.name === name);
    if (idx >= 0) {
-      setActiveIndex(idx);
-      setShowProfile(true);
+      openProfile(idx);
      setTimeout(() => {
        const el = document.getElementById("team");
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 50);
    }
-  }, [team.members]);
+  }, [team.members, openProfile]);
+
+  // Handle browser back button
+  useEffect(() => {
+    function onPopState(e: PopStateEvent) {
+      if (showProfile) {
+        e.preventDefault();
+        setShowProfile(false);
+      }
+    }
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, [showProfile]);

  useEffect(() => {
    function handler(e: Event) {
@@ -75,14 +96,14 @@ export function Team({ data: team, schedule }: TeamProps) {
                  members={team.members}
                  activeIndex={activeIndex}
                  onSelect={setActiveIndex}
-                  onOpenBio={() => setShowProfile(true)}
+                  onOpenBio={() => openProfile(activeIndex)}
                />
              </div>
            </>
          ) : (
            <TeamProfile
              member={team.members[activeIndex]}
-              onBack={() => setShowProfile(false)}
+              onBack={() => { history.back(); }}
              schedule={schedule}
            />
          )}
--- a/src/components/sections/schedule/DayCard.tsx
+++ b/src/components/sections/schedule/DayCard.tsx
@@ -8,8 +8,8 @@ interface DayCardProps {
  showLocation?: boolean;
  filterTrainer: string | null;
  setFilterTrainer: (trainer: string | null) => void;
-  filterType: string | null;
-  setFilterType: (type: string | null) => void;
+  filterTypes: Set<string>;
+  toggleFilterType: (type: string) => void;
 }

 function ClassRow({
@@ -17,15 +17,15 @@ function ClassRow({
  typeDots,
  filterTrainer,
  setFilterTrainer,
-  filterType,
-  setFilterType,
+  filterTypes,
+  toggleFilterType,
 }: {
  cls: ScheduleClassWithLocation;
  typeDots: Record<string, string>;
  filterTrainer: string | null;
  setFilterTrainer: (trainer: string | null) => void;
-  filterType: string | null;
-  setFilterType: (type: string | null) => void;
+  filterTypes: Set<string>;
+  toggleFilterType: (type: string) => void;
 }) {
  return (
    <div className={`px-5 py-3.5 ${cls.hasSlots ? "bg-emerald-500/5" : cls.recruiting ? "bg-sky-500/5" : ""}`}>
@@ -58,12 +58,12 @@ function ClassRow({
      </button>
      <div className="mt-2 flex items-center gap-2 flex-wrap">
        <button
-          onClick={() => setFilterType(filterType === cls.type ? null : cls.type)}
+          onClick={() => toggleFilterType(cls.type)}
          className="flex items-center gap-2 cursor-pointer active:opacity-60"
        >
          <span className={`h-2 w-2 shrink-0 rounded-full ${typeDots[cls.type] ?? "bg-white/30"}`} />
          <span className={`text-xs ${
-            filterType === cls.type
+            filterTypes.has(cls.type)
              ? "text-gold underline underline-offset-2"
              : "text-neutral-500 dark:text-white/40"
          }`}>{cls.type}</span>
@@ -78,7 +78,7 @@ function ClassRow({
  );
 }

-export function DayCard({ day, typeDots, showLocation, filterTrainer, setFilterTrainer, filterType, setFilterType }: DayCardProps) {
+export function DayCard({ day, typeDots, showLocation, filterTrainer, setFilterTrainer, filterTypes, toggleFilterType }: DayCardProps) {
  // Group classes by location when showLocation is true
  const locationGroups = showLocation
    ? Array.from(
@@ -123,7 +123,7 @@ export function DayCard({ day, typeDots, showLocation, filterTrainer, setFilterT
              </div>
              <div className="divide-y divide-neutral-100 dark:divide-white/[0.04]">
                {classes.map((cls, i) => (
-                  <ClassRow key={i} cls={cls} typeDots={typeDots} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainer} filterType={filterType} setFilterType={setFilterType} />
+                  <ClassRow key={i} cls={cls} typeDots={typeDots} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainer} filterTypes={filterTypes} toggleFilterType={toggleFilterType} />
                ))}
              </div>
            </div>
@@ -133,7 +133,7 @@ export function DayCard({ day, typeDots, showLocation, filterTrainer, setFilterT
        // Single location — no sub-headers
        <div className="divide-y divide-neutral-100 dark:divide-white/[0.04]">
          {day.classes.map((cls, i) => (
-            <ClassRow key={i} cls={cls} typeDots={typeDots} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainer} filterType={filterType} setFilterType={setFilterType} />
+            <ClassRow key={i} cls={cls} typeDots={typeDots} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainer} filterTypes={filterTypes} toggleFilterType={toggleFilterType} />
          ))}
        </div>
      )}
--- a/src/components/sections/schedule/GroupView.tsx
+++ b/src/components/sections/schedule/GroupView.tsx
@@ -119,8 +119,8 @@ function groupByType(groups: ScheduleGroup[]): { type: string; groups: ScheduleG
 interface GroupViewProps {
  typeDots: Record<string, string>;
  filteredDays: ScheduleDayMerged[];
-  filterType: string | null;
-  setFilterType: (type: string | null) => void;
+  filterTypes: Set<string>;
+  toggleFilterType: (type: string) => void;
  filterTrainer: string | null;
  setFilterTrainer: (trainer: string | null) => void;
  showLocation?: boolean;
@@ -133,8 +133,8 @@ const WEEKDAY_NAMES = ["Воскресенье", "Понедельник", "Вт
 export function GroupView({
  typeDots,
  filteredDays,
-  filterType,
-  setFilterType,
+  filterTypes,
+  toggleFilterType,
  filterTrainer,
  setFilterTrainer,
  showLocation,
@@ -226,11 +226,11 @@ export function GroupView({
                          {/* Type name */}
                          <div className="flex items-center gap-2 flex-wrap">
                            <button
-                              onClick={() => setFilterType(filterType === type ? null : type)}
+                              onClick={() => toggleFilterType(type)}
                              className="flex items-center gap-2 cursor-pointer"
                            >
                              <span className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColor}`} />
-                              <span className="text-sm font-semibold text-white/90">{type}</span>
+                              <span className={`text-sm font-semibold ${filterTypes.has(type) ? "text-gold underline underline-offset-2" : "text-white/90"}`}>{type}</span>
                            </button>
                            {group.level && (
                              <span className="rounded-full bg-rose-500/15 border border-rose-500/25 px-2 py-px text-[10px] font-semibold text-rose-400">
--- a/src/components/sections/schedule/MobileSchedule.tsx
+++ b/src/components/sections/schedule/MobileSchedule.tsx
@@ -7,8 +7,8 @@ import type { ScheduleDayMerged, ScheduleClassWithLocation } from "./constants";
 interface MobileScheduleProps {
  typeDots: Record<string, string>;
  filteredDays: ScheduleDayMerged[];
-  filterType: string | null;
-  setFilterType: (type: string | null) => void;
+  filterTypes: Set<string>;
+  toggleFilterType: (type: string) => void;
  filterTrainer: string | null;
  setFilterTrainer: (trainer: string | null) => void;
  hasActiveFilter: boolean;
@@ -19,16 +19,16 @@ interface MobileScheduleProps {
 function ClassRow({
  cls,
  typeDots,
-  filterType,
-  setFilterType,
+  filterTypes,
+  toggleFilterType,
  filterTrainer,
  setFilterTrainer,
  showLocation,
 }: {
  cls: ScheduleClassWithLocation;
  typeDots: Record<string, string>;
-  filterType: string | null;
-  setFilterType: (type: string | null) => void;
+  filterTypes: Set<string>;
+  toggleFilterType: (type: string) => void;
  filterTrainer: string | null;
  setFilterTrainer: (trainer: string | null) => void;
  showLocation?: boolean;
@@ -69,11 +69,11 @@ function ClassRow({
        </div>
        <div className="mt-0.5 flex items-center gap-2">
          <button
-            onClick={() => setFilterType(filterType === cls.type ? null : cls.type)}
-            className={`flex items-center gap-1.5 active:opacity-60 ${filterType === cls.type ? "opacity-100" : ""}`}
+            onClick={() => toggleFilterType(cls.type)}
+            className={`flex items-center gap-1.5 active:opacity-60 ${filterTypes.has(cls.type) ? "opacity-100" : ""}`}
          >
            <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${typeDots[cls.type] ?? "bg-white/30"}`} />
-            <span className={`text-[11px] ${filterType === cls.type ? "text-gold underline underline-offset-2" : "text-neutral-400 dark:text-white/30"}`}>{cls.type}</span>
+            <span className={`text-[11px] ${filterTypes.has(cls.type) ? "text-gold underline underline-offset-2" : "text-neutral-400 dark:text-white/30"}`}>{cls.type}</span>
          </button>
          {showLocation && cls.locationName && (
            <span className="flex items-center gap-0.5 text-[10px] text-neutral-400 dark:text-white/20">
@@ -90,8 +90,8 @@ function ClassRow({
 export function MobileSchedule({
  typeDots,
  filteredDays,
-  filterType,
-  setFilterType,
+  filterTypes,
+  toggleFilterType,
  filterTrainer,
  setFilterTrainer,
  hasActiveFilter,
@@ -110,12 +110,12 @@ export function MobileSchedule({
                {filterTrainer}
              </span>
            )}
-            {filterType && (
-              <span className="flex items-center gap-1">
-                <span className={`h-1.5 w-1.5 rounded-full ${typeDots[filterType] ?? "bg-white/30"}`} />
-                {filterType}
+            {filterTypes.size > 0 && Array.from(filterTypes).map((type) => (
+              <span key={type} className="flex items-center gap-1">
+                <span className={`h-1.5 w-1.5 rounded-full ${typeDots[type] ?? "bg-white/30"}`} />
+                {type}
              </span>
-            )}
+            ))}
          </div>
          <button
            onClick={clearFilters}
@@ -175,8 +175,8 @@ export function MobileSchedule({
                            key={i}
                            cls={cls}
                            typeDots={typeDots}
-                            filterType={filterType}
-                            setFilterType={setFilterType}
+                            filterTypes={filterTypes}
+                            toggleFilterType={toggleFilterType}
                            filterTrainer={filterTrainer}
                            setFilterTrainer={setFilterTrainer}
                          />
@@ -190,8 +190,8 @@ export function MobileSchedule({
                        key={i}
                        cls={cls}
                        typeDots={typeDots}
-                        filterType={filterType}
-                        setFilterType={setFilterType}
+                        filterTypes={filterTypes}
+                        toggleFilterType={toggleFilterType}
                        filterTrainer={filterTrainer}
                        setFilterTrainer={setFilterTrainer}
                      />
--- a/src/components/sections/schedule/ScheduleFilters.tsx
+++ b/src/components/sections/schedule/ScheduleFilters.tsx
@@ -7,7 +7,7 @@ import {
  pillActive,
  pillInactive,
  TIME_PRESETS,
-  type StatusFilter,
+  type StatusTag,
  type TimeFilter,
 } from "./constants";

@@ -16,11 +16,11 @@ interface ScheduleFiltersProps {
  types: string[];
  hasAnySlots: boolean;
  hasAnyRecruiting: boolean;
-  filterType: string | null;
-  setFilterType: (type: string | null) => void;
+  filterTypes: Set<string>;
+  toggleFilterType: (type: string) => void;
  filterTrainer: string | null;
-  filterStatus: StatusFilter;
-  setFilterStatus: (status: StatusFilter) => void;
+  filterStatusSet: Set<StatusTag>;
+  toggleFilterStatus: (status: StatusTag) => void;
  filterTime: TimeFilter;
  setFilterTime: (time: TimeFilter) => void;
  availableDays: { day: string; dayShort: string }[];
@@ -35,11 +35,11 @@ export function ScheduleFilters({
  types,
  hasAnySlots,
  hasAnyRecruiting,
-  filterType,
-  setFilterType,
+  filterTypes,
+  toggleFilterType,
  filterTrainer,
-  filterStatus,
-  setFilterStatus,
+  filterStatusSet,
+  toggleFilterStatus,
  filterTime,
  setFilterTime,
  availableDays,
@@ -59,8 +59,8 @@ export function ScheduleFilters({
        {types.map((type) => (
          <button
            key={type}
-            onClick={() => setFilterType(filterType === type ? null : type)}
-            className={`${pillBase} ${filterType === type ? pillActive : pillInactive}`}
+            onClick={() => toggleFilterType(type)}
+            className={`${pillBase} ${filterTypes.has(type) ? pillActive : pillInactive}`}
          >
            <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${typeDots[type] ?? "bg-white/30"}`} />
            {type}
@@ -73,8 +73,8 @@ export function ScheduleFilters({
        {/* Status filters */}
        {hasAnySlots && (
          <button
-            onClick={() => setFilterStatus(filterStatus === "hasSlots" ? "all" : "hasSlots")}
-            className={`${pillBase} ${filterStatus === "hasSlots" ? "bg-emerald-500/20 text-emerald-700 border border-emerald-500/40 dark:text-emerald-400 dark:border-emerald-500/30" : pillInactive}`}
+            onClick={() => toggleFilterStatus("hasSlots")}
+            className={`${pillBase} ${filterStatusSet.has("hasSlots") ? "bg-emerald-500/20 text-emerald-700 border border-emerald-500/40 dark:text-emerald-400 dark:border-emerald-500/30" : pillInactive}`}
          >
            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500" />
            Есть места
@@ -82,8 +82,8 @@ export function ScheduleFilters({
        )}
        {hasAnyRecruiting && (
          <button
-            onClick={() => setFilterStatus(filterStatus === "recruiting" ? "all" : "recruiting")}
-            className={`${pillBase} ${filterStatus === "recruiting" ? "bg-sky-500/20 text-sky-700 border border-sky-500/40 dark:text-sky-400 dark:border-sky-500/30" : pillInactive}`}
+            onClick={() => toggleFilterStatus("recruiting")}
+            className={`${pillBase} ${filterStatusSet.has("recruiting") ? "bg-sky-500/20 text-sky-700 border border-sky-500/40 dark:text-sky-400 dark:border-sky-500/30" : pillInactive}`}
          >
            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500" />
            Набор
--- a/src/components/sections/schedule/constants.ts
+++ b/src/components/sections/schedule/constants.ts
@@ -62,6 +62,8 @@ export function buildTypeDots(
  return map;
 }

+export type StatusTag = "hasSlots" | "recruiting";
+/** @deprecated Use Set<StatusTag> instead */
 export type StatusFilter = "all" | "hasSlots" | "recruiting";
 export type TimeFilter = "all" | "morning" | "afternoon" | "evening";

--- a/src/components/ui/NewsModal.tsx
+++ b/src/components/ui/NewsModal.tsx
@@ -41,13 +41,14 @@ export function NewsModal({ item, onClose }: NewsModalProps) {

  useEffect(() => {
    if (item) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
    } else {
      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
    }
-    return () => {
-      document.body.style.overflow = "";
-    };
+    return () => { document.body.style.overflow = ""; document.body.style.paddingRight = ""; };
  }, [item]);

  if (!item) return null;
--- a/src/components/ui/SignupModal.tsx
+++ b/src/components/ui/SignupModal.tsx
@@ -74,9 +74,15 @@ export function SignupModal({
  }, [open, onClose]);

  useEffect(() => {
-    if (open) document.body.style.overflow = "hidden";
-    else document.body.style.overflow = "";
-    return () => { document.body.style.overflow = ""; };
+    if (open) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+    return () => { document.body.style.overflow = ""; document.body.style.paddingRight = ""; };
  }, [open]);

  const handleSubmit = useCallback(async (e: React.FormEvent) => {