Refactor user selection state handling using hook

This commit introduces `useUserSelectionState` compositional hook. it
centralizes and allows reusing the logic for tracking and mutation user
selection state across the application.

The change aims to increase code reusability, simplify the code, improve
testability, and adhere to the single responsibility principle. It makes
the code more reliable against race conditions and removes the need for
tracking deep changes.

Other supporting changes:

- Introduce `CardStateIndicator` component for displaying the card state
  indicator icon, improving the testability and separation of concerns.
- Refactor `SelectionTypeHandler` to use functional code with more clear
  interfaces to simplify the code. It reduces complexity, increases
  maintainability and increase readability by explicitly separating
  mutating functions.
- Add new unit tests and extend improving ones to cover the new logic
  introduced in this commit. Remove the need to mount a wrapper
  component to simplify and optimize some tests, using parameter
  injection to inject dependencies intead.

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

@@ -1,6 +1,6 @@
 <template>
   <ToggleSwitch
-    v-model="isChecked"
+    v-model="isReverted"
     :stopClickPropagation="true"
     :label="'revert'"
   />
@@ -8,11 +8,11 @@
 
 <script lang="ts">
 import {
-  PropType, defineComponent, ref, watch, computed,
+  PropType, defineComponent, computed,
 } from 'vue';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { NodeMetadata } from '@/presentation/components/Scripts/View/Tree/NodeContent/NodeMetadata';
+import { ICategoryCollection } from '@/domain/ICategoryCollection';
 import { IReverter } from './Reverter/IReverter';
 import { getReverter } from './Reverter/ReverterFactory';
 import ToggleSwitch from './ToggleSwitch.vue';
