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/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater.spec.ts

@@ -7,6 +7,7 @@ import { TreeNodeCheckState } from '@/presentation/components/Scripts/View/Tree/
 import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
 import { TreeNodeStateChangedEmittedEventStub } from '@tests/unit/shared/Stubs/TreeNodeStateChangedEmittedEventStub';
 import { UseUserSelectionStateStub } from '@tests/unit/shared/Stubs/UseUserSelectionStateStub';
+import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
 
 describe('useCollectionSelectionStateUpdater', () => {
   describe('updateNodeSelection', () => {
@@ -56,9 +57,12 @@ describe('useCollectionSelectionStateUpdater', () => {
       it('adds to selection if not already selected', () => {
         // arrange
         const { returnObject, useSelectionStateStub } = runHook();
-        const selectionStub = new UserSelectionStub([]);
-        selectionStub.isSelected = () => false;
-        useSelectionStateStub.withUserSelection(selectionStub);
+        const isScriptInitiallySelected = false;
+        const scriptSelectionStub = new ScriptSelectionStub()
+          .withIsSelectedResult(isScriptInitiallySelected);
+        useSelectionStateStub.withUserSelection(
+          new UserSelectionStub().withScripts(scriptSelectionStub),
+        );
         const node = createTreeNodeStub({
           isBranch: false,
           currentState: TreeNodeCheckState.Checked,
@@ -73,14 +77,17 @@ describe('useCollectionSelectionStateUpdater', () => {
         returnObject.updateNodeSelection(mockEvent);
         // assert
         expect(useSelectionStateStub.isSelectionModified()).to.equal(true);
-        expect(selectionStub.isScriptAdded(node.id)).to.equal(true);
+        expect(scriptSelectionStub.isScriptSelected(node.id, false)).to.equal(true);
       });
       it('does nothing if already selected', () => {
         // arrange
         const { returnObject, useSelectionStateStub } = runHook();
-        const selectionStub = new UserSelectionStub([]);
-        selectionStub.isSelected = () => true;
-        useSelectionStateStub.withUserSelection(selectionStub);
+        const isScriptInitiallySelected = true;
+        const scriptSelectionStub = new ScriptSelectionStub()
+          .withIsSelectedResult(isScriptInitiallySelected);
+        useSelectionStateStub.withUserSelection(
+          new UserSelectionStub().withScripts(scriptSelectionStub),
+        );
         const mockEvent = new TreeNodeStateChangedEmittedEventStub()
           .withNode(
             createTreeNodeStub({
@@ -102,9 +109,12 @@ describe('useCollectionSelectionStateUpdater', () => {
       it('removes from selection if already selected', () => {
         // arrange
         const { returnObject, useSelectionStateStub } = runHook();
-        const selectionStub = new UserSelectionStub([]);
-        selectionStub.isSelected = () => true;
-        useSelectionStateStub.withUserSelection(selectionStub);
+        const isScriptInitiallySelected = true;
+        const scriptSelectionStub = new ScriptSelectionStub()
+          .withIsSelectedResult(isScriptInitiallySelected);
+        useSelectionStateStub.withUserSelection(
+          new UserSelectionStub().withScripts(scriptSelectionStub),
+        );
         const node = createTreeNodeStub({
           isBranch: false,
           currentState: TreeNodeCheckState.Unchecked,
@@ -119,14 +129,17 @@ describe('useCollectionSelectionStateUpdater', () => {
         returnObject.updateNodeSelection(mockEvent);
         // assert
         expect(useSelectionStateStub.isSelectionModified()).to.equal(true);
-        expect(selectionStub.isScriptRemoved(node.id)).to.equal(true);
+        expect(scriptSelectionStub.isScriptDeselected(node.id)).to.equal(true);
       });
       it('does nothing if not already selected', () => {
         // arrange
         const { returnObject, useSelectionStateStub } = runHook();
-        const selectionStub = new UserSelectionStub([]);
-        selectionStub.isSelected = () => false;
-        useSelectionStateStub.withUserSelection(selectionStub);
+        const isScriptInitiallySelected = false;
+        const scriptSelectionStub = new ScriptSelectionStub()
+          .withIsSelectedResult(isScriptInitiallySelected);
+        useSelectionStateStub.withUserSelection(
+          new UserSelectionStub().withScripts(scriptSelectionStub),
+        );
         const mockEvent = new TreeNodeStateChangedEmittedEventStub()
           .withNode(
             createTreeNodeStub({

tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseSelectedScriptNodeIds.spec.ts

@@ -4,6 +4,7 @@ import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub'
 import { getScriptNodeId } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/CategoryNodeMetadataConverter';
 import { IScript } from '@/domain/IScript';
 import { UseUserSelectionStateStub } from '@tests/unit/shared/Stubs/UseUserSelectionStateStub';
+import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
 
 describe('useSelectedScriptNodeIds', () => {
   it('returns an empty array when no scripts are selected', () => {
@@ -19,8 +20,8 @@ describe('useSelectedScriptNodeIds', () => {
     it('immediately', () => {
       // arrange
       const selectedScripts = [
-        new SelectedScriptStub('id-1'),
-        new SelectedScriptStub('id-2'),
+        new SelectedScriptStub(new ScriptStub('id-1')),
+        new SelectedScriptStub(new ScriptStub('id-2')),
       ];
       const parsedNodeIds = new Map<IScript, string>([
         [selectedScripts[0].script, 'expected-id-1'],
@@ -43,8 +44,8 @@ describe('useSelectedScriptNodeIds', () => {
       // arrange
       const initialScripts = [];
       const changedScripts = [
-        new SelectedScriptStub('id-1'),
-        new SelectedScriptStub('id-2'),
+        new SelectedScriptStub(new ScriptStub('id-1')),
+        new SelectedScriptStub(new ScriptStub('id-2')),
       ];
       const parsedNodeIds = new Map<IScript, string>([
         [changedScripts[0].script, 'expected-id-1'],