Add indicator arrow on top/bottom of viewport for drop positions outs…

panda.config.ts

@@ -119,6 +119,17 @@ const keyframes = defineKeyframes({
       fill: 'white',
     },
   },
+  bobble: {
+    '0%': {
+      transform: 'translateX(-50%) translateY(0)',
+    },
+    '50%': {
+      transform: 'translateX(-50%) translateY(10px)',
+    },
+    '100%': {
+      transform: 'translateX(-50%) translateY(0)',
+    },
+  },
 })
 
 const globalCss = defineGlobalStyles({
@@ -315,6 +326,7 @@ export default defineConfig({
           bullet: { value: 2 },
           stack: { value: 1 },
           hide: { value: -1 },
+          arrow: { value: 1400 },
         },
       },
       recipes: {

src/actions/index.ts

@@ -107,3 +107,4 @@ export { default as undoArchive } from './undoArchive'
 export { default as unknownAction } from './unknownAction'
 export { default as updateSplitPosition } from './updateSplitPosition'
 export { default as updateThoughts } from './updateThoughts'
+export { default as updateHoveringPath } from './updateHoveringPath'

src/actions/updateHoveringPath.ts

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+import Path from '../@types/Path'
+import State from '../@types/State'
+import Thunk from '../@types/Thunk'
+
+/** Reducer for setting the hoveringPath when drag leave is firing. */
+const updateHoveringPath = (state: State, { path }: { path: Path | undefined }) => ({
+  ...state,
+  hoveringPath: path,
+})
+
+/** Action-creator for state.hoveringPath. */
+export const updateHoveringPathActionCreator =
+  ({ path }: { path: Path | undefined }): Thunk =>
+  dispatch =>
+    dispatch([{ type: 'updateHoveringPath', path }])
+
+export default _.curryRight(updateHoveringPath)

src/components/HoverArrow.tsx

@@ -0,0 +1,36 @@
+import { token } from '../../styled-system/tokens/index.mjs'
+
+interface HoverArrowType {
+  hoverArrowVisibility: 'above' | 'below' | null
+  scrollTop: number
+  arrowBottom: number
+}
+
+/** Renders upward/downward arrow when hovering over a sorted context. */
+const HoverArrow = ({ hoverArrowVisibility, scrollTop, arrowBottom }: HoverArrowType) => {
+  return (
+    hoverArrowVisibility && (
+      <div
+        style={{
+          width: '0',
+          height: '0',
+          borderLeft: '10px solid transparent',
+          borderRight: '10px solid transparent',
+          position: 'absolute',
+          top: hoverArrowVisibility === 'above' ? scrollTop : undefined,
+          left: '50%',
+          zIndex: 'arrow',
+          transform: 'translateX(-50%)',
+          borderBottom: '20px solid rgb(155, 170, 220)',
+          ...(hoverArrowVisibility === 'below' && {
+            bottom: `${arrowBottom}px`,
+            rotate: '180deg',
+          }),
+          animation: `bobble ${token('durations.arrowBobbleAnimation')} infinite`,
+        }}
+      ></div>
+    )
+  )
+}
+
+export default HoverArrow

src/components/LayoutTree.tsx

@@ -13,6 +13,7 @@ import ThoughtId from '../@types/ThoughtId'
 import { isTouch } from '../browser'
 import { HOME_PATH } from '../constants'
 import testFlags from '../e2e/testFlags'
+import useSortedContext from '../hooks/useSortedContext'
 import attributeEquals from '../selectors/attributeEquals'
 import calculateAutofocus from '../selectors/calculateAutofocus'
 import findDescendant from '../selectors/findDescendant'
@@ -25,6 +26,7 @@ import nextSibling from '../selectors/nextSibling'
 import rootedParentOf from '../selectors/rootedParentOf'
 import simplifyPath from '../selectors/simplifyPath'
 import thoughtToPath from '../selectors/thoughtToPath'
+import store from '../stores/app'
 import reactMinistore from '../stores/react-ministore'
 import scrollTopStore from '../stores/scrollTop'
 import viewportStore from '../stores/viewport'
@@ -38,6 +40,7 @@ import parseLet from '../util/parseLet'
 import safeRefMerge from '../util/safeRefMerge'
 import unroot from '../util/unroot'
 import DropEnd from './DropEnd'
+import HoverArrow from './HoverArrow'
 import VirtualThought from './VirtualThought'
 
 /** 1st Pass: A thought with rendering information after the tree has been linearized. */
@@ -186,24 +189,27 @@ const useNavAndFooterHeight = () => {
   // Get the nav and footer heights for the spaceBelow calculation.
   // Nav hight changes when the breadcrumbs wrap onto multiple lines.
   // Footer height changes on font size change.
-  const [navAndFooterHeight, setNavAndFooterHeight] = useState(0)
+  const [navbarHeight, setNavbarHeight] = useState(0)
+  const [footerHeight, setFooterHeight] = useState(0)
 
   // Read the footer and nav heights on render and set the refs so that the spaceBelow calculation is updated on the next render.
   // This works because there is always a second render due to useSizeTracking.
   // No risk of infinite render since the effect cannot change the height of the nav or footer.
-  // nav/footer height -> effect -> setNavAndFooterHeight -> render -> effect -> setNavAndFooterHeight (same values)
+  // nav/footer height -> effect -> setNavbarHeight/setFooterHeight -> render -> effect -> setNavbarHeight/setFooterHeight (same values)
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(
     _.throttle(() => {
       const navEl = document.querySelector('[aria-label="nav"]')
       const footerEl = document.querySelector('[aria-label="footer"]')
-      setNavAndFooterHeight(
-        (navEl?.getBoundingClientRect().height || 0) + (footerEl?.getBoundingClientRect().height || 0),
-      )
+      setNavbarHeight(navEl?.getBoundingClientRect().height || 0)
+      setFooterHeight(footerEl?.getBoundingClientRect().height || 0)
     }, 16.666),
   )
 
-  return navAndFooterHeight
+  return {
+    navbarHeight,
+    footerHeight,
+  }
 }
 
 /** Recursiveley calculates the tree of visible thoughts, in order, represented as a flat list of thoughts with tree layout information. */
@@ -364,16 +370,27 @@ const LayoutTree = () => {
         state.cursor.length - (hasChildren(state, head(state.cursor)) ? 2 : 3)
       : 0,
   )
+  const scrollTop = scrollTopStore.useState()
 
-  const [bulletWidth, setBulletWidth] = useState<number | undefined>(0)
+  // Width of thought bullet
+  const [bulletWidth, setBulletWidth] = useState(0)
+  // Height of toolbar element
+  const [toolbarHeight, setToolbarHeight] = useState(0)
+  // Distance from toolbar to the first visible thought
+  const [distanceFromTop, setDistanceFromTop] = useState(0)
 
   // set the bullet width only during drag or when simulateDrop is true
   useLayoutEffect(() => {
     if (dragInProgress || testFlags.simulateDrop) {
       const bullet = ref.current?.querySelector('[aria-label=bullet]')
-      setBulletWidth(bullet?.getBoundingClientRect().width)
+      if (bullet) setBulletWidth(bullet?.getBoundingClientRect().width)
+
+      const toolbar = document.querySelector('#toolbar')
+      if (toolbar) setToolbarHeight(toolbar.getBoundingClientRect().height)
+
+      setDistanceFromTop((ref.current?.getBoundingClientRect().top ?? 0) + scrollTop)
     }
-  }, [dragInProgress])
+  }, [dragInProgress, scrollTop])
 
   // singleLineHeight is the measured height of a single line thought.
   // If no sizes have been measured yet, use the estimated height.
@@ -454,6 +471,13 @@ const LayoutTree = () => {
     ),
   )
 
