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/application/Common/Timing/Throttle.spec.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest';
+import { TimerStub } from '@tests/unit/shared/Stubs/TimerStub';
+import { throttle } from '@/application/Common/Timing/Throttle';
+
+describe('throttle', () => {
+  describe('validates parameters', () => {
+    describe('throws if waitInMs is invalid', () => {
+      // arrange
+      const testCases = [
+        {
+          name: 'given zero',
+          value: 0,
+          expectedError: 'missing delay',
+        },
+        {
+          name: 'given negative',
+          value: -2,
+          expectedError: 'negative delay',
+        },
+      ];
+      const noopCallback = () => { /* do nothing */ };
+      for (const testCase of testCases) {
+        it(`"${testCase.name}" throws "${testCase.expectedError}"`, () => {
+          // act
+          const waitInMs = testCase.value;
+          const act = () => throttle(noopCallback, waitInMs);
+          // assert
+          expect(act).to.throw(testCase.expectedError);
+        });
+      }
+    });
+  });
+  it('should call the callback immediately', () => {
+    // arrange
+    const timer = new TimerStub();
+    let totalRuns = 0;
+    const callback = () => totalRuns++;
+    const throttleFunc = throttle(callback, 500, timer);
+    // act
+    throttleFunc();
+    // assert
+    expect(totalRuns).to.equal(1);
+  });
+  it('should call the callback again after the timeout', () => {
+    // arrange
+    const timer = new TimerStub();
+    let totalRuns = 0;
+    const callback = () => totalRuns++;
+    const waitInMs = 500;
+    const throttleFunc = throttle(callback, waitInMs, timer);
+    // act
+    throttleFunc();
+    totalRuns--; // So we don't count the initial run
+    throttleFunc();
+    timer.tickNext(waitInMs);
+    // assert
+    expect(totalRuns).to.equal(1);
+  });
+  it('should call the callback at most once at given time', () => {
+    // arrange
+    const timer = new TimerStub();
+    let totalRuns = 0;
+    const callback = () => totalRuns++;
+    const waitInMs = 500;
+    const totalCalls = 10;
+    const throttleFunc = throttle(callback, waitInMs, timer);
+    // act
+    for (let currentCall = 0; currentCall < totalCalls; currentCall++) {
+      const currentTime = (waitInMs / totalCalls) * currentCall;
+      timer.setCurrentTime(currentTime);
+      throttleFunc();
+    }
+    // assert
+    expect(totalRuns).to.equal(2); // one initial and one at the end
+  });
+  it('should call the callback as long as delay is waited', () => {
+    // arrange
+    const timer = new TimerStub();
+    let totalRuns = 0;
+    const callback = () => totalRuns++;
+    const waitInMs = 500;
+    const expectedTotalRuns = 10;
+    const throttleFunc = throttle(callback, waitInMs, timer);
+    // act
+    for (let i = 0; i < expectedTotalRuns; i++) {
+      throttleFunc();
+      timer.tickNext(waitInMs);
+    }
+    // assert
+    expect(totalRuns).to.equal(expectedTotalRuns);
+  });
+  it('should call arguments as expected', () => {
+    // arrange
+    const timer = new TimerStub();
+    const expected = [1, 2, 3];
+    const actual = new Array<number>();
+    const callback = (arg: number) => { actual.push(arg); };
+    const waitInMs = 500;
+    const throttleFunc = throttle(callback, waitInMs, timer);
+    // act
+    for (const arg of expected) {
+      throttleFunc(arg);
+      timer.tickNext(waitInMs);
+    }
+    // assert
+    expect(expected).to.deep.equal(actual);
+  });
+});