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/assets/styles/_mixins.scss

@@ -44,4 +44,10 @@
             transform: translateY($offset-upward);
         }
     }
-}
+}
+
+@mixin reset-ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

src/presentation/assets/styles/main.scss

@@ -9,4 +9,3 @@
 @forward "./components/card";
 
 @forward "./third-party-extensions/tooltip.scss";
-@forward "./third-party-extensions/tree.scss";

src/presentation/assets/styles/third-party-extensions/_tree.scss

@@ -1,62 +0,0 @@
-// Overrides base styling for LiquorTree
-@use "@/presentation/assets/styles/colors" as *;
-@use "@/presentation/assets/styles/mixins" as *;
-
-$color-tree-bg                          : $color-primary-darker;
-$color-node-arrow                       : $color-on-primary;
-$color-node-fg                          : $color-on-primary;
-$color-node-hover-bg                    : $color-primary-dark;
-$color-node-keyboard-bg                 : $color-surface;
-$color-node-keyboard-fg                 : $color-on-surface;
-$color-node-checkbox-bg-checked         : $color-secondary;
-$color-node-checkbox-bg-unchecked       : $color-primary-darkest;
-$color-node-checkbox-border-checked     : $color-secondary;
-$color-node-checkbox-border-unchecked   : $color-on-primary;
-$color-node-checkbox-tick-checked       : $color-on-secondary;
-
-.tree {
-    background: $color-tree-bg;
-    &-node { 
-        white-space: normal !important;
-        > .tree-content {
-            > .tree-anchor {
-                > span {
-                    color: $color-node-fg;
-                    font-size: 1.5em;
-                }
-                display: block; // so it takes full width to allow aligning items inside
-            }
-            @include hover-or-touch {
-                background: $color-node-hover-bg !important;
-            }
-            background: $color-tree-bg !important; // If not styled, it gets white background on mobile.
-        }
-        &.selected { // When using keyboard navigation it highlights current item and its child items
-            background: $color-node-keyboard-bg;
-            .tree-text {
-                color: $color-node-keyboard-fg !important; //  $block
-            }
-        }
-    }
-    &-checkbox {
-        border-color: $color-node-checkbox-border-unchecked !important;
-        &.checked {
-            background: $color-node-checkbox-bg-checked !important;
-            border-color: $color-node-checkbox-border-checked !important;
-            &:after {
-                border-color: $color-node-checkbox-tick-checked !important;
-            }
-        }
-        &.indeterminate {
-            border-color: $color-node-checkbox-border-unchecked !important;
-        }
-        background: $color-node-checkbox-bg-unchecked !important;
-    }
-    &-arrow {
-        &.has-child {
-            &.rtl:after, &:after {
-                border-color: $color-node-arrow !important;
-            }
-        }
-    }
-}