style: Improve tree visual

Use block and tree if you want to present a treelike structure, see
keybinding for a usage sample

assets/css/index.css

@@ -405,14 +405,23 @@ label input {
   width: 100%;
 }
 
-.tree, .tree ul {
+.tree p {
+    margin-bottom: 0px;
+}
+.tree {
+  padding: 10px;
   position: relative;
-  padding-left: 0;
   list-style-type: none;
   line-height: var(--line-height);
+  background: var(--background-color-alt);
 }
 .tree ul {
   margin: 0;
+  padding: 0;
+  position: relative;
+  list-style-type: none;
+  line-height: var(--line-height);
+  background: var(--background-color-alt);
 }
 .tree ul li {
   position: relative;

assets/css/webfont.css

@@ -49,3 +49,9 @@
 .nf-fa-clipboard_list:before {
   content: "\ed7b";
 }
+.nf-fa-grip_vertical:before {
+  content: "\f142";
+}
+.nf-oct-kebab_horizontal:before {
+  content: "\uf4eb";
+}

content/docs/architecture/command.smd

@@ -99,24 +99,6 @@ sent to commands vary for each command.
 Sometimes [keybinding](/docs/architecture/keybind) is enough to
 accomplish a compound of already present commands.
 
-[]($section.id('deepen'))
-## Code organization
-
-Is common to define private functions in a given module that are
-invoked from commands, as usual, functions are meant to be reused and
-help organize code.
-
-For example, in hx mode `helix.zig` the `select_to_char_left_helix`
-command uses the functions `helix_with_selections_const_arg` which
-iterates over all cursels and applies the
-`select_cursel_to_char_left_helix` function.
-
-```zig
-pub fn select_to_char_left_helix(_: *void, ctx: Ctx) Result {
-    try helix_with_selections_const_arg(ctx, &select_cursel_to_char_left_helix);
-}
-```
-
 []($section.id('command_arguments'))
 ### Sending parameters to commands
 
@@ -133,7 +115,6 @@ extract from the context like this:
 
 ```zig
 pub fn goto_line(self: *Self, ctx: Context) Result {
-
     var line: usize = 0;
     if (!try ctx.args.match(.{tp.extract(&line)}))
         return error.InvalidGotoLineArgument;
@@ -162,15 +143,39 @@ and json, packing all of them in Command.Context.
 
 A deeper explanation of the rules about parameter passing is exposed in
 [inner data exchange](/docs/architecture/inner_data_exchange), given
-that parameters can be sent not only to commands, but other broather
+that parameters can be sent not only to commands, but other broader
 use cases.
 
+[]($section.id('deepen'))
+## Code organization
+
+Is common to define private functions in a given module meant to be
+invoked from commands. As usual, reusing code with functions
+help organize code.
+
+For example, in hx mode `src/tui/mode/helix.zig` the
+`select_to_char_left_helix` command uses the functions
+`helix_with_selections_const_arg` which iterates over all cursels and
+applies the `select_cursel_to_char_left_helix` function.
+
+```zig
+pub fn select_to_char_left_helix(_: *void, ctx: Ctx) Result {
+    try helix_with_selections_const_arg(ctx, &select_cursel_to_char_left_helix);
+}
+```
+
 []($section.id('next'))
 ## Next steps
 
-* [minimode](/docs/architecture/minimode) shows argument passing to
+[Minimodes](/docs/architecture/minimode) pass arguments to the editor,
-commands in reaction to keypresses.
+if you wonder how to go beyond the current buffer window, when there
-* [Palettes](/docs/architecture/palette) invoke commands and pass
+are actions like going to a specific line or when searching or
-parameters to them.
+replacing a character,this is the place.
+
+[Palettes](/docs/architecture/palette) are built to open files, change
+buffers and also pass parameters to commands. Diving out from the
+buffer and editor.
+
 * [Add tests](/docs/testing) to harden your code
+* [Sending parameters across](/docs/architecture/inner_data_exchange)
 * [Back to architecture](/docs/architecture)

content/docs/architecture/index.smd

@@ -116,7 +116,7 @@ feedback via `logview`.  To view logs use `f11` to toggle the
 previous messages, or alternatively, open flow with the option
 `--show-logs`.
 
-To log something, first import
+To log something, first, `import log`
 
 ```zig
 const log = @import("log");

content/docs/architecture/keybind.smd

@@ -39,7 +39,7 @@ key/combos and add an array, where the first element is the combination
 to map to the commands that will be invoked, the array accepts strings
 like in
 
-```js
+```zig
 ["ctrl+alt+shift+p", "open_command_palette"]
 ```
 
@@ -80,27 +80,59 @@ Some terminology
 
 In general a keybinding json shows this hierarchy:
 
-```
+>[]($block.attrs('tree'))
-Mode > Imode > press > Key and commands
+>`flow.json` `<-- keybindings for flow mode`
-map  > map   > array > array(array(string,numbers),strings,numbers)
+>`{`
-```
+>* "project": {   `<-- imode`
+>    * "press": [ `<-- react when press`
+>      * ["ctrl+alt+shift+r", "restart"], `<-- the keys with commands`
+>      * 
+>    * ]
+>* },
+>* "normal": [    `<-- imode`
+>    * "inherit": "project" `<-- Inherits all the keypresses and reactions from project`
+>    * "press": [ `<- custom actions for normal imode`
+>      * ["ctrl+z", "undo"],
+>      * 
+>    * ],
+>    * "release": [ `<-- normal imode also reacts when some keys are released`
+>      * ["left_control", "disable_jump_mode"], `<-- no more jumping when left control is released`
+>    * ]
+>* ],
+>* "select": {  "cursor":"block"  }, `<-- imode with a cursor change`
+>* "home": {   "on_match_failure": "ignore"   }, `<-- imode`
+>* "overlay/palette": {   } `<-- keys are handled by a palette`
+>* "mini/numeric": {   } `<-- minimodes also handle actions`
+>*  `}`
 
-`Mode` is the json file that holds a map, where each entry has a map
-called `press` that is an array of arrays.
 
-`project` is the main imode in `flow.json` and it can be noticed that
+`project` is the main imode in `flow.json`, mapping many combo key down
-`normal` imode `inherits` from `project`, some modes have `release`,
+presses.
-usually one will be using only `press` inside `normal` imode or the
+
-specific mode if inside `vim`, `helix` or `emacs` modes.
+Notice that `normal` imode `inherits` from `project`, meaning all the
+key presses handled by project react the same way in normal, which also
+extends with other keypresses. `normal` also captures key
+releases, we show a sample when the control key is released,
+stopping jumping mode inside flow.json.
+
+`SELECT` imode inherits from normal and shows a different cursor to
+remind it is the current one.
+
+`home` mode is shown when no buffer is open and if the user presses
+keys that are not explicitly handled to bring mental peace to the
+user.
+
+`overlay/palette` gets active when a
+[palette](/docs/architecture) is active.
 
 Looking further, it can be seen that
 [minimodes](/docs/architecture/minimode) have their own keybinding
-mappings defined in a particular imode.
+mappings defined in a particular imode, the same as palettes.
 
 As stated previously, there is a mode hierarchy, the main mode is flow
-and other modes inherit from it. We remind that also imodes have a
+and other modes inherit from it. Each mode inherits, extends and
-hierarchy and it's common for major imodes to be descendants from
+overrides actions and define their internal imodes extending as
-`project`.
+required each minimode.
 
 []($section.id('adding'))
 ## Adding a Keybinding
@@ -122,7 +154,7 @@ its results to a *scratch buffer* called `test`.
 
 The original definition is:
 
-```js
+```zig
 ["f5", ["create_scratch_buffer", "*test*"], ["shell_execute_insert", "zig", "build", "test"]],
 ```
 
@@ -134,12 +166,12 @@ the `f5` key.
 `create_scratchbuffer` is invoked receiving the parameter `*test*`
 which results in creating a scratch buffer if didn't exist. And then
 executing the command `shell_execute_insert` that receives the
-paramaters `zig`, `build`, `test`. This latter command is executing
+parameters `zig`, `build`, `test`. This latter command is executing
 a shell command called `zig` with the parameters `build` and `test`;
 if you don't have zig installed, it will not work, and you might
 want to remap `f5` to a different shell command.
 
-```
+```zig
 [
   "f5",
   [
@@ -174,6 +206,7 @@ flow.
 
 
 * Making flow even better with [tests](/docs/testing)
-* [How to contribute](/docs/contributing)
+* Adding [new commands](/docs/architecture/command)
-* [Get in touch](https://discord.com/invite/4wvteUPphx) to share your
+* [Contributing](/docs/contributing)
-combos
+* [Getting in touch](https://discord.com/invite/4wvteUPphx) to share
+your combos

content/docs/architecture/minimode.smd

@@ -10,12 +10,11 @@
 },
 ---
 
-Minimodes commitment is to add functionality to the editor, are opened
+Minimodes add functionality to the editor, are opened for short periods
-for short periods of time and have their own set of keybindings to
+of time and have their own set of keybindings to execute an specific
-execute an specific action, i.e. find something in the current buffer
+action, i.e. find something in the current buffer or in project files,
-or in project files, open/save a file, and, in modal modes(like vim
+open/save a file, and, in modal modes(like vim and helix), as receiving
-and helix), as receiving a number as a prefix to repeat an action many
+a number as a prefix to repeat an action many times.
-times.
 
 []($section.id("anatomy"))
 ## Anatomy of minimodes
@@ -111,6 +110,7 @@ example(look for it in the command palette `:`).
 []($section.id("next"))
 ## Next steps
 
-* Head to [architecture](/docs/architecture)
+* Create [palettes](/docs/architecture/palette)
 * Review [commands](/docs/architecture/command)
-* Review [keybindings](/docs/architecture/keybind)
+* Adjust [keybindings](/docs/architecture/keybind)
+* To [architecture](/docs/architecture)

content/docs/architecture/palette.smd

@@ -18,9 +18,9 @@ the elements, and having special elements that trigger different
 actions, for example, the task palette.
 
 Examples of palettes are `command_palette`, `clipboard_palette`, they
-all are based on `src/tui/mode/overlay/palette.zig that does all the
+all are based on `src/tui/mode/overlay/palette.zig` doing all the heavy
-heavy lifting and sets the framework to create new palettes as simple
+lifting and sets the framework to create new palettes as simple as
-as possible.
+possible.
 
 Palettes are an special case of [minimode] and for instance a mode, they
 receive inputs from the keyboard and execute the beforehand mentioned

content/docs/mode/helix.smd

@@ -10,7 +10,7 @@
 },
 ---
 
-This document describes implementation of Helix Mode.
+This document describes Helix Mode implementation.
 
 []($section.id('what'))
 ## What and what not
@@ -19,16 +19,21 @@ The first and biggest difference is that Flow has a mode that emulates
 Helix, or at least has equivalent of the worthiest actions that can be
 done with Helix. The conversely is not true.
 
+When entering to Helix Mode through `F4`, you land on `NOR`
+[imode](/docs/architecture/keybind#hierarchy), there are `SEL` and
+`INS` imodes implemented.
+
 `:` opens up Flow's rich command palette that might have
 functionalities Helix users are used to have, if you find something
 missing, it's possible to
-[open a Feature Request](https://github.com/neurocyte/flow/issues),
+[open a feature request](https://github.com/neurocyte/flow/issues),
 make sure to review
 [other issues](https://github.com/neurocyte/flow/issues?q=is%3Aissue%20state%3Aopen%20label%3Ahelix-mode)
-to avoid repeating or see if there is anyone interested in porting on
+to avoid repeating or see in [Discord](https://discord.gg/kzJC9fA7)
-[Discord](https://discord.gg/kzJC9fA7) to ask if or there is a
+to ask if there is a workaround, or anyone else is interested in
-workaround, remember that it's possible to bounce back to Flow mode
+porting your requirement, adding a reaction to an issue offers
-if needed.
+awareness on what to implement or to get higher priority, remember that
+it's possible to bounce back to Flow(f4) mode if needed.
 
 []($section.id('enhancing'))
 ## Enhancing hx mode
@@ -36,29 +41,31 @@ if needed.
 This is a programmer's editor, you are more than welcome to enhance to
 suit your needs that maybe coincide with others.
 
-Please take a look at [architecture](/docs/architecture) and
+Take a look at [architecture](/docs/architecture) and
 [contributing](/docs/contributing) for an overview and the mechanics
-of getting your changes into Flow.
+of getting your changes into flow.
 
 hx mode is modal kind, the same as vim mode, and the file that has the
-particular work to make it real is in `src/tui/mode/helix.zig`, adding
+particular work to make it real is `src/tui/mode/helix.zig`, adding
 a `command` and the corresponding `meta` is what is required.
 [More on commands](/docs/architecture/command).
 
 []($section.id('pickers'))
 ### Pickers
 
-Flow hx mode offers most of the picker types equivalents with `panels`
+Flow hx mode offers most of the Helix pickers functionalities with
-and [palettes](/docs/architecture/palette).  Example of panels are
+`panels` and [palettes](/docs/architecture/palette).  Example of panels
-the `g` `r` (go to reference from lsp) and `space` `/` (a.k.a find in
+are the `g` `r` (go to reference from lsp) and `space` `/` (a.k.a find
-files). Examples of `palettes` are `space` `b` to pick a buffer or
+in files). Examples of `palettes` are `space` `b` to pick a buffer or
 `space` `f` to open a file in your project. Panels open below the
 editor while palettes open overlapping the working area.
 
-One medium sized project is to create a widget that has one input
+One medium sized project is to create a **Helix picker** widget that
-widget with two panels, on the left, the list of options and, on the
+has one input widget with two panels, on the left, the list of options
-right, the preview of the selected option and offer various keybindings
+and, on the right, the preview of the selected option. The input
-to manipulate the objects inside both panels with filtering.
+widget reacts to various keybindings to manipulate the objects inside
+both panels with filtering. `src/tui/mode/overlay/palette.zig`
+implements much of the required functionality.
 
 []($section.id('next'))
 ## Next steps
@@ -66,11 +73,10 @@ to manipulate the objects inside both panels with filtering.
 Said all of this, it's possible to start contributing via pull
 requesting [keybinds](/docs/architecture/keybind),
 [commands](/docs/architecture/command),
-[palettes](/docs/architecture/palette), or the special widget
+[palettes](/docs/architecture/palette), or the **hx picker**.
-mentioned previously.
 
 More about the [architecture](/docs/architecture) or jump to
 [contribution guidelines](/docs/contributing).
 
 Join the [#helix-mode channel](https://discord.gg/sxdejrAA) and get in
-touch with other hx users. 
+touch with other hx mode and helix interested users.

contrib/symbolnerdfontmonolist.txt

@@ -7,3 +7,5 @@ U+eda4
 U+e8ef
 U+f044
 U+ed7b
+U+f142
+U+f4eb