feat(core): drop doc onto split view (#9487)

fix AF-2068, AF-2069, AF-1175, AF-2061, AF-2079, AF-2034, AF-2080, AF-1960, AF-2081

1. replace `dnd-kit` with `@atlaskit/pragmatic-drag-and-drop`
2. allow creating split views by drag & drop the following
   a. WorkbenchLinks (route links), like journals, trash, all docs
   b. doc refs
   c. tags/collection
3. style adjustments to split view
4. remove split view's feature flag and make it GA for electron

https://github.com/user-attachments/assets/6a3e4a25-faa2-4215-8eb0-983f44db6e8c

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

@@ -1,8 +1,9 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
-import { useTransition } from 'react-transition-state';
+import { useTransitionState } from 'react-transition-state';
 
+import { useDropTarget } from '../../ui/dnd';
 import { Tooltip, type TooltipProps } from '../../ui/tooltip';
 import * as styles from './resize-panel.css';
 
@@ -22,6 +23,7 @@ export interface ResizeHandleProps
   tooltipShortcut?: TooltipProps['shortcut'];
   tooltipOptions?: Partial<Omit<TooltipProps, 'content' | 'shortcut'>>;
   tooltipShortcutClassName?: string;
+  dropTargetOptions?: Parameters<typeof useDropTarget>[0];
 }
 
 export interface ResizePanelProps
@@ -40,6 +42,7 @@ export interface ResizePanelProps
   resizeHandleTooltipOptions?: Partial<
     Omit<TooltipProps, 'content' | 'shortcut'>
   >;
+  resizeHandleDropTargetOptions?: Parameters<typeof useDropTarget>[0];
   enableAnimation?: boolean;
   width: number;
   unmountOnExit?: boolean;
@@ -56,6 +59,7 @@ const ResizeHandle = ({
   resizeHandlePos,
   resizeHandleOffset,
   resizeHandleVerticalPadding,
+  dropTargetOptions,
   open,
   onOpen,
   onResizing,
@@ -115,6 +119,10 @@ const ResizeHandle = ({
     [maxWidth, resizeHandlePos, minWidth, onWidthChange, onResizing, onOpen]
   );
 
+  const { dropTargetRef } = useDropTarget(dropTargetOptions, [
+    dropTargetOptions,
+  ]);
+
   return (
     <Tooltip
       content={tooltip}
@@ -125,7 +133,10 @@ const ResizeHandle = ({
       <div
         {...rest}
         data-testid="resize-handle"
-        ref={ref}
+        ref={node => {
+          ref.current = node;
+          dropTargetRef.current = node;
+        }}
         style={assignInlineVars({
           [styles.resizeHandleOffsetVar]: `${resizeHandleOffset ?? 0}px`,
           [styles.resizeHandleVerticalPadding]: `${
@@ -169,17 +180,18 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
       resizeHandleTooltipShortcut,
       resizeHandleTooltipShortcutClassName,
       resizeHandleTooltipOptions,
+      resizeHandleDropTargetOptions,
       ...rest
     },
     ref
   ) {
     const safeWidth = Math.min(maxWidth, Math.max(minWidth, width));
-    const [{ status }, toggle] = useTransition({
+    const [{ status }, toggle] = useTransitionState({
       timeout: animationTimeout,
     });
     useLayoutEffect(() => {
       toggle(open);
-    }, [open]);
+    }, [open, toggle]);
     return (
       <div
         {...rest}
@@ -213,6 +225,7 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
           onWidthChange={onWidthChange}
           open={open}
           resizing={resizing}
+          dropTargetOptions={resizeHandleDropTargetOptions}
         />
       </div>
     );