fix(frontend): animate full race list row on hover (li, not inner link)

Move scale/shadow transition to .race-card--action; keyboard focus ring on link.
Version 0.4.2.

Made-with: Cursor

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-frontend",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.4.0",
+      "version": "0.4.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.4.0",
+  "version": "0.4.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/pages/DashboardPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import type { Race } from "../api";
 import { ApiError, getRaces } from "../api";
 import { PaceTrendChart } from "../components";
@@ -61,26 +62,14 @@ export function DashboardPage(): JSX.Element {
 
   const dashboardMetrics = useMemo(() => {
     const { upcoming, past } = splitRacesByDate(races);
-    const completed = races.filter((race) => race.status === "completed");
 
     const nextRace = upcoming[0] ?? null;
     const lastResult = past.find((race) => race.status === "completed") ?? null;
 
-    let personalRecord: Race | null = null;
+    const lastPersonalRecord =
-    let personalRecordSeconds = Number.POSITIVE_INFINITY;
+      past.find(
-
+        (race) => race.status === "completed" && parseFinishTimeToSeconds(race.finishTime) !== null,
-    for (const race of completed) {
+      ) ?? null;
-      const finishSeconds = parseFinishTimeToSeconds(race.finishTime);
-      if (!finishSeconds) {
-        continue;
-      }
-
-      const candidate = finishSeconds / race.distanceKm;
-      if (candidate < personalRecordSeconds) {
-        personalRecordSeconds = candidate;
-        personalRecord = race;
-      }
-    }
 
     const currentYear = new Date().getFullYear();
     const seasonRaces = races.filter((race) => parseRaceDate(race.date).getFullYear() === currentYear);
@@ -89,7 +78,7 @@ export function DashboardPage(): JSX.Element {
     return {
       nextRace,
       lastResult,
-      personalRecord,
+      lastPersonalRecord,
       seasonTotal: seasonRaces.length,
       seasonCompletedCount: seasonCompleted.length,
     };
@@ -167,48 +156,79 @@ export function DashboardPage(): JSX.Element {
       <p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
 
       <div className="dashboard-grid" aria-label="Ключевые метрики">
-        <article className="dashboard-card">
+        <article
-          <h2 className="dashboard-card__title">Ближайший старт</h2>
+          className={`dashboard-card${dashboardMetrics.nextRace ? " dashboard-card--linked" : ""}`}
+        >
           {dashboardMetrics.nextRace ? (
-            <>
+            <Link
+              className="dashboard-card__link-surface"
+              to={`/races/${dashboardMetrics.nextRace.id}`}
+              aria-label={`Ближайший старт: ${dashboardMetrics.nextRace.title}`}
+            >
+              <h2 className="dashboard-card__title">Ближайший старт</h2>
               <p className="dashboard-card__value">{dashboardMetrics.nextRace.title}</p>
               <p className="dashboard-card__meta">
-                {formatRaceDate(dashboardMetrics.nextRace.date)} · {formatDistance(dashboardMetrics.nextRace.distanceKm)}
+                {formatRaceDate(dashboardMetrics.nextRace.date)} ·{" "}
+                {formatDistance(dashboardMetrics.nextRace.distanceKm)}
               </p>
               <p className="dashboard-card__hint">{getRaceCountdownLabel(dashboardMetrics.nextRace.date)}</p>
-            </>
+            </Link>
           ) : (
+            <>
+              <h2 className="dashboard-card__title">Ближайший старт</h2>
               <p className="dashboard-card__empty">Нет запланированных стартов.</p>
+            </>
           )}
         </article>
 
-        <article className="dashboard-card">
+        <article
-          <h2 className="dashboard-card__title">Последний результат</h2>
+          className={`dashboard-card${dashboardMetrics.lastResult ? " dashboard-card--linked" : ""}`}
+        >
           {dashboardMetrics.lastResult ? (
-            <>
+            <Link
+              className="dashboard-card__link-surface"
+              to={`/races/${dashboardMetrics.lastResult.id}`}
+              aria-label={`Последний результат: ${dashboardMetrics.lastResult.title}`}
+            >
+              <h2 className="dashboard-card__title">Последний результат</h2>
               <p className="dashboard-card__value">{dashboardMetrics.lastResult.finishTime ?? "время не указано"}</p>
               <p className="dashboard-card__meta">
                 {dashboardMetrics.lastResult.title} · {formatDistance(dashboardMetrics.lastResult.distanceKm)}
               </p>
               <p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastResult.date)}</p>
-            </>
+            </Link>
           ) : (
+            <>
+              <h2 className="dashboard-card__title">Последний результат</h2>
               <p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
+            </>
           )}
         </article>
 
-        <article className="dashboard-card">
+        <article
-          <h2 className="dashboard-card__title">Личный рекорд</h2>
+          className={`dashboard-card${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
-          {dashboardMetrics.personalRecord ? (
+        >
-            <>
+          {dashboardMetrics.lastPersonalRecord ? (
-              <p className="dashboard-card__value">{dashboardMetrics.personalRecord.finishTime ?? "время не указано"}</p>
+            <Link
-              <p className="dashboard-card__meta">
+              className="dashboard-card__link-surface"
-                {dashboardMetrics.personalRecord.title} · {formatDistance(dashboardMetrics.personalRecord.distanceKm)}
+              to={`/races/${dashboardMetrics.lastPersonalRecord.id}`}
+              aria-label={`Последний личный рекорд: ${dashboardMetrics.lastPersonalRecord.title}`}
+            >
+              <h2 className="dashboard-card__title">Последний личный рекорд</h2>
+              <p className="dashboard-card__value">
+                {dashboardMetrics.lastPersonalRecord.finishTime ?? "время не указано"}
               </p>
-              <p className="dashboard-card__hint">Лучший темп среди завершённых стартов.</p>
+              <p className="dashboard-card__meta">
-            </>
+                {dashboardMetrics.lastPersonalRecord.title} ·{" "}
+                {formatDistance(dashboardMetrics.lastPersonalRecord.distanceKm)}
+              </p>
+              <p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastPersonalRecord.date)}</p>
+            </Link>
           ) : (
-            <p className="dashboard-card__empty">Недостаточно данных для личного рекорда.</p>
+            <>
+              <h2 className="dashboard-card__title">Последний личный рекорд</h2>
+              <p className="dashboard-card__empty">Нет завершённых стартов с финишным временем.</p>
+            </>
           )}
         </article>
 

frontend/src/pages/RaceFormPage.tsx

@@ -3,7 +3,7 @@ import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom"
 import { ApiError, createRace, getRaceById, updateRace } from "../api";
 import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
 import { StartTimeSelects } from "../components/StartTimeSelects";
-import { isRaceDateInPast } from "../lib";
+import { isRaceDateInPast, parseFinishTimeToSeconds } from "../lib";
 
 function slugify(text: string): string {
   return text
@@ -151,7 +151,16 @@ export function RaceFormPage(): JSX.Element {
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
       const { name, value } = event.target;
-      setForm((prev) => ({ ...prev, [name]: value }));
+      setForm((prev) => {
+        const next = { ...prev, [name]: value };
+        if (name === "finishTime") {
+          const trimmed = value.trim();
+          if (trimmed !== "" && parseFinishTimeToSeconds(trimmed) !== null) {
+            return { ...next, status: "completed" };
+          }
+        }
+        return next;
+      });
     },
     [],
   );
@@ -170,10 +179,16 @@ export function RaceFormPage(): JSX.Element {
       setIsSaving(true);
 
       try {
-        const statusValue: RaceStatus | null =
+        const finishTrimmed = form.finishTime.trim();
+        const hasParsedFinish =
+          finishTrimmed !== "" && parseFinishTimeToSeconds(finishTrimmed) !== null;
+        let statusValue: RaceStatus | null =
           form.status === "planned" || form.status === "registered" || form.status === "completed"
             ? form.status
             : null;
+        if (hasParsedFinish) {
+          statusValue = "completed";
+        }
 
         if (isEditMode && raceId) {
           const payload: UpdateRacePayload = {

frontend/src/pages/RacesPage.tsx

@@ -8,7 +8,6 @@ import {
   formatRaceDate,
   getRaceStatusClassName,
   getRaceStatusLabel,
-  raceNeedsResultEntry,
   splitRacesByDate,
 } from "../lib";
 
@@ -67,15 +66,12 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
       <h2 className="race-list__title">{title}</h2>
       {races.length > 0 ? (
         <ul className="race-list__items">
-          {races.map((race) => {
+          {races.map((race) => (
-            const needsResult = raceNeedsResultEntry(race);
-            if (needsResult) {
-              return (
             <li key={race.id} className="race-card race-card--action">
               <Link
                 className="race-card__link-surface"
-                    to={`/races/${race.id}/edit`}
+                to={`/races/${race.id}`}
-                    aria-label={`${race.title}, внести результат`}
+                aria-label={`Старт: ${race.title}`}
               >
                 <div className="race-card__main">
                   <p className="race-card__title">
@@ -90,26 +86,7 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
                 </span>
               </Link>
             </li>
-              );
+          ))}
-            }
-            return (
-              <li key={race.id} className="race-card">
-                <div className="race-card__main">
-                  <p className="race-card__title">
-                    <Link className="race-card__link" to={`/races/${race.id}`}>
-                      {race.title}
-                    </Link>
-                  </p>
-                  <p className="race-card__meta">
-                    {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
-                  </p>
-                </div>
-                <span className={getRaceStatusClassName(race.status, race.date)}>
-                  {getRaceStatusLabel(race.status, race.date)}
-                </span>
-              </li>
-            );
-          })}
         </ul>
       ) : (
         <p className="race-list__empty">Пока нет данных в этом разделе.</p>

frontend/src/styles/global.css

@@ -128,6 +128,35 @@ a {
   border-radius: var(--radius-md);
   padding: var(--space-5);
   background: #fcfdff;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.dashboard-card:hover,
+.dashboard-card:focus-within {
+  transform: scale(1.02);
+  box-shadow: var(--shadow-card-lift);
+}
+
+.dashboard-card--linked {
+  padding: 0;
+}
+
+.dashboard-card__link-surface {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: var(--space-5);
+  border-radius: var(--radius-md);
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+.dashboard-card__link-surface:hover,
+.dashboard-card__link-surface:focus-visible {
+  outline: none;
 }
 
 .dashboard-card__title {
@@ -254,12 +283,6 @@ a {
   font-weight: 600;
 }
 
-.race-card__link:hover,
-.race-card__link:focus-visible {
-  text-decoration: underline;
-  outline: none;
-}
-
 .race-card__meta {
   margin: var(--space-2) 0 0;
   color: var(--color-text-muted);
@@ -298,6 +321,15 @@ a {
 .race-card--action {
   padding: 0;
   overflow: visible;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.race-card--action:hover,
+.race-card--action:focus-within {
+  transform: scale(1.02);
+  box-shadow: var(--shadow-card-lift);
 }
 
 .race-card__link-surface {
@@ -310,16 +342,12 @@ a {
   border-radius: var(--radius-sm);
   color: inherit;
   text-decoration: none;
-  transition:
+  outline: none;
-    transform 0.15s ease,
-    box-shadow 0.15s ease;
 }
 
-.race-card--action:hover .race-card__link-surface,
+.race-card__link-surface:focus-visible {
-.race-card--action:focus-within .race-card__link-surface {
+  outline: 2px solid var(--color-accent);
-  transform: scale(1.02);
+  outline-offset: 2px;
-  box-shadow: var(--shadow-card-lift);
-  outline: none;
 }
 
 .race-card__title-text {
@@ -729,7 +757,7 @@ a {
 
 .races-cal__year {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--space-5);
 }
 
@@ -967,6 +995,10 @@ a {
     grid-template-columns: 1fr;
   }
 
+  .races-cal__year {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .race-details-header {
     flex-direction: column;
   }
@@ -976,3 +1008,9 @@ a {
     align-items: stretch;
   }
 }
+
+@media (max-width: 560px) {
+  .races-cal__year {
+    grid-template-columns: 1fr;
+  }
+}