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.

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    class="documentation-text"
+    v-html="renderedText"
+    v-on:click.stop
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue';
+import { createRenderer } from './MarkdownRenderer';
+
+export default defineComponent({
+  props: {
+    docs: {
+      type: Array as PropType<ReadonlyArray<string>>,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    const renderedText = computed<string>(() => renderText(props.docs));
+
+    return {
+      renderedText,
+    };
+  },
+});
+
+const renderer = createRenderer();
+
+function renderText(docs: readonly string[] | undefined): string {
+  if (!docs || docs.length === 0) {
+    return '';
+  }
+  if (docs.length === 1) {
+    return renderer.render(docs[0]);
+  }
+  const bulletpoints = docs
+    .map((doc) => renderAsMarkdownListItem(doc))
+    .join('\n');
+  return renderer.render(bulletpoints);
+}
+
+function renderAsMarkdownListItem(content: string): string {
+  if (!content || content.length === 0) {
+    throw new Error('missing content');
+  }
+  const lines = content.split(/\r\n|\r|\n/);
+  return `- ${lines[0]}${lines.slice(1)
+    .map((line) => `\n  ${line}`)
+    .join()}`;
+}
+</script>
+
+<style lang="scss"> /* Not scoped due to element styling such as "a". */
+@use "@/presentation/assets/styles/main" as *;
+$text-color: $color-on-primary;
+$text-size: 0.75em; // Lower looks bad on Firefox
+
+.documentation-text {
+  color: $text-color;
+  font-size: $text-size;
+  font-family: $font-main;
+  code {
+    word-break: break-all; // Inline code should wrap with the line, or whole text overflows
+    font-family: $font-normal;
+    font-weight: 600;
+  }
+  a {
+    &[href] {
+      word-break: break-word; // So URLs don't overflow
+    }
+    &[href^="http"]{
+      &:after {
+        /*
+          Use mask element instead of content/background-image etc.
+          This way we can apply current font color to it to match the theme
+        */
+        mask: url(@/presentation/assets/icons/external-link.svg) no-repeat 50% 50%;
+        mask-size: cover;
+        content: '';
+
+        display: inline-block;
+        width: $text-size;
+        height: $text-size;
+
+        background-color: $text-color;
+        margin-left: calc($text-size / 4);
+      }
+      /*
+        Match color of global hover behavior. We need to do it manually because global hover sets
+        `color` property but here we need to modify `background-color` property because color only
+        works if SVG is embedded as HTML element (as `<svg/>`) not as `url(..)` as we do. Then the
+        only option is to use `mask` and `background-color` properties.
+      */
+      @include hover-or-touch {
+        &::after{
+          background-color: $globals-color-hover;
+        }
+      }
+    }
+  }
+  /*
+    Different browsers have different <p>, we should even this out.
+    See CSS 2.1 specification https://www.w3.org/TR/CSS21/sample.html.
+  */
+  p {
+    /*
+      Remove surrounding padding so a markdown text that is a list (e.g. <ul>)
+      has same outer padding as a paragraph (</p>).
+    */
+    margin: 0;
+    + p {
+      margin-top: 1em;
+    }
+  }
+  ul {
+    // CSS default is 40px, if the text is a bulletpoint, it leads to unexpected padding.
+    padding-inline-start: 1em;
+
+    /*
+      Set list style explicitly, because otherwise it changes based on parent <ul>s in tree view.
+      We reset the style from here.
+    */
+    list-style: square;
+  }
+}
+</style>