fix(frontend): auto-completed on finish time, dashboard links, list/calendar UX

- Set status to completed when finish time parses (input + submit)
- Dashboard: last personal record by recent date+time; links on top 3 cards
- Hover scale+shadow on all dashboard-card; linked card padding via BEM
- Race list: full row links to race detail; same hover as before
- Calendar year grid: 3 columns, 2 on tablet, 1 on narrow
- Version 0.4.1

Made-with: Cursor

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;
-    let personalRecordSeconds = Number.POSITIVE_INFINITY;
-
-    for (const race of completed) {
-      const finishSeconds = parseFinishTimeToSeconds(race.finishTime);
-      if (!finishSeconds) {
-        continue;
-      }
-
-      const candidate = finishSeconds / race.distanceKm;
-      if (candidate < personalRecordSeconds) {
-        personalRecordSeconds = candidate;
-        personalRecord = race;
-      }
-    }
+    const lastPersonalRecord =
+      past.find(
+        (race) => race.status === "completed" && parseFinishTimeToSeconds(race.finishTime) !== null,
+      ) ?? null;
 
     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">
-          <h2 className="dashboard-card__title">Ближайший старт</h2>
+        <article
+          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>
           ) : (
-            <p className="dashboard-card__empty">Нет запланированных стартов.</p>
+            <>
+              <h2 className="dashboard-card__title">Ближайший старт</h2>
+              <p className="dashboard-card__empty">Нет запланированных стартов.</p>
+            </>
           )}
         </article>
 
-        <article className="dashboard-card">
-          <h2 className="dashboard-card__title">Последний результат</h2>
+        <article
+          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>
           ) : (
-            <p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
+            <>
+              <h2 className="dashboard-card__title">Последний результат</h2>
+              <p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
+            </>
           )}
         </article>
 
-        <article className="dashboard-card">
-          <h2 className="dashboard-card__title">Личный рекорд</h2>
-          {dashboardMetrics.personalRecord ? (
-            <>
-              <p className="dashboard-card__value">{dashboardMetrics.personalRecord.finishTime ?? "время не указано"}</p>
-              <p className="dashboard-card__meta">
-                {dashboardMetrics.personalRecord.title} · {formatDistance(dashboardMetrics.personalRecord.distanceKm)}
+        <article
+          className={`dashboard-card${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
+        >
+          {dashboardMetrics.lastPersonalRecord ? (
+            <Link
+              className="dashboard-card__link-surface"
+              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,38 +66,16 @@ 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) => {
-            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`}
-                    aria-label={`${race.title}, внести результат`}
-                  >
-                    <div className="race-card__main">
-                      <p className="race-card__title">
-                        <span className="race-card__title-text">{race.title}</span>
-                      </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>
-                  </Link>
-                </li>
-              );
-            }
-            return (
-              <li key={race.id} className="race-card">
+          {races.map((race) => (
+            <li key={race.id} className="race-card race-card--action">
+              <Link
+                className="race-card__link-surface"
+                to={`/races/${race.id}`}
+                aria-label={`Старт: ${race.title}`}
+              >
                 <div className="race-card__main">
                   <p className="race-card__title">
-                    <Link className="race-card__link" to={`/races/${race.id}`}>
-                      {race.title}
-                    </Link>
+                    <span className="race-card__title-text">{race.title}</span>
                   </p>
                   <p className="race-card__meta">
                     {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
@@ -107,9 +84,9 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
                 <span className={getRaceStatusClassName(race.status, race.date)}>
                   {getRaceStatusLabel(race.status, race.date)}
                 </span>
-              </li>
-            );
-          })}
+              </Link>
+            </li>
+          ))}
         </ul>
       ) : (
         <p className="race-list__empty">Пока нет данных в этом разделе.</p>