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/Context/State/Selection/Script/ExpectEqualSelectedScripts.ts

@@ -0,0 +1,46 @@
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
+
+export function expectEqualSelectedScripts(
+  actual: readonly SelectedScript[],
+  expected: readonly SelectedScript[],
+) {
+  expectSameScriptIds(actual, expected);
+  expectSameRevertStates(actual, expected);
+}
+
+function expectSameScriptIds(
+  actual: readonly SelectedScript[],
+  expected: readonly SelectedScript[],
+) {
+  const existingScriptIds = expected.map((script) => script.id).sort();
+  const expectedScriptIds = actual.map((script) => script.id).sort();
+  expect(existingScriptIds).to.deep.equal(expectedScriptIds, [
+    'Unexpected script IDs.',
+    `Expected: ${expectedScriptIds.join(', ')}`,
+    `Actual: ${existingScriptIds.join(', ')}`,
+  ].join('\n'));
+}
+
+function expectSameRevertStates(
+  actual: readonly SelectedScript[],
+  expected: readonly SelectedScript[],
+) {
+  const scriptsWithDifferentRevertStates = actual
+    .filter((script) => {
+      const other = expected.find((existing) => existing.id === script.id);
+      if (!other) {
+        throw new Error(`Script "${script.id}" does not exist in expected scripts: ${JSON.stringify(expected, null, '\t')}`);
+      }
+      return script.revert !== other.revert;
+    });
+  expect(scriptsWithDifferentRevertStates).to.have.lengthOf(0, [
+    'Scripts with different revert states:',
+    scriptsWithDifferentRevertStates
+      .map((s) => [
+        `Script ID: "${s.id}"`,
+        `Actual revert state: "${s.revert}"`,
+        `Expected revert state: "${expected.find((existing) => existing.id === s.id)?.revert ?? 'unknown'}"`,
+      ].map((line) => `\t${line}`).join('\n'))
+      .join('\n---\n'),
+  ].join('\n'));
+}