Improve UI performance by optimizing reactivity

- Replace `ref`s with `shallowRef` when deep reactivity is not needed.
- Replace `readonly`s with `shallowReadonly` where the goal is to only
  prevent `.value` mutation.
- Remove redundant `ref` in `SizeObserver.vue`.
- Remove redundant nested `ref` in `TooltipWrapper.vue`.
- Remove redundant `events` export from `UseCollectionState.ts`.
- Remove redundant `computed` from `UseCollectionState.ts`.
- Remove `timestamp` from `TreeViewFilterEvent` that becomes unnecessary
  after using `shallowRef`.
- Add missing unit tests for `UseTreeViewFilterEvent`.
- Add missing stub for `FilterChangeDetails`.

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

@@ -50,7 +50,7 @@
 <script lang="ts">
 import {
   defineComponent, ref, watch, computed,
-  inject,
+  inject, shallowRef,
 } from 'vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
@@ -95,7 +95,7 @@ export default defineComponent({
 
     const isAnyChildSelected = ref(false);
     const areAllChildrenSelected = ref(false);
-    const cardElement = ref<HTMLElement>();
+    const cardElement = shallowRef<HTMLElement>();
 
     const cardTitle = computed<string | undefined>(() => {
       if (!props.categoryId || !currentState.value) {

src/presentation/components/Scripts/View/Tree/TreeView/Bindings/TreeInputFilterEvent.ts

@@ -2,14 +2,6 @@ import type { ReadOnlyTreeNode } from '../Node/TreeNode';
 
 export interface TreeViewFilterEvent {
   readonly action: TreeViewFilterAction;
-  /**
-   * A simple numeric value to ensure uniqueness of each event.
-   *
-   * This property is used to guarantee that the watch function will trigger
-   * even if the same filter action value is emitted consecutively.
-   */
-  readonly timestamp: Date;
-
   readonly predicate?: TreeViewFilterPredicate;
 }
 
@@ -25,7 +17,6 @@ export function createFilterTriggeredEvent(
 ): TreeViewFilterEvent {
   return {
     action: TreeViewFilterAction.Triggered,
-    timestamp: new Date(),
     predicate,
   };
 }
@@ -33,6 +24,5 @@ export function createFilterTriggeredEvent(
 export function createFilterRemovedEvent(): TreeViewFilterEvent {
   return {
     action: TreeViewFilterAction.Removed,
-    timestamp: new Date(),
   };
 }

src/presentation/components/Scripts/View/Tree/TreeView/Node/UseNodeState.ts

@@ -1,5 +1,5 @@
 import {
-  WatchSource, inject, ref, watch,
+  WatchSource, inject, shallowRef, watch,
 } from 'vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { ReadOnlyTreeNode } from './TreeNode';
@@ -10,7 +10,7 @@ export function useNodeState(
 ) {
   const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
 
-  const state = ref<TreeNodeStateDescriptor>();
+  const state = shallowRef<TreeNodeStateDescriptor>();
 
   watch(nodeWatcher, (node: ReadOnlyTreeNode) => {
     if (!node) {

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

@@ -14,7 +14,7 @@
 <script lang="ts">
 import {
   defineComponent, onMounted, watch,
-  ref, PropType,
+  shallowRef, PropType,
 } from 'vue';
 import { TreeRootManager } from './TreeRoot/TreeRootManager';
 import TreeRoot from './TreeRoot/TreeRoot.vue';
@@ -53,7 +53,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const treeContainerElement = ref<HTMLElement | undefined>();
+    const treeContainerElement = shallowRef<HTMLElement | undefined>();
 
     const tree = new TreeRootManager();
 

src/presentation/components/Scripts/View/Tree/TreeView/UseCurrentTreeNodes.ts

@@ -1,5 +1,5 @@
 import {
-  WatchSource, watch, inject, readonly, ref,
+  WatchSource, watch, inject, shallowReadonly, shallowRef,
 } from 'vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { TreeRoot } from './TreeRoot/TreeRoot';
@@ -8,8 +8,8 @@ import { QueryableNodes } from './TreeRoot/NodeCollection/Query/QueryableNodes';
 export function useCurrentTreeNodes(treeWatcher: WatchSource<TreeRoot>) {
   const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
 
-  const tree = ref<TreeRoot | undefined>();
-  const nodes = ref<QueryableNodes | undefined>();
+  const tree = shallowRef<TreeRoot | undefined>();
+  const nodes = shallowRef<QueryableNodes | undefined>();
 
   watch(treeWatcher, (newTree) => {
     tree.value = newTree;
@@ -22,6 +22,6 @@ export function useCurrentTreeNodes(treeWatcher: WatchSource<TreeRoot>) {
   }, { immediate: true });
 
   return {
-    nodes: readonly(nodes),
+    nodes: shallowReadonly(nodes),
   };
 }

src/presentation/components/Scripts/View/Tree/TreeView/UseNodeStateChangeAggregator.ts

@@ -1,5 +1,5 @@
 import {
-  WatchSource, inject, watch, ref,
+  WatchSource, inject, watch, shallowRef,
 } from 'vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
@@ -17,7 +17,7 @@ export function useNodeStateChangeAggregator(
   const { nodes } = useTreeNodes(treeWatcher);
   const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
 
-  const onNodeChangeCallback = ref<NodeStateChangeEventCallback>();
+  const onNodeChangeCallback = shallowRef<NodeStateChangeEventCallback>();
 
   watch([
     () => nodes.value,

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

@@ -1,5 +1,5 @@
 import {
-  computed, inject, readonly, ref,
+  computed, inject, shallowReadonly, shallowRef,
 } from 'vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
@@ -15,7 +15,7 @@ export function useSelectedScriptNodeIds(scriptNodeIdParser = getScriptNodeId) {
   });
 
   return {
-    selectedScriptNodeIds: readonly(selectedNodeIds),
+    selectedScriptNodeIds: shallowReadonly(selectedNodeIds),
   };
 }
 
@@ -23,7 +23,7 @@ function useSelectedScripts() {
   const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
   const { onStateChange } = inject(InjectionKeys.useCollectionState)();
 
-  const selectedScripts = ref<readonly SelectedScript[]>([]);
+  const selectedScripts = shallowRef<readonly SelectedScript[]>([]);
 
   onStateChange((state) => {
     selectedScripts.value = state.selection.selectedScripts;
@@ -35,6 +35,6 @@ function useSelectedScripts() {
   }, { immediate: true });
 
   return {
-    selectedScripts: readonly(selectedScripts),
+    selectedScripts: shallowReadonly(selectedScripts),
   };
 }

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

@@ -1,5 +1,5 @@
 import {
-  Ref, inject, readonly, ref,
+  Ref, inject, shallowReadonly, shallowRef,
 } from 'vue';
 import { IScript } from '@/domain/IScript';
 import { ICategory } from '@/domain/ICategory';
@@ -21,7 +21,7 @@ export function useTreeViewFilterEvent() {
   const { onStateChange } = inject(InjectionKeys.useCollectionState)();
   const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
 
-  const latestFilterEvent = ref<TreeViewFilterEvent | undefined>(undefined);
+  const latestFilterEvent = shallowRef<TreeViewFilterEvent | undefined>(undefined);
 
   const treeNodePredicate: TreeNodeFilterResultPredicate = (node, filterResult) => filterMatches(
     getNodeMetadata(node),
@@ -36,7 +36,7 @@ export function useTreeViewFilterEvent() {
   }, { immediate: true });
 
   return {
-    latestFilterEvent: readonly(latestFilterEvent),
+    latestFilterEvent: shallowReadonly(latestFilterEvent),
   };
 }