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/shared/Stubs/UserSelectionStub.ts

@@ -1,91 +1,21 @@
-import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
-import { IScript } from '@/domain/IScript';
-import { StubWithObservableMethodCalls } from './StubWithObservableMethodCalls';
-import { EventSourceStub } from './EventSourceStub';
+import { CategorySelection } from '@/application/Context/State/Selection/Category/CategorySelection';
+import { ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
+import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
+import { CategorySelectionStub } from './CategorySelectionStub';
+import { ScriptSelectionStub } from './ScriptSelectionStub';
 
-export class UserSelectionStub
-  extends StubWithObservableMethodCalls<IUserSelection>
-  implements IUserSelection {
-  public readonly changed = new EventSourceStub<readonly SelectedScript[]>();
+export class UserSelectionStub implements UserSelection {
+  public categories: CategorySelection = new CategorySelectionStub();
 
-  public selectedScripts: readonly SelectedScript[] = [];
+  public scripts: ScriptSelection = new ScriptSelectionStub();
 
-  constructor(private readonly allScripts: readonly IScript[]) {
-    super();
-  }
-
-  public withSelectedScripts(selectedScripts: readonly SelectedScript[]): this {
-    this.selectedScripts = selectedScripts;
+  public withCategories(categories: CategorySelection): this {
+    this.categories = categories;
     return this;
   }
 
-  public triggerSelectionChangedEvent(scripts: readonly SelectedScript[]): this {
-    this.changed.notify(scripts);
+  public withScripts(scripts: ScriptSelection): this {
+    this.scripts = scripts;
     return this;
   }
-
-  public isScriptAdded(scriptId: string): boolean {
-    const call = this.callHistory.find(
-      (c) => c.methodName === 'addSelectedScript' && c.args[0] === scriptId,
-    );
-    return call !== undefined;
-  }
-
-  public isScriptRemoved(scriptId: string): boolean {
-    const call = this.callHistory.find(
-      (c) => c.methodName === 'removeSelectedScript' && c.args[0] === scriptId,
-    );
-    return call !== undefined;
-  }
-
-  public areAllSelected(): boolean {
-    throw new Error('Method not implemented.');
-  }
-
-  public isAnySelected(): boolean {
-    throw new Error('Method not implemented.');
-  }
-
-  public removeAllInCategory(): void {
-    throw new Error('Method not implemented.');
-  }
-
-  public addOrUpdateAllInCategory(): void {
-    throw new Error('Method not implemented.');
-  }
-
-  public addSelectedScript(scriptId: string, revert: boolean): void {
-    this.registerMethodCall({
-      methodName: 'addSelectedScript',
-      args: [scriptId, revert],
-    });
-  }
-
-  public addOrUpdateSelectedScript(): void {
-    throw new Error('Method not implemented.');
-  }
-
-  public removeSelectedScript(scriptId: string): void {
-    this.registerMethodCall({
-      methodName: 'removeSelectedScript',
-      args: [scriptId],
-    });
-  }
-
-  public selectOnly(scripts: ReadonlyArray<IScript>): void {
-    this.selectedScripts = scripts.map((s) => new SelectedScript(s, false));
-  }
-
-  public isSelected(): boolean {
-    throw new Error('Method not implemented.');
-  }
-
-  public selectAll(): void {
-    this.selectOnly(this.allScripts);
-  }
-
-  public deselectAll(): void {
-    this.selectedScripts = [];
-  }
 }