jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve split pane drag-and-drop and resize handle UX

Browse Source
This commit is contained in:
Mohamed Boudra
2026-03-18 16:19:43 +07:00
parent 0bc903fa21
commit b5212a69c9
9 changed files with 365 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/message.tsx
+2 -2
View File
@@ -752,11 +752,11 @@ export const AssistantMessage = memo(function AssistantMessage({
workspaceRoot,
disableOuterSpacing,
}: AssistantMessageProps) {
const { theme } = useUnistyles();
const { theme, rt } = useUnistyles();
const resolvedDisableOuterSpacing =
useDisableOuterSpacing(disableOuterSpacing);
const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]);
const markdownStyles = useMemo(() => createMarkdownStyles(theme), [rt.themeName]);
const markdownParser = useMemo(
() => {
packages/app/src/components/resize-handle.tsx
+73 -37
View File
@@ -26,12 +26,15 @@ export function ResizeHandle({
}: ResizeHandleProps) {
const { theme } = useUnistyles();
const pointerStateRef = useRef<PointerState | null>(null);
const [hovered, setHovered] = useState(false);
const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const [active, setActive] = useState(false);
const [dragging, setDragging] = useState(false);
const highlighted = active || dragging;
const handlePointerDown = useCallback(
(event: any) => {
const handleElement = event.currentTarget as HTMLElement | null;
const containerElement = handleElement?.parentElement ?? null;
const hitAreaElement = event.currentTarget as HTMLElement | null;
const containerElement = hitAreaElement?.parentElement?.parentElement ?? null;
if (!containerElement) {
return;
}
@@ -42,6 +45,8 @@ export function ResizeHandle({
return;
}
setDragging(true);
pointerStateRef.current = {
containerSize,
pointerStart: direction === "horizontal" ? event.clientX : event.clientY,
@@ -56,6 +61,7 @@ export function ResizeHandle({
function cleanup() {
pointerStateRef.current = null;
setDragging(false);
document.body.style.cursor = previousCursor;
window.removeEventListener("pointermove", handlePointerMove);
window.removeEventListener("pointerup", handlePointerUp);
@@ -90,65 +96,95 @@ export function ResizeHandle({
return (
<View
role="separator"
aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
style={[
styles.handle,
direction === "horizontal" ? styles.handleHorizontal : styles.handleVertical,
hovered && {
backgroundColor: theme.colors.surface2,
},
{
cursor: direction === "horizontal" ? "col-resize" : "row-resize",
} as any,
{ backgroundColor: theme.colors.border },
]}
onPointerDown={handlePointerDown}
onPointerEnter={() => {
setHovered(true);
}}
onPointerLeave={() => {
setHovered(false);
}}
>
{highlighted && (
<View
pointerEvents="none"
style={[
styles.highlight,
direction === "horizontal"
? styles.highlightHorizontal
: styles.highlightVertical,
{ backgroundColor: theme.colors.accent },
]}
/>
)}
<View
role="separator"
aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
style={[
styles.handleGrip,
direction === "horizontal" ? styles.handleGripHorizontal : styles.handleGripVertical,
styles.hitArea,
direction === "horizontal" ? styles.hitAreaHorizontal : styles.hitAreaVertical,
{
backgroundColor: hovered ? theme.colors.accent : theme.colors.border,
},
cursor: direction === "horizontal" ? "col-resize" : "row-resize",
} as any,
]}
onPointerDown={handlePointerDown}
onPointerEnter={() => {
hoverTimerRef.current = setTimeout(() => {
setActive(true);
}, 150);
}}
onPointerLeave={() => {
if (hoverTimerRef.current) {
clearTimeout(hoverTimerRef.current);
hoverTimerRef.current = null;
}
setActive(false);
}}
/>
</View>
);
}
const styles = StyleSheet.create((theme) => ({
const styles = StyleSheet.create((_theme) => ({
handle: {
position: "relative",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
backgroundColor: "transparent",
},
handleHorizontal: {
width: 4,
width: 1,
alignSelf: "stretch",
},
handleVertical: {
height: 4,
height: 1,
width: "100%",
},
handleGrip: {
opacity: 0.6,
borderRadius: theme.borderRadius.full,
highlight: {
position: "absolute",
zIndex: 5,
},
handleGripHorizontal: {
width: 2,
height: "100%",
highlightHorizontal: {
top: 0,
bottom: 0,
width: 3,
left: -1,
},
handleGripVertical: {
width: "100%",
height: 2,
highlightVertical: {
left: 0,
right: 0,
height: 3,
top: -1,
},
hitArea: {
position: "absolute",
zIndex: 10,
},
hitAreaHorizontal: {
left: -5,
top: 0,
bottom: 0,
width: 10,
},
hitAreaVertical: {
top: -5,
left: 0,
right: 0,
height: 10,
},
}));
packages/app/src/components/sortable-inline-list.web.tsx
+13 -6
View File
@@ -34,6 +34,7 @@ function SortableItem<T>({
useDragHandle,
disabled,
itemData,
externalDndContext,
}: {
id: string;
item: T;
@@ -43,6 +44,7 @@ function SortableItem<T>({
useDragHandle: boolean;
disabled: boolean;
itemData?: Record<string, unknown>;
externalDndContext: boolean;
}): ReactElement {
const {
attributes,
@@ -59,17 +61,21 @@ function SortableItem<T>({
// This is a no-op but matches the mobile API
}, []);
// See `draggable-list.web.tsx` for details on why we zero out dnd-kit scale.
const baseTransform = CSS.Transform.toString(
transform && isDragging ? { ...transform, scaleX: 1, scaleY: 1 } : transform
);
const scaleTransform = isDragging ? "scale(1.01)" : "";
// When using an external DndContext (e.g. split pane container), hide the
// original item during drag so the DragOverlay renders the floating copy.
// In standalone mode, keep the existing in-place drag visual.
const baseTransform = externalDndContext && isDragging
? undefined
: CSS.Transform.toString(
transform && isDragging ? { ...transform, scaleX: 1, scaleY: 1 } : transform
);
const scaleTransform = !externalDndContext && isDragging ? "scale(1.01)" : "";
const combinedTransform = [baseTransform, scaleTransform].filter(Boolean).join(" ");
const style = {
transform: combinedTransform || undefined,
transition,
opacity: isDragging ? 0.9 : 1,
opacity: externalDndContext && isDragging ? 0.3 : isDragging ? 0.9 : 1,
zIndex: isDragging ? 1000 : 1,
};
@@ -198,6 +204,7 @@ export function SortableInlineList<T>({
useDragHandle={useDragHandle}
disabled={disabled}
itemData={getItemData?.(item, index)}
externalDndContext={externalDndContext}
/>
);
})}
packages/app/src/components/split-container.tsx
+192 -46
View File
@@ -1,6 +1,7 @@
import { Fragment, useCallback, useMemo, useState, type Dispatch, type ReactNode, type SetStateAction } from "react";
import {
DndContext,
DragOverlay,
KeyboardSensor,
PointerSensor,
closestCenter,
@@ -9,13 +10,19 @@ import {
useSensors,
type CollisionDetection,
type DragEndEvent,
type DragMoveEvent,
type DragOverEvent,
type DragStartEvent,
} from "@dnd-kit/core";
import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
import { View } from "react-native";
import { View, Text } from "react-native";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { ResizeHandle } from "@/components/resize-handle";
import { SplitDropZone, type SplitDropZoneHover } from "@/components/split-drop-zone";
import {
SplitDropZone,
resolveSplitDropPosition,
type SplitDropZoneHover,
} from "@/components/split-drop-zone";
import {
deriveWorkspacePaneState,
getWorkspacePaneDescriptors,
@@ -28,8 +35,12 @@ import {
WorkspaceDesktopTabsRow,
type WorkspaceDesktopTabRowItem,
} from "@/screens/workspace/workspace-desktop-tabs-row";
import {
useWorkspaceTabPresentation,
WorkspaceTabIcon,
} from "@/screens/workspace/workspace-tab-presentation";
import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
import type { SplitNode, SplitPane, WorkspaceLayout } from "@/stores/workspace-layout-store";
import { useWorkspaceLayoutStore, type SplitNode, type SplitPane, type WorkspaceLayout } from "@/stores/workspace-layout-store";
import type { WorkspaceTab } from "@/stores/workspace-tabs-store";
interface SplitContainerProps {
@@ -51,7 +62,7 @@ interface SplitContainerProps {
onCloseTabsToLeft: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
onCloseTabsToRight: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
onCloseOtherTabs: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
onSelectNewTabOption: (optionId: "__new_tab_agent__") => void;
onSelectNewTabOption: (selection: { optionId: "__new_tab_agent__"; paneId?: string }) => void;
newTabAgentOptionId?: "__new_tab_agent__";
buildPaneContentModel: (input: {
paneId: string;
@@ -81,36 +92,34 @@ interface SplitPaneDropData {
}
interface SplitNodeViewProps
extends Omit<SplitContainerProps, "layout" | "workspaceKey"> {
extends Omit<SplitContainerProps, "layout"> {
node: SplitNode;
uiTabs: WorkspaceTab[];
focusedPaneId: string;
activeDragTabId: string | null;
showDropZones: boolean;
dropPreview: SplitDropZoneHover | null;
onDropPreviewChange: (hover: SplitDropZoneHover | null) => void;
}
interface SplitPaneViewProps
extends Omit<
SplitNodeViewProps,
| "node"
| "workspaceKey"
| "focusedPaneId"
| "activeDragTabId"
| "showDropZones"
| "dropPreview"
| "onDropPreviewChange"
| "onSplitPane"
| "onMoveTabToPane"
| "onResizeSplit"
> {
pane: SplitPane;
uiTabs: WorkspaceTab[];
focused: boolean;
isFocused: boolean;
activeDragTabId: string | null;
showDropZones: boolean;
dropPreview: SplitDropZoneHover | null;
onDropPreviewChange: (hover: SplitDropZoneHover | null) => void;
}
const dropCollisionDetection: CollisionDetection = (args) => {
@@ -134,6 +143,7 @@ const dropCollisionDetection: CollisionDetection = (args) => {
export function SplitContainer({
layout,
workspaceKey,
normalizedServerId,
normalizedWorkspaceId,
uiTabs,
@@ -191,6 +201,64 @@ export function SplitContainer({
setDropPreview(null);
}, []);
const updateDropPreview = useCallback(
(
event:
| Pick<DragMoveEvent, "active" | "over">
| Pick<DragOverEvent, "active" | "over">
) => {
const activeData = event.active.data.current as WorkspaceTabDragData | undefined;
const overData = event.over?.data.current as
| WorkspaceTabDragData
| SplitPaneDropData
| undefined;
if (activeData?.kind !== "workspace-tab") {
setDropPreview(null);
return;
}
if (overData?.kind !== "split-pane-drop") {
setDropPreview(null);
return;
}
const translatedRect = event.active.rect.current.translated;
const overRect = event.over?.rect;
if (!translatedRect || !overRect || overRect.width <= 0 || overRect.height <= 0) {
setDropPreview(null);
return;
}
const centerX = translatedRect.left + translatedRect.width / 2;
const centerY = translatedRect.top + translatedRect.height / 2;
const relativeX = centerX - overRect.left;
const relativeY = centerY - overRect.top;
if (
Number.isNaN(relativeX) ||
Number.isNaN(relativeY) ||
relativeX < 0 ||
relativeX > overRect.width ||
relativeY < 0 ||
relativeY > overRect.height
) {
setDropPreview(null);
return;
}
setDropPreview({
paneId: overData.paneId,
position: resolveSplitDropPosition({
width: overRect.width,
height: overRect.height,
x: relativeX,
y: relativeY,
}),
});
},
[]
);
const handleDragEnd = useCallback(
(event: DragEndEvent) => {
const activeData = event.active.data.current as WorkspaceTabDragData | undefined;
@@ -266,11 +334,14 @@ export function SplitContainer({
sensors={sensors}
collisionDetection={dropCollisionDetection}
onDragStart={handleDragStart}
onDragMove={updateDropPreview}
onDragOver={updateDropPreview}
onDragCancel={handleDragCancel}
onDragEnd={handleDragEnd}
>
<SplitNodeView
node={layout.root}
workspaceKey={workspaceKey}
uiTabs={uiTabs}
focusedPaneId={layout.focusedPaneId}
normalizedServerId={normalizedServerId}
@@ -300,14 +371,96 @@ export function SplitContainer({
activeDragTabId={activeDragTabId}
showDropZones={activeDragTabId !== null}
dropPreview={dropPreview}
onDropPreviewChange={setDropPreview}
/>
<DragOverlay dropAnimation={null}>
{activeDragTabId ? (
<DragOverlayTabChip
tabId={activeDragTabId}
uiTabs={uiTabs}
normalizedServerId={normalizedServerId}
normalizedWorkspaceId={normalizedWorkspaceId}
/>
) : null}
</DragOverlay>
</DndContext>
);
}
function DragOverlayTabChip({
tabId,
uiTabs,
normalizedServerId,
normalizedWorkspaceId,
}: {
tabId: string;
uiTabs: WorkspaceTab[];
normalizedServerId: string;
normalizedWorkspaceId: string;
}) {
const tab = uiTabs.find((t) => t.tabId === tabId);
if (!tab) {
return null;
}
const descriptor: WorkspaceTabDescriptor = {
key: tab.tabId,
tabId: tab.tabId,
kind: tab.target.kind,
target: tab.target,
};
return (
<DragOverlayTabChipInner
tab={descriptor}
normalizedServerId={normalizedServerId}
normalizedWorkspaceId={normalizedWorkspaceId}
/>
);
}
function DragOverlayTabChipInner({
tab,
normalizedServerId,
normalizedWorkspaceId,
}: {
tab: WorkspaceTabDescriptor;
normalizedServerId: string;
normalizedWorkspaceId: string;
}) {
const { theme } = useUnistyles();
const presentation = useWorkspaceTabPresentation({
tab,
serverId: normalizedServerId,
workspaceId: normalizedWorkspaceId,
});
const label =
presentation.titleState === "loading" ? "Loading..." : presentation.label;
return (
<View
style={[
styles.dragOverlayChip,
{
backgroundColor: theme.colors.surface1,
borderColor: theme.colors.borderAccent,
},
]}
>
<WorkspaceTabIcon presentation={presentation} active size={14} />
<Text
numberOfLines={1}
style={[
styles.dragOverlayLabel,
{ color: theme.colors.foreground },
]}
>
{label}
</Text>
</View>
);
}
function SplitNodeView({
node,
workspaceKey,
uiTabs,
focusedPaneId,
normalizedServerId,
@@ -337,14 +490,13 @@ function SplitNodeView({
activeDragTabId,
showDropZones,
dropPreview,
onDropPreviewChange,
}: SplitNodeViewProps) {
if (node.kind === "pane") {
return (
<SplitPaneView
pane={node.pane}
uiTabs={uiTabs}
focused={node.pane.id === focusedPaneId}
isFocused={node.pane.id === focusedPaneId}
normalizedServerId={normalizedServerId}
normalizedWorkspaceId={normalizedWorkspaceId}
hoveredCloseTabKey={hoveredCloseTabKey}
@@ -369,11 +521,14 @@ function SplitNodeView({
activeDragTabId={activeDragTabId}
showDropZones={showDropZones}
dropPreview={dropPreview}
onDropPreviewChange={onDropPreviewChange}
/>
);
}
const groupSizes =
useWorkspaceLayoutStore((state) => state.splitSizesByWorkspace[workspaceKey]?.[node.group.id]) ??
node.group.sizes;
return (
<View
style={[
@@ -383,9 +538,10 @@ function SplitNodeView({
>
{node.group.children.map((child, index) => (
<Fragment key={getNodeKey(child)}>
<View style={[styles.groupChild, { flex: node.group.sizes[index] ?? 1 }]}>
<View style={[styles.groupChild, { flex: groupSizes[index] ?? 1 }]}>
<SplitNodeView
node={child}
workspaceKey={workspaceKey}
uiTabs={uiTabs}
focusedPaneId={focusedPaneId}
normalizedServerId={normalizedServerId}
@@ -415,7 +571,6 @@ function SplitNodeView({
activeDragTabId={activeDragTabId}
showDropZones={showDropZones}
dropPreview={dropPreview}
onDropPreviewChange={onDropPreviewChange}
/>
</View>
{index < node.group.children.length - 1 ? (
@@ -423,7 +578,7 @@ function SplitNodeView({
direction={node.group.direction}
groupId={node.group.id}
index={index}
sizes={node.group.sizes}
sizes={groupSizes}
onResizeSplit={onResizeSplit}
/>
) : null}
@@ -436,7 +591,7 @@ function SplitNodeView({
function SplitPaneView({
pane,
uiTabs,
focused,
isFocused,
normalizedServerId,
normalizedWorkspaceId,
hoveredCloseTabKey,
@@ -461,7 +616,6 @@ function SplitPaneView({
activeDragTabId,
showDropZones,
dropPreview,
onDropPreviewChange,
}: SplitPaneViewProps) {
const { theme } = useUnistyles();
const paneState = useMemo(
@@ -525,28 +679,15 @@ function SplitPaneView({
return (
<View
style={[
styles.pane,
{
borderColor: focused ? theme.colors.borderAccent : theme.colors.border,
},
]}
style={styles.pane}
onPointerDownCapture={() => {
onFocusPane(pane.id);
}}
>
<View
style={[
styles.paneTabs,
focused
? {
borderTopColor: theme.colors.accent,
}
: null,
]}
>
<View style={styles.paneTabs}>
<WorkspaceDesktopTabsRow
paneId={pane.id}
isFocused={isFocused}
tabs={desktopTabRowItems}
normalizedServerId={normalizedServerId}
normalizedWorkspaceId={normalizedWorkspaceId}
@@ -575,14 +716,8 @@ function SplitPaneView({
) : (
renderPaneEmptyState?.() ?? null
)}
<SplitDropZone paneId={pane.id} active={showDropZones} preview={dropPreview} />
</View>
<SplitDropZone
paneId={pane.id}
active={showDropZones}
preview={dropPreview}
onHoverChange={onDropPreviewChange}
/>
</View>
);
}
@@ -632,16 +767,27 @@ const styles = StyleSheet.create((theme) => ({
minWidth: 0,
minHeight: 0,
backgroundColor: theme.colors.surface0,
borderWidth: 1,
overflow: "hidden",
},
paneTabs: {
borderTopWidth: 2,
borderTopColor: "transparent",
},
paneTabs: {},
paneContent: {
position: "relative",
flex: 1,
minWidth: 0,
minHeight: 0,
},
dragOverlayChip: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[1],
borderRadius: theme.borderRadius.md,
borderWidth: 1,
maxWidth: 200,
},
dragOverlayLabel: {
fontSize: theme.fontSize.sm,
flexShrink: 1,
},
}));
packages/app/src/components/split-drop-zone.tsx
+6 -49
View File
@@ -1,6 +1,6 @@
import { useCallback, useMemo, useState } from "react";
import { useMemo } from "react";
import { useDroppable } from "@dnd-kit/core";
import { View, type LayoutChangeEvent } from "react-native";
import { View } from "react-native";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
export type SplitDropZonePosition = "center" | "left" | "right" | "top" | "bottom";
@@ -14,12 +14,6 @@ export interface SplitDropZoneProps {
paneId: string;
active: boolean;
preview: SplitDropZoneHover | null;
onHoverChange: (hover: SplitDropZoneHover | null) => void;
}
interface LayoutSize {
width: number;
height: number;
}
const EDGE_RATIO = 0.15;
@@ -33,10 +27,8 @@ export function SplitDropZone({
paneId,
active,
preview,
onHoverChange,
}: SplitDropZoneProps) {
const { theme } = useUnistyles();
const [layoutSize, setLayoutSize] = useState<LayoutSize>({ width: 0, height: 0 });
const { setNodeRef, isOver } = useDroppable({
id: buildSplitDropZoneId(paneId),
disabled: !active,
@@ -46,34 +38,6 @@ export function SplitDropZone({
},
});
const handleLayout = useCallback((event: LayoutChangeEvent) => {
const width = Math.round(event.nativeEvent.layout.width);
const height = Math.round(event.nativeEvent.layout.height);
setLayoutSize((current) =>
current.width === width && current.height === height ? current : { width, height }
);
}, []);
const updateHover = useCallback(
(event: any) => {
if (!active || layoutSize.width <= 0 || layoutSize.height <= 0) {
return;
}
const locationX = Number(event.nativeEvent.locationX ?? 0);
const locationY = Number(event.nativeEvent.locationY ?? 0);
onHoverChange({
paneId,
position: resolveDropPosition({
width: layoutSize.width,
height: layoutSize.height,
x: locationX,
y: locationY,
}),
});
},
[active, layoutSize.height, layoutSize.width, onHoverChange, paneId]
);
const previewStyle = useMemo(() => {
if (!preview || preview.paneId !== paneId) {
return null;
@@ -95,21 +59,14 @@ export function SplitDropZone({
<View
ref={setNodeRef as any}
style={[styles.overlay, isOver && styles.overlayActive]}
onLayout={handleLayout}
onPointerEnter={updateHover}
onPointerMove={updateHover}
onPointerLeave={() => {
if (preview?.paneId === paneId) {
onHoverChange(null);
}
}}
pointerEvents="none"
>
{previewStyle ? <View pointerEvents="none" style={previewStyle} /> : null}
</View>
);
}
function resolveDropPosition(input: {
export function resolveSplitDropPosition(input: {
width: number;
height: number;
x: number;
@@ -174,12 +131,12 @@ const styles = StyleSheet.create((theme) => ({
},
overlayActive: {
backgroundColor: theme.colors.surface0,
opacity: 0.02,
opacity: 0.03,
},
preview: {
position: "absolute",
borderRadius: theme.borderRadius.md,
opacity: 0.16,
opacity: 0.2,
},
previewLeft: {
left: 0,