Add DaySelect component for mobile day navigation

src/features/online-board/components/DayTabs/DaySelect.test.tsx

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { DaySelect } from "./DaySelect.js";
+
+describe("DaySelect", () => {
+  it("renders a select with data-testid", () => {
+    render(<DaySelect selectedDate="20260416" availableDates={["20260416"]} locale="en" onNavigate={() => {}} />);
+    expect(screen.getByTestId("day-select")).toBeTruthy();
+  });
+
+  it("renders one option per available date", () => {
+    render(
+      <DaySelect
+        selectedDate="20260416"
+        availableDates={["20260415", "20260416", "20260417"]}
+        locale="en"
+        onNavigate={() => {}}
+      />,
+    );
+    const select = screen.getByTestId("day-select") as HTMLSelectElement;
+    expect(select.options).toHaveLength(3);
+  });
+
+  it("has selectedDate as select value", () => {
+    render(
+      <DaySelect
+        selectedDate="20260416"
+        availableDates={["20260415", "20260416", "20260417"]}
+        locale="en"
+        onNavigate={() => {}}
+      />,
+    );
+    const select = screen.getByTestId("day-select") as HTMLSelectElement;
+    expect(select.value).toBe("20260416");
+  });
+
+  it("fires onNavigate with new date on change", () => {
+    const onNavigate = vi.fn();
+    render(
+      <DaySelect
+        selectedDate="20260416"
+        availableDates={["20260415", "20260416", "20260417"]}
+        locale="en"
+        onNavigate={onNavigate}
+      />,
+    );
+    fireEvent.change(screen.getByTestId("day-select"), { target: { value: "20260417" } });
+    expect(onNavigate).toHaveBeenCalledWith("20260417");
+  });
+});

src/features/online-board/components/DayTabs/DaySelect.tsx

@@ -0,0 +1,41 @@
+import type { FC } from "react";
+import { parseYyyymmdd } from "./dateRange.js";
+import "./DayTabs.scss";
+
+export interface DaySelectProps {
+  selectedDate: string;
+  availableDates: string[];
+  locale: string;
+  onNavigate: (date: string) => void;
+}
+
+function formatLabel(date: string, locale: string): string {
+  const d = parseYyyymmdd(date);
+  return new Intl.DateTimeFormat(locale, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  }).format(d);
+}
+
+export const DaySelect: FC<DaySelectProps> = ({
+  selectedDate,
+  availableDates,
+  locale,
+  onNavigate,
+}) => {
+  return (
+    <select
+      className="day-select"
+      data-testid="day-select"
+      value={selectedDate}
+      onChange={(e) => onNavigate(e.target.value)}
+    >
+      {availableDates.map((date) => (
+        <option key={date} value={date}>
+          {formatLabel(date, locale)}
+        </option>
+      ))}
+    </select>
+  );
+};

src/features/online-board/components/DayTabs/DayTabs.scss

@@ -38,3 +38,16 @@
     display: block;
   }
 }
+
+.day-select {
+  display: none;
+
+  @media (max-width: 768px) {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    border-radius: 8px;
+    background: #fff;
+    border: 1px solid #d0dae5;
+  }
+}