From dffbb48d99ed6e27d0d92c8f544c03f313030d7c Mon Sep 17 00:00:00 2001
From: Anton <vakabunga@proton.me>
Date: Mon, 27 Apr 2026 12:31:29 +0300
Subject: [PATCH 1/4] fix frontend calendar race states

---
 frontend/src/app/layouts/AppLayout.tsx    |  6 +-
 frontend/src/components/RacesCalendar.tsx | 51 ++++++++++++--
 frontend/src/pages/RaceFormPage.tsx       | 64 ++++++++++-------
 frontend/src/pages/RacesPage.tsx          | 13 +++-
 frontend/src/styles/global.css            | 86 +++++++++++++++++++++++
 5 files changed, 186 insertions(+), 34 deletions(-)

diff --git a/frontend/src/app/layouts/AppLayout.tsx b/frontend/src/app/layouts/AppLayout.tsx
index e441942..6c3c13a 100644
--- 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="/"
diff --git a/frontend/src/components/RacesCalendar.tsx b/frontend/src/components/RacesCalendar.tsx
index 892f1bc..cd480f2 100644
--- 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>
       )}
diff --git a/frontend/src/pages/RaceFormPage.tsx b/frontend/src/pages/RaceFormPage.tsx
index 8d4a91a..395d65a 100644
--- a/frontend/src/pages/RaceFormPage.tsx
+++ b/frontend/src/pages/RaceFormPage.tsx
@@ -93,6 +93,17 @@ function validateForm(form: FormData): string[] {
   return errors;
 }
 
+function isRaceDateTodayOrPast(date: string): boolean {
+  if (!date.trim()) {
+    return false;
+  }
+  const today = new Date();
+  const y = today.getFullYear();
+  const m = String(today.getMonth() + 1).padStart(2, "0");
+  const d = String(today.getDate()).padStart(2, "0");
+  return isRaceDateInPast(date) || date.slice(0, 10) === `${y}-${m}-${d}`;
+}
+
 export function RaceFormPage(): JSX.Element {
   const { raceId } = useParams<{ raceId: string }>();
   const navigate = useNavigate();
@@ -243,6 +254,7 @@ export function RaceFormPage(): JSX.Element {
   );
 
   const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date);
+  const showResultFields = isRaceDateTodayOrPast(form.date);
   const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
 
   if (isLoading) {
@@ -397,33 +409,35 @@ export function RaceFormPage(): JSX.Element {
           </label>
         </fieldset>
 
-        <fieldset className="race-form__group">
-          <legend className="race-form__legend">Результаты</legend>
+        {showResultFields ? (
+          <fieldset className="race-form__group">
+            <legend className="race-form__legend">Результаты</legend>
 
-          <label className="race-form__field">
-            <span className="race-form__label">Финишное время</span>
-            <input
-              className="race-form__input"
-              type="text"
-              name="finishTime"
-              value={form.finishTime}
-              onChange={handleChange}
-              placeholder="1:45:30"
-            />
-          </label>
+            <label className="race-form__field">
+              <span className="race-form__label">Финишное время</span>
+              <input
+                className="race-form__input"
+                type="text"
+                name="finishTime"
+                value={form.finishTime}
+                onChange={handleChange}
+                placeholder="1:45:30"
+              />
+            </label>
 
-          <label className="race-form__field">
-            <span className="race-form__label">Место на финише</span>
-            <input
-              className="race-form__input"
-              type="text"
-              name="finishPlace"
-              value={form.finishPlace}
-              onChange={handleChange}
-              placeholder="12/340"
-            />
-          </label>
-        </fieldset>
+            <label className="race-form__field">
+              <span className="race-form__label">Место на финише</span>
+              <input
+                className="race-form__input"
+                type="text"
+                name="finishPlace"
+                value={form.finishPlace}
+                onChange={handleChange}
+                placeholder="12/340"
+              />
+            </label>
+          </fieldset>
+        ) : null}
 
         <fieldset className="race-form__group">
           <legend className="race-form__legend">Дополнительно</legend>
diff --git a/frontend/src/pages/RacesPage.tsx b/frontend/src/pages/RacesPage.tsx
index 572c405..515da89 100644
--- 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 }[] = [
@@ -220,7 +221,13 @@ export function RacesPage(): JSX.Element {
     };
   }, [listQuery]);
 
