Add DaysOfWeekStrip component for flight schedule

src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.test.tsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DaysOfWeekStrip } from "./DaysOfWeekStrip.js";
+
+vi.mock("@/i18n/provider.js", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("DaysOfWeekStrip", () => {
+  it("renders 7 day boxes", () => {
+    render(<DaysOfWeekStrip flightBitString="1111111" />);
+    const boxes = screen.getAllByTestId(/^day-of-week-\d$/);
+    expect(boxes).toHaveLength(7);
+  });
+
+  it("marks first 3 active, last 4 inactive for '1110000'", () => {
+    render(<DaysOfWeekStrip flightBitString="1110000" />);
+    expect(screen.getByTestId("day-of-week-0").className).not.toMatch(/--inactive/);
+    expect(screen.getByTestId("day-of-week-1").className).not.toMatch(/--inactive/);
+    expect(screen.getByTestId("day-of-week-2").className).not.toMatch(/--inactive/);
+    expect(screen.getByTestId("day-of-week-3").className).toMatch(/--inactive/);
+    expect(screen.getByTestId("day-of-week-6").className).toMatch(/--inactive/);
+  });
+
+  it("marks all active for '1111111'", () => {
+    render(<DaysOfWeekStrip flightBitString="1111111" />);
+    for (let i = 0; i < 7; i++) {
+      expect(screen.getByTestId(`day-of-week-${i}`).className).not.toMatch(/--inactive/);
+    }
+  });
+
+  it("marks all inactive for '0000000'", () => {
+    render(<DaysOfWeekStrip flightBitString="0000000" />);
+    for (let i = 0; i < 7; i++) {
+      expect(screen.getByTestId(`day-of-week-${i}`).className).toMatch(/--inactive/);
+    }
+  });
+
+  it("renders DAYS.1 through DAYS.7 labels in order", () => {
+    render(<DaysOfWeekStrip flightBitString="1111111" />);
+    expect(screen.getByTestId("day-of-week-0").textContent).toContain("DAYS.1");
+    expect(screen.getByTestId("day-of-week-6").textContent).toContain("DAYS.7");
+  });
+});

src/features/online-board/components/FlightSchedule/DaysOfWeekStrip.tsx

@@ -0,0 +1,30 @@
+import type { FC } from "react";
+import { useTranslation } from "@/i18n/provider.js";
+
+export interface DaysOfWeekStripProps {
+  flightBitString: string;
+}
+
+const DAY_INDEXES = [0, 1, 2, 3, 4, 5, 6] as const;
+
+export const DaysOfWeekStrip: FC<DaysOfWeekStripProps> = ({ flightBitString }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="days-of-week-strip">
+      {DAY_INDEXES.map((i) => {
+        const isActive = flightBitString[i] === "1";
+        const className = isActive ? "day" : "day day--inactive";
+        return (
+          <span
+            key={i}
+            className={className}
+            data-testid={`day-of-week-${i}`}
+          >
+            {t(`DAYS.${i + 1}`)}
+          </span>
+        );
+      })}
+    </div>
+  );
+};