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.

src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue

@@ -38,11 +38,11 @@ export default defineComponent({
     );
 
     const isAnyChildSelected = computed<boolean>(
-      () => currentSelection.value.isAnySelected(currentCategory.value),
+      () => currentSelection.value.categories.isAnyScriptSelected(currentCategory.value),
     );
 
     const areAllChildrenSelected = computed<boolean>(
-      () => currentSelection.value.areAllSelected(currentCategory.value),
+      () => currentSelection.value.categories.areAllScriptsSelected(currentCategory.value),
     );
 
     return {

src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue

@@ -41,7 +41,7 @@ export default defineComponent({
 
     const isReverted = computed<boolean>({
       get() {
-        const { selectedScripts } = currentSelection.value;
+        const { selectedScripts } = currentSelection.value.scripts;
         return revertHandler.value.getState(selectedScripts);
       },
       set: (value: boolean) => {

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/CategoryReverter.ts

@@ -1,6 +1,6 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
-import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
+import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { getCategoryId } from '../../TreeViewAdapter/CategoryNodeMetadataConverter';
 import { IReverter } from './IReverter';
 import { ScriptReverter } from './ScriptReverter';
@@ -19,8 +19,16 @@ export class CategoryReverter implements IReverter {
     return this.scriptReverters.every((script) => script.getState(selectedScripts));
   }
 
-  public selectWithRevertState(newState: boolean, selection: IUserSelection): void {
-    selection.addOrUpdateAllInCategory(this.categoryId, newState);
+  public selectWithRevertState(newState: boolean, selection: UserSelection): void {
+    selection.categories.processChanges({
+      changes: [{
+        categoryId: this.categoryId,
+        newStatus: {
+          isSelected: true,
+          isReverted: newState,
+        },
+      }],
+    });
   }
 }
 

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/IReverter.ts

@@ -1,7 +1,7 @@
-import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
+import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 
 export interface IReverter {
   getState(selectedScripts: ReadonlyArray<SelectedScript>): boolean;
-  selectWithRevertState(newState: boolean, selection: IUserSelection): void;
+  selectWithRevertState(newState: boolean, selection: UserSelection): void;
 }

src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ScriptReverter.ts

@@ -1,5 +1,5 @@
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
-import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
+import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
 import { getScriptId } from '../../TreeViewAdapter/CategoryNodeMetadataConverter';
 import { IReverter } from './IReverter';
 
@@ -18,7 +18,15 @@ export class ScriptReverter implements IReverter {
     return selectedScript.revert;
   }
 
-  public selectWithRevertState(newState: boolean, selection: IUserSelection): void {
-    selection.addOrUpdateSelectedScript(this.scriptId, newState);
+  public selectWithRevertState(newState: boolean, selection: UserSelection): void {
+    selection.scripts.processChanges({
+      changes: [{
+        scriptId: this.scriptId,
+        newStatus: {
+          isSelected: true,
+          isReverted: newState,
+        },
+      }],
+    });
   }
 }

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater.ts

@@ -16,19 +16,38 @@ export function useCollectionSelectionStateUpdater(
       return;
     }
     if (node.state.current.checkState === TreeNodeCheckState.Checked) {
-      if (currentSelection.value.isSelected(node.id)) {
+      if (currentSelection.value.scripts.isSelected(node.id)) {
         return;
       }
       modifyCurrentSelection((selection) => {
-        selection.addSelectedScript(node.id, false);
+        selection.scripts.processChanges({
+          changes: [
+            {
+              scriptId: node.id,
+              newStatus: {
+                isSelected: true,
+                isReverted: false,
+              },
+            },
+          ],
+        });
       });
     }
     if (node.state.current.checkState === TreeNodeCheckState.Unchecked) {
-      if (!currentSelection.value.isSelected(node.id)) {
+      if (!currentSelection.value.scripts.isSelected(node.id)) {
         return;
       }
       modifyCurrentSelection((selection) => {
-        selection.removeSelectedScript(node.id);
+        selection.scripts.processChanges({
+          changes: [
+            {
+              scriptId: node.id,
+              newStatus: {
+                isSelected: false,
+              },
+            },
+          ],
+        });
       });
     }
   }

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseSelectedScriptNodeIds.ts

@@ -13,6 +13,7 @@ export function useSelectedScriptNodeIds(
   const selectedNodeIds = computed<readonly string[]>(() => {
     return currentSelection
       .value
+      .scripts
       .selectedScripts
       .map((selected) => scriptNodeIdParser(selected.script));
   });