Introduce new TreeView UI component

Key highlights:

- Written from scratch to cater specifically to privacy.sexy's
  needs and requirements.
- The visual look mimics the previous component with minimal changes,
  but its internal code is completely rewritten.
- Lays groundwork for future functionalities like the "expand all"
  button a flat view mode as discussed in #158.
- Facilitates the transition to Vue 3 by omitting the Vue 2.0 dependent
  `liquour-tree` as part of #230.

Improvements and features:

- Caching for quicker node queries.
- Gradual rendering of nodes that introduces a noticable boost in
  performance, particularly during search/filtering.
  - `TreeView` solely governs the check states of branch nodes.

Changes:

- Keyboard interactions now alter the background color to highlight the
  focused item. Previously, it was changing the color of the text.
- Better state management with clear separation of concerns:
  - `TreeView` exclusively manages indeterminate states.
  - `TreeView` solely governs the check states of branch nodes.
  - Introduce transaction pattern to update state in batches to minimize
    amount of events handled.
- Improve keyboard focus, style background instead of foreground. Use
  hover/touch color on keyboard focus.
- `SelectableTree` has been removed. Instead, `TreeView` is now directly
  integrated with `ScriptsTree`.
- `ScriptsTree` has been refactored to incorporate hooks for clearer
  code and separation of duties.
- Adopt Vue-idiomatic bindings instead of keeping a reference of the
  tree component.
- Simplify and change filter event management.
- Abandon global styles in favor of class-scoped styles.
- Use global mixins with descriptive names to clarify indended
  functionality.

tests/integration/presentation/components/Scripts/View/Tree/NodeContent/Documentation/MarkdownRenderer.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { parseApplication } from '@/application/Parser/ApplicationParser';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import { createRenderer } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Documentation/MarkdownRenderer';
+import { createRenderer } from '@/presentation/components/Scripts/View/Tree/NodeContent/Documentation/MarkdownRenderer';
 
 describe('MarkdownRenderer', () => {
   describe('can render all docs', () => {

tests/integration/presentation/components/Scripts/View/Tree/TreeView/TreeView.spec.ts

@@ -0,0 +1,120 @@
+import {
+  describe, it, expect,
+} from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, ref } from 'vue';
+import TreeView from '@/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue';
+import { TreeInputNodeData } from '@/presentation/components/Scripts/View/Tree/TreeView/Bindings/TreeInputNodeData';
+import { provideDependencies } from '@/presentation/bootstrapping/DependencyProvider';
+import { ApplicationContextStub } from '@tests/unit/shared/Stubs/ApplicationContextStub';
+
+describe('TreeView', () => {
+  it('should render all provided root nodes correctly', async () => {
+    // arrange
+    const nodes = createSampleNodes();
+    const wrapper = createTreeViewWrapper(nodes);
+    // act
+    await waitForStableDom(wrapper.element);
+    // assert
+    const expectedTotalRootNodes = nodes.length;
+    expect(wrapper.findAll('.node').length).to.equal(expectedTotalRootNodes, wrapper.html());
+    const rootNodeTexts = nodes.map((node) => node.data.label);
+    rootNodeTexts.forEach((label) => {
+      expect(wrapper.text()).to.include(label);
+    });
+  });
+});
+
+function createTreeViewWrapper(initialNodeData: readonly TreeInputNodeData[]) {
+  return mount(defineComponent({
+    components: {
+      TreeView,
+    },
+    setup() {
+      provideDependencies(new ApplicationContextStub());
+
+      const initialNodes = ref(initialNodeData);
+      const selectedLeafNodeIds = ref<readonly string[]>([]);
+      return {
+        initialNodes,
+        selectedLeafNodeIds,
+      };
+    },
+    template: `
+    <TreeView
+      :initialNodes="initialNodes"
+      :selectedLeafNodeIds="selectedLeafNodeIds"
+    >
+      <template v-slot:node-content="{ nodeMetadata }">
+        {{ nodeMetadata.label }}
+      </template>
+    </TreeView>`,
+  }));
+}
+
+function createSampleNodes() {
+  return [
+    {
+      id: 'root1',
+      data: {
+        label: 'Root 1',
+      },
+      children: [
+        {
+          id: 'child1',
+          data: {
+            label: 'Child 1',
+          },
+        },
+        {
+          id: 'child2',
+          data: {
+            label: 'Child 2',
+          },
+        },
+      ],
+    },
+    {
+      id: 'root2',
+      data: {
+        label: 'Root 2',
+      },
+      children: [
+        {
+          id: 'child3',
+          data: {
+            label: 'Child 3',
+          },
+        },
+      ],
+    },
+  ];
+}
+
+function waitForStableDom(rootElement, timeout = 3000, interval = 200): Promise<void> {
+  return new Promise((resolve, reject) => {
+    let lastTimeoutId;
+    const observer = new MutationObserver(() => {
+      if (lastTimeoutId) {
+        clearTimeout(lastTimeoutId);
+      }
+
+      lastTimeoutId = setTimeout(() => {
+        observer.disconnect();
+        resolve();
+      }, interval);
+    });
+
+    observer.observe(rootElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    setTimeout(() => {
+      observer.disconnect();
+      reject(new Error('Timeout waiting for DOM to stabilize'));
+    }, timeout);
+  });
+}