Add reorderable tabs with global persistence (#347)

This commit is contained in:
Gregory Schier
2026-01-05 14:58:16 -08:00
committed by GitHub
parent 412d7a7654
commit e818c349cc
12 changed files with 426 additions and 118 deletions

View File

@@ -486,11 +486,11 @@ function TreeInner<T extends { id: string }>(
let hoveredParent = node.parent;
const dragIndex = selectableItems.findIndex((n) => n.node.item.id === item.id) ?? -1;
const hovered = selectableItems[dragIndex]?.node ?? null;
const hoveredIndex = dragIndex + (side === 'above' ? 0 : 1);
let hoveredChildIndex = overSelectableItem.index + (side === 'above' ? 0 : 1);
const hoveredIndex = dragIndex + (side === 'before' ? 0 : 1);
let hoveredChildIndex = overSelectableItem.index + (side === 'before' ? 0 : 1);
// Move into the folder if it's open and we're moving below it
if (hovered?.children != null && side === 'below') {
// Move into the folder if it's open and we're moving after it
if (hovered?.children != null && side === 'after') {
hoveredParent = hovered;
hoveredChildIndex = 0;
}

View File

@@ -29,7 +29,7 @@ export const TreeDropMarker = memo(function TreeDropMarker<T extends { id: strin
if (collapsed || node?.children?.length === 0) return null;
return (
<div className="drop-marker" style={{ paddingLeft: `${parentDepth}rem` }}>
<div className="drop-marker relative" style={{ paddingLeft: `${parentDepth}rem` }}>
<DropMarker className={classNames(className)} />
</div>
);

View File

@@ -208,7 +208,7 @@ function TreeItem_<T extends { id: string }>({
const isFolder = node.children != null;
const hasChildren = (node.children?.length ?? 0) > 0;
const isCollapsed = jotaiStore.get(isCollapsedFamily({ treeId, itemId: node.item.id }));
if (isCollapsed && isFolder && hasChildren && side === 'below') {
if (isCollapsed && isFolder && hasChildren && side === 'after') {
setDropHover('animate');
clearTimeout(startedHoverTimeout.current);
startedHoverTimeout.current = setTimeout(() => {
@@ -221,7 +221,7 @@ function TreeItem_<T extends { id: string }>({
);
});
}, HOVER_CLOSED_FOLDER_DELAY);
} else if (isFolder && !hasChildren && side === 'below') {
} else if (isFolder && !hasChildren && side === 'after') {
setDropHover('drop');
} else {
clearDropHover();