Merge pull request 'feat: add mobile race list tabs' (#36) from feature/mobile-race-list-tabs into main

Reviewed-on: #36

backend/migrations/003_cover_image_url.sql

@@ -0,0 +1,2 @@
+ALTER TABLE races
+  ADD COLUMN IF NOT EXISTS cover_image_url TEXT;

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-backend",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-backend",
-      "version": "1.2.2",
+      "version": "1.3.0",
       "dependencies": {
         "cors": "^2.8.5",
         "csv-parse": "^5.6.0",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "calendar-run-backend",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "build": "tsc",

backend/src/db.ts

@@ -24,6 +24,7 @@ function mockRowFromInsert(sql: string, params: unknown[]): RaceRow {
       distance_km: "0",
       status: null,
       official_url: null,
+      cover_image_url: null,
       start_time: null,
       cluster_schedule: null,
       bib_pickup: null,
@@ -47,6 +48,7 @@ function mockRowFromInsert(sql: string, params: unknown[]): RaceRow {
     distance_km: String(row.distance_km ?? "0"),
     status: row.status != null ? String(row.status) : null,
     official_url: row.official_url != null ? String(row.official_url) : null,
+    cover_image_url: row.cover_image_url != null ? String(row.cover_image_url) : null,
     start_time: row.start_time != null ? String(row.start_time) : null,
     cluster_schedule: row.cluster_schedule != null ? String(row.cluster_schedule) : null,
     bib_pickup: row.bib_pickup != null ? String(row.bib_pickup) : null,
@@ -108,7 +110,19 @@ function createMockPool(): Pool {
       if (!existing) {
         return emptyResult();
       }
+      const setMatch = sql.match(/UPDATE races SET (.+) WHERE id =/);
       const updated = { ...existing, updated_at: new Date() };
+      const setColumns =
+        setMatch?.[1]
+          .split(",")
+          .map((part) => part.trim())
+          .filter((part) => !part.startsWith("updated_at"))
+          .map((part) => part.split("=")[0]?.trim())
+          .filter((col): col is string => Boolean(col)) ?? [];
+
+      setColumns.forEach((col, index) => {
+        (updated as unknown as Record<string, unknown>)[col] = p[index] ?? null;
+      });
       store.set(id, updated);
       return {
         rows: [updated as unknown as T],

backend/src/mappers/race.ts

@@ -9,6 +9,7 @@ export interface RaceRow {
   distance_km: string;
   status: string | null;
   official_url: string | null;
+  cover_image_url: string | null;
   start_time: string | null;
   cluster_schedule: string | null;
   bib_pickup: string | null;
@@ -28,6 +29,7 @@ export interface RaceDto {
   distanceKm: number;
   status: string | null;
   officialUrl: string | null;
+  coverImageUrl: string | null;
   startTime: string | null;
   clusterSchedule: string | null;
   bibPickup: string | null;
@@ -64,6 +66,7 @@ export function rowToDto(row: RaceRow): RaceDto {
     distanceKm: parseFloat(row.distance_km),
     status: row.status,
     officialUrl: row.official_url,
+    coverImageUrl: row.cover_image_url ?? null,
     startTime: row.start_time,
     clusterSchedule: row.cluster_schedule,
     bibPickup: row.bib_pickup,
@@ -83,6 +86,7 @@ const FIELD_MAP: Record<string, string> = {
   distanceKm: "distance_km",
   status: "status",
   officialUrl: "official_url",
+  coverImageUrl: "cover_image_url",
   startTime: "start_time",
   clusterSchedule: "cluster_schedule",
   bibPickup: "bib_pickup",

backend/src/raceCoverImage.ts

@@ -0,0 +1,103 @@
+const IMAGE_META_KEYS = new Set([
+  "og:image",
+  "og:image:url",
+  "twitter:image",
+  "twitter:image:src",
+]);
+
+const FETCH_TIMEOUT_MS = 5_000;
+
+function getAttribute(tag: string, name: string): string | null {
+  const pattern = new RegExp(`${name}\\s*=\\s*["']([^"']+)["']`, "i");
+  return tag.match(pattern)?.[1] ?? null;
+}
+
+function toHttpUrl(value: string, baseUrl: string): string | null {
+  try {
+    const url = new URL(value, baseUrl);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+function isRuncRunUrl(value: string): boolean {
+  try {
+    const hostname = new URL(value).hostname.toLowerCase();
+    return hostname === "runc.run" || hostname.endsWith(".runc.run");
+  } catch {
+    return false;
+  }
+}
+
+function findRuncIntroImage(html: string, baseUrl: string): string | null {
+  const introMatch = html.match(/<div\b[^>]*class=["'][^"']*\brun-intro__image\b[^"']*["'][^>]*>[\s\S]*?<img\b[^>]*>/i);
+  if (!introMatch) {
+    return null;
+  }
+
+  const src = getAttribute(introMatch[0], "src");
+  return src ? toHttpUrl(src, baseUrl) : null;
+}
+
+function findMetaImage(html: string, baseUrl: string): string | null {
+  const tags = html.match(/<meta\b[^>]*>/gi) ?? [];
+
+  for (const tag of tags) {
+    const key = (getAttribute(tag, "property") || getAttribute(tag, "name") || "").toLowerCase();
+    if (!IMAGE_META_KEYS.has(key)) {
+      continue;
+    }
+
+    const content = getAttribute(tag, "content");
+    if (!content) {
+      continue;
+    }
+
+    const imageUrl = toHttpUrl(content, baseUrl);
+    if (imageUrl) {
+      return imageUrl;
+    }
+  }
+
+  return null;
+}
+
+export function extractRaceCoverImageFromHtml(html: string, pageUrl: string): string | null {
+  if (isRuncRunUrl(pageUrl)) {
+    const runcImage = findRuncIntroImage(html, pageUrl);
+    if (runcImage) {
+      return runcImage;
+    }
+  }
+
+  return findMetaImage(html, pageUrl);
+}
+
+export async function extractRaceCoverImage(officialUrl: string): Promise<string | null> {
+  const normalizedUrl = toHttpUrl(officialUrl, officialUrl);
+  if (!normalizedUrl) {
+    return null;
+  }
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+  try {
+    const response = await fetch(normalizedUrl, {
+      redirect: "follow",
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const html = await response.text();
+    return extractRaceCoverImageFromHtml(html, response.url || normalizedUrl);
+  } catch {
+    return null;
+  } finally {
+    clearTimeout(timeout);
+  }
+}

backend/src/routes/races.ts

@@ -1,6 +1,7 @@
 import { Router, Request, Response } from "express";
 import { pool } from "../db";
 import { rowToDto, bodyToColumns, RaceRow } from "../mappers/race";
+import { extractRaceCoverImage } from "../raceCoverImage";
 
 const router = Router();
 
@@ -117,7 +118,15 @@ router.post("/races", async (req: Request, res: Response) => {
     return;
   }
 
-  const { columns, values } = bodyToColumns(body);
+  const payload = { ...body };
+  const hasManualCover = typeof payload.coverImageUrl === "string" && payload.coverImageUrl.trim() !== "";
+  const hasOfficialUrl = typeof payload.officialUrl === "string" && payload.officialUrl.trim() !== "";
+
+  if (!hasManualCover && hasOfficialUrl) {
+    payload.coverImageUrl = await extractRaceCoverImage(payload.officialUrl);
+  }
+
+  const { columns, values } = bodyToColumns(payload);
   columns.unshift("id");
   values.unshift(body.id);
 

backend/test/app.test.ts

@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { test } from "node:test";
 import request from "supertest";
 import { createApp } from "../src/app";
+import { extractRaceCoverImageFromHtml } from "../src/raceCoverImage";
 
 const app = createApp();
 
@@ -45,3 +46,124 @@ test("GET /api/races/:id returns not_found", async () => {
   assert.equal(res.body.error, "not_found");
   assert.ok(Array.isArray(res.body.details));
 });
+
+test("extractRaceCoverImageFromHtml prefers runc.run intro image", () => {
+  const html = `
+    <meta property="og:image" content="https://example.com/og.jpg">
+    <div class="run-intro__image">
+      <div class="run-intro__image-left-shadow"></div>
+      <img src="/uploads/race_landing_header_backgrounds/header.jpg" alt="">
+      <div class="run-intro__image-right-shadow"></div>
+    </div>
+  `;
+
+  assert.equal(
+    extractRaceCoverImageFromHtml(html, "https://aprilrun5km.runc.run/"),
+    "https://aprilrun5km.runc.run/uploads/race_landing_header_backgrounds/header.jpg",
+  );
+});
+
+test("extractRaceCoverImageFromHtml reads Open Graph and Twitter images", () => {
+  assert.equal(
+    extractRaceCoverImageFromHtml(
+      '<meta property="og:image" content="/cover.png">',
+      "https://example.com/race",
+    ),
+    "https://example.com/cover.png",
+  );
+  assert.equal(
+    extractRaceCoverImageFromHtml(
+      '<meta name="twitter:image" content="https://cdn.example.com/twitter.jpg">',
+      "https://example.com/race",
+    ),
+    "https://cdn.example.com/twitter.jpg",
+  );
+});
+
+test("POST /api/races stores manual coverImageUrl", async () => {
+  const coverImageUrl = "https://example.com/manual.jpg";
+  const res = await request(app)
+    .post("/api/races")
+    .send({
+      id: "2026-06-01-manual-cover",
+      date: "2026-06-01",
+      title: "Manual Cover",
+      distanceKm: 10,
+      officialUrl: "https://example.com/race",
+      coverImageUrl,
+    })
+    .expect(201);
+
+  assert.equal(res.body.coverImageUrl, coverImageUrl);
+});
+
+test("POST /api/races auto extracts coverImageUrl from officialUrl", async () => {
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async () =>
+    new Response('<meta property="og:image" content="/auto.jpg">', {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+
+  try {
+    const res = await request(app)
+      .post("/api/races")
+      .send({
+        id: "2026-06-02-auto-cover",
+        date: "2026-06-02",
+        title: "Auto Cover",
+        distanceKm: 21.1,
+        officialUrl: "https://example.com/race",
+      })
+      .expect(201);
+
+    assert.equal(res.body.coverImageUrl, "https://example.com/auto.jpg");
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
+test("POST /api/races succeeds when cover extraction fails", async () => {
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async () => {
+    throw new Error("network down");
+  };
+
+  try {
+    const res = await request(app)
+      .post("/api/races")
+      .send({
+        id: "2026-06-03-cover-fail",
+        date: "2026-06-03",
+        title: "Cover Fail",
+        distanceKm: 5,
+        officialUrl: "https://example.com/race",
+      })
+      .expect(201);
+
+    assert.equal(res.body.coverImageUrl, null);
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+});
+
+test("PATCH /api/races/:id updates coverImageUrl explicitly", async () => {
+  const id = "2026-06-04-patch-cover";
+  await request(app)
+    .post("/api/races")
+    .send({
+      id,
+      date: "2026-06-04",
+      title: "Patch Cover",
+      distanceKm: 10,
+    })
+    .expect(201);
+
+  const coverImageUrl = "https://example.com/patched.jpg";
+  const res = await request(app)
+    .patch(`/api/races/${id}`)
+    .send({ coverImageUrl })
+    .expect(200);
+
+  assert.equal(res.body.coverImageUrl, coverImageUrl);
+});

docs/backend-api-for-frontend.md

@@ -81,6 +81,7 @@ GET /api/races?year=2026&month=5
     "distanceKm": 42.195,
     "status": "planned",
     "officialUrl": null,
+    "coverImageUrl": null,
     "startTime": null,
     "clusterSchedule": null,
     "bibPickup": null,
@@ -124,6 +125,7 @@ GET /api/races?year=2026&month=5
   "distanceKm": 10,
   "status": "planned",
   "officialUrl": "https://example.com",
+  "coverImageUrl": "https://example.com/cover.jpg",
   "startTime": "09:30",
   "clusterSchedule": null,
   "bibPickup": null,
@@ -167,7 +169,7 @@ GET /api/races?year=2026&month=5
 }
 ```
 
-**Допустимые поля:** `date`, `title`, `distanceKm`, `status`, `officialUrl`, `startTime`, `clusterSchedule`, `bibPickup`, `bibNumber`, `finishTime`, `finishPlace`, `notes`.
+**Допустимые поля:** `date`, `title`, `distanceKm`, `status`, `officialUrl`, `coverImageUrl`, `startTime`, `clusterSchedule`, `bibPickup`, `bibNumber`, `finishTime`, `finishPlace`, `notes`.
 
 **Ответ 200:** обновлённый объект `Race`.
 
@@ -207,6 +209,7 @@ GET /api/races?year=2026&month=5
 | `distanceKm` | number | да | да | Дистанция в км |
 | `status` | string \| null | нет | да | `"planned"` / `"registered"` / `"completed"` |
 | `officialUrl` | string \| null | нет | да | URL организатора |
+| `coverImageUrl` | string \| null | нет | да | URL обложки забега. При `POST` может быть найден автоматически по `officialUrl`, если не передан вручную |
 | `startTime` | string \| null | нет | да | Время старта, напр. `"09:30"` или `"09:30:00"` (часы:минуты:секунды) |
 | `clusterSchedule` | string \| null | нет | да | Расписание кластеров |
 | `bibPickup` | string \| null | нет | да | Выдача номеров |

frontend/index.html

@@ -2,6 +2,7 @@
 <html lang="ru">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Календарь стартов</title>
   </head>

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-frontend",
-  "version": "0.5.0",
+  "version": "0.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.5.0",
+      "version": "0.6.2",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "calendar-run-frontend",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.6.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/public/favicon.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Календарь стартов">
+  <defs>
+    <linearGradient id="bg" x1="12" y1="4" x2="52" y2="60" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1168d8" />
+      <stop offset="1" stop-color="#071927" />
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="16" fill="url(#bg)" />
+  <path
+    d="M18 20h28a5 5 0 0 1 5 5v21a5 5 0 0 1-5 5H18a5 5 0 0 1-5-5V25a5 5 0 0 1 5-5Z"
+    fill="#ffffff"
+  />
+  <path d="M13 29h38" stroke="#d6e1ea" stroke-width="4" />
+  <path d="M23 14v11M41 14v11" stroke="#b9f24a" stroke-width="5" stroke-linecap="round" />
+  <path
+    d="M22 41c5-8 13-8 18 0M22 41h18"
+    fill="none"
+    stroke="#1168d8"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <circle cx="44" cy="44" r="5" fill="#ff6f5e" />
+</svg>

frontend/src/api/races.ts

@@ -10,6 +10,10 @@ function isNullableString(value: unknown): value is string | null {
   return value === null || typeof value === "string";
 }
 
+function isOptionalNullableString(value: unknown): value is string | null | undefined {
+  return value === undefined || isNullableString(value);
+}
+
 function normalizeRace(input: unknown): Race {
   const race = input as Partial<Race>;
 
@@ -23,6 +27,7 @@ function normalizeRace(input: unknown): Race {
       race?.status === "registered" ||
       race?.status === "completed") &&
     isNullableString(race?.officialUrl) &&
+    isOptionalNullableString(race?.coverImageUrl) &&
     isNullableString(race?.startTime) &&
     isNullableString(race?.clusterSchedule) &&
     isNullableString(race?.bibPickup) &&
@@ -48,6 +53,7 @@ function normalizeRace(input: unknown): Race {
     distanceKm: race.distanceKm,
     status: race.status,
     officialUrl: race.officialUrl,
+    coverImageUrl: race.coverImageUrl ?? null,
     startTime: race.startTime,
     clusterSchedule: race.clusterSchedule,
     bibPickup: race.bibPickup,

frontend/src/api/types.ts

@@ -7,6 +7,7 @@ export interface Race {
   distanceKm: number;
   status: RaceStatus | null;
   officialUrl: string | null;
+  coverImageUrl: string | null;
   startTime: string | null;
   clusterSchedule: string | null;
   bibPickup: string | null;
@@ -30,6 +31,7 @@ export interface CreateRacePayload {
   distanceKm: number;
   status?: RaceStatus | null;
   officialUrl?: string | null;
+  coverImageUrl?: string | null;
   startTime?: string | null;
   clusterSchedule?: string | null;
   bibPickup?: string | null;

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/lib/raceVisuals.ts

@@ -21,36 +21,36 @@ interface OfficialRaceVisual {
 const FALLBACK_VISUALS: Record<RaceVisualVariant, RaceVisual> = {
   short: {
     variant: "short",
-    imageSrc: "/images/race-short.png",
+    imageSrc: "/images/race-short.jpg",
-    fallbackSrc: "/images/race-short.png",
+    fallbackSrc: "/images/race-short.jpg",
     imageFit: "cover",
     label: "Городской темп",
   },
   half: {
     variant: "half",
-    imageSrc: "/images/race-half.png",
+    imageSrc: "/images/race-half.jpg",
-    fallbackSrc: "/images/race-half.png",
+    fallbackSrc: "/images/race-half.jpg",
     imageFit: "cover",
     label: "Полумарафон",
   },
   marathon: {
     variant: "marathon",
-    imageSrc: "/images/race-marathon.png",
+    imageSrc: "/images/race-marathon.jpg",
-    fallbackSrc: "/images/race-marathon.png",
+    fallbackSrc: "/images/race-marathon.jpg",
     imageFit: "cover",
     label: "Марафон",
   },
   trail: {
     variant: "trail",
-    imageSrc: "/images/race-trail.png",
+    imageSrc: "/images/race-trail.jpg",
-    fallbackSrc: "/images/race-trail.png",
+    fallbackSrc: "/images/race-trail.jpg",
     imageFit: "cover",
     label: "Трейл",
   },
   night: {
     variant: "night",
-    imageSrc: "/images/race-night.png",
+    imageSrc: "/images/race-night.jpg",
-    fallbackSrc: "/images/race-night.png",
+    fallbackSrc: "/images/race-night.jpg",
     imageFit: "cover",
     label: "Ночной старт",
   },
@@ -187,6 +187,15 @@ function getFallbackRaceVisual(race: Race): RaceVisual {
 
 export function getRaceVisual(race: Race): RaceVisual {
   const fallback = getFallbackRaceVisual(race);
+
+  if (race.coverImageUrl) {
+    return {
+      ...fallback,
+      imageSrc: race.coverImageUrl,
+      fallbackSrc: fallback.imageSrc,
+    };
+  }
+
   const title = normalizeTitle(race.title);
   const official = OFFICIAL_VISUALS.find((visual) =>
     visual.keywords.some((keyword) => title.includes(normalizeTitle(keyword))),

frontend/src/pages/DashboardPage.tsx

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import type { Race } from "../api";
@@ -7,6 +8,7 @@ import {
   formatDistance,
   formatRaceDate,
   getRaceCountdownLabel,
+  getRaceVisual,
   getPaceLabel,
   isCloseDistance,
   parseFinishTimeToSeconds,
@@ -16,6 +18,10 @@ import {
 
 const PR_DISTANCES = [5, 10, 21.1, 42.2] as const;
 
+type DashboardHeroStyle = CSSProperties & {
+  "--dashboard-hero-image"?: string;
+};
+
 function getErrorMessage(error: unknown): string {
   if (error instanceof ApiError) {
     return error.message;
@@ -23,6 +29,10 @@ function getErrorMessage(error: unknown): string {
   return "Не удалось загрузить данные обзора.";
 }
 
+function toCssUrl(value: string): string {
+  return `url(${JSON.stringify(value)})`;
+}
+
 export function DashboardPage(): JSX.Element {
   const [races, setRaces] = useState<Race[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -136,6 +146,10 @@ export function DashboardPage(): JSX.Element {
     dashboardMetrics.seasonTotal > 0
       ? Math.round((dashboardMetrics.seasonCompletedCount / dashboardMetrics.seasonTotal) * 100)
       : 0;
+  const dashboardHeroVisual = dashboardMetrics.nextRace ? getRaceVisual(dashboardMetrics.nextRace) : null;
+  const dashboardHeroStyle: DashboardHeroStyle | undefined = dashboardHeroVisual
+    ? { "--dashboard-hero-image": toCssUrl(dashboardHeroVisual.imageSrc) }
+    : undefined;
 
   if (isLoading) {
     return (
@@ -157,7 +171,11 @@ export function DashboardPage(): JSX.Element {
 
   return (
     <section className="page page--dashboard">
-      <section className="dashboard-hero" aria-label="Обзор сезона">
+      <section
+        className={`dashboard-hero${dashboardHeroVisual ? " dashboard-hero--with-image" : ""}`}
+        style={dashboardHeroStyle}
+        aria-label="Обзор сезона"
+      >
         <div className="dashboard-hero__content">
           <p className="dashboard-hero__eyebrow">Календарь сезона</p>
           <h1 className="dashboard-hero__title">Беговой штаб</h1>

frontend/src/pages/RaceFormPage.tsx

@@ -31,6 +31,7 @@ interface FormData {
   distanceKm: string;
   status: string;
   officialUrl: string;
+  coverImageUrl: string;
   startTime: string;
   clusterSchedule: string;
   bibPickup: string;
@@ -46,6 +47,7 @@ const EMPTY_FORM: FormData = {
   distanceKm: "",
   status: "planned",
   officialUrl: "",
+  coverImageUrl: "",
   startTime: "",
   clusterSchedule: "",
   bibPickup: "",
@@ -63,6 +65,7 @@ function raceToFormData(race: Race): FormData {
     distanceKm: String(race.distanceKm),
     status: race.status ?? "",
     officialUrl: race.officialUrl ?? "",
+    coverImageUrl: race.coverImageUrl ?? "",
     startTime: race.startTime ?? "",
     clusterSchedule: race.clusterSchedule ?? "",
     bibPickup: race.bibPickup ?? "",
@@ -93,6 +96,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();
@@ -197,6 +211,7 @@ export function RaceFormPage(): JSX.Element {
             distanceKm: parseFloat(form.distanceKm),
             status: statusValue,
             officialUrl: emptyToNull(form.officialUrl),
+            coverImageUrl: emptyToNull(form.coverImageUrl),
             startTime: emptyToNull(form.startTime),
             clusterSchedule: emptyToNull(form.clusterSchedule),
             bibPickup: emptyToNull(form.bibPickup),
@@ -217,6 +232,7 @@ export function RaceFormPage(): JSX.Element {
             distanceKm: parseFloat(form.distanceKm),
             status: statusValue,
             officialUrl: emptyToNull(form.officialUrl),
+            coverImageUrl: emptyToNull(form.coverImageUrl),
             startTime: emptyToNull(form.startTime),
             clusterSchedule: emptyToNull(form.clusterSchedule),
             bibPickup: emptyToNull(form.bibPickup),
@@ -243,6 +259,7 @@ export function RaceFormPage(): JSX.Element {
   );
 
   const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date);
+  const showResultFields = isRaceDateTodayOrPast(form.date);
   const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
 
   if (isLoading) {
@@ -346,6 +363,18 @@ export function RaceFormPage(): JSX.Element {
             </label>
           )}
 
+          <label className="race-form__field">
+            <span className="race-form__label">URL обложки</span>
+            <input
+              className="race-form__input"
+              type="url"
+              name="coverImageUrl"
+              value={form.coverImageUrl}
+              onChange={handleChange}
+              placeholder="https://…"
+            />
+          </label>
+
           {hideOrgScheduleFields ? null : (
             <div className="race-form__field">
               <span className="race-form__label">Время старта</span>
@@ -397,33 +426,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 }[] = [
@@ -32,6 +33,7 @@ const MONTH_OPTIONS: { value: string; label: string }[] = [
 const VIEW_STORAGE_KEY = "races-view-mode";
 
 type ViewMode = "list" | "calendar";
+type RaceListTab = "upcoming" | "completed";
 
 function yearSelectOptions(): number[] {
   const current = new Date().getFullYear();
@@ -60,11 +62,11 @@ function readInitialViewMode(): ViewMode {
   }
 }
 
-function RaceList(props: { title: string; races: Race[] }): JSX.Element {
+function RaceList(props: { title: string; races: Race[]; variant: RaceListTab }): JSX.Element {
-  const { title, races } = props;
+  const { title, races, variant } = props;
 
   return (
-    <section className="race-list" aria-label={title}>
+    <section className={`race-list race-list--${variant}`} aria-label={title}>
       <h2 className="race-list__title">{title}</h2>
       {races.length > 0 ? (
         <ul className="race-list__items">
@@ -137,6 +139,7 @@ export function RacesPage(): JSX.Element {
   const [yearFilter, setYearFilter] = useState<string>("");
   const [monthFilter, setMonthFilter] = useState<string>("");
   const [viewMode, setViewMode] = useState<ViewMode>(() => readInitialViewMode());
+  const [activeListTab, setActiveListTab] = useState<RaceListTab>("upcoming");
 
   const setViewModePersist = useCallback((mode: ViewMode) => {
     setViewMode(mode);
@@ -220,7 +223,32 @@ 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],
+  );
+  const statusMessage = useMemo(() => {
+    if (errorMessage && !isLoading) {
+      return errorMessage;
+    }
+    if (isLoading) {
+      return "Загружаем данные...";
+    }
+    if (viewMode === "calendar" && monthFilter === "") {
+      return "Выберите месяц, чтобы увидеть его крупным планом.";
+    }
+    return "";
+  }, [errorMessage, isLoading, monthFilter, viewMode]);
+  const statusClassName = [
+    "races-status__message",
+    !statusMessage ? "races-status__message--empty" : "",
+    errorMessage && !isLoading ? "races-status__message--error" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   if (errorMessage && races.length === 0 && !isLoading) {
     return (
@@ -294,27 +322,46 @@ export function RacesPage(): JSX.Element {
         </div>
       </section>
 
-      {errorMessage && !isLoading ? (
+      <div className="races-status" aria-live="polite">
-        <p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
+        <p
-          {errorMessage}
+          className={statusClassName}
+          role={errorMessage && !isLoading ? "alert" : undefined}
+          aria-busy={isLoading || undefined}
+          aria-hidden={!statusMessage || undefined}
+        >
+          {statusMessage || "\u00a0"}
         </p>
-      ) : null}
+      </div>
-
-      {viewMode === "calendar" && monthFilter === "" ? (
-        <p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>
-      ) : null}
-
-      {isLoading ? (
-        <p className="page__subtitle" aria-busy="true">
-          Загружаем данные...
-        </p>
-      ) : null}
 
       {viewMode === "list" ? (
-        <div className="race-lists">
+        <>
-          <RaceList title="Будущие" races={upcoming} />
+          <div className="race-list-tabs" role="tablist" aria-label="Раздел стартов">
-          <RaceList title="Прошедшие" races={past} />
+            <button
-        </div>
+              type="button"
+              role="tab"
+              aria-selected={activeListTab === "upcoming"}
+              className={`race-list-tabs__btn${activeListTab === "upcoming" ? " race-list-tabs__btn--active" : ""}`}
+              onClick={() => setActiveListTab("upcoming")}
+            >
+              Будущие
+              <span className="race-list-tabs__count">{upcoming.length}</span>
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={activeListTab === "completed"}
+              className={`race-list-tabs__btn${activeListTab === "completed" ? " race-list-tabs__btn--active" : ""}`}
+              onClick={() => setActiveListTab("completed")}
+            >
+              Прошедшие
+              <span className="race-list-tabs__count">{completed.length}</span>
+            </button>
+          </div>
+          <div className={`race-lists race-lists--mobile-${activeListTab}`}>
+            <RaceList title="Будущие" races={upcoming} variant="upcoming" />
+            <RaceList title="Завершенные" races={completed} variant="completed" />
+          </div>
+        </>
       ) : (
         <div className="races-cal-wrap">
           <RacesCalendar

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;
@@ -242,6 +248,27 @@ a {
   gap: var(--space-4);
 }
 
+.race-list-tabs {
+  display: none;
+}
+
+.race-list-tabs__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+}
+
+.race-list-tabs__count {
+  min-width: 1.75rem;
+  border-radius: 999px;
+  padding: 0.1rem var(--space-2);
+  background: var(--color-surface-soft);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-caption);
+  font-weight: 700;
+}
+
 .race-list {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
@@ -961,6 +988,25 @@ a {
   margin-top: var(--space-6);
 }
 
+.races-status {
+  min-height: calc(var(--line-height-base) * var(--font-size-caption));
+  margin-top: var(--space-4);
+}
+
+.races-status__message {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-caption);
+}
+
+.races-status__message--empty {
+  visibility: hidden;
+}
+
+.races-status__message--error {
+  color: var(--color-danger);
+}
+
 .races-cal__filter-hint {
   margin-top: var(--space-3);
   color: var(--color-text-muted);
@@ -1006,6 +1052,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 +1106,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 +1142,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 +1304,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;
@@ -1290,7 +1373,13 @@ body {
   color: #ffffff;
   background:
     linear-gradient(90deg, rgba(7, 25, 39, 0.9) 0%, rgba(7, 25, 39, 0.58) 46%, rgba(7, 25, 39, 0.1) 100%),
-    url("/images/runner-hero.png") center / cover;
+    url("/images/runner-hero.jpg") center / cover;
+}
+
+.dashboard-hero--with-image {
+  background:
+    linear-gradient(90deg, rgba(7, 25, 39, 0.94) 0%, rgba(7, 25, 39, 0.68) 48%, rgba(7, 25, 39, 0.2) 100%),
+    var(--dashboard-hero-image) center / cover;
 }
 
 .dashboard-hero__content,
@@ -1525,7 +1614,7 @@ body {
   padding: var(--space-8);
   background:
     linear-gradient(90deg, rgba(7, 25, 39, 0.88), rgba(7, 25, 39, 0.48), rgba(7, 25, 39, 0.08)),
-    url("/images/race-half.png") center / cover;
+    url("/images/race-half.jpg") center / cover;
 }
 
 .races-hero .page__title,
@@ -1747,18 +1836,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);
@@ -1788,7 +1920,7 @@ body {
   padding: var(--space-8);
   background:
     linear-gradient(90deg, rgba(7, 25, 39, 0.9), rgba(7, 25, 39, 0.5), rgba(7, 25, 39, 0.08)),
-    url("/images/race-short.png") center / cover;
+    url("/images/race-short.jpg") center / cover;
 }
 
 .race-day-hero .page-link {
@@ -1879,6 +2011,53 @@ body {
     grid-template-columns: 1fr;
   }
 
+  .race-list-tabs {
+    margin-top: var(--space-6);
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-1);
+    padding: var(--space-1);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+  }
+
+  .race-list-tabs__btn {
+    min-height: 2.75rem;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-muted);
+    font: inherit;
+    font-weight: 700;
+    cursor: pointer;
+  }
+
+  .race-list-tabs__btn:hover,
+  .race-list-tabs__btn:focus-visible {
+    color: var(--color-text);
+    outline: none;
+  }
+
+  .race-list-tabs__btn--active {
+    background: var(--color-accent);
+    color: var(--color-surface);
+  }
+
+  .race-list-tabs__btn--active .race-list-tabs__count {
+    background: var(--color-surface);
+    color: var(--color-accent);
+  }
+
+  .race-lists {
+    margin-top: var(--space-4);
+  }
+
+  .race-lists--mobile-upcoming .race-list--completed,
+  .race-lists--mobile-completed .race-list--upcoming {
+    display: none;
+  }
+
   .races-cal__year {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }