Add v1 split previews for sidebar file drags

apps/desktop/src/renderer/hooks/useFileDragBehavior/index.ts

@@ -0,0 +1,4 @@
+export {
+	getFileDragBehavior,
+	useFileDragBehavior,
+} from "./useFileDragBehavior";

apps/desktop/src/renderer/hooks/useFileDragBehavior/useFileDragBehavior.ts

@@ -0,0 +1,17 @@
+import type { FileDragBehavior } from "@superset/local-db";
+import { electronTrpc } from "renderer/lib/electron-trpc";
+import { DEFAULT_FILE_DRAG_BEHAVIOR } from "shared/constants";
+
+let cachedFileDragBehavior: FileDragBehavior = DEFAULT_FILE_DRAG_BEHAVIOR;
+
+/** Non-React getter, kept in sync by useFileDragBehavior(). */
+export function getFileDragBehavior(): FileDragBehavior {
+	return cachedFileDragBehavior;
+}
+
+export function useFileDragBehavior(): FileDragBehavior {
+	const { data } = electronTrpc.settings.getFileDragBehavior.useQuery();
+	const behavior = data ?? DEFAULT_FILE_DRAG_BEHAVIOR;
+	cachedFileDragBehavior = behavior;
+	return behavior;
+}

apps/desktop/src/renderer/lib/file-drag.ts

@@ -1,9 +1,15 @@
 export const INTERNAL_FILE_PATH_MIME = "application/x-superset-file-path";
 
