PR 2589 merged with main

[yangchristina]

#2589 merged with main

Cannot put CSSTransition inside wrapper component, must be in map

Changes:

• timeout uses fastDuration instead of veryFastDuration
• replace left {durations.${layoutDuration}} ease-out,top {durations.${layoutDuration}} ease-out, with

transition: isNewThought
          ? `left {durations.layoutNodeAnimationFastDuration} ease-out,top {durations.layoutNodeAnimationFastDuration} ease-out`
          : `left {durations.layoutNodeAnimationDuration} ease-out,top {durations.layoutNodeAnimationDuration} ease-out`,

(PandaCSS cannot statically extract{durations.${layoutDuration}})

[trevinhofmann]

Thank you, @yangchristina!

This PR does not appear to have the same 1. Disappearing thoughts issue as #2589 👍

However, I am not seeing a fade-in animation when creating a new thought. To be sure it wasn't just too fast for me to notice, I also tried changing the animation speed to 'slow'.

Screen.Recording.2024-11-18.at.11.44.35.PM.mov

---

I don't believe this is being enforced (yet), but just want to also note that rebasing is generally preferred instead of merge commits.

[trevinhofmann]

@raineorshine - Can you please clarify what is intended in this part of #1790? I believe the current functionality is incorrect, but it isn't obvious to me what the desired animations/durations are.

Speed up the tree-node's transition (normally layoutNodeAnimationDuration) by 50% on New (Sub)Thought only.

This logic currently affects the animation duration when indenting to convert an empty thought into a subthought. It does not affect the animation when indenting a non-empty thought or when using the newSubthought action. Here is a demo of the three, with layoutNodeAnimationDuration increased for a more noticeable difference:

Screen.Recording.2024-11-18.at.11.35.22.PM.mov

[yangchristina]

@raineorshine @trevinhofmann The fade-in animation works if the div with nodeRef is moved into LayoutTree. However, then this check if (belowCursor && !isCursor && y > viewportBottom + height) return null would not use the same y, which seems to have been added for CSSTransitions.

[raineorshine]

I'm sorry for the confusion, but it was actually #2581 that needed help with the merge, not #2589. I mentioned this in #2581, but I was not specific in my personal communication to you @yangchristina on Discord, so my apologies.

@zukilover made some progress on merging #2581, so we might not need this. I will mark this as draft for now and then we will merge the PR's one at a time, in order, until we get the desired result. Thanks for your patience.

[yangchristina]

@raineorshine Sorry about this, I should have checked with you first. It's good it's been resolved now though!