Instead of rendering thoughts hierarchically in the DOM, render them all at the same level.

e.g. Instead of this:

<Thought value="A">
  <Thought value="B">
    <Thought value="x"></Thought>
    <Thought value="y"></Thought>
    <Thought value="z"></Thought>
  </Thought>
</Thought>

We want them rendered in the DOM like this:

<Thought value="A" lvl="0">
<Thought value="B" lvl="1">
<Thought value="x" lvl="2">
<Thought value="y" lvl="2">
<Thought value="z" lvl="2">

Instead of visually hiding ancestors, do not render them at all.

The aim of this task is to eliminate empty space above and below deeply nested thoughts and to increase performance by not rendering ancestors hidden by the autofocus. It will also allow more complex navigation animations.

Extra care must be taken when the cursor moves to ensure that the visible thoughts remain in exactly the same position within the viewport without any visual choppiness. This includes any custom scroll position handling.

This is primarily a refactor. Visually the app should stay nearly identical.