-  const { upcoming, past } = useMemo(() => splitRacesByDate(races), [races]);
+  const { upcoming, completed } = useMemo(
+    () => ({
+      upcoming: sortByDateAsc(races.filter((race) => race.status !== "completed")),
+      completed: sortByDateDesc(races.filter((race) => race.status === "completed")),
+    }),
+    [races],
+  );
 
   if (errorMessage && races.length === 0 && !isLoading) {
     return (
@@ -313,7 +320,7 @@ export function RacesPage(): JSX.Element {
       {viewMode === "list" ? (
         <div className="race-lists">
           <RaceList title="Будущие" races={upcoming} />
-          <RaceList title="Прошедшие" races={past} />
+          <RaceList title="Завершенные" races={completed} />
         </div>
       ) : (
         <div className="races-cal-wrap">
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index a0b004e..36d58a4 100644
--- 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;
@@ -1006,6 +1012,26 @@ a {
   color: var(--color-text);
 }
 
+.races-cal__month-title-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+}
+
+.races-cal__month-title-button:hover,
+.races-cal__month-title-button:focus-visible {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  outline: none;
+}
+
 .races-cal__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -1040,6 +1066,12 @@ a {
   color: var(--color-accent);
 }
 
+.races-cal__cell--past .races-cal__day-btn {
+  color: var(--color-text-muted);
+  background: #f0f2f4;
+  border-color: #d8dde2;
+}
+
 .races-cal__cell--open {
   z-index: 2;
 }
@@ -1070,6 +1102,12 @@ a {
   border-color: var(--color-accent);
 }
 
+.races-cal__cell--today .races-cal__day-btn,
+.races-cal__cell--today .races-cal__day-btn:hover,
+.races-cal__cell--today .races-cal__day-btn:focus-visible {
+  border-color: var(--color-text);
+}
+
 .races-cal__popover {
   position: absolute;
   top: calc(100% + var(--space-1));
@@ -1226,6 +1264,11 @@ body {
   color: var(--color-bg-deep);
 }
 
+.app-shell__brand:hover,
+.app-shell__brand:focus-visible {
+  color: var(--color-accent);
+}
+
 .app-shell__link {
   font-size: var(--font-size-caption);
   font-weight: 700;
@@ -1747,18 +1790,61 @@ body {
   font-weight: 800;
 }
 
+.races-cal__month-title-button {
+  border-radius: var(--radius-sm);
+  transition:
+    color 0.15s ease,
+    text-decoration-color 0.15s ease;
+}
+
+.races-cal__month-title-button:hover,
+.races-cal__month-title-button:focus-visible {
+  color: var(--color-accent);
+}
+
 .races-cal__cell--has-race .races-cal__day-btn {
   color: #071927;
   background: linear-gradient(135deg, rgba(185, 242, 74, 0.7), rgba(17, 104, 216, 0.14));
   border-color: rgba(17, 104, 216, 0.18);
 }
 
+.races-cal__cell--past .races-cal__day-btn,
+.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn {
+  color: #6f7c87;
+  background: #eef1f3;
+  border-color: #d4dbe1;
+}
+
 .races-cal__cell--has-race .races-cal__day-btn:hover,
 .races-cal__cell--has-race .races-cal__day-btn:focus-visible {
   background: var(--color-lime);
   border-color: var(--color-bg-deep);
 }
 
+.races-cal__cell--past .races-cal__day-btn:hover,
+.races-cal__cell--past .races-cal__day-btn:focus-visible,
+.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn:hover,
+.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn:focus-visible {
+  color: #52616d;
+  background: #e3e8ec;
+  border-color: #aeb9c3;
+}
+
+.races-cal__cell--today .races-cal__day-btn,
+.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn,
+.races-cal__cell--today.races-cal__cell--past .races-cal__day-btn {
+  border-color: #071927;
+  box-shadow: inset 0 0 0 1px #071927;
+}
+
+.races-cal__cell--today .races-cal__day-btn:hover,
+.races-cal__cell--today .races-cal__day-btn:focus-visible,
+.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn:hover,
+.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn:focus-visible {
+  border-color: #071927;
+  box-shadow: inset 0 0 0 1px #071927;
+}
+
 .races-cal__popover {
   border-color: rgba(17, 104, 216, 0.2);
   border-radius: var(--radius-md);

From f7b611bbbec3123069dcc01a9ebb6f4dddddf472 Mon Sep 17 00:00:00 2001
From: Anton <vakabunga@proton.me>
Date: Mon, 27 Apr 2026 14:02:20 +0300
Subject: [PATCH 2/4] fix(frontend): prevent calendar loading layout shift

---
 frontend/src/pages/RacesPage.tsx | 42 +++++++++++++++++++++-----------
 frontend/src/styles/global.css   | 19 +++++++++++++++
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/RacesPage.tsx b/frontend/src/pages/RacesPage.tsx
index 515da89..34e12fc 100644
--- a/frontend/src/pages/RacesPage.tsx
+++ b/frontend/src/pages/RacesPage.tsx
@@ -228,6 +228,25 @@ export function RacesPage(): JSX.Element {
     }),
     [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 (
@@ -301,21 +320,16 @@ export function RacesPage(): JSX.Element {
         </div>
       </section>
 
-      {errorMessage && !isLoading ? (
-        <p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
-          {errorMessage}
+      <div className="races-status" aria-live="polite">
+        <p
+          className={statusClassName}
+          role={errorMessage && !isLoading ? "alert" : undefined}
+          aria-busy={isLoading || undefined}
+          aria-hidden={!statusMessage || undefined}
+        >
+          {statusMessage || "\u00a0"}
         </p>
-      ) : null}
-
-      {viewMode === "calendar" && monthFilter === "" ? (
-        <p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>
-      ) : null}
-
-      {isLoading ? (
-        <p className="page__subtitle" aria-busy="true">
-          Загружаем данные...
-        </p>
-      ) : null}
+      </div>
 
       {viewMode === "list" ? (
         <div className="race-lists">
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 36d58a4..28d5698 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -967,6 +967,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);

From 42057ddb1cae81971b33a3b631a768b6e30070b5 Mon Sep 17 00:00:00 2001
From: Anton <vakabunga@proton.me>
Date: Mon, 27 Apr 2026 14:20:05 +0300
Subject: [PATCH 3/4] chore: fix versioning

---
 frontend/package-lock.json | 4 ++--
 frontend/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 90781b2..f9aab9a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-frontend",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.5.0",
+      "version": "0.5.1",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
diff --git a/frontend/package.json b/frontend/package.json
index 2217a16..fac940e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "calendar-run-frontend",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

From f5e16c44b30dbd79d3ac2e3fbb64d32e0ade3490 Mon Sep 17 00:00:00 2001
From: Anton <vakabunga@proton.me>
Date: Mon, 27 Apr 2026 14:26:42 +0300
Subject: [PATCH 4/4] feat(frontend): add service favicon

---
 frontend/index.html         |  1 +
 frontend/package-lock.json  |  4 ++--
 frontend/package.json       |  2 +-
 frontend/public/favicon.svg | 24 ++++++++++++++++++++++++
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 frontend/public/favicon.svg

diff --git a/frontend/index.html b/frontend/index.html
index 6e31b3d..d5bf8f7 100644
--- 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>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f9aab9a..e4bafda 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-frontend",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.5.1",
+      "version": "0.5.2",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
diff --git a/frontend/package.json b/frontend/package.json
index fac940e..7427813 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "calendar-run-frontend",
   "private": true,
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 0000000..40eb26d
--- /dev/null
+++ 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>