feat: add mobile race list tabs

Merge pull request 'fix: remove fallback image from dashboard race hero' (#35 ) from fix/dashboard-hero-background-layering into main
Reviewed-on: #35
2026-05-24 14:10:09 +03:00 · 2026-04-27 21:40:55 +00:00 · 2026-04-28 00:40:01 +03:00 · 2026-04-27 20:31:25 +00:00 · 2026-04-27 23:30:36 +03:00 · 2026-04-27 20:08:11 +00:00
12 changed files with 393 additions and 61 deletions
--- a/backend/src/mappers/race.ts
+++ b/backend/src/mappers/race.ts
@@ -66,7 +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,
+    coverImageUrl: row.cover_image_url ?? null,
    startTime: row.start_time,
    clusterSchedule: row.cluster_schedule,
    bibPickup: row.bib_pickup,
--- a/frontend/index.html
+++ b/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>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "calendar-run-frontend",
-  "version": "0.6.0",
+  "version": "0.6.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "calendar-run-frontend",
-      "version": "0.6.0",
+      "version": "0.6.2",
      "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.6.0",
+  "version": "0.6.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/frontend/public/favicon.svg
+++ b/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>
--- a/frontend/src/api/races.ts
+++ b/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,7 +27,7 @@ function normalizeRace(input: unknown): Race {
      race?.status === "registered" ||
      race?.status === "completed") &&
    isNullableString(race?.officialUrl) &&
-    isNullableString(race?.coverImageUrl) &&
+    isOptionalNullableString(race?.coverImageUrl) &&
    isNullableString(race?.startTime) &&
    isNullableString(race?.clusterSchedule) &&
    isNullableString(race?.bibPickup) &&
@@ -49,7 +53,7 @@ function normalizeRace(input: unknown): Race {
    distanceKm: race.distanceKm,
    status: race.status,
    officialUrl: race.officialUrl,
-    coverImageUrl: race.coverImageUrl,
+    coverImageUrl: race.coverImageUrl ?? null,
    startTime: race.startTime,
    clusterSchedule: race.clusterSchedule,
    bibPickup: race.bibPickup,
--- a/frontend/src/app/layouts/AppLayout.tsx
+++ b/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="/"
--- a/frontend/src/components/RacesCalendar.tsx
+++ b/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>
      )}
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/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>
--- a/frontend/src/pages/RaceFormPage.tsx
+++ b/frontend/src/pages/RaceFormPage.tsx
@@ -96,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();
@@ -248,6 +259,7 @@ export function RaceFormPage(): JSX.Element {
  );
  const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date);
  const showResultFields = isRaceDateTodayOrPast(form.date);
  const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
  if (isLoading) {
@@ -414,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>
--- a/frontend/src/pages/RacesPage.tsx
+++ b/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
--- a/frontend/src/styles/global.css
+++ b/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;
@@ -1293,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;
@@ -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);
@@ -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));
  }
Author	SHA1	Message	Date
Vaka.pro	85aff823fc	feat: add mobile race list tabs Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-05-24 14:10:09 +03:00
admin	13dd8fa426	Merge pull request 'fix: remove fallback image from dashboard race hero' (#35 ) from fix/dashboard-hero-background-layering into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #35	2026-04-27 21:40:55 +00:00
Vaka.pro	f62be600cd	fix: remove fallback image from dashboard race hero Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-04-28 00:40:01 +03:00
admin	0f5249726b	Merge pull request 'fix: use next race image as dashboard hero background' (#34 ) from fix/dashboard-hero-race-background into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #34 fix: use next race image as dashboard hero background Set the dashboard hero background from the nearest upcoming race visual, using the existing race visual fallback chain. Add a BEM modifier for the image-backed hero state and bump the frontend patch version.	2026-04-27 20:31:25 +00:00
Vaka.pro	fdb0ba3d2d	fix: use next race image as dashboard hero background Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-04-27 23:30:36 +03:00
admin	367868cf1b	Merge pull request 'fix: tolerate missing race cover image field' (#33 ) from fix/race-cover-api-backcompat into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #33	2026-04-27 20:08:11 +00:00
Vaka.pro	78d0ab5ece	fix: tolerate missing race cover image field Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-04-27 23:07:31 +03:00
admin	e2eb71522d	Merge pull request 'feat: add race cover image extraction' (#32 ) from feature/race-cover-images into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #32	2026-04-27 20:02:08 +00:00
Vaka.pro	00985732ec	Merge remote-tracking branch 'origin/main' into feature/race-cover-images Some checks failed CI / build-and-test (pull_request) Has been cancelled Details # Conflicts: # frontend/package-lock.json # frontend/package.json	2026-04-27 23:01:19 +03:00
admin	b1b363a7e8	Merge pull request 'feat(frontend): add service favicon' (#31 ) from feat/add-service-favicon into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #31	2026-04-27 11:29:02 +00:00
Anton	f5e16c44b3	feat(frontend): add service favicon Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-04-27 14:26:42 +03:00
admin	c5ca511ea7	Merge pull request 'chore: fix versioning' (#30 ) from chore/frontend-version-0.5.1 into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #30	2026-04-27 11:20:31 +00:00
Anton	42057ddb1c	chore: fix versioning Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-04-27 14:20:05 +03:00
admin	1a37afd16f	Merge pull request 'fix(frontend): prevent calendar loading layout shift' (#29 ) from fix/calendar-loading-layout-shift into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #29	2026-04-27 11:03:46 +00:00
Anton	f7b611bbbe	fix(frontend): prevent calendar loading layout shift Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-04-27 14:02:20 +03:00
admin	55fc23ec64	Merge pull request 'fix frontend calendar race states' (#28 ) from codex/calendar-race-ui-fixes into main Some checks failed CI / build-and-test (push) Has been cancelled Details Reviewed-on: #28	2026-04-27 09:32:39 +00:00
Anton	dffbb48d99	fix frontend calendar race states Some checks failed CI / build-and-test (pull_request) Has been cancelled Details	2026-04-27 12:31:29 +03:00