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/ToggleSwitch.vue

@@ -0,0 +1,188 @@
+<template>
+  <div
+    class="toggle-switch"
+    @click="handleClickPropagation"
+  >
+    <input
+      type="checkbox"
+      class="toggle-input"
+      v-model="isChecked"
+    >
+    <div class="toggle-animation">
+      <span class="label-off">{{ label }}</span>
+      <span class="label-on">{{ label }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+
+export default defineComponent({
+  props: {
+    value: Boolean,
+    label: {
+      type: String,
+      required: true,
+    },
+    stopClickPropagation: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    input: (isChecked: boolean) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  setup(props, { emit }) {
+    const isChecked = computed({
+      get() {
+        return props.value;
+      },
+      set(value: boolean) {
+        if (value === props.value) {
+          return;
+        }
+        emit('input', value);
+      },
+    });
+
+    function handleClickPropagation(event: Event): void {
+      if (props.stopClickPropagation) {
+        event.stopPropagation();
+      }
+    }
+
+    return {
+      isChecked,
+      handleClickPropagation,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use 'sass:math';
+@use "@/presentation/assets/styles/main" as *;
+
+$color-toggle-unchecked : $color-primary-darker;
+$color-toggle-checked   : $color-on-secondary;
+$color-text-unchecked   : $color-on-primary;
+$color-text-checked     : $color-on-secondary;
+$color-bg-unchecked     : $color-primary;
+$color-bg-checked       : $color-secondary;
+$size-height            : 30px;
+$size-circle            : math.div($size-height * 2, 3);
+$padding-horizontal     : 0.40em;
+$gap                    : 0.25em;
+
+@mixin locateNearCircle($direction: 'left') {
+  $circle-width: calc(#{$size-circle} + #{$padding-horizontal});
+  $circle-space: calc(#{$circle-width} + #{$gap});
+  @if $direction == 'left' {
+    margin-left: $circle-space;
+  } @else {
+    margin-right: $circle-space;
+  }
+}
+
+@mixin setVisibility($isVisible: true) {
+  @if $isVisible {
+    display: block;
+    opacity: 1;
+  } @else {
+    display: none;
+    opacity: 0;
+  }
+}
+
+.toggle-switch {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  width: auto;
+  height: $size-height;
+  border-radius: $size-height;
+  line-height: $size-height;
+  font-size: math.div($size-height, 2);
+
+  input.toggle-input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 2;
+    @include clickable;
+  }
+
+  .toggle-animation {
+    display: flex;
+    align-items: center;
+    gap: $gap;
+    width: 100%;
+    height: 100%;
+    background-color: $color-bg-unchecked;
+    transition: background-color 0.25s ease-out;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      left: $padding-horizontal;
+      $initial-top: 50%;
+      $centered-top-offset: math.div($size-circle, 2);
+      $centered-top: calc(#{$initial-top} - #{$centered-top-offset});
+      top: $centered-top;
+      width: $size-circle;
+      height: $size-circle;
+      border-radius: 50%;
+      background-color: $color-toggle-unchecked;
+      transition: left 0.3s ease-out;
+      z-index: 10;
+    }
+  }
+
+  input.toggle-input:checked + .toggle-animation {
+    background-color: $color-bg-checked;
+    flex-direction: row-reverse;
+
+    &:before {
+      $left-offset: calc(100% - #{$size-circle});
+      $padded-left-offset: calc(#{$left-offset} - #{$padding-horizontal});
+      left: $padded-left-offset;
+      background-color: $color-toggle-checked;
+    }
+
+    .label-off {
+      @include setVisibility(false);
+    }
+
+    .label-on {
+      @include setVisibility(true);
+    }
+  }
+
+  .label-off, .label-on {
+    text-transform: uppercase;
+    font-weight: 700;
+    transition: all 0.3s ease-out;
+  }
+
+  .label-off {
+    @include setVisibility(true);
+    @include locateNearCircle('left');
+    padding-right: $padding-horizontal;
+  }
+
+  .label-on {
+    @include setVisibility(false);
+    color: $color-text-checked;
+
+    @include locateNearCircle('right');
+    padding-left: $padding-horizontal;
+  }
+}
+</style>