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/presentation/components/Scripts/Menu/Selector/SelectionStateTestScenario.ts

@@ -1,7 +1,10 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { RecommendationLevel } from '@/domain/RecommendationLevel';
 import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
+import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
 import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
+import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
+import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
 
 export class SelectionStateTestScenario {
   public readonly all: readonly SelectedScript[];
@@ -28,13 +31,21 @@ export class SelectionStateTestScenario {
     this.all = [...this.allStandard, ...this.allStrict, ...this.allUnrecommended];
   }
 
-  public generateState(selectedScripts: readonly SelectedScript[]) {
+  public generateState(selectedScripts: readonly SelectedScript[] = []) {
     const allScripts = this.all.map((s) => s.script);
-    return new CategoryCollectionStateStub(allScripts)
+    const scriptSelection = new ScriptSelectionStub()
       .withSelectedScripts(selectedScripts);
+    const categoryCollectionState = new CategoryCollectionStateStub(allScripts)
+      .withSelection(new UserSelectionStub().withScripts(scriptSelection));
+    return {
+      scriptsStub: scriptSelection,
+      stateStub: categoryCollectionState,
+    };
   }
 }
 
-function createSelectedScripts(level?: RecommendationLevel, ...ids: string[]) {
-  return ids.map((id) => new SelectedScript(new ScriptStub(id).withLevel(level), false));
+function createSelectedScripts(level?: RecommendationLevel, ...ids: string[]): SelectedScript[] {
+  return ids.map((id) => new SelectedScriptStub(
+    new ScriptStub(id).withLevel(level),
+  ).withRevert(false));
 }