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/Code/TheCodeArea.vue

@@ -3,8 +3,10 @@
     v-non-collapsing
     @size-changed="sizeChanged()"
   >
+    <!-- `data-test-highlighted-range` is a test hook for assessing highlighted text range -->
     <div
       :id="editorId"
+      :data-test-highlighted-range="highlightedRange"
       class="code-area"
     />
   </SizeObserver>
@@ -12,7 +14,7 @@
 
 <script lang="ts">
 import {
-  defineComponent, onUnmounted, onMounted,
+  defineComponent, onUnmounted, onMounted, ref,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
@@ -42,6 +44,8 @@ export default defineComponent({
     const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
     const editorId = 'codeEditor';
+    const highlightedRange = ref(0);
+
     let editor: ace.Ace.Editor | undefined;
     let currentMarkerId: number | undefined;
 
@@ -99,6 +103,7 @@ export default defineComponent({
       }
       editor?.session.removeMarker(currentMarkerId);
       currentMarkerId = undefined;
+      highlightedRange.value = 0;
     }
 
     function reactToChanges(event: ICodeChangedEvent, scripts: ReadonlyArray<IScript>) {
@@ -121,6 +126,7 @@ export default defineComponent({
         'code-area__highlight',
         'fullLine',
       );
+      highlightedRange.value = endRow - startRow;
     }
 
     function scrollToLine(row: number) {
@@ -133,6 +139,7 @@ export default defineComponent({
 
     return {
       editorId,
+      highlightedRange,
       sizeChanged,
     };
   },