feat: update language support and enhance API functionality

- Changed the default language in `index.html` from Russian to English, updating the title and button aria-labels for improved accessibility.
- Refactored the `buildFetchOptions` function in `api.js` to include an optional external abort signal, enhancing request management.
- Updated `fetchDuties` and `fetchCalendarEvents` to support request cancellation using the new abort signal, improving error handling.
- Added unit tests for the API functions to ensure proper functionality, including handling of 403 errors and request cancellations.
- Enhanced CSS styles for duty markers to improve visual consistency.
- Removed unused code and improved the overall structure of the JavaScript files for better maintainability.

webapp/js/api.js

@@ -9,16 +9,31 @@ import { t } from "./i18n.js";
 
 /**
  * Build fetch options with init data header, Accept-Language and timeout abort.
+ * Optional external signal (e.g. from loadMonth) aborts this request when triggered.
  * @param {string} initData - Telegram init data
- * @returns {{ headers: object, signal: AbortSignal, timeoutId: number }}
+ * @param {AbortSignal} [externalSignal] - when aborted, cancels this request
+ * @returns {{ headers: object, signal: AbortSignal, cleanup: () => void }}
  */
-export function buildFetchOptions(initData) {
+export function buildFetchOptions(initData, externalSignal) {
   const headers = {};
   if (initData) headers["X-Telegram-Init-Data"] = initData;
   headers["Accept-Language"] = state.lang || "ru";
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-  return { headers, signal: controller.signal, timeoutId };
+  const onAbort = () => controller.abort();
+  const cleanup = () => {
+    clearTimeout(timeoutId);
+    if (externalSignal) externalSignal.removeEventListener("abort", onAbort);
+  };
+  if (externalSignal) {
+    if (externalSignal.aborted) {
+      cleanup();
+      controller.abort();
+    } else {
+      externalSignal.addEventListener("abort", onAbort);
+    }
+  }
+  return { headers, signal: controller.signal, cleanup };
 }
 
 /**
@@ -26,31 +41,34 @@ export function buildFetchOptions(initData) {
  * Caller checks res.ok, res.status, res.json().
  * @param {string} path - e.g. "/api/duties"
  * @param {{ from?: string, to?: string }} params - query params
+ * @param {{ signal?: AbortSignal }} [options] - optional abort signal for request cancellation
  * @returns {Promise<Response>} - raw response
  */
-export async function apiGet(path, params = {}) {
+export async function apiGet(path, params = {}, options = {}) {
   const base = window.location.origin;
   const query = new URLSearchParams(params).toString();
   const url = query ? `${base}${path}?${query}` : `${base}${path}`;
   const initData = getInitData();
-  const opts = buildFetchOptions(initData);
+  const opts = buildFetchOptions(initData, options.signal);
   try {
     const res = await fetch(url, { headers: opts.headers, signal: opts.signal });
     return res;
   } finally {
-    clearTimeout(opts.timeoutId);
+    opts.cleanup();
   }
 }
 
 /**
  * Fetch duties for date range. Throws ACCESS_DENIED error on 403.
+ * AbortError is rethrown when the request is cancelled (e.g. stale loadMonth).
  * @param {string} from - YYYY-MM-DD
  * @param {string} to - YYYY-MM-DD
+ * @param {AbortSignal} [signal] - optional signal to cancel the request
  * @returns {Promise<object[]>}
  */
-export async function fetchDuties(from, to) {
+export async function fetchDuties(from, to, signal) {
   try {
-    const res = await apiGet("/api/duties", { from, to });
+    const res = await apiGet("/api/duties", { from, to }, { signal });
     if (res.status === 403) {
       let detail = t(state.lang, "access_denied");
       try {
@@ -71,25 +89,26 @@ export async function fetchDuties(from, to) {
     if (!res.ok) throw new Error(t(state.lang, "error_load_failed"));
     return res.json();
   } catch (e) {
-    if (e.name === "AbortError") {
-      throw new Error(t(state.lang, "error_network"));
-    }
+    if (e.name === "AbortError") throw e;
     throw e;
   }
 }
 
 /**
  * Fetch calendar events for range. Returns [] on non-200 or error. Does not throw for 403.
+ * Rethrows AbortError when the request is cancelled (e.g. stale loadMonth).
  * @param {string} from - YYYY-MM-DD
  * @param {string} to - YYYY-MM-DD
+ * @param {AbortSignal} [signal] - optional signal to cancel the request
  * @returns {Promise<object[]>}
  */
-export async function fetchCalendarEvents(from, to) {
+export async function fetchCalendarEvents(from, to, signal) {
   try {
-    const res = await apiGet("/api/calendar-events", { from, to });
+    const res = await apiGet("/api/calendar-events", { from, to }, { signal });
     if (!res.ok) return [];
     return res.json();
   } catch (e) {
+    if (e.name === "AbortError") throw e;
     return [];
   }
 }