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.1",
+  "version": "0.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.6.1",
+      "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.1",
+  "version": "0.6.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

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 {
-  const { title, races } = props;
+function RaceList(props: { title: string; races: Race[]; variant: RaceListTab }): JSX.Element {
+  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} />
-          <RaceList title="Завершенные" races={completed} />
-        </div>
+        <>
+          <div className="race-list-tabs" role="tablist" aria-label="Раздел стартов">
+            <button
+              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);
@@ -1990,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));
   }