diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Diana Dolgolyova
2026-03-26 13:23:03 +03:00
parent 228e547e10
commit 8088b99a43
17 changed files with 275 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774515538630.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774515545926.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774516098008.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
public/images/news/saveclip-app-605404066-17852939781600031-474959415-1774516126607.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

24
src/app/globals.css
View File

@@ -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);
}

6
src/components/layout/Header.tsx
View File

@@ -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">

12
src/components/sections/OpenDay.tsx
View File

@@ -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} мест

230
src/components/sections/Pricing.tsx
View File

@@ -53,136 +53,128 @@ export function Pricing({ data: pricing }: PricingProps) {
</Reveal>
{/* Prices tab */}
{activeTab === "prices" && (
<Reveal>
<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}
</p>
<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}
</p>
{/* Cards grid */}
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{regularItems.map((item, i) => {
const isPopular = item.popular ?? false;
return (
<div
key={i}
className={`group relative rounded-2xl border p-5 transition-all duration-300 ${
isPopular
? "border-gold/40 bg-gradient-to-br from-gold/10 via-transparent to-gold/5 dark:from-gold/[0.07] dark:to-gold/[0.02] shadow-lg shadow-gold/10"
: "border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-[#0a0a0a]"
}`}
>
{/* Popular badge */}
{isPopular && (
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
<span className="inline-flex items-center gap-1 rounded-full bg-gold px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-md shadow-gold/30">
<Sparkles size={10} />
Популярный
</span>
</div>
{/* Cards grid */}
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{regularItems.map((item, i) => {
const isPopular = item.popular ?? false;
return (
<div
key={i}
className={`group relative rounded-2xl border p-5 transition-all duration-300 ${
isPopular
? "border-gold/40 bg-gradient-to-br from-gold/10 via-transparent to-gold/5 dark:from-gold/[0.07] dark:to-gold/[0.02] shadow-lg shadow-gold/10"
: "border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-[#0a0a0a]"
}`}
>
{/* Popular badge */}
{isPopular && (
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
<span className="inline-flex items-center gap-1 rounded-full bg-gold px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-md shadow-gold/30">
<Sparkles size={10} />
Популярный
</span>
</div>
)}
<div className={isPopular ? "mt-1" : ""}>
{/* Name */}
<p className={`text-sm font-medium ${isPopular ? "text-gold-dark dark:text-gold-light" : "text-neutral-700 dark:text-neutral-300"}`}>
{item.name}
</p>
{/* Note */}
{item.note && (
<p className="mt-1 text-xs text-neutral-400 dark:text-neutral-500">
{item.note}
</p>
)}
<div className={isPopular ? "mt-1" : ""}>
{/* Name */}
<p className={`text-sm font-medium ${isPopular ? "text-gold-dark dark:text-gold-light" : "text-neutral-700 dark:text-neutral-300"}`}>
{item.name}
</p>
{/* Note */}
{item.note && (
<p className="mt-1 text-xs text-neutral-400 dark:text-neutral-500">
{item.note}
</p>
)}
{/* Price */}
<p className={`mt-3 font-display text-2xl font-bold ${isPopular ? "text-gold" : "text-neutral-900 dark:text-white"}`}>
{item.price}
</p>
</div>
{/* Price */}
<p className={`mt-3 font-display text-2xl font-bold ${isPopular ? "text-gold" : "text-neutral-900 dark:text-white"}`}>
{item.price}
</p>
</div>
);
})}
</div>
{/* Featured — big card */}
{featuredItem && (
<div className="mt-6 w-full team-card-glitter rounded-2xl border border-gold/30 bg-gradient-to-r from-gold/10 via-gold/5 to-gold/10 dark:from-gold/[0.06] dark:via-transparent dark:to-gold/[0.06] p-6 sm:p-8">
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
<div className="text-center sm:text-left">
<div className="flex items-center justify-center gap-2 sm:justify-start">
<Crown size={18} className="text-gold" />
<p className="text-lg font-bold text-neutral-900 dark:text-white">
{featuredItem.name}
</p>
</div>
{featuredItem.note && (
<p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
{featuredItem.note}
</p>
)}
</div>
<p className="shrink-0 font-display text-3xl font-bold text-gold">
{featuredItem.price}
</p>
</div>
</div>
)}
);
})}
</div>
</div>
</Reveal>
)}
{/* Rental tab */}
{activeTab === "rental" && (
<Reveal>
<div className="mx-auto mt-10 max-w-2xl space-y-3">
{pricing.rentalItems.map((item, i) => (
<div
key={i}
className="flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-6 py-5 dark:border-white/[0.06] dark:bg-[#0a0a0a]"
>
<div>
<p className="font-medium text-neutral-900 dark:text-white">
{item.name}
</p>
{item.note && (
<p className="mt-0.5 text-sm text-neutral-500 dark:text-neutral-400">
{item.note}
{/* Featured — big card */}
{featuredItem && (
<div className="mt-6 w-full team-card-glitter rounded-2xl border border-gold/30 bg-gradient-to-r from-gold/10 via-gold/5 to-gold/10 dark:from-gold/[0.06] dark:via-transparent dark:to-gold/[0.06] p-6 sm:p-8">
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
<div className="text-center sm:text-left">
<div className="flex items-center justify-center gap-2 sm:justify-start">
<Crown size={18} className="text-gold" />
<p className="text-lg font-bold text-neutral-900 dark:text-white">
{featuredItem.name}
</p>
</div>
{featuredItem.note && (
<p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
{featuredItem.note}
</p>
)}
</div>
<span className="shrink-0 font-display text-xl font-bold text-gold-dark dark:text-gold-light">
{item.price}
</span>
</div>
))}
</div>
</Reveal>
)}
{/* Rules tab */}
{activeTab === "rules" && (
<Reveal>
<div className="mx-auto mt-10 max-w-2xl space-y-3">
{pricing.rules.map((rule, i) => (
<div
key={i}
className="flex gap-4 rounded-2xl border border-neutral-200 bg-white px-5 py-4 dark:border-white/[0.06] dark:bg-[#0a0a0a]"
>
<span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gold/10 text-xs font-bold text-gold-dark dark:bg-gold/10 dark:text-gold-light">
{i + 1}
</span>
<p className="text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
{rule}
<p className="shrink-0 font-display text-3xl font-bold text-gold">
{featuredItem.price}
</p>
</div>
))}
</div>
</Reveal>
)}
</div>
)}
</div>
</div>
{/* Rental tab */}
<div className={activeTab === "rental" ? "block" : "hidden"}>
<div className="mx-auto mt-10 max-w-2xl space-y-3">
{pricing.rentalItems.map((item, i) => (
<div
key={i}
className="flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-6 py-5 dark:border-white/[0.06] dark:bg-[#0a0a0a]"
>
<div>
<p className="font-medium text-neutral-900 dark:text-white">
{item.name}
</p>
{item.note && (
<p className="mt-0.5 text-sm text-neutral-500 dark:text-neutral-400">
{item.note}
</p>
)}
</div>
<span className="shrink-0 font-display text-xl font-bold text-gold-dark dark:text-gold-light">
{item.price}
</span>
</div>
))}
</div>
</div>
{/* Rules tab */}
<div className={activeTab === "rules" ? "block" : "hidden"}>
<div className="mx-auto mt-10 max-w-2xl space-y-3">
{pricing.rules.map((rule, i) => (
<div
key={i}
className="flex gap-4 rounded-2xl border border-neutral-200 bg-white px-5 py-4 dark:border-white/[0.06] dark:bg-[#0a0a0a]"
>
<span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gold/10 text-xs font-bold text-gold-dark dark:bg-gold/10 dark:text-gold-light">
{i + 1}
</span>
<p className="text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
{rule}
</p>
</div>
))}
</div>
</div>
</div>
</section>
);

76
src/components/sections/Schedule.tsx
View File

@@ -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}

31
src/components/sections/Team.tsx
View File

@@ -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}
/>
)}

22
src/components/sections/schedule/DayCard.tsx
View File

@@ -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>
)}

12
src/components/sections/schedule/GroupView.tsx
View File

@@ -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">

40
src/components/sections/schedule/MobileSchedule.tsx
View File

@@ -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}
/>

30
src/components/sections/schedule/ScheduleFilters.tsx
View File

@@ -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" />
Набор

2
src/components/sections/schedule/constants.ts
View File

@@ -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";

7
src/components/ui/NewsModal.tsx
View File

@@ -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;

12
src/components/ui/SignupModal.tsx
View File

@@ -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) => {