+  const { footerHeight, navbarHeight } = useNavAndFooterHeight()
+  const navAndFooterHeight = navbarHeight + footerHeight
+
+  const maxVisibleY = viewportHeight + scrollTop - (distanceFromTop + navbarHeight)
+
+  const { isSortedContext, newRank, hoveringOnDropEnd } = useSortedContext()
+
   // extend spaceAbove to be at least the height of the viewport so that there is room to scroll up
   const spaceAboveExtended = Math.max(spaceAbove, viewportHeight)
 
@@ -470,17 +494,29 @@ const LayoutTree = () => {
   const {
     indentCursorAncestorTables,
     treeThoughtsPositioned,
+    hoverArrowVisibility,
   }: {
     // the global indent based on the depth of the cursor and how many ancestors are tables
     indentCursorAncestorTables: number
     treeThoughtsPositioned: TreeThoughtPositioned[]
+    hoverArrowVisibility: 'above' | 'below' | null
   } = useMemo(() => {
     // y increases monotically, so it is more efficent to accumulate than to calculate each time
     // x varies, so we calculate it each time
     // (it is especially hard to determine how much x is decreased on cliffs when there are any number of tables in between)
     let yaccum = 0
     let indentCursorAncestorTables = 0
 
+    // Arrow visibility based on the rank of drop target in sorted context.
+    let hoverArrowVisibility: 'above' | 'below' | null = null
+
+    // The rank of the first and last thoughts in sorted context.
+    let firstThoughtRank = 0
+    let lastThoughtRank = 0
+    // The rank of the first and last visible thoughts in sorted context.
+    let firstVisibleThoughtRank = 0
+    let lastVisibleThoughtRank = 0
+
     /** A stack of { depth, y } that stores the bottom y value of each col1 ancestor. */
     /* By default, yaccum is not advanced by the height of col1. This is what positions col2 at the same y value as col1. However, if the height of col1 exceeds the height of col2, then the next node needs to be positioned below col1, otherwise it will overlap. This stack stores the minimum y value of the next node (i.e. y + height). Depth is used to detect the next node after all of col1's descendants.
 
@@ -504,6 +540,7 @@ const LayoutTree = () => {
     const tableCol1Widths = new Map<ThoughtId, number>()
     const treeThoughtsPositioned = treeThoughts.map((node, i) => {
       const next: TreeThought | undefined = treeThoughts[i + 1]
+      const state = store.getState()
 
       // cliff is the number of levels that drop off after the last thought at a given depth. Increase in depth is ignored.
       // This is used to determine how many DropEnd to insert before the next thought (one for each level dropped).
@@ -587,6 +624,27 @@ const LayoutTree = () => {
         (node.autofocus === 'dim' || node.autofocus === 'show') &&
         !(next?.autofocus === 'dim' || next?.autofocus === 'show')
 
+      // Check if current thought is inside a sorted context.
+      const isInSortedContext = attributeEquals(state, head(parentOf(node.path)), '=sort', 'Alphabetical')
+
+      if (isInSortedContext) {
+        const currentThought = getThoughtById(state, head(node.path))
+        // Get first and last thought ranks in sorted context
+        if (!firstThoughtRank) {
+          firstThoughtRank = currentThought.rank
+        }
+        lastThoughtRank = currentThought.rank
+
+        // Check if the current thought is visible
+        if (y < maxVisibleY && y > scrollTop - toolbarHeight) {
+          // Get first and last visible thought ranks in sorted context
+          if (!firstVisibleThoughtRank) {
+            firstVisibleThoughtRank = currentThought.rank
+          }
+          lastVisibleThoughtRank = currentThought.rank
+        }
+      }
+
       return {
         ...node,
         cliff,
@@ -599,8 +657,30 @@ const LayoutTree = () => {
       }
     })
 
-    return { indentCursorAncestorTables, treeThoughtsPositioned }
-  }, [fontSize, sizes, singleLineHeight, treeThoughts])
+    // Determine hoverArrowVisibility based on newRank and the visible thoughts
+    if (newRank > 0 && (isSortedContext || hoveringOnDropEnd)) {
+      if (newRank > lastVisibleThoughtRank && lastVisibleThoughtRank !== lastThoughtRank) {
+        hoverArrowVisibility = 'below'
+      } else if (newRank < firstVisibleThoughtRank && firstVisibleThoughtRank !== firstThoughtRank) {
+        hoverArrowVisibility = 'above'
+      } else {
+        hoverArrowVisibility = null
+      }
+    }
+
+    return { indentCursorAncestorTables, treeThoughtsPositioned, hoverArrowVisibility }
+  }, [
+    treeThoughts,
+    isSortedContext,
+    hoveringOnDropEnd,
+    singleLineHeight,
+    fontSize,
+    sizes,
+    maxVisibleY,
+    scrollTop,
+    toolbarHeight,
+    newRank,
+  ])
 
   const spaceAboveLast = useRef(spaceAboveExtended)
 
@@ -624,11 +704,13 @@ const LayoutTree = () => {
     [spaceAboveExtended],
   )
 
-  const navAndFooterHeight = useNavAndFooterHeight()
   /** The space added below the last rendered thought and the breadcrumbs/footer. This is calculated such that there is a total of one viewport of height between the last rendered thought and the bottom of the document. This ensures that when the keyboard is closed, the scroll position will not change. If the caret is on a thought at the top edge of the screen when the keyboard is closed, then the document will shrink by the height of the virtual keyboard. The scroll position will only be forced to change if the document height is less than window.scrollY + window.innerHeight. */
   // Subtract singleLineHeight since we can assume that the last rendered thought is within the viewport. (It would be more accurate to use its exact rendered height, but it just means that there may be slightly more space at the bottom, which is not a problem. The scroll position is only forced to change when there is not enough space.)
   const spaceBelow = viewportHeight - navAndFooterHeight - CONTENT_PADDING_BOTTOM - singleLineHeight
 
+  // Calculate the position of the arrow relative to the bottom of the container.
+  const arrowBottom = totalHeight + spaceBelow - scrollTop - viewportHeight + navAndFooterHeight
+
   return (
     <div
       className={css({
@@ -640,6 +722,7 @@ const LayoutTree = () => {
       }}
       ref={ref}
     >
+      <HoverArrow arrowBottom={arrowBottom} hoverArrowVisibility={hoverArrowVisibility} scrollTop={scrollTop} />
       <div
         className={css({ transition: `transform {durations.layoutSlowShiftDuration} ease-out` })}
         style={{

src/components/Thought.tsx

@@ -18,6 +18,7 @@ import testFlags from '../e2e/testFlags'
 import globals from '../globals'
 import useDragAndDropThought from '../hooks/useDragAndDropThought'
 import useDragHold from '../hooks/useDragHold'
+import useDragLeave from '../hooks/useDragLeave'
 import useHideBullet from '../hooks/useHideBullet'
 import useHoveringPath from '../hooks/useHoveringPath'
 import useThoughtStyle from '../hooks/useThoughtStyle'
@@ -161,14 +162,17 @@ const ThoughtContainer = ({
         equalPath(cursorParent, path)
   })
 
-  const { isDragging, dragSource, isHovering, isBeingHoveredOver, dropTarget } = useDragAndDropThought({
-    path,
-    simplePath,
-    isVisible,
-    isCursorParent,
-  })
+  const { isDragging, dragSource, isHovering, isBeingHoveredOver, dropTarget, canDropThought, isDeepHovering } =
+    useDragAndDropThought({
+      path,
+      simplePath,
+      isVisible,
+      isCursorParent,
+    })
 
   useHoveringPath(path, isBeingHoveredOver, DropThoughtZone.ThoughtDrop)
+  useDragLeave({ isDeepHovering, canDropThought })
+
   // check if the cursor is editing a thought directly
   const isEditing = useSelector(state => equalPath(state.cursor, path))
 

src/durations.config.ts

@@ -24,6 +24,7 @@ const durationsMillis = {
   layoutNodeAnimationDuration: 150,
   /** The time it takes the trace TraceGesture to fade in/out. */
   traceOpacityDuration: 150,
+  arrowBobbleAnimation: 1000,
 } as const
 
 export default durationsMillis

src/hooks/useDragAndDropThought.tsx

@@ -207,6 +207,7 @@ const dropCollect = (monitor: DropTargetMonitor) => ({
   // is being hovered over current thought irrespective of whether the given item is droppable
   isBeingHoveredOver: monitor.isOver({ shallow: true }),
   isDeepHovering: monitor.isOver(),
+  canDropThought: monitor.canDrop(),
 })
 
 /** A draggable and droppable Thought hook. */
@@ -221,14 +222,23 @@ const useDragAndDropThought = (props: Partial<ThoughtContainerProps>) => {
     collect: dragCollect,
   })
 
-  const [{ isHovering, isBeingHoveredOver, isDeepHovering }, dropTarget] = useDrop({
+  const [{ isHovering, isBeingHoveredOver, isDeepHovering, canDropThought }, dropTarget] = useDrop({
     accept: [DragAndDropType.Thought, NativeTypes.FILE],
     canDrop: (item, monitor) => canDrop(propsTypes, monitor),
     drop: (item, monitor) => drop(propsTypes, monitor),
     collect: dropCollect,
   })
 
-  return { isDragging, dragSource, dragPreview, isHovering, isBeingHoveredOver, isDeepHovering, dropTarget }
+  return {
+    isDragging,
+    dragSource,
+    dragPreview,
+    isHovering,
+    isBeingHoveredOver,
+    isDeepHovering,
+    canDropThought,
+    dropTarget,
+  }
 }
 
 export default useDragAndDropThought