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/Shared/Hooks/UseUserSelectionState.ts

@@ -1,5 +1,5 @@
 import { shallowReadonly, shallowRef, triggerRef } from 'vue';
-import { IReadOnlyUserSelection, IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
+import type { ReadonlyUserSelection, UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import type { useAutoUnsubscribedEvents } from './UseAutoUnsubscribedEvents';
 import type { useCollectionState } from './UseCollectionState';
 
@@ -10,12 +10,12 @@ export function useUserSelectionState(
   const { events } = autoUnsubscribedEvents;
   const { onStateChange, modifyCurrentState, currentState } = collectionState;
 
-  const currentSelection = shallowRef<IReadOnlyUserSelection>(currentState.value.selection);
+  const currentSelection = shallowRef<ReadonlyUserSelection>(currentState.value.selection);
 
   onStateChange((state) => {
     updateSelection(state.selection);
     events.unsubscribeAllAndRegister([
-      state.selection.changed.on(() => {
+      state.selection.scripts.changed.on(() => {
         updateSelection(state.selection);
       }),
     ]);
@@ -27,7 +27,7 @@ export function useUserSelectionState(
     });
   }
 
-  function updateSelection(newSelection: IReadOnlyUserSelection) {
+  function updateSelection(newSelection: ReadonlyUserSelection) {
     if (currentSelection.value === newSelection) {
       // Do not trust Vue tracking, the changed selection object
       // reference may stay same for same collection.
@@ -44,5 +44,5 @@ export function useUserSelectionState(
 }
 
 export type SelectionModifier = (
-  state: IUserSelection,
+  state: UserSelection,
 ) => void;

src/presentation/components/Shared/SizeObserver.vue

@@ -9,7 +9,7 @@ import {
   defineComponent, shallowRef, onMounted, onBeforeUnmount, watch,
 } from 'vue';
 import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
-import { throttle } from '@/presentation/components/Shared/Throttle';
+import { throttle } from '@/application/Common/Timing/Throttle';
 
 export default defineComponent({
   emits: {

src/presentation/components/Shared/Throttle.ts

@@ -1,60 +0,0 @@
-export type CallbackType = (..._: unknown[]) => void;
-
-export function throttle(
-  callback: CallbackType,
-  waitInMs: number,
-  timer: ITimer = NodeTimer,
-): CallbackType {
-  const throttler = new Throttler(timer, waitInMs, callback);
-  return (...args: unknown[]) => throttler.invoke(...args);
-}
-
-// Allows aligning with both NodeJs (NodeJs.Timeout) and Window type (number)
-export type Timeout = ReturnType<typeof setTimeout>;
-
-export interface ITimer {
-  setTimeout: (callback: () => void, ms: number) => Timeout;
-  clearTimeout: (timeoutId: Timeout) => void;
-  dateNow(): number;
-}
-
-const NodeTimer: ITimer = {
-  setTimeout: (callback, ms) => setTimeout(callback, ms),
-  clearTimeout: (timeoutId) => clearTimeout(timeoutId),
-  dateNow: () => Date.now(),
-};
-
-interface IThrottler {
-  invoke: CallbackType;
-}
-
-class Throttler implements IThrottler {
-  private queuedExecutionId: Timeout | undefined;
-
-  private previouslyRun: number;
-
-  constructor(
-    private readonly timer: ITimer,
-    private readonly waitInMs: number,
-    private readonly callback: CallbackType,
-  ) {
-    if (!waitInMs) { throw new Error('missing delay'); }
-    if (waitInMs < 0) { throw new Error('negative delay'); }
-  }
-
-  public invoke(...args: unknown[]): void {
-    const now = this.timer.dateNow();
-    if (this.queuedExecutionId !== undefined) {
-      this.timer.clearTimeout(this.queuedExecutionId);
-      this.queuedExecutionId = undefined;
-    }
-    if (!this.previouslyRun || (now - this.previouslyRun >= this.waitInMs)) {
-      this.callback(...args);
-      this.previouslyRun = now;
-    } else {
-      const nextCall = () => this.invoke(...args);
-      const nextCallDelayInMs = this.waitInMs - (now - this.previouslyRun);
-      this.queuedExecutionId = this.timer.setTimeout(nextCall, nextCallDelayInMs);
-    }
-  }
-}