Merge pull request 'feat: add mobile race list tabs' (#36) from feature/mobile-race-list-tabs into main

Reviewed-on: #36

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",

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",

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>

frontend/src/pages/RacesPage.tsx

@@ -33,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();
@@ -61,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">
@@ -138,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);
@@ -332,10 +334,34 @@ export function RacesPage(): JSX.Element {
       </div>
 
       {viewMode === "list" ? (
-        <div className="race-lists">
+        <>
-          <RaceList title="Будущие" races={upcoming} />
+          <div className="race-list-tabs" role="tablist" aria-label="Раздел стартов">
-          <RaceList title="Завершенные" races={completed} />
+            <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

frontend/src/styles/global.css

@@ -248,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);
@@ -1355,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;
@@ -1984,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));
   }