feat: add mobile race list tabs

Reviewed-on: #35

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.1",
+  "version": "0.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.5.1",
+      "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.1",
+  "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/lib/raceVisuals.ts

@@ -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 ?? "",
@@ -208,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),
@@ -228,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),
@@ -358,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>

frontend/src/pages/RacesPage.tsx

@@ -33,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();
@@ -61,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">
@@ -138,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);
@@ -332,10 +334,34 @@ export function RacesPage(): JSX.Element {
       </div>
 
       {viewMode === "list" ? (
-        <div className="race-lists">
+        <>
-          <RaceList title="Будущие" races={upcoming} />
+          <div className="race-list-tabs" role="tablist" aria-label="Раздел стартов">
-          <RaceList title="Завершенные" races={completed} />
+            <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

@@ -248,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);
@@ -1355,6 +1376,12 @@ body {
     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,
 .dashboard-hero__panel {
   position: relative;
@@ -1984,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));
   }