fix frontend calendar race states

Reviewed-on: #27

frontend/src/app/layouts/AppLayout.tsx

@@ -1,11 +1,13 @@
-import { NavLink, Outlet } from "react-router-dom";
+import { Link, NavLink, Outlet } from "react-router-dom";
 import { AppShellFooter } from "./AppShellFooter";
 
 export function AppLayout(): JSX.Element {
   return (
     <div className="app-shell">
       <header className="app-shell__header">
-        <div className="app-shell__brand">Календарь стартов</div>
+        <Link className="app-shell__brand" to="/">
+          Календарь стартов
+        </Link>
         <nav className="app-shell__nav" aria-label="Основная навигация">
           <NavLink
             to="/"

frontend/src/components/RacesCalendar.tsx

@@ -1,14 +1,14 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import type { Race } from "../api";
-import { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "../lib";
+import { buildMonthCells, groupRacesByYmd, isRaceDateInPast, toYmd, WEEKDAY_LABELS_SHORT_RU } from "../lib";
 
 const MONTH_NAMES_RU_SHORT = [
   "янв.",
   "февр.",
   "мар.",
   "апр.",
-  "мая",
+  "май",
   "июн.",
   "июл.",
   "авг.",
@@ -20,6 +20,13 @@ const MONTH_NAMES_RU_SHORT = [
 
 const POPOVER_LEAVE_MS = 140;
 
+function toLocalYmd(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+
 interface RacesCalendarProps {
   displayYear: number;
   monthFilter: string;
@@ -77,6 +84,8 @@ function CalendarMonthBlock(props: {
   setOpenYmd: (v: string | null) => void;
   scheduleClose: () => void;
   cancelClose: () => void;
+  onMonthSelect?: (monthIndex: number) => void;
+  todayYmd: string;
 }): JSX.Element {
   const {
     year,
@@ -88,6 +97,8 @@ function CalendarMonthBlock(props: {
     setOpenYmd,
     scheduleClose,
     cancelClose,
+    onMonthSelect,
+    todayYmd,
   } = props;
   const cells = useMemo(() => buildMonthCells(year, monthIndex), [year, monthIndex]);
   const title = `${MONTH_NAMES_RU_SHORT[monthIndex]} ${year}`;
@@ -96,7 +107,21 @@ function CalendarMonthBlock(props: {
 
   return (
     <div className={blockClass}>
-      <h3 className="races-cal__month-title">{title}</h3>
+      <h3 className="races-cal__month-title">
+        {onMonthSelect ? (
+          <button
+            type="button"
+            className="races-cal__month-title-button"
+            onClick={() => {
+              onMonthSelect(monthIndex);
+            }}
+          >
+            {title}
+          </button>
+        ) : (
+          title
+        )}
+      </h3>
       <div className="races-cal__weekdays" aria-hidden>
         {WEEKDAY_LABELS_SHORT_RU.map((d) => (
           <span key={d} className="races-cal__weekday">
@@ -113,11 +138,22 @@ function CalendarMonthBlock(props: {
           const dayRaces = racesByYmd.get(ymd) ?? [];
           const hasRaces = dayRaces.length > 0;
           const isOpen = openYmd === ymd;
+          const isPast = isRaceDateInPast(ymd);
+          const isToday = ymd === todayYmd;
+          const cellClassName = [
+            "races-cal__cell",
+            hasRaces ? "races-cal__cell--has-race" : "",
+            isOpen ? "races-cal__cell--open" : "",
+            isPast ? "races-cal__cell--past" : "",
+            isToday ? "races-cal__cell--today" : "",
+          ]
+            .filter(Boolean)
+            .join(" ");
 
           return (
             <div
               key={ymd}
-              className={`races-cal__cell${hasRaces ? " races-cal__cell--has-race" : ""}${isOpen ? " races-cal__cell--open" : ""}`}
+              className={cellClassName}
               onMouseEnter={() => {
                 cancelClose();
                 setOpenYmd(hasRaces ? ymd : null);
@@ -182,6 +218,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
   }, [cancelClose]);
 
   const racesByYmd = useMemo(() => groupRacesByYmd(races), [races]);
+  const todayYmd = useMemo(() => toLocalYmd(new Date()), []);
 
   const focusedMonthIndex = monthFilter === "" ? null : parseInt(monthFilter, 10) - 1;
 
@@ -202,6 +239,11 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
               setOpenYmd={setOpenYmd}
               scheduleClose={scheduleClose}
               cancelClose={cancelClose}
+              onMonthSelect={(mi) => {
+                onMonthFilterChange(String(mi + 1));
+                setOpenYmd(null);
+              }}
+              todayYmd={todayYmd}
             />
           ))}
         </div>
@@ -240,6 +282,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
             setOpenYmd={setOpenYmd}
             scheduleClose={scheduleClose}
             cancelClose={cancelClose}
+            todayYmd={todayYmd}
           />
         </div>
       )}

frontend/src/pages/RaceFormPage.tsx

@@ -93,6 +93,17 @@ function validateForm(form: FormData): string[] {
   return errors;
 }
 
+function isRaceDateTodayOrPast(date: string): boolean {
+  if (!date.trim()) {
+    return false;
+  }
+  const today = new Date();
+  const y = today.getFullYear();
+  const m = String(today.getMonth() + 1).padStart(2, "0");
+  const d = String(today.getDate()).padStart(2, "0");
+  return isRaceDateInPast(date) || date.slice(0, 10) === `${y}-${m}-${d}`;
+}
+
 export function RaceFormPage(): JSX.Element {
   const { raceId } = useParams<{ raceId: string }>();
   const navigate = useNavigate();
@@ -243,6 +254,7 @@ export function RaceFormPage(): JSX.Element {
   );
 
   const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date);
+  const showResultFields = isRaceDateTodayOrPast(form.date);
   const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
 
   if (isLoading) {
@@ -397,33 +409,35 @@ export function RaceFormPage(): JSX.Element {
           </label>
         </fieldset>
 
-        <fieldset className="race-form__group">
+        {showResultFields ? (
-          <legend className="race-form__legend">Результаты</legend>
+          <fieldset className="race-form__group">
+            <legend className="race-form__legend">Результаты</legend>
 
-          <label className="race-form__field">
+            <label className="race-form__field">
-            <span className="race-form__label">Финишное время</span>
+              <span className="race-form__label">Финишное время</span>
-            <input
+              <input
-              className="race-form__input"
+                className="race-form__input"
-              type="text"
+                type="text"
-              name="finishTime"
+                name="finishTime"
-              value={form.finishTime}
+                value={form.finishTime}
-              onChange={handleChange}
+                onChange={handleChange}
-              placeholder="1:45:30"
+                placeholder="1:45:30"
-            />
+              />
-          </label>
+            </label>
 
-          <label className="race-form__field">
+            <label className="race-form__field">
-            <span className="race-form__label">Место на финише</span>
+              <span className="race-form__label">Место на финише</span>
-            <input
+              <input
-              className="race-form__input"
+                className="race-form__input"
-              type="text"
+                type="text"
-              name="finishPlace"
+                name="finishPlace"
-              value={form.finishPlace}
+                value={form.finishPlace}
-              onChange={handleChange}
+                onChange={handleChange}
-              placeholder="12/340"
+                placeholder="12/340"
-            />
+              />
-          </label>
+            </label>
-        </fieldset>
+          </fieldset>
+        ) : null}
 
         <fieldset className="race-form__group">
           <legend className="race-form__legend">Дополнительно</legend>

frontend/src/pages/RacesPage.tsx

@@ -10,7 +10,8 @@ import {
   getRaceStatusClassName,
   getRaceStatusLabel,
   parseRaceDate,
-  splitRacesByDate,
+  sortByDateAsc,
+  sortByDateDesc,
 } from "../lib";
 
 const MONTH_OPTIONS: { value: string; label: string }[] = [
@@ -220,7 +221,13 @@ export function RacesPage(): JSX.Element {
     };
   }, [listQuery]);
 
-  const { upcoming, past } = useMemo(() => splitRacesByDate(races), [races]);
+  const { upcoming, completed } = useMemo(
+    () => ({
+      upcoming: sortByDateAsc(races.filter((race) => race.status !== "completed")),
+      completed: sortByDateDesc(races.filter((race) => race.status === "completed")),
+    }),
+    [races],
+  );
 
   if (errorMessage && races.length === 0 && !isLoading) {
     return (
@@ -313,7 +320,7 @@ export function RacesPage(): JSX.Element {
       {viewMode === "list" ? (
         <div className="race-lists">
           <RaceList title="Будущие" races={upcoming} />
-          <RaceList title="Прошедшие" races={past} />
+          <RaceList title="Завершенные" races={completed} />
         </div>
       ) : (
         <div className="races-cal-wrap">

frontend/src/styles/global.css

@@ -45,6 +45,12 @@ a {
   font-weight: 700;
 }
 
+.app-shell__brand:hover,
+.app-shell__brand:focus-visible {
+  color: var(--color-text);
+  outline: none;
+}
+
 .app-shell__nav {
   display: flex;
   align-items: center;
@@ -1006,6 +1012,26 @@ a {
   color: var(--color-text);
 }
 
+.races-cal__month-title-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+}
+
+.races-cal__month-title-button:hover,
+.races-cal__month-title-button:focus-visible {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  outline: none;
+}
+
 .races-cal__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -1040,6 +1066,12 @@ a {
   color: var(--color-accent);
 }
 
+.races-cal__cell--past .races-cal__day-btn {
+  color: var(--color-text-muted);
+  background: #f0f2f4;
+  border-color: #d8dde2;
+}
+
 .races-cal__cell--open {
   z-index: 2;
 }
@@ -1070,6 +1102,12 @@ a {
   border-color: var(--color-accent);
 }
 
+.races-cal__cell--today .races-cal__day-btn,
+.races-cal__cell--today .races-cal__day-btn:hover,
+.races-cal__cell--today .races-cal__day-btn:focus-visible {
+  border-color: var(--color-text);
+}
+
 .races-cal__popover {
   position: absolute;
   top: calc(100% + var(--space-1));
@@ -1226,6 +1264,11 @@ body {
   color: var(--color-bg-deep);
 }
 
+.app-shell__brand:hover,
+.app-shell__brand:focus-visible {
+  color: var(--color-accent);
+}
+
 .app-shell__link {
   font-size: var(--font-size-caption);
   font-weight: 700;
@@ -1747,18 +1790,61 @@ body {
   font-weight: 800;
 }
 
+.races-cal__month-title-button {
+  border-radius: var(--radius-sm);
+  transition:
+    color 0.15s ease,
+    text-decoration-color 0.15s ease;
+}
+
+.races-cal__month-title-button:hover,
+.races-cal__month-title-button:focus-visible {
+  color: var(--color-accent);
+}
+
 .races-cal__cell--has-race .races-cal__day-btn {
   color: #071927;
   background: linear-gradient(135deg, rgba(185, 242, 74, 0.7), rgba(17, 104, 216, 0.14));
   border-color: rgba(17, 104, 216, 0.18);
 }
 
+.races-cal__cell--past .races-cal__day-btn,
+.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn {
+  color: #6f7c87;
+  background: #eef1f3;
+  border-color: #d4dbe1;
+}
+
 .races-cal__cell--has-race .races-cal__day-btn:hover,
 .races-cal__cell--has-race .races-cal__day-btn:focus-visible {
   background: var(--color-lime);
   border-color: var(--color-bg-deep);
 }
 
+.races-cal__cell--past .races-cal__day-btn:hover,
+.races-cal__cell--past .races-cal__day-btn:focus-visible,
+.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn:hover,
+.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn:focus-visible {
+  color: #52616d;
+  background: #e3e8ec;
+  border-color: #aeb9c3;
+}
+
+.races-cal__cell--today .races-cal__day-btn,
+.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn,
+.races-cal__cell--today.races-cal__cell--past .races-cal__day-btn {
+  border-color: #071927;
+  box-shadow: inset 0 0 0 1px #071927;
+}
+
+.races-cal__cell--today .races-cal__day-btn:hover,
+.races-cal__cell--today .races-cal__day-btn:focus-visible,
+.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn:hover,
+.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn:focus-visible {
+  border-color: #071927;
+  box-shadow: inset 0 0 0 1px #071927;
+}
+
 .races-cal__popover {
   border-color: rgba(17, 104, 216, 0.2);
   border-radius: var(--radius-md);