Update "Trees Settings" documentation: refine hierarchy, update terminology, and add new visuals for customization options.

Author: mallowigi

docs/configuration/trees-settings.md

@@ -34,6 +34,8 @@ Trees Settings can be grouped into the following categories:
 
 {% include figure.html content="/screens/settingsv3/treeSettings.png" caption="Trees Settings" %}
 
+----
+
 ## Spacing Settings
 
 These options control various elements regarding the spacing in tree views.
@@ -55,89 +57,71 @@ This setting allows you to adjust the vertical spacing between items in tree vie
 {% include figure.html content="/screens/trees/largeLineHeight.png" caption="Large Line Height" %}
 
 ----
-### Custom font
-
-This feature is only available for premium users.
-{:class='card-panel warn'}
-
-Since version 6.10.0 you have the ability to customize the _Project View_'s **font family** and **size**.
-
-<div class="masonry">
 
-{% include figure.html content="/screens/customTreeFont.png" caption="Tree Font Settings" %}
+### Custom font
 
-{% include figure.html content="/screens/treeFont.png" caption="Custom Tree Font" %}
+Here you can customize the font family and font size of tree views without impacting the rest of the IDE.
 
-It also affects other trees as well, such as the _Find Usages_, _Settings_… (but not all).
+{% include figure.html content="/screens/trees/customFont1.png" caption="Custom Font and Font Size" %}
 
-</div>
+{% include figure.html content="/screens/trees/customFont2.png" caption="Custom Font and Font Size" %}
 
-**Note**: Although changing the font affects most trees right away, the _Project View_ still needs a restart for the changes to be visible.
-{:class='card-panel warn'}
 
 ----
-### Indicator style and thickness
+### Indicators
 
-This feature is only available for premium users.
-{:class='card-panel warn'}
+Here you can choose between different styles for the tree view indicators.
 
-This setting allows you to customize the _Selected Tree Item Indicator_ (the left accentued border) for more flavors.
+{% include figure.html content="/screens/trees/indicators.png" caption="Indicators" %}
 
-These are the available styles:
+You can choose from the following styles:
 
-| Style  | Screenshot                                         |
-|:-------|:---------------------------------------------------|
-| Border | <img src="/img/screens/borderIndicator.png">       |
-| Sharp  | <img src="/img/screens/selectedTreeIndicator.png"> |
-| Dot    | <img src="/img/screens/dotTreeIndicator.png">      |
-| None   | (no indicator)                                     |
+| Style            | Screenshot                                        |
+|:-----------------|:--------------------------------------------------|
+| Border (default) | <img src="/img/screens/indicators/border.png">    |
+| Sharp Border     | <img src="/img/screens/indicators/sharp.png">     |
+| Dot              | <img src="/img/screens/indicators/dot.png">       |
+| Boxed            | <img src="/img/screens/indicators/boxes.png">     |
+| Right Border     | <img src="/img/screens/indicators/right.png">     |
+| Underline        | <img src="/img/screens/indicators/underline.png"> |
+| None             | (no indicator)                                    |
 
 You can also customize the thickness of the said indicator with a value between `1` and `5`.
 
 Additionally, you can choose to:
 - **Use gradient**: Set the indicator color as a gradient of the accent color and a second color.
 - **Use complementary color**: Use the complementary color of the Accent Color, or use your own.
 
-Moreover, you can switch styles from the [Actions Panel](/docs/configuration/quick-actions-panel).
+{% include figure.html content="/screens/trees/gradient.png" caption="Gradient Indicator" %}
 
-----
-### Arrows style
+{% include figure.html content="/screens/trees/thickGradientBox.png" caption="Thick Boxed Indicator with Gradient" %}
 
-This setting is controlled by the [Atom Material Icons](https://plugins.jetbrains.com/plugin/10044-atom-material-icons) plugin.
+Moreover, you can switch styles from the [Actions Panel](/docs/configuration/quick-actions-panel).
 
 ----
-### Colored open directories
-
-This feature is only available for premium users.
-{:class='card-panel warn'}
-
-This setting allows you to colorize directories with opened files with the Accent color.
-This could be useful to immediately differentiate between files and directories, with the default being off.
-
-{% include figure.html content="/screens/boldDirectories.png" caption="Colored open directories" %}
 
-Please note that this is different from the [Styled Directories](#styled-directories) feature, which is a _Color Scheme_ feature.
+### Arrows style
 
-----
-### Styled directories
+Here you get the option to select between a list of different arrow styles.
 
-This feature is only available for premium users.
-{:class='card-panel warn'}
+{% include figure.html content="/screens/trees/arrows.png" caption="Arrows Styles" %}
 
-This setting allows you to set a custom style for directories in the _Project View_.
-This could be useful to immediately differentiate between files and directories, with the default being off.
+You can choose from the following styles:
 
-The options for configuring the style of directories can be found inside the
-[Custom File Colors Settings](/docs/configuration/file-status-colors#directories).
+| Style              | Screenshot                                    |
+|:-------------------|:----------------------------------------------|
+| Material (default) | <img src="/img/screens/arrows/default.png">   |
+| Triangle           | <img src="/img/screens/arrows/triangle.png">  |
+| Arrows             | <img src="/img/screens/arrows/arrows.png">    |
+| Plus-Minus         | <img src="/img/screens/arrows/plusMinus.png"> |
+| Circle             | <img src="/img/screens/arrows/circle.png">    |
 
-Please note that since it's a _Color Scheme_ feature, the style must be configured per color scheme rather than app-wide.
-This is great though for applying different styles according to the color scheme.
+**Note**: If you have the [Atom Material Icons](https://plugins.jetbrains.com/plugin/10044-atom-material-icons) plugin installed, this setting will be disabled as it is controlled by that plugin.
 {:class='card-panel warn'}
 
-This feature is available from versions **2.9** and up.
-
 ----
-### Notes
+### Colored open directories
+
+This setting applies the accent color to the directories of open files in the _Project View_.
 
-- Tree views' settings work for all tree views, even views such as "Project Structure" or "Remote Host".
-- _Font size_ also replaces the font of the settings tree.
+{% include figure.html content="/screens/trees/coloredOpen.png" caption="Colored open directories" %}