LayoutTree: Factor out DropCliff component

[raineorshine]

em/src/components/LayoutTree.tsx

Lines 712 to 751 in 54f5a65

	{/* DropEnd (cliff) */}
	{dragInProgress &&
	cliff < 0 &&
	// do not render hidden cliffs
	// rough autofocus estimate
	autofocusDepth - depth < 2 &&
	Array(-cliff)
	.fill(0)
	.map((x, i) => {
	const pathEnd = -(cliff + i) < path.length ? (path.slice(0, cliff + i) as Path) : HOME_PATH
	const cliffDepth = unroot(pathEnd).length
	// After table col2, shift the DropEnd left by the width of col1.
	// This correctly positions the drop target for dropping after the table view.
	// Otherwise it would be too far to the right.
	const dropEndMarginLeft =
	isTableCol2 && cliffDepth - depth < 0 ? treeThoughtsPositioned[index - 1].width || 0 : 0
	return (
	<div
	key={'DropEnd-' + head(pathEnd)}
	className='z-index-subthoughts-drop-end'
	style={{
	position: 'relative',
	top: '-0.2em',
	left: `calc(${cliffDepth - depth}em - ${dropEndMarginLeft}px + ${isTouch ? -1 : 1}px)`,
	transition: 'left 0.15s ease-out',
	}}
	>
	<DropEnd
	depth={pathEnd.length}
	path={pathEnd}
	// Extend the click area of the drop target when there is nothing below.
	// The last visible drop-end will always be a dimmed thought at distance 1 (an uncle).
	// Dimmed thoughts at distance 0 should not be extended, as they are dimmed siblings and sibling descendants that have thoughts below
	// last={!nextChildId}
	/>
	</div>
	)
	})}