From fdb0ba3d2dae060160d69edd5d50337a6fedaacd Mon Sep 17 00:00:00 2001
From: "Vaka.pro" <vakabunga@proton.me>
Date: Mon, 27 Apr 2026 23:30:36 +0300
Subject: [PATCH] fix: use next race image as dashboard hero background

---
 frontend/package-lock.json           |  4 ++--
 frontend/package.json                |  2 +-
 frontend/src/pages/DashboardPage.tsx | 20 +++++++++++++++++++-
 frontend/src/styles/global.css       |  7 +++++++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 27b671c..3ad31a8 100644
--- 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.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.6.0",
+      "version": "0.6.1",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
diff --git a/frontend/package.json b/frontend/package.json
index 57ad464..172d4b8 100644
--- 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.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 2e077ae..3780331 100644
--- 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>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 28d5698..eb0c10f 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1355,6 +1355,13 @@ 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,
+    url("/images/runner-hero.jpg") center / cover;
+}
+
 .dashboard-hero__content,
 .dashboard-hero__panel {
   position: relative;