feat(frontend): redesign race dashboard

Merge pull request 'fix(frontend): hide calendar popups on empty dates' (#25 ) from fix/calendar-hide-popover-empty-days into main
Reviewed-on: #25
2026-04-22 11:47:37 +03:00 · 2026-04-13 19:59:16 +00:00 · 2026-04-13 22:58:36 +03:00 · 2026-04-13 19:51:07 +00:00 · 2026-04-13 22:47:06 +03:00 · 2026-04-13 19:36:10 +00:00
22 changed files with 1772 additions and 210 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "calendar-run-frontend",
-  "version": "0.4.0",
+  "version": "0.5.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "calendar-run-frontend",
-      "version": "0.4.0",
+      "version": "0.5.0",
      "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
  "name": "calendar-run-frontend",
  "private": true,
-  "version": "0.4.0",
+  "version": "0.5.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/frontend/public/images/race-half.png
+++ b/frontend/public/images/race-half.png
--- a/frontend/public/images/race-marathon.png
+++ b/frontend/public/images/race-marathon.png
--- a/frontend/public/images/race-night.png
+++ b/frontend/public/images/race-night.png
--- a/frontend/public/images/race-short.png
+++ b/frontend/public/images/race-short.png
--- a/frontend/public/images/race-trail.png
+++ b/frontend/public/images/race-trail.png
--- a/frontend/public/images/runner-hero.png
+++ b/frontend/public/images/runner-hero.png
--- a/frontend/src/components/DatePickerField.tsx
+++ b/frontend/src/components/DatePickerField.tsx
@@ -0,0 +1,197 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { buildMonthCells, toYmd, WEEKDAY_LABELS_SHORT_RU } from "../lib";
+
+const MONTH_NAMES_RU = [
+  "Январь",
+  "Февраль",
+  "Март",
+  "Апрель",
+  "Май",
+  "Июнь",
+  "Июль",
+  "Август",
+  "Сентябрь",
+  "Октябрь",
+  "Ноябрь",
+  "Декабрь",
+];
+
+interface DatePickerFieldProps {
+  value: string;
+  name: string;
+  required?: boolean;
+  onChange: (value: string) => void;
+}
+
+function parseYmd(value: string): { year: number; monthIndex: number; day: number } | null {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return null;
+  }
+
+  const year = Number(value.slice(0, 4));
+  const monthIndex = Number(value.slice(5, 7)) - 1;
+  const day = Number(value.slice(8, 10));
+
+  if (!Number.isInteger(year) || !Number.isInteger(monthIndex) || !Number.isInteger(day)) {
+    return null;
+  }
+  if (monthIndex < 0 || monthIndex > 11) {
+    return null;
+  }
+
+  return { year, monthIndex, day };
+}
+
+function getInitialVisibleMonth(value: string): { year: number; monthIndex: number } {
+  const parsed = parseYmd(value);
+  if (parsed) {
+    return { year: parsed.year, monthIndex: parsed.monthIndex };
+  }
+
+  const now = new Date();
+  return { year: now.getFullYear(), monthIndex: now.getMonth() };
+}
+
+export function DatePickerField(props: DatePickerFieldProps): JSX.Element {
+  const { value, name, required, onChange } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [visibleMonth, setVisibleMonth] = useState(() => getInitialVisibleMonth(value));
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const parsed = parseYmd(value);
+    if (!parsed) {
+      return;
+    }
+    setVisibleMonth({ year: parsed.year, monthIndex: parsed.monthIndex });
+  }, [value]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    function handlePointerDown(event: MouseEvent): void {
+      if (rootRef.current?.contains(event.target as Node)) {
+        return;
+      }
+      setIsOpen(false);
+    }
+
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const selected = parseYmd(value);
+  const todayYmd = toYmd(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+  const cells = useMemo(
+    () => buildMonthCells(visibleMonth.year, visibleMonth.monthIndex),
+    [visibleMonth],
+  );
+  const monthTitle = `${MONTH_NAMES_RU[visibleMonth.monthIndex]} ${visibleMonth.year}`;
+
+  function shiftMonth(delta: number): void {
+    setVisibleMonth((prev) => {
+      const next = new Date(Date.UTC(prev.year, prev.monthIndex + delta, 1));
+      return { year: next.getUTCFullYear(), monthIndex: next.getUTCMonth() };
+    });
+  }
+
+  return (
+    <div className="date-picker" ref={rootRef}>
+      <div className="date-picker__control">
+        <input
+          className="race-form__input date-picker__input"
+          type="text"
+          inputMode="numeric"
+          name={name}
+          value={value}
+          onChange={(event) => {
+            onChange(event.target.value);
+          }}
+          onFocus={() => setIsOpen(true)}
+          placeholder="2026-05-03"
+          autoComplete="off"
+          required={required}
+        />
+        <button
+          className="date-picker__toggle"
+          type="button"
+          aria-label="Открыть календарь"
+          aria-expanded={isOpen}
+          onClick={() => setIsOpen((prev) => !prev)}
+        >
+          ▾
+        </button>
+      </div>
+
+      {isOpen ? (
+        <div className="date-picker__popover" role="dialog" aria-label="Выбор даты">
+          <div className="date-picker__header">
+            <button
+              className="date-picker__nav"
+              type="button"
+              aria-label="Предыдущий месяц"
+              onClick={() => shiftMonth(-1)}
+            >
+              ‹
+            </button>
+            <p className="date-picker__title">{monthTitle}</p>
+            <button
+              className="date-picker__nav"
+              type="button"
+              aria-label="Следующий месяц"
+              onClick={() => shiftMonth(1)}
+            >
+              ›
+            </button>
+          </div>
+          <div className="date-picker__weekdays" aria-hidden>
+            {WEEKDAY_LABELS_SHORT_RU.map((weekday) => (
+              <span key={weekday} className="date-picker__weekday">
+                {weekday}
+              </span>
+            ))}
+          </div>
+          <div className="date-picker__cells">
+            {cells.map((day, idx) => {
+              if (day === null) {
+                return <span key={`empty-${idx}`} className="date-picker__cell date-picker__cell--empty" />;
+              }
+
+              const ymd = toYmd(visibleMonth.year, visibleMonth.monthIndex, day);
+              const isSelected =
+                selected?.year === visibleMonth.year &&
+                selected.monthIndex === visibleMonth.monthIndex &&
+                selected.day === day;
+
+              return (
+                <button
+                  key={ymd}
+                  className={`date-picker__day${isSelected ? " date-picker__day--selected" : ""}${ymd === todayYmd ? " date-picker__day--today" : ""}`}
+                  type="button"
+                  onClick={() => {
+                    onChange(ymd);
+                    setIsOpen(false);
+                  }}
+                >
+                  {day}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/frontend/src/components/PaceTrendChart.tsx
+++ b/frontend/src/components/PaceTrendChart.tsx
@@ -55,16 +55,38 @@ export function PaceTrendChart(props: PaceTrendChartProps): JSX.Element {
    .join(" ");

  const last = series[series.length - 1]!;
+  const best = series.reduce((currentBest, item) => (item.minutes < currentBest.minutes ? item : currentBest), series[0]!);
+  const dotPoints = series.map((s, i) => {
+    const x = pad + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW);
+    const norm = (maxM - s.minutes) / range;
+    const y = pad + (1 - norm) * innerH;
+    return { x, y, id: s.race.id };
+  });

  return (
    <div className="pace-chart">
      <svg className="pace-chart__svg" viewBox={`0 0 ${w} ${h}`} role="img" aria-label="Динамика времени на дистанции">
+        <line className="pace-chart__grid-line" x1={pad} y1={pad} x2={w - pad} y2={pad} />
+        <line className="pace-chart__grid-line" x1={pad} y1={h - pad} x2={w - pad} y2={h - pad} />
        <polyline className="pace-chart__line" fill="none" points={points} />
+        {dotPoints.map((point, index) => (
+          <circle
+            key={point.id}
+            className={index === dotPoints.length - 1 ? "pace-chart__dot pace-chart__dot--last" : "pace-chart__dot"}
+            cx={point.x}
+            cy={point.y}
+            r="1.6"
+          />
+        ))}
      </svg>
+      <div className="pace-chart__stats">
        <p className="pace-chart__caption">
-        Последний пункт: {formatRaceDate(last.race.date)} — {last.race.finishTime} (
-        {last.minutes.toFixed(1)} мин)
+          Последний: {formatRaceDate(last.race.date)} · {last.race.finishTime} · {last.minutes.toFixed(1)} мин
        </p>
+        <p className="pace-chart__caption pace-chart__caption--best">
+          Лучший: {formatRaceDate(best.race.date)} · {best.race.finishTime} · {best.minutes.toFixed(1)} мин
+        </p>
+      </div>
    </div>
  );
 }
--- a/frontend/src/components/RacesCalendar.tsx
+++ b/frontend/src/components/RacesCalendar.tsx
@@ -120,7 +120,7 @@ function CalendarMonthBlock(props: {
              className={`races-cal__cell${hasRaces ? " races-cal__cell--has-race" : ""}${isOpen ? " races-cal__cell--open" : ""}`}
              onMouseEnter={() => {
                cancelClose();
-                setOpenYmd(ymd);
+                setOpenYmd(hasRaces ? ymd : null);
              }}
              onMouseLeave={scheduleClose}
            >
@@ -132,7 +132,7 @@ function CalendarMonthBlock(props: {
                }}
                onFocus={() => {
                  cancelClose();
-                  setOpenYmd(ymd);
+                  setOpenYmd(hasRaces ? ymd : null);
                }}
                onBlur={(e) => {
                  const next = e.relatedTarget as Node | null;
@@ -144,7 +144,7 @@ function CalendarMonthBlock(props: {
              >
                {day}
              </button>
-              {isOpen ? (
+              {isOpen && hasRaces ? (
                <DayPopover
                  ymd={ymd}
                  races={dayRaces}
@@ -187,7 +187,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {

  return (
    <div className="races-cal">
-      <p className="races-cal__hint">Наведите на дату — краткая информация. Клик — страница дня.</p>
+      <p className="races-cal__hint">Наведите на дату с забегом — краткая информация. Клик — страница дня.</p>
      {focusedMonthIndex === null || Number.isNaN(focusedMonthIndex) ? (
        <div className="races-cal__year">
          {MONTH_NAMES_RU_SHORT.map((_, mi) => (
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -1,3 +1,4 @@
+export { DatePickerField } from "./DatePickerField";
 export { PaceTrendChart } from "./PaceTrendChart";
 export { RacesCalendar } from "./RacesCalendar";
 export { StartTimeSelects } from "./StartTimeSelects";
--- a/frontend/src/lib/calendarUtils.ts
+++ b/frontend/src/lib/calendarUtils.ts
@@ -2,16 +2,20 @@ import type { Race } from "../api";

 export const WEEKDAY_LABELS_SHORT_RU: string[] = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];

-/** Monday-based week: Mon=0 … Sun=6 */
+/** Monday-based week: Mon=0 ... Sun=6 */
+function mondayIndexFromJsDay(jsDay: number): number {
+  return (jsDay + 6) % 7;
+}
+
+/** Monday-based week: Mon=0 ... Sun=6 */
 export function mondayIndexFromDate(d: Date): number {
-  return (d.getDay() + 6) % 7;
+  return mondayIndexFromJsDay(d.getDay());
 }

 /** Grid cells for one month: `null` = empty, `1..31` = day of month. Padded to full weeks, at least 6 rows. */
 export function buildMonthCells(year: number, monthIndex: number): (number | null)[] {
-  const first = new Date(year, monthIndex, 1);
-  const lead = mondayIndexFromDate(first);
-  const dim = new Date(year, monthIndex + 1, 0).getDate();
+  const lead = mondayIndexFromJsDay(new Date(Date.UTC(year, monthIndex, 1)).getUTCDay());
+  const dim = new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
  const cells: (number | null)[] = [];
  for (let i = 0; i < lead; i += 1) {
    cells.push(null);
--- a/frontend/src/lib/index.ts
+++ b/frontend/src/lib/index.ts
@@ -16,3 +16,5 @@ export {
 } from "./raceMetrics";

 export { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "./calendarUtils";
+export { getRaceVisual } from "./raceVisuals";
+export type { RaceVisualVariant } from "./raceVisuals";
--- a/frontend/src/lib/raceVisuals.ts
+++ b/frontend/src/lib/raceVisuals.ts
@@ -0,0 +1,206 @@
+import type { Race } from "../api";
+
+export type RaceVisualVariant = "short" | "half" | "marathon" | "trail" | "night";
+export type RaceVisualFit = "cover" | "contain";
+
+interface RaceVisual {
+  variant: RaceVisualVariant;
+  imageSrc: string;
+  fallbackSrc: string;
+  imageFit: RaceVisualFit;
+  label: string;
+}
+
+interface OfficialRaceVisual {
+  keywords: string[];
+  imageSrc: string;
+  imageFit?: RaceVisualFit;
+  label: string;
+}
+
+const FALLBACK_VISUALS: Record<RaceVisualVariant, RaceVisual> = {
+  short: {
+    variant: "short",
+    imageSrc: "/images/race-short.png",
+    fallbackSrc: "/images/race-short.png",
+    imageFit: "cover",
+    label: "Городской темп",
+  },
+  half: {
+    variant: "half",
+    imageSrc: "/images/race-half.png",
+    fallbackSrc: "/images/race-half.png",
+    imageFit: "cover",
+    label: "Полумарафон",
+  },
+  marathon: {
+    variant: "marathon",
+    imageSrc: "/images/race-marathon.png",
+    fallbackSrc: "/images/race-marathon.png",
+    imageFit: "cover",
+    label: "Марафон",
+  },
+  trail: {
+    variant: "trail",
+    imageSrc: "/images/race-trail.png",
+    fallbackSrc: "/images/race-trail.png",
+    imageFit: "cover",
+    label: "Трейл",
+  },
+  night: {
+    variant: "night",
+    imageSrc: "/images/race-night.png",
+    fallbackSrc: "/images/race-night.png",
+    imageFit: "cover",
+    label: "Ночной старт",
+  },
+};
+
+const OFFICIAL_VISUALS: OfficialRaceVisual[] = [
+  {
+    keywords: ["забег апрель"],
+    imageSrc: "https://aprilrun5km.runc.run/uploads/page_card_photos/AprilRun_photo_1.jpg",
+    label: "Забег Апрель",
+  },
+  {
+    keywords: ["быстрый пес"],
+    imageSrc: "https://fastdogxc.runc.run/uploads/page_card_photos/Dog_spring_2026-5.jpg",
+    label: "Кросс",
+  },
+  {
+    keywords: ["лисья гора"],
+    imageSrc: "https://foxhillxc.runc.run/uploads/page_card_photos/Fox_Spring_2026-0.jpg",
+    label: "Кросс",
+  },
+  {
+    keywords: ["казанский марафон"],
+    imageSrc: "https://static.tildacdn.com/tild3961-6436-4462-b738-356665613039/Frame_2131327895.png",
+    imageFit: "contain",
+    label: "Казанский марафон",
+  },
+  {
+    keywords: ["мышкинский полумарафон", "по шести холмам"],
+    imageSrc: "https://static.tildacdn.com/tild6133-6137-4865-b166-623532313531/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["забег.рф", "забег рф"],
+    imageSrc: "https://xn--80acghh.xn--p1ai/zabeg.jpg",
+    label: "ЗаБег.РФ",
+  },
+  {
+    keywords: ["переславский марафон", "александровские версты"],
+    imageSrc: "https://static.tildacdn.com/tild6432-3338-4533-b262-633339353335/photo_1.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["красочный забег"],
+    imageSrc: "https://colorrun5km.runc.run/uploads/page_card_photos/ColorRun2026-1.jpg",
+    label: "Красочный забег",
+  },
+  {
+    keywords: ["здорово кострома", "здорово, кострома"],
+    imageSrc: "https://static.tildacdn.com/tild6139-3539-4661-b232-386230336431/kostroma.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ночной забег москва"],
+    imageSrc: "https://nightrun10km.runc.run/uploads/page_card_photos/NightRun_2026-9.jpg",
+    label: "Ночной забег",
+  },
+  {
+    keywords: ["белые ночи"],
+    imageSrc: "https://wnmarathon.runc.run/uploads/page_card_photos/WN_photo_01.jpg",
+    label: "Белые ночи",
+  },
+  {
+    keywords: ["сергиевым путем", "сергиевым путём"],
+    imageSrc: "https://static.tildacdn.com/tild6236-3466-4239-b666-393061326338/serg.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ночной забег нижний новгород"],
+    imageSrc: "https://rrweb.russiarunning.com/-x740/generalimages/0531a1b8-3876-4620-8961-2fa374e474e5.png",
+    imageFit: "contain",
+    label: "Ночной забег",
+  },
+  {
+    keywords: ["suvorov extreme"],
+    imageSrc: "https://goldenultra.ru/grut/files/photos/100.jpg",
+    label: "Трейл",
+  },
+  {
+    keywords: ["рыбинский полумарафон", "великий хлебный путь"],
+    imageSrc: "https://static.tildacdn.com/tild6130-3230-4332-b932-366166366633/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ярославский полумарафон", "золотое кольцо"],
+    imageSrc: "https://static.tildacdn.com/tild6331-6333-4635-b635-376262373361/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["моя столица"],
+    imageSrc: "https://static.tildacdn.com/tild3263-3036-4639-b830-653365663832/-min.jpg",
+    imageFit: "contain",
+    label: "Моя столица",
+  },
+];
+
+function normalizeTitle(value: string): string {
+  return value
+    .toLowerCase()
+    .replaceAll("ё", "е")
+    .replace(/[«»|]/g, " ")
+    .replace(/[^\p{L}\p{N}.&]+/gu, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function getFallbackRaceVisual(race: Race): RaceVisual {
+  const title = normalizeTitle(race.title);
+
+  if (title.includes("ночной")) {
+    return FALLBACK_VISUALS.night;
+  }
+
+  if (
+    title.includes("trail") ||
+    title.includes("extreme") ||
+    title.includes("suvorov") ||
+    title.includes("трейл") ||
+    title.includes("экстрим")
+  ) {
+    return FALLBACK_VISUALS.trail;
+  }
+
+  if (Math.abs(race.distanceKm - 42.2) < 0.8) {
+    return FALLBACK_VISUALS.marathon;
+  }
+
+  if (Math.abs(race.distanceKm - 21.1) < 0.4) {
+    return FALLBACK_VISUALS.half;
+  }
+
+  return FALLBACK_VISUALS.short;
+}
+
+export function getRaceVisual(race: Race): RaceVisual {
+  const fallback = getFallbackRaceVisual(race);
+  const title = normalizeTitle(race.title);
+  const official = OFFICIAL_VISUALS.find((visual) =>
+    visual.keywords.some((keyword) => title.includes(normalizeTitle(keyword))),
+  );
+
+  if (!official) {
+    return fallback;
+  }
+
+  return {
+    ...fallback,
+    imageSrc: official.imageSrc,
+    fallbackSrc: fallback.imageSrc,
+    imageFit: official.imageFit ?? fallback.imageFit,
+    label: official.label,
+  };
+}
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import type { Race } from "../api";
 import { ApiError, getRaces } from "../api";
 import { PaceTrendChart } from "../components";
@@ -61,26 +62,14 @@ export function DashboardPage(): JSX.Element {

  const dashboardMetrics = useMemo(() => {
    const { upcoming, past } = splitRacesByDate(races);
-    const completed = races.filter((race) => race.status === "completed");

    const nextRace = upcoming[0] ?? null;
    const lastResult = past.find((race) => race.status === "completed") ?? null;

-    let personalRecord: Race | null = null;
-    let personalRecordSeconds = Number.POSITIVE_INFINITY;
-
-    for (const race of completed) {
-      const finishSeconds = parseFinishTimeToSeconds(race.finishTime);
-      if (!finishSeconds) {
-        continue;
-      }
-
-      const candidate = finishSeconds / race.distanceKm;
-      if (candidate < personalRecordSeconds) {
-        personalRecordSeconds = candidate;
-        personalRecord = race;
-      }
-    }
+    const lastPersonalRecord =
+      past.find(
+        (race) => race.status === "completed" && parseFinishTimeToSeconds(race.finishTime) !== null,
+      ) ?? null;

    const currentYear = new Date().getFullYear();
    const seasonRaces = races.filter((race) => parseRaceDate(race.date).getFullYear() === currentYear);
@@ -89,7 +78,7 @@ export function DashboardPage(): JSX.Element {
    return {
      nextRace,
      lastResult,
-      personalRecord,
+      lastPersonalRecord,
      seasonTotal: seasonRaces.length,
      seasonCompletedCount: seasonCompleted.length,
    };
@@ -143,6 +132,11 @@ export function DashboardPage(): JSX.Element {
      .sort((left, right) => right.year - left.year || left.title.localeCompare(right.title, "ru-RU"));
  }, [races]);

+  const seasonProgress =
+    dashboardMetrics.seasonTotal > 0
+      ? Math.round((dashboardMetrics.seasonCompletedCount / dashboardMetrics.seasonTotal) * 100)
+      : 0;
+
  if (isLoading) {
    return (
      <section className="page page--dashboard" aria-busy="true">
@@ -163,60 +157,125 @@ export function DashboardPage(): JSX.Element {

  return (
    <section className="page page--dashboard">
-      <h1 className="page__title">Обзор</h1>
-      <p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
+      <section className="dashboard-hero" aria-label="Обзор сезона">
+        <div className="dashboard-hero__content">
+          <p className="dashboard-hero__eyebrow">Календарь сезона</p>
+          <h1 className="dashboard-hero__title">Беговой штаб</h1>
+          <p className="dashboard-hero__text">
+            Планируйте старты, держите фокус на ближайшей гонке и сравнивайте прогресс по дистанциям.
+          </p>
+          <div className="dashboard-hero__actions">
+            <Link className="btn btn--primary" to="/races">
+              Смотреть старты
+            </Link>
+            <Link className="btn btn--secondary dashboard-hero__secondary" to="/races/new">
+              Добавить старт
+            </Link>
+          </div>
+        </div>
+        <div className="dashboard-hero__panel">
+          <p className="dashboard-hero__panel-label">Ближайший старт</p>
+          {dashboardMetrics.nextRace ? (
+            <Link className="dashboard-hero__race-link" to={`/races/${dashboardMetrics.nextRace.id}`}>
+              <span className="dashboard-hero__race-title">{dashboardMetrics.nextRace.title}</span>
+              <span className="dashboard-hero__race-meta">
+                {formatRaceDate(dashboardMetrics.nextRace.date)} · {formatDistance(dashboardMetrics.nextRace.distanceKm)}
+              </span>
+              <span className="dashboard-hero__race-countdown">
+                {getRaceCountdownLabel(dashboardMetrics.nextRace.date)}
+              </span>
+            </Link>
+          ) : (
+            <p className="dashboard-hero__empty">Запланируйте первый старт сезона.</p>
+          )}
+        </div>
+      </section>

      <div className="dashboard-grid" aria-label="Ключевые метрики">
-        <article className="dashboard-card">
-          <h2 className="dashboard-card__title">Ближайший старт</h2>
+        <article
+          className={`dashboard-card dashboard-card--accent-blue${dashboardMetrics.nextRace ? " dashboard-card--linked" : ""}`}
+        >
          {dashboardMetrics.nextRace ? (
-            <>
+            <Link
+              className="dashboard-card__link-surface"
+              to={`/races/${dashboardMetrics.nextRace.id}`}
+              aria-label={`Ближайший старт: ${dashboardMetrics.nextRace.title}`}
+            >
+              <h2 className="dashboard-card__title">Ближайший старт</h2>
              <p className="dashboard-card__value">{dashboardMetrics.nextRace.title}</p>
              <p className="dashboard-card__meta">
-                {formatRaceDate(dashboardMetrics.nextRace.date)} · {formatDistance(dashboardMetrics.nextRace.distanceKm)}
+                {formatRaceDate(dashboardMetrics.nextRace.date)} ·{" "}
+                {formatDistance(dashboardMetrics.nextRace.distanceKm)}
              </p>
              <p className="dashboard-card__hint">{getRaceCountdownLabel(dashboardMetrics.nextRace.date)}</p>
-            </>
+            </Link>
          ) : (
+            <>
+              <h2 className="dashboard-card__title">Ближайший старт</h2>
              <p className="dashboard-card__empty">Нет запланированных стартов.</p>
+            </>
          )}
        </article>

-        <article className="dashboard-card">
-          <h2 className="dashboard-card__title">Последний результат</h2>
+        <article
+          className={`dashboard-card dashboard-card--accent-coral${dashboardMetrics.lastResult ? " dashboard-card--linked" : ""}`}
+        >
          {dashboardMetrics.lastResult ? (
-            <>
+            <Link
+              className="dashboard-card__link-surface"
+              to={`/races/${dashboardMetrics.lastResult.id}`}
+              aria-label={`Последний результат: ${dashboardMetrics.lastResult.title}`}
+            >
+              <h2 className="dashboard-card__title">Последний результат</h2>
              <p className="dashboard-card__value">{dashboardMetrics.lastResult.finishTime ?? "время не указано"}</p>
              <p className="dashboard-card__meta">
                {dashboardMetrics.lastResult.title} · {formatDistance(dashboardMetrics.lastResult.distanceKm)}
              </p>
              <p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastResult.date)}</p>
-            </>
+            </Link>
          ) : (
-            <p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
-          )}
-        </article>
-
-        <article className="dashboard-card">
-          <h2 className="dashboard-card__title">Личный рекорд</h2>
-          {dashboardMetrics.personalRecord ? (
            <>
-              <p className="dashboard-card__value">{dashboardMetrics.personalRecord.finishTime ?? "время не указано"}</p>
-              <p className="dashboard-card__meta">
-                {dashboardMetrics.personalRecord.title} · {formatDistance(dashboardMetrics.personalRecord.distanceKm)}
-              </p>
-              <p className="dashboard-card__hint">Лучший темп среди завершённых стартов.</p>
+              <h2 className="dashboard-card__title">Последний результат</h2>
+              <p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
            </>
-          ) : (
-            <p className="dashboard-card__empty">Недостаточно данных для личного рекорда.</p>
          )}
        </article>

-        <article className="dashboard-card">
+        <article
+          className={`dashboard-card dashboard-card--accent-lime${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
+        >
+          {dashboardMetrics.lastPersonalRecord ? (
+            <Link
+              className="dashboard-card__link-surface"
+              to={`/races/${dashboardMetrics.lastPersonalRecord.id}`}
+              aria-label={`Последний личный рекорд: ${dashboardMetrics.lastPersonalRecord.title}`}
+            >
+              <h2 className="dashboard-card__title">Последний личный рекорд</h2>
+              <p className="dashboard-card__value">
+                {dashboardMetrics.lastPersonalRecord.finishTime ?? "время не указано"}
+              </p>
+              <p className="dashboard-card__meta">
+                {dashboardMetrics.lastPersonalRecord.title} ·{" "}
+                {formatDistance(dashboardMetrics.lastPersonalRecord.distanceKm)}
+              </p>
+              <p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastPersonalRecord.date)}</p>
+            </Link>
+          ) : (
+            <>
+              <h2 className="dashboard-card__title">Последний личный рекорд</h2>
+              <p className="dashboard-card__empty">Нет завершённых стартов с финишным временем.</p>
+            </>
+          )}
+        </article>
+
+        <article className="dashboard-card dashboard-card--season dashboard-card--accent-violet">
          <h2 className="dashboard-card__title">Сезон</h2>
          <p className="dashboard-card__value">{dashboardMetrics.seasonTotal}</p>
          <p className="dashboard-card__meta">стартов в этом году</p>
          <p className="dashboard-card__hint">Завершено: {dashboardMetrics.seasonCompletedCount}</p>
+          <div className="dashboard-card__progress" aria-label={`Сезон завершен на ${seasonProgress}%`}>
+            <span style={{ width: `${seasonProgress}%` }} />
+          </div>
        </article>
      </div>

--- a/frontend/src/pages/RaceDayPage.tsx
+++ b/frontend/src/pages/RaceDayPage.tsx
@@ -2,7 +2,14 @@ import { useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import type { Race } from "../api";
 import { ApiError, getRaces } from "../api";
-import { formatDistance, formatRaceDate, getRaceStatusClassName, getRaceStatusLabel, sortByDateAsc } from "../lib";
+import {
+  formatDistance,
+  formatRaceDate,
+  getRaceStatusClassName,
+  getRaceStatusLabel,
+  getRaceVisual,
+  sortByDateAsc,
+} from "../lib";

 function getErrorMessage(error: unknown): string {
  if (error instanceof ApiError) {
@@ -70,24 +77,33 @@ export function RaceDayPage(): JSX.Element {
  if (!validYmd) {
    return (
      <section className="page page--race-day">
+        <div className="race-day-hero">
+          <p className="race-day-hero__eyebrow">Страница дня</p>
          <h1 className="page__title">Некорректная дата</h1>
-        <p className="page__subtitle">
          <Link className="page-link" to="/races">
            Вернуться к календарю стартов
          </Link>
-        </p>
+        </div>
      </section>
    );
  }

  return (
    <section className="page page--race-day">
-      <p className="page__subtitle">
+      <section className="race-day-hero" aria-label="Старты дня">
        <Link className="page-link" to="/races">
          ← Календарь стартов
        </Link>
-      </p>
+        <p className="race-day-hero__eyebrow">Старты дня</p>
        <h1 className="page__title">{heading}</h1>
+        <p className="page__subtitle">
+          {isLoading
+            ? "Загружаем расписание..."
+            : races.length > 0
+              ? `Запланировано стартов: ${races.length}`
+              : "Проверьте расписание или добавьте старт на эту дату."}
+        </p>
+      </section>

      {errorMessage ? (
        <p className="page__subtitle page__subtitle--error" role="alert">
@@ -107,19 +123,40 @@ export function RaceDayPage(): JSX.Element {

      {!isLoading && races.length > 0 ? (
        <ul className="race-day__list">
-          {races.map((race) => (
+          {races.map((race) => {
+            const visual = getRaceVisual(race);
+
+            return (
              <li key={race.id} className="race-day__item">
                <Link className="race-day__link" to={`/races/${race.id}`}>
-                {race.title}
-              </Link>
+                  <img
+                    className={`race-day__image${
+                      visual.imageFit === "contain" ? " race-day__image--contain" : ""
+                    }`}
+                    src={visual.imageSrc}
+                    alt=""
+                    loading="lazy"
+                    referrerPolicy="no-referrer"
+                    onError={(event) => {
+                      event.currentTarget.onerror = null;
+                      event.currentTarget.classList.remove("race-day__image--contain");
+                      event.currentTarget.src = visual.fallbackSrc;
+                    }}
+                  />
+                  <span className="race-day__body">
+                    <span className="race-day__kicker">{visual.label}</span>
+                    <span className="race-day__title">{race.title}</span>
                    <span className="race-day__meta">
                      {formatDistance(race.distanceKm)} ·{" "}
                      <span className={getRaceStatusClassName(race.status, race.date)}>
                        {getRaceStatusLabel(race.status, race.date)}
                      </span>
                    </span>
+                  </span>
+                </Link>
              </li>
-          ))}
+            );
+          })}
        </ul>
      ) : null}

--- a/frontend/src/pages/RaceDetailsPage.tsx
+++ b/frontend/src/pages/RaceDetailsPage.tsx
@@ -7,6 +7,7 @@ import {
  getPaceLabel,
  getRaceStatusClassName,
  getRaceStatusLabel,
+  getRaceVisual,
  raceNeedsResultEntry,
 } from "../lib";
 import type { Race } from "../api";
@@ -139,18 +140,40 @@ export function RaceDetailsPage(): JSX.Element {
  }

  const isCompleted = race.status === "completed";
+  const visual = getRaceVisual(race);

  return (
    <section className="page page--race-details">
-      <div className="race-details-header">
-        <div className="race-details-header__main">
+      <section className={`race-details-hero race-details-hero--${visual.variant}`} aria-label="Карточка старта">
+        <img
+          className={`race-details-hero__image${
+            visual.imageFit === "contain" ? " race-details-hero__image--contain" : ""
+          }`}
+          src={visual.imageSrc}
+          alt=""
+          loading="eager"
+          referrerPolicy="no-referrer"
+          onError={(event) => {
+            event.currentTarget.onerror = null;
+            event.currentTarget.classList.remove("race-details-hero__image--contain");
+            event.currentTarget.src = visual.fallbackSrc;
+          }}
+        />
+        <div className="race-details-hero__shade" aria-hidden="true" />
+        <div className="race-details-hero__content">
+          <Link className="race-details-hero__back" to="/races">
+            ← Календарь стартов
+          </Link>
+          <p className="race-details-hero__eyebrow">{visual.label}</p>
          <h1 className="page__title">{race.title}</h1>
          <p className="page__subtitle">
            {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
          </p>
+          <span className={getRaceStatusClassName(race.status, race.date)}>
+            {getRaceStatusLabel(race.status, race.date)}
+          </span>
        </div>
-        <span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
-      </div>
+      </section>

      {raceNeedsResultEntry(race) ? (
        <p className="race-details-past-hint" role="status">
--- a/frontend/src/pages/RaceFormPage.tsx
+++ b/frontend/src/pages/RaceFormPage.tsx
@@ -2,8 +2,8 @@ import { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { ApiError, createRace, getRaceById, updateRace } from "../api";
 import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
-import { StartTimeSelects } from "../components/StartTimeSelects";
-import { isRaceDateInPast } from "../lib";
+import { DatePickerField, StartTimeSelects } from "../components";
+import { isRaceDateInPast, parseFinishTimeToSeconds } from "../lib";

 function slugify(text: string): string {
  return text
@@ -151,7 +151,16 @@ export function RaceFormPage(): JSX.Element {
  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
      const { name, value } = event.target;
-      setForm((prev) => ({ ...prev, [name]: value }));
+      setForm((prev) => {
+        const next = { ...prev, [name]: value };
+        if (name === "finishTime") {
+          const trimmed = value.trim();
+          if (trimmed !== "" && parseFinishTimeToSeconds(trimmed) !== null) {
+            return { ...next, status: "completed" };
+          }
+        }
+        return next;
+      });
    },
    [],
  );
@@ -170,10 +179,16 @@ export function RaceFormPage(): JSX.Element {
      setIsSaving(true);

      try {
-        const statusValue: RaceStatus | null =
+        const finishTrimmed = form.finishTime.trim();
+        const hasParsedFinish =
+          finishTrimmed !== "" && parseFinishTimeToSeconds(finishTrimmed) !== null;
+        let statusValue: RaceStatus | null =
          form.status === "planned" || form.status === "registered" || form.status === "completed"
            ? form.status
            : null;
+        if (hasParsedFinish) {
+          statusValue = "completed";
+        }

        if (isEditMode && raceId) {
          const payload: UpdateRacePayload = {
@@ -259,17 +274,17 @@ export function RaceFormPage(): JSX.Element {
        <fieldset className="race-form__group">
          <legend className="race-form__legend">Основная информация</legend>

-          <label className="race-form__field">
+          <div className="race-form__field">
            <span className="race-form__label">Дата *</span>
-            <input
-              className="race-form__input"
-              type="date"
+            <DatePickerField
              name="date"
              value={form.date}
-              onChange={handleChange}
+              onChange={(next) => {
+                setForm((prev) => ({ ...prev, date: next }));
+              }}
              required
            />
-          </label>
+          </div>

          <label className="race-form__field">
            <span className="race-form__label">Название *</span>
--- a/frontend/src/pages/RacesPage.tsx
+++ b/frontend/src/pages/RacesPage.tsx
@@ -6,9 +6,10 @@ import { RacesCalendar } from "../components/RacesCalendar";
 import {
  formatDistance,
  formatRaceDate,
+  getRaceVisual,
  getRaceStatusClassName,
  getRaceStatusLabel,
-  raceNeedsResultEntry,
+  parseRaceDate,
  splitRacesByDate,
 } from "../lib";

@@ -68,16 +69,41 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
      {races.length > 0 ? (
        <ul className="race-list__items">
          {races.map((race) => {
-            const needsResult = raceNeedsResultEntry(race);
-            if (needsResult) {
+            const visual = getRaceVisual(race);
+            const parsedDate = parseRaceDate(race.date);
+            const day = parsedDate.toLocaleDateString("ru-RU", { day: "2-digit" });
+            const month = parsedDate.toLocaleDateString("ru-RU", { month: "short" });
+
            return (
-                <li key={race.id} className="race-card race-card--action">
+              <li key={race.id} className={`race-card race-card--action race-card--poster race-card--${visual.variant}`}>
                <Link
                  className="race-card__link-surface"
-                    to={`/races/${race.id}/edit`}
-                    aria-label={`${race.title}, внести результат`}
+                  to={`/races/${race.id}`}
+                  aria-label={`Старт: ${race.title}`}
                >
+                  <div className="race-card__image-wrap">
+                    <img
+                      className={`race-card__image${
+                        visual.imageFit === "contain" ? " race-card__image--contain" : ""
+                      }`}
+                      src={visual.imageSrc}
+                      alt=""
+                      loading="lazy"
+                      referrerPolicy="no-referrer"
+                      onError={(event) => {
+                        event.currentTarget.onerror = null;
+                        event.currentTarget.classList.remove("race-card__image--contain");
+                        event.currentTarget.src = visual.fallbackSrc;
+                      }}
+                    />
+                    <span className="race-card__date-badge">
+                      <span>{day}</span>
+                      <span>{month}</span>
+                    </span>
+                  </div>
+                  <div className="race-card__content">
                    <div className="race-card__main">
+                      <p className="race-card__kicker">{visual.label}</p>
                      <p className="race-card__title">
                        <span className="race-card__title-text">{race.title}</span>
                      </p>
@@ -85,28 +111,14 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
                        {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
                      </p>
                    </div>
+                    <div className="race-card__footer">
                      <span className={getRaceStatusClassName(race.status, race.date)}>
                        {getRaceStatusLabel(race.status, race.date)}
                      </span>
-                  </Link>
-                </li>
-              );
-            }
-            return (
-              <li key={race.id} className="race-card">
-                <div className="race-card__main">
-                  <p className="race-card__title">
-                    <Link className="race-card__link" to={`/races/${race.id}`}>
-                      {race.title}
-                    </Link>
-                  </p>
-                  <p className="race-card__meta">
-                    {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
-                  </p>
+                      <span className="race-card__cta">Открыть</span>
                    </div>
-                <span className={getRaceStatusClassName(race.status, race.date)}>
-                  {getRaceStatusLabel(race.status, race.date)}
-                </span>
+                  </div>
+                </Link>
              </li>
            );
          })}
@@ -221,9 +233,11 @@ export function RacesPage(): JSX.Element {

  return (
    <section className="page page--races">
+      <section className="races-hero" aria-label="Календарь стартов">
+        <div className="races-hero__content">
+          <p className="races-hero__eyebrow">Сезонная афиша</p>
          <h1 className="page__title">Календарь стартов</h1>
          <p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
-
          <div className="races-view-toggle" role="group" aria-label="Вид отображения">
            <button
              type="button"
@@ -240,13 +254,8 @@ export function RacesPage(): JSX.Element {
              Календарь
            </button>
          </div>
-
-      {errorMessage && !isLoading ? (
-        <p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
-          {errorMessage}
-        </p>
-      ) : null}
-
+        </div>
+        <div className="races-hero__filters">
          <div className="races-filter" role="search" aria-label="Фильтр по дате">
            <label className="races-filter__field">
              <span className="races-filter__label">Год</span>
@@ -282,6 +291,14 @@ export function RacesPage(): JSX.Element {
              </select>
            </label>
          </div>
+        </div>
+      </section>
+
+      {errorMessage && !isLoading ? (
+        <p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
+          {errorMessage}
+        </p>
+      ) : null}

      {viewMode === "calendar" && monthFilter === "" ? (
        <p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -1,20 +1,26 @@
 :root {
-  --color-bg: #f3f5f7;
+  --color-bg: #edf3f6;
+  --color-bg-deep: #071927;
  --color-surface: #ffffff;
-  --color-text: #13202b;
-  --color-text-muted: #5d6b77;
-  --color-accent: #1f7ae0;
-  --color-border: #dce2e8;
-  --color-success: #2f9e63;
-  --color-warning: #c0821f;
-  --color-error: #cc3a3a;
+  --color-surface-soft: #f7fafc;
+  --color-text: #0e1f2d;
+  --color-text-muted: #647483;
+  --color-accent: #1168d8;
+  --color-accent-strong: #0c48a0;
+  --color-lime: #b9f24a;
+  --color-coral: #ff6f5e;
+  --color-violet: #6d5dfc;
+  --color-border: #d6e1ea;
+  --color-success: #168657;
+  --color-warning: #b77716;
+  --color-error: #c43333;

  --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
-  --font-size-h1: 2rem;
-  --font-size-h2: 1.5rem;
+  --font-size-h1: 2.35rem;
+  --font-size-h2: 1.35rem;
  --font-size-body: 1rem;
  --font-size-caption: 0.875rem;
-  --line-height-base: 1.5;
+  --line-height-base: 1.45;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
@@ -25,8 +31,10 @@
  --space-8: 2rem;

  --radius-sm: 0.375rem;
-  --radius-md: 0.75rem;
-  --radius-lg: 1rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.75rem;

-  --shadow-card-lift: 0 6px 20px rgba(19, 32, 43, 0.12);
+  --shadow-card: 0 10px 30px rgba(14, 31, 45, 0.08);
+  --shadow-card-lift: 0 16px 34px rgba(14, 31, 45, 0.16);
+  --shadow-hero: 0 22px 60px rgba(7, 25, 39, 0.24);
 }
Author	SHA1	Message	Date
Anton	0da7454033	feat(frontend): redesign race dashboard Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-04-22 11:47:37 +03:00
admin	7b0267f9ac	Merge pull request 'fix(frontend): hide calendar popups on empty dates' (#25 ) from fix/calendar-hide-popover-empty-days into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #25	2026-04-13 19:59:16 +00:00
Vaka.pro	a581ffaaff	fix(frontend): hide calendar popups on empty dates Some checks failed CI / build-and-test (pull_request) Has been cancelled Details Keep race popovers limited to dates with events so empty days no longer show misleading hover details. Made-with: Cursor	2026-04-13 22:58:36 +03:00
admin	429a2924d7	Merge pull request 'fix(frontend): animate full race list row on hover (li, not inner link)' (#24 ) from fix/race-list-card-hover into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #24	2026-04-13 19:51:07 +00:00
Vaka.pro	afb0f7ef31	fix(frontend): animate full race list row on hover (li, not inner link) Some checks failed CI / build-and-test (pull_request) Has been cancelled Details Move scale/shadow transition to .race-card--action; keyboard focus ring on link. Version 0.4.2. Made-with: Cursor	2026-04-13 22:47:06 +03:00
admin	92c2360feb	Merge pull request 'fix(frontend): auto-completed on finish time, dashboard links, list/calendar UX' (#23 ) from fix/dashboard-form-races-ux into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #23	2026-04-13 19:36:10 +00:00
Vaka.pro	4ea8faf16f	fix(frontend): auto-completed on finish time, dashboard links, list/calendar UX Some checks failed CI / build-and-test (pull_request) Has been cancelled Details - Set status to completed when finish time parses (input + submit) - Dashboard: last personal record by recent date+time; links on top 3 cards - Hover scale+shadow on all dashboard-card; linked card padding via BEM - Race list: full row links to race detail; same hover as before - Calendar year grid: 3 columns, 2 on tablet, 1 on narrow - Version 0.4.1 Made-with: Cursor	2026-04-13 22:34:39 +03:00
admin	74f059593e	Merge pull request 'feat(frontend): race form, start time selects, calendar views, day page' (#22 ) from feat/race-ui-plan-implementation into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #22	2026-04-13 19:09:11 +00:00