Fix code highlighting and optimize category select

This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.

Key improvements include:

- Enhanced performance, especially noticeable when selecting large
  categories. This update resolves minor UI freezes experienced when
  selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
  selected script when multiple scripts were chosen.

Other changes include:

- Timing functions:
  - Create a `Timing` folder for `throttle` and the new
    `batchedDebounce` functions.
  - Move these functions to the application layer from the presentation
    layer, reflecting their application-wide use.
  - Refactor existing code for improved clarity, naming consistency, and
    adherence to new naming conventions.
  - Add missing unit tests.
- `UserSelection`:
  - State modifications in `UserSelection` now utilize a singular object
    inspired by the CQRS pattern, enabling batch updates and flexible
    change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
  standards.
- Refactor related code for better testability in isolation with
  dependency injection.
- Repository:
  - Move repository abstractions to the application layer.
  - Improve repository abstraction to combine `ReadonlyRepository` and
    `MutableRepository` interfaces.
- E2E testing:
  - Introduce E2E tests to validate the correct batch selection
    behavior.
  - Add a specialized data attribute in `TheCodeArea.vue` for improved
    testability.
  - Reorganize shared Cypress functions for a more idiomatic Cypress
    approach.
  - Improve test documentation with related information.
- `SelectedScript`:
  - Create an abstraction for simplified testability.
  - Introduce `SelectedScriptStub` in tests as a substitute for the
    actual object.

src/application/Common/Timing/BatchedDebounce.ts

@@ -0,0 +1,27 @@
+import { PlatformTimer } from './PlatformTimer';
+import { TimeoutType, Timer } from './Timer';
+
+export function batchedDebounce<T>(
+  callback: (batches: readonly T[]) => void,
+  waitInMs: number,
+  timer: Timer = PlatformTimer,
+): (arg: T) => void {
+  let lastTimeoutId: TimeoutType | undefined;
+  let batches: Array<T> = [];
+
+  return (arg: T) => {
+    batches.push(arg);
+
+    const later = () => {
+      callback(batches);
+      batches = [];
+      lastTimeoutId = undefined;
+    };
+
+    if (lastTimeoutId !== undefined) {
+      timer.clearTimeout(lastTimeoutId);
+    }
+
+    lastTimeoutId = timer.setTimeout(later, waitInMs);
+  };
+}

src/application/Common/Timing/PlatformTimer.ts

@@ -0,0 +1,7 @@
+import { Timer } from './Timer';
+
+export const PlatformTimer: Timer = {
+  setTimeout: (callback, ms) => setTimeout(callback, ms),
+  clearTimeout: (timeoutId) => clearTimeout(timeoutId),
+  dateNow: () => Date.now(),
+};

src/application/Common/Timing/Throttle.ts

@@ -0,0 +1,44 @@
+import { Timer, TimeoutType } from './Timer';
+import { PlatformTimer } from './PlatformTimer';
+
+export type CallbackType = (..._: unknown[]) => void;
+
+export function throttle(
+  callback: CallbackType,
+  waitInMs: number,
+  timer: Timer = PlatformTimer,
+): CallbackType {
+  const throttler = new Throttler(timer, waitInMs, callback);
+  return (...args: unknown[]) => throttler.invoke(...args);
+}
+
+class Throttler {
+  private queuedExecutionId: TimeoutType | undefined;
+
+  private previouslyRun: number;
+
+  constructor(
+    private readonly timer: Timer,
+    private readonly waitInMs: number,
+    private readonly callback: CallbackType,
+  ) {
+    if (!waitInMs) { throw new Error('missing delay'); }
+    if (waitInMs < 0) { throw new Error('negative delay'); }
+  }
+
+  public invoke(...args: unknown[]): void {
+    const now = this.timer.dateNow();
+    if (this.queuedExecutionId !== undefined) {
+      this.timer.clearTimeout(this.queuedExecutionId);
+      this.queuedExecutionId = undefined;
+    }
+    if (!this.previouslyRun || (now - this.previouslyRun >= this.waitInMs)) {
+      this.callback(...args);
+      this.previouslyRun = now;
+    } else {
+      const nextCall = () => this.invoke(...args);
+      const nextCallDelayInMs = this.waitInMs - (now - this.previouslyRun);
+      this.queuedExecutionId = this.timer.setTimeout(nextCall, nextCallDelayInMs);
+    }
+  }
+}

src/application/Common/Timing/Timer.ts

@@ -0,0 +1,8 @@
+// Allows aligning with both NodeJs (NodeJs.Timeout) and Window type (number)
+export type TimeoutType = ReturnType<typeof setTimeout>;
+
+export interface Timer {
+  setTimeout: (callback: () => void, ms: number) => TimeoutType;
+  clearTimeout: (timeoutId: TimeoutType) => void;
+  dateNow(): number;
+}