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.

tests/unit/shared/Stubs/TimerStub.ts

@@ -0,0 +1,42 @@
+import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
+import { EventSource } from '@/infrastructure/Events/EventSource';
+import { TimeoutType, Timer } from '@/application/Common/Timing/Timer';
+import { createMockTimeout } from './TimeoutStub';
+
+export class TimerStub implements Timer {
+  private timeChanged = new EventSource<number>();
+
+  private subscriptions = new Array<IEventSubscription>();
+
+  private currentTime = 0;
+
+  public setTimeout(callback: () => void, ms: number): TimeoutType {
+    const runTime = this.currentTime + ms;
+    const subscription = this.timeChanged.on((time) => {
+      if (time >= runTime) {
+        callback();
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions.push(subscription);
+    const id = this.subscriptions.length - 1;
+    return createMockTimeout(id);
+  }
+
+  public clearTimeout(timeoutId: TimeoutType): void {
+    this.subscriptions[+timeoutId].unsubscribe();
+  }
+
+  public dateNow(): number {
+    return this.currentTime;
+  }
+
+  public tickNext(ms: number): void {
+    this.setCurrentTime(this.currentTime + ms);
+  }
+
+  public setCurrentTime(ms: number): void {
+    this.currentTime = ms;
+    this.timeChanged.notify(this.currentTime);
+  }
+}