Crop empty space around autohide

[raineorshine]

Crop all the empty space above and below the visible content when autofocus is active. Cropping needs to occur seamlessly and maintain the perceived scroll position.

Consider the following approaches:

1. ~Shift the content and adjust the scroll position by the same amount.~
   • ✗ Risk of jitter
   • Autofocus usually only occurs when navigating, not when scrolling.
   • However it is possible to navigate and then scroll before the autohide animation completes.
   • Probably best to crop before the animation completes.
   • Bottom is easier than top since the footer is kept below the fold.
   • What about autoscroll on new subthought?
   • ✗ Safari mobile screen flash during CSS transition
2. Shift the toolbar and footer and block scrolling above and below.
   • ✗ Scroll bar position will be wrong.
   • ✗ Lose native scroll bounce.
   • ✗ Risk of autoscroll breakage.
3. Re-render at top/bottom as soon as empty space is exhausted.
   • ✗ Flash will still occur since navigating to parent requires repositioning.
   • ✗ Scroll bar position will be wrong until end is reached.
   • Possibly preserves native scroll bounce (?)
4. Software scroll
   • ✗ Non-native performance
     • Even very careful software scroll does not feel right
     • https://idiotwu.github.io/smooth-scrollbar/
   • Requires custom spring implementation
5. Scroll mirroring
   • Steps
     • Set Content to position: fixed
     • Set height of body to height of Content
     • On scroll, translate Content by the same amount.
   • ✓ Correct scroll bar position
   • ✓ No flash, since content is always in the viewport
   • ✓ Preserves native scroll bounce*
     • ✗ *Possible lag
   • overscroll-behavior: contain
   • Steps
     • Instead of scrolling the body, scroll a container element that only includes the visible thoughts.
   • ✓ Correct scroll bar position
   • Can thoughts be moved in and out of the container without interrupting their animations?
     • i.e. simultaneous scroll and fade [thoughts] and pan [content]
     • Scroll + Fade
     • Multigesture stops scroll, so there can be no momentum scrolling on mobile while a gesture is performed.
     • Back button can be hit on desktop during fade though.
     • Fade + Scroll
     • Easily reproduced on both platforms with cursorUp/Down then scroll.
   • May be combined with scroll mirroring to avoid having to actually contain the thoughts.

[raineorshine]

Empty space below cursor cropped in f9bdeabcda and 12db3129b1.

[raineorshine]

Empty space above cursor cc3928a 7004dc9315 f2fcb26b34.

• [x] Translate entire tree up
  • Cannot translate individual nodes as their position is animated.
• [x] Virtualized thoughts in the root
  • Appear to be generating faulty spaceAbove
• [x] Snap rather than animate
  • Because there is no way to smoothly scroll at the exact same pace as the animation to maintain its position in the viewport.
• [ ] Pad top (translateY) and bottom (totalHeight) to ensure there is enough scrollY available to preserve the viewport.
  • Fixed scroll in a72e222a7e, but created the opposite problem of extra padding with scrollY of 0.
  • Mitigated in cbb3eae006. Removes padding completely when scrollY is 0, but results in extra top padding when scrolling further down the screen, and insufficient bottom padding when collapsing a thought at the end of a long context.

[raineorshine]

Insufficient total height when closing keyboard

Steps to reproduce

1. Scroll to bottom.
2. Set cursor on the bottom thought and ended edit mode.
3. Scroll so that the thought is at the top of the screen.
4. Close the keyboard.

https://github.com/cybersemics/em/assets/750276/1d57b75f-7a82-42ab-b822-47bfb5c642e8

[raineorshine]

Ran into fundamental issues with Approach 1. Need to revert.

See: https://github.com/cybersemics/em/issues/1778#issuecomment-2068076099

[raineorshine]

Probably need to max(scrollTop, documentHeight - viewportHeight) so that overscroll does not affect cropping.