+export function hasInternalDraggedFilePath(
+	dataTransfer: DataTransfer,
+): boolean {
+	return Array.from(dataTransfer.types).includes(INTERNAL_FILE_PATH_MIME);
+}
+
 export function getInternalDraggedFilePath(
 	dataTransfer: DataTransfer,
 ): string | null {
-	if (!Array.from(dataTransfer.types).includes(INTERNAL_FILE_PATH_MIME)) {
+	if (!hasInternalDraggedFilePath(dataTransfer)) {
 		return null;
 	}
 

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/components/BasePaneWindow/BasePaneWindow.tsx

@@ -1,11 +1,18 @@
 import { cn } from "@superset/ui/utils";
-import { useContext, useRef } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import type { MosaicBranch } from "react-mosaic-component";
 import { MosaicWindow, MosaicWindowContext } from "react-mosaic-component";
+import { useFileDragBehavior } from "renderer/hooks/useFileDragBehavior";
+import {
+	getInternalDraggedFilePath,
+	hasInternalDraggedFilePath,
+} from "renderer/lib/file-drag";
 import { useDragPaneStore } from "renderer/stores/drag-pane-store";
 import { useTabsStore } from "renderer/stores/tabs/store";
+import type { MosaicDropPosition } from "renderer/stores/tabs/types";
 import type { SplitOrientation } from "../../hooks";
 import { useSplitOrientation } from "../../hooks";
+import { InternalFileDropOverlay } from "./components/InternalFileDropOverlay";
 
 export interface PaneHandlers {
 	onFocus: () => void;
@@ -16,6 +23,23 @@ export interface PaneHandlers {
 	splitOrientation: SplitOrientation;
 }
 
+function getInternalFileDropPosition(
+	clientX: number,
+	clientY: number,
+	rect: DOMRect,
+): MosaicDropPosition {
+	const cx = rect.left + rect.width / 2;
+	const cy = rect.top + rect.height / 2;
+	const dx = clientX - cx;
+	const dy = clientY - cy;
+
+	if (Math.abs(dx) > Math.abs(dy)) {
+		return dx > 0 ? "right" : "left";
+	}
+
+	return dy > 0 ? "bottom" : "top";
+}
+
 /**
  * Connects drag source for root panes (single pane in a tab).
  * react-mosaic-component skips drag connection for root panes (path=[]),
@@ -76,16 +100,25 @@ export function BasePaneWindow({
 	hideToolbar = false,
 }: BasePaneWindowProps) {
 	const isActive = useTabsStore((s) => s.focusedPaneIds[tabId] === paneId);
+	const workspaceId = useTabsStore(
+		(s) => s.tabs.find((tab) => tab.id === tabId)?.workspaceId ?? null,
+	);
 	const workspaceRunState = useTabsStore(
 		(s) => s.panes[paneId]?.workspaceRun?.state,
 	);
+	const addFileViewerPane = useTabsStore((s) => s.addFileViewerPane);
 	const containerRef = useRef<HTMLDivElement>(null);
 	const splitOrientation = useSplitOrientation(containerRef);
 	const isDragging = useDragPaneStore((s) => s.draggingPaneId !== null);
 	const isTabDragging = useDragPaneStore((s) => s.isTabDragging);
 	const isResizing = useDragPaneStore((s) => s.isResizing);
 	const setDragging = useDragPaneStore((s) => s.setDragging);
 	const clearDragging = useDragPaneStore((s) => s.clearDragging);
+	const fileDragBehavior = useFileDragBehavior();
+	const internalFileDragDepthRef = useRef(0);
+	const internalFileDropPositionRef = useRef<MosaicDropPosition | null>(null);
+	const [internalFileDropPosition, setInternalFileDropPosition] =
+		useState<MosaicDropPosition | null>(null);
 
 	const handleFocus = () => {
 		setFocusedPane(tabId, paneId);
@@ -135,6 +168,140 @@ export function BasePaneWindow({
 
 	const isRoot = path.length === 0;
 
+	const resetInternalFileDragState = useCallback(() => {
+		internalFileDragDepthRef.current = 0;
+		internalFileDropPositionRef.current = null;
+		setInternalFileDropPosition(null);
+	}, []);
+
+	const isInternalFileViewerDropEnabled =
+		fileDragBehavior === "open-file-viewer" && workspaceId !== null;
+
+	const updateInternalFileDropPosition = useCallback(
+		(event: React.DragEvent<HTMLDivElement>): MosaicDropPosition => {
+			const nextPosition = getInternalFileDropPosition(
+				event.clientX,
+				event.clientY,
+				event.currentTarget.getBoundingClientRect(),
+			);
+
+			if (nextPosition !== internalFileDropPositionRef.current) {
+				internalFileDropPositionRef.current = nextPosition;
+				setInternalFileDropPosition(nextPosition);
+			}
+
+			return nextPosition;
+		},
+		[],
+	);
+
+	useEffect(() => {
+		if (!isInternalFileViewerDropEnabled) {
+			resetInternalFileDragState();
+		}
+	}, [isInternalFileViewerDropEnabled, resetInternalFileDragState]);
+
+	const handleInternalFileDragEnterCapture = useCallback(
+		(event: React.DragEvent<HTMLDivElement>) => {
+			if (
+				!isInternalFileViewerDropEnabled ||
+				!hasInternalDraggedFilePath(event.dataTransfer)
+			) {
+				return;
+			}
+
+			internalFileDragDepthRef.current += 1;
+			event.preventDefault();
+			event.stopPropagation();
+			event.dataTransfer.dropEffect = "copy";
+			updateInternalFileDropPosition(event);
+		},
+		[isInternalFileViewerDropEnabled, updateInternalFileDropPosition],
+	);
+
+	const handleInternalFileDragOverCapture = useCallback(
+		(event: React.DragEvent<HTMLDivElement>) => {
+			if (
+				!isInternalFileViewerDropEnabled ||
+				!hasInternalDraggedFilePath(event.dataTransfer)
+			) {
+				return;
+			}
+
+			event.preventDefault();
+			event.stopPropagation();
+			event.dataTransfer.dropEffect = "copy";
+			updateInternalFileDropPosition(event);
+		},
+		[isInternalFileViewerDropEnabled, updateInternalFileDropPosition],
+	);
+
+	const handleInternalFileDragLeaveCapture = useCallback(
+		(event: React.DragEvent<HTMLDivElement>) => {
+			if (
+				!isInternalFileViewerDropEnabled ||
+				!hasInternalDraggedFilePath(event.dataTransfer)
+			) {
+				return;
+			}
+
+			event.stopPropagation();
+			internalFileDragDepthRef.current = Math.max(
+				0,
+				internalFileDragDepthRef.current - 1,
+			);
+
+			if (internalFileDragDepthRef.current === 0) {
+				resetInternalFileDragState();
+			}
+		},
+		[isInternalFileViewerDropEnabled, resetInternalFileDragState],
+	);
+
+	const handleInternalFileDropCapture = useCallback(
+		(event: React.DragEvent<HTMLDivElement>) => {
+			if (
+				!isInternalFileViewerDropEnabled ||
+				!workspaceId ||
+				!hasInternalDraggedFilePath(event.dataTransfer)
+			) {
+				return;
+			}
+
+			event.preventDefault();
+			event.stopPropagation();
+
+			const filePath = getInternalDraggedFilePath(event.dataTransfer);
+			if (!filePath) {
+				resetInternalFileDragState();
+				return;
+			}
+
+			const dropPosition = updateInternalFileDropPosition(event);
+
+			addFileViewerPane(workspaceId, {
+				filePath,
+				isPinned: true,
+				openInNewTab: false,
+				reuseExisting: "none",
+				relativeToPaneId: paneId,
+				relativeToTabId: tabId,
+				relativeSplitPosition: dropPosition,
+				useRightSidebarOpenViewWidth: true,
+			});
+			resetInternalFileDragState();
+		},
+		[
+			addFileViewerPane,
+			isInternalFileViewerDropEnabled,
+			paneId,
+			resetInternalFileDragState,
+			tabId,
+			updateInternalFileDropPosition,
+			workspaceId,
+		],
+	);
+
 	return (
 		<MosaicWindow<string>
 			path={path}
@@ -157,14 +324,19 @@ export function BasePaneWindow({
 			{/* biome-ignore lint/a11y/useKeyWithClickEvents lint/a11y/noStaticElementInteractions: Focus handler for pane */}
 			<div
 				ref={containerRef}
-				className={contentClassName}
+				className={cn("relative", contentClassName)}
 				style={
 					isDragging || isTabDragging || isResizing
 						? { pointerEvents: "none" }
 						: undefined
 				}
+				onDragEnterCapture={handleInternalFileDragEnterCapture}
+				onDragOverCapture={handleInternalFileDragOverCapture}
+				onDragLeaveCapture={handleInternalFileDragLeaveCapture}
+				onDropCapture={handleInternalFileDropCapture}
 				onClick={handleFocus}
 			>
+				<InternalFileDropOverlay position={internalFileDropPosition} />
 				{children}
 			</div>
 		</MosaicWindow>

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/components/BasePaneWindow/components/InternalFileDropOverlay/InternalFileDropOverlay.tsx

@@ -0,0 +1,31 @@
+import type { CSSProperties } from "react";
+import type { MosaicDropPosition } from "renderer/stores/tabs/types";
+
+interface InternalFileDropOverlayProps {
+	position: MosaicDropPosition | null;
+}
+
+const ZONE_STYLES: Record<MosaicDropPosition, CSSProperties> = {
+	top: { top: 0, left: 0, width: "100%", height: "50%" },
+	bottom: { top: "50%", left: 0, width: "100%", height: "50%" },
+	left: { top: 0, left: 0, width: "50%", height: "100%" },
+	right: { top: 0, left: "50%", width: "50%", height: "100%" },
+};
+
+export function InternalFileDropOverlay({
+	position,
+}: InternalFileDropOverlayProps) {
+	if (!position) return null;
+
+	return (
+		<div className="pointer-events-none absolute inset-0 z-10">
+			<div
+				className="absolute rounded-sm border-2 border-primary/70 bg-primary/10"
+				style={{
+					...ZONE_STYLES[position],
+					transition: "all 150ms ease",
+				}}
+			/>
+		</div>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/components/BasePaneWindow/components/InternalFileDropOverlay/index.ts

@@ -0,0 +1 @@
+export { InternalFileDropOverlay } from "./InternalFileDropOverlay";

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/Terminal.tsx

@@ -4,12 +4,10 @@ import type { Terminal as XTerm } from "@xterm/xterm";
 import "@xterm/xterm/css/xterm.css";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { electronTrpc } from "renderer/lib/electron-trpc";
-import { getInternalDraggedFilePath } from "renderer/lib/file-drag";
 import { buildTerminalCommand } from "renderer/lib/terminal/launch-command";
 import { useTabsStore } from "renderer/stores/tabs/store";
 import { useTerminalSuggestionsStore } from "renderer/stores/terminal-suggestions";
 import { useEffectiveTerminalTheme } from "renderer/stores/vibrancy";
-import { DEFAULT_FILE_DRAG_BEHAVIOR } from "shared/constants";
 import { sanitizeForTitle } from "./commandBuffer";
 import { SessionKilledOverlay } from "./components";
 import {
@@ -56,9 +54,6 @@ export const Terminal = memo(function Terminal({
 	const isWorkspaceRunPane = Boolean(pane?.workspaceRun?.workspaceId);
 	const paneInitialCwd = pane?.initialCwd;
 	const clearPaneInitialData = useTabsStore((s) => s.clearPaneInitialData);
-	const addFileViewerPane = useTabsStore((s) => s.addFileViewerPane);
-	const { data: fileDragBehavior } =
-		electronTrpc.settings.getFileDragBehavior.useQuery();
 
 	const { data: workspaceData } = electronTrpc.workspaces.get.useQuery(
 		{ id: workspaceId },
@@ -567,19 +562,6 @@ export const Terminal = memo(function Terminal({
 	const handleDrop = (event: React.DragEvent) => {
 		event.preventDefault();
 		const files = Array.from(event.dataTransfer.files);
-		const internalFilePath = getInternalDraggedFilePath(event.dataTransfer);
-		if (
-			files.length === 0 &&
-			internalFilePath &&
-			(fileDragBehavior ?? DEFAULT_FILE_DRAG_BEHAVIOR) === "open-file-viewer"
-		) {
-			addFileViewerPane(workspaceId, {
-				filePath: internalFilePath,
-				useRightSidebarOpenViewWidth: true,
-			});
-			return;
-		}
-
 		let text: string;
 		if (files.length > 0) {
 			// Native file drop (from Finder, etc.)