feat: enhance CI workflow and update webapp styles

- Added Node.js setup and webapp testing steps to the CI workflow for improved integration.
- Updated HTML to link multiple CSS files for better modularity and organization of styles.
- Removed deprecated `style.css` and introduced new CSS files for base styles, calendar, day detail, hints, markers, states, and duty list to enhance maintainability and readability.
- Implemented new styles for improved presentation of duty information and user interactions.
- Added unit tests for new API functions and contact link rendering to ensure functionality and reliability.

webapp/js/calendar.test.js

@@ -3,7 +3,7 @@
  * calendarEventsByDate.
  */
 
-import { describe, it, expect, beforeAll } from "vitest";
+import { describe, it, expect, beforeAll, beforeEach } from "vitest";
 
 beforeAll(() => {
   document.body.innerHTML =
@@ -13,7 +13,8 @@ beforeAll(() => {
     '<button id="prevMonth"></button><button id="nextMonth"></button>';
 });
 
-import { dutiesByDate, calendarEventsByDate } from "./calendar.js";
+import { dutiesByDate, calendarEventsByDate, renderCalendar } from "./calendar.js";
+import { state } from "./dom.js";
 
 describe("dutiesByDate", () => {
   it("groups duty by single local day", () => {
@@ -93,3 +94,46 @@ describe("calendarEventsByDate", () => {
     expect(calendarEventsByDate(undefined)).toEqual({});
   });
 });
+
+describe("renderCalendar", () => {
+  beforeEach(() => {
+    state.lang = "en";
+  });
+
+  it("renders 42 cells (6 weeks)", () => {
+    renderCalendar(2025, 0, {}, {});
+    const calendarEl = document.getElementById("calendar");
+    const cells = calendarEl?.querySelectorAll(".day") ?? [];
+    expect(cells.length).toBe(42);
+  });
+
+  it("sets data-date on each cell to YYYY-MM-DD", () => {
+    renderCalendar(2025, 0, {}, {});
+    const calendarEl = document.getElementById("calendar");
+    const cells = Array.from(calendarEl?.querySelectorAll(".day") ?? []);
+    const dates = cells.map((c) => c.getAttribute("data-date"));
+    expect(dates.every((d) => /^\d{4}-\d{2}-\d{2}$/.test(d ?? ""))).toBe(true);
+  });
+
+  it("adds today class to cell matching today", () => {
+    const today = new Date();
+    renderCalendar(today.getFullYear(), today.getMonth(), {}, {});
+    const calendarEl = document.getElementById("calendar");
+    const todayKey =
+      today.getFullYear() +
+      "-" +
+      String(today.getMonth() + 1).padStart(2, "0") +
+      "-" +
+      String(today.getDate()).padStart(2, "0");
+    const todayCell = calendarEl?.querySelector('.day.today[data-date="' + todayKey + '"]');
+    expect(todayCell).toBeTruthy();
+  });
+
+  it("sets month title from state.lang and given year/month", () => {
+    state.lang = "en";
+    renderCalendar(2025, 1, {}, {});
+    const titleEl = document.getElementById("monthTitle");
+    expect(titleEl?.textContent).toContain("2025");
+    expect(titleEl?.textContent).toContain("February");
+  });
+});