BUGFIX: fix hover on toggle icon not changing color to blue (#3635)

**What I did**

*Problem 1: Hover States*

Looking at the CSS, it looks as if the toggle button of a node in the Content and Page NodeTrees is supposed to change their color to blue when hovering over them.

While at it, I also replicated the behavior from the top left burger menu. The Label and the icon now appear blue when they are either hovered over or selected (While selected, the gray Background is still present).

*Problem 2: Collapsing all children*

Since I am new to Reselect  I wasn't able to create a new selector to get all descendants of a node. Also, I didn't want to break anything accidentally. Instead, I added the function to optionally collapse the children of a node by shift-clicking the toggle icon of a node.

*Problem 3: Make it easier to drop a node into a dropTarget*

**How I did it**

*Problem 1: Hover States*

* Styles are now applied to the toggle  SVG
* Added a hover state to the nodes

*Problem 2: Collapsing all children*

1. The toggle action now has more arguments
    - ```collapseChildren: boolean``` true if the shift key is pressed on the click event
    - ```childrenContextPaths: NodeContextPath[]``` the context paths of all children of the clicked node 
      - children that can't be toggled are filtered out
      - checks if children are loaded at all
   - ```childrenCollapsedByDefault: boolean```
     - checks if children are collapsedbydefault (unlike a normal node these nodes must be removed from the redux store to be appearing collapsed

2. To integrate a simple collapse all button the toggle buttons could be selected and the click events could be fired including the shift Key event via simple JS. I wonder if a solution like this would be up to the standards? Since the redux actions would be fired, I don't think it would create any unwanted side effects.

*Problem 3: Make it easier to drop a node into a dropTarget*

I added extra height to the drop Target, but only after a node is already being dragged.

**How to verify it**

Before: No hover effects

After:
New Hover Effects and collapsing children nodes in action:

![2023-09-17 01-44-48](https://github.com/neos/neos-ui/assets/56877180/c9927963-4703-410c-bd0c-f6688ef89490)




---------

Co-authored-by: Markus Günther <[email protected]>
Co-authored-by: Wilhelm Behncke <[email protected]>

packages/react-ui-components/src/Tree/node.css

@@ -3,6 +3,10 @@
     margin: 0;
     position: relative;
     line-height: 20px;
+
+    &:hover {
+        background: var(--colors-PrimaryBlueHover)25;
+    }
 }
 .header__chevron {
     composes: reset from './../reset.css';
@@ -18,8 +22,8 @@
 
     cursor: pointer;
 
-    &:hover {
-        color: var(--colors-PrimaryBlue);
+    &:hover > svg {
+        color: var(--colors-PrimaryBlueHover);
     }
 }
 .header__chevron--isCollapsed > svg {
@@ -43,6 +47,11 @@
     display: inline-block;
     position: absolute;
     text-align: center;
+
+    .header:hover & > svg,
+    .header__data--isActive & > svg {
+        color: var(--colors-PrimaryBlueHover);
+    }
 }
 
 .header__data {
@@ -74,6 +83,9 @@
 
 .header__data--isFocused {
     background: var(--colors-ContrastNeutral);
+    &:hover {
+        background: var(--colors-PrimaryBlue)10;
+    }
 
     &.header__data--isHiddenInIndex,
     &.header__data--isHidden {
@@ -100,9 +112,14 @@
     composes: reset from './../reset.css';
     margin-left: 2em;
 
+    .header:hover &,
     .header__data--isActive & {
         color: var(--colors-PrimaryBlue);
     }
+
+    &:hover {
+        color: var(--colors-PrimaryBlueHover);
+    }
 }
 
 .contents {