@@ -29,56 +29,37 @@ export default defineComponent({
   },
   setup(props) {
     const {
-      currentState, modifyCurrentState, onStateChange,
-    } = injectKey((keys) => keys.useCollectionState);
-    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
+      currentSelection, modifyCurrentSelection,
+    } = injectKey((keys) => keys.useUserSelectionState);
+    const { currentState } = injectKey((keys) => keys.useCollectionState);
 
-    const isReverted = ref(false);
+    const currentCollection = computed<ICategoryCollection>(() => currentState.value.collection);
 
-    let handler: IReverter | undefined;
-
-    watch(
-      () => props.node,
-      (node) => onNodeChanged(node),
-      { immediate: true },
+    const revertHandler = computed<IReverter>(
+      () => getReverter(props.node, currentCollection.value),
     );
 
-    onStateChange((newState) => {
-      updateRevertStatusFromState(newState.selection.selectedScripts);
-      events.unsubscribeAllAndRegister([
-        newState.selection.changed.on((scripts) => updateRevertStatusFromState(scripts)),
-      ]);
-    }, { immediate: true });
-
-    function onNodeChanged(node: NodeMetadata) {
-      handler = getReverter(node, currentState.value.collection);
-      updateRevertStatusFromState(currentState.value.selection.selectedScripts);
-    }
-
-    function updateRevertStatusFromState(scripts: ReadonlyArray<SelectedScript>) {
-      isReverted.value = handler?.getState(scripts) ?? false;
-    }
-
-    function syncReversionStatusWithState(value: boolean) {
-      if (value === isReverted.value) {
-        return;
-      }
-      modifyCurrentState((state) => {
-        handler.selectWithRevertState(value, state.selection);
-      });
-    }
-
-    const isChecked = computed({
+    const isReverted = computed<boolean>({
       get() {
-        return isReverted.value;
+        const { selectedScripts } = currentSelection.value;
+        return revertHandler.value.getState(selectedScripts);
       },
       set: (value: boolean) => {
         syncReversionStatusWithState(value);
       },
     });
 
+    function syncReversionStatusWithState(value: boolean) {
+      if (value === isReverted.value) {
+        return;
+      }
+      modifyCurrentSelection((mutableSelection) => {
+        revertHandler.value.selectWithRevertState(value, mutableSelection);
+      });
+    }
+
     return {
-      isChecked,
+      isReverted,
     };
   },
 });

src/presentation/components/Scripts/View/Tree/ScriptsTree.vue

@@ -18,6 +18,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
 import TreeView from './TreeView/TreeView.vue';
 import NodeContent from './NodeContent/NodeContent.vue';
 import { useTreeViewFilterEvent } from './TreeViewAdapter/UseTreeViewFilterEvent';
@@ -38,10 +39,11 @@ export default defineComponent({
     NodeContent,
   },
   setup(props) {
-    const { selectedScriptNodeIds } = useSelectedScriptNodeIds();
+    const useUserCollectionStateHook = injectKey((keys) => keys.useUserSelectionState);
+    const { selectedScriptNodeIds } = useSelectedScriptNodeIds(useUserCollectionStateHook);
     const { latestFilterEvent } = useTreeViewFilterEvent();
     const { treeViewInputNodes } = useTreeViewNodeInput(() => props.categoryId);
-    const { updateNodeSelection } = useCollectionSelectionStateUpdater();
+    const { updateNodeSelection } = useCollectionSelectionStateUpdater(useUserCollectionStateHook);
 
     function handleNodeChangedEvent(event: TreeNodeStateChangedEmittedEvent) {
       updateNodeSelection(event);

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

@@ -1,9 +1,11 @@
-import { injectKey } from '@/presentation/injectionSymbols';
+import { useUserSelectionState } from '@/presentation/components/Shared/Hooks/UseUserSelectionState';
 import { TreeNodeCheckState } from '../TreeView/Node/State/CheckState';
 import { TreeNodeStateChangedEmittedEvent } from '../TreeView/Bindings/TreeNodeStateChangedEmittedEvent';
 
-export function useCollectionSelectionStateUpdater() {
-  const { modifyCurrentState, currentState } = injectKey((keys) => keys.useCollectionState);
+export function useCollectionSelectionStateUpdater(
+  useSelectionStateHook: ReturnType<typeof useUserSelectionState>,
+) {
+  const { modifyCurrentSelection, currentSelection } = useSelectionStateHook;
 
   function updateNodeSelection(change: TreeNodeStateChangedEmittedEvent) {
     const { node } = change;
@@ -14,19 +16,19 @@ export function useCollectionSelectionStateUpdater() {
       return;
     }
     if (node.state.current.checkState === TreeNodeCheckState.Checked) {
-      if (currentState.value.selection.isSelected(node.id)) {
+      if (currentSelection.value.isSelected(node.id)) {
         return;
       }
-      modifyCurrentState((state) => {
-        state.selection.addSelectedScript(node.id, false);
+      modifyCurrentSelection((selection) => {
+        selection.addSelectedScript(node.id, false);
       });
     }
     if (node.state.current.checkState === TreeNodeCheckState.Unchecked) {
-      if (!currentState.value.selection.isSelected(node.id)) {
+      if (!currentSelection.value.isSelected(node.id)) {
         return;
       }
-      modifyCurrentState((state) => {
-        state.selection.removeSelectedScript(node.id);
+      modifyCurrentSelection((selection) => {
+        selection.removeSelectedScript(node.id);
       });
     }
   }

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

@@ -1,16 +1,19 @@
 import {
-  computed, shallowReadonly, shallowRef, triggerRef,
+  computed, shallowReadonly,
 } from 'vue';
-import { injectKey } from '@/presentation/injectionSymbols';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
+import type { useUserSelectionState } from '@/presentation/components/Shared/Hooks/UseUserSelectionState';
 import { getScriptNodeId } from './CategoryNodeMetadataConverter';
 
-export function useSelectedScriptNodeIds(scriptNodeIdParser = getScriptNodeId) {
-  const { selectedScripts } = useSelectedScripts();
+export function useSelectedScriptNodeIds(
+  useSelectionStateHook: ReturnType<typeof useUserSelectionState>,
+  scriptNodeIdParser = getScriptNodeId,
+) {
+  const { currentSelection } = useSelectionStateHook;
 
   const selectedNodeIds = computed<readonly string[]>(() => {
-    return selectedScripts
+    return currentSelection
       .value
+      .selectedScripts
       .map((selected) => scriptNodeIdParser(selected.script));
   });
 
@@ -18,33 +21,3 @@ export function useSelectedScriptNodeIds(scriptNodeIdParser = getScriptNodeId) {
     selectedScriptNodeIds: shallowReadonly(selectedNodeIds),
   };
 }
-
-function useSelectedScripts() {
-  const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
-  const { onStateChange } = injectKey((keys) => keys.useCollectionState);
-
-  const selectedScripts = shallowRef<readonly SelectedScript[]>([]);
-
-  function updateSelectedScripts(newReference: readonly SelectedScript[]) {
-    if (selectedScripts.value === newReference) {
-      // Manually trigger update if the array was mutated using the same reference.
-      // Array might have been mutated without changing the reference
-      triggerRef(selectedScripts);
-    } else {
-      selectedScripts.value = newReference;
-    }
-  }
-
-  onStateChange((state) => {
-    updateSelectedScripts(state.selection.selectedScripts);
-    events.unsubscribeAllAndRegister([
-      state.selection.changed.on((scripts) => {
-        updateSelectedScripts(scripts);
-      }),
-    ]);
-  }, { immediate: true });
-
-  return {
-    selectedScripts: shallowReadonly(selectedScripts),
-  };
-}