feat(tree): replace sidebar tree (react-aborist) with custom tree implementation (#2199)

* feat(tree): replace react-arborist with custom tree implementation

* feat(tree): keyboard arrow navigation between rows

* feat(emoji-picker): focus search input on open

* refactor(emoji): switch to @slidoapp/emoji-mart fork for accessibility

* feat(tree): Home/End and typeahead keyboard navigation

* feat(tree): roving tabindex and * to expand sibling subtrees

* feat(tree): Space activation and ARIA refinements

* fix(tree): move treeitem role to focusable row + aria-current

apps/client/src/features/page/tree/components/doc-tree-drop-indicator.tsx

@@ -0,0 +1,39 @@
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import styles from '../styles/tree.module.css';
+
+type Props = {
+  instruction: Instruction;
+  indentPx: number;
+};
+
+export function DocTreeDropIndicator({ instruction, indentPx }: Props) {
+  const blocked = instruction.type === 'instruction-blocked';
+  const inst = blocked ? instruction.desired : instruction;
+
+  const style = {
+    ['--drop-line-indent' as never]: `${indentPx}px`,
+  } as React.CSSProperties;
+
+  if (inst.type === 'reorder-above') {
+    return (
+      <div
+        className={styles.dropLine}
+        data-edge="top"
+        data-blocked={blocked || undefined}
+        style={style}
+      />
+    );
+  }
+  if (inst.type === 'reorder-below') {
+    return (
+      <div
+        className={styles.dropLine}
+        data-edge="bottom"
+        data-blocked={blocked || undefined}
+        style={style}
+      />
+    );
+  }
+  // 'combine' (make-child) is rendered via [data-receiving-drop] on the row itself.
+  return null;
+}