From 97db96d74540287385fdfac081399cbfa3921d81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ognjen=20Marinkovi=C4=87?= <77169894+ognjeeen@users.noreply.github.com> Date: Sun, 13 Sep 2026 21:39:11 +0200 Subject: [PATCH 01/17] Animate tab and project reordering with shared motion settings (#206) * Animate tab and project reordering with shared motion settings * Fix scrolling and consecutive gestures during animated reordering * Use committed props for animated reorder gestures * Preserve pending tab reorders before close clicks --- src/chrome/ProjectRail.tsx | 47 +-- src/chrome/Sidebar.tsx | 37 +-- src/chrome/SurfaceTabs.tsx | 27 +- src/chrome/TabMiddleClick.test.ts | 171 ++++++++++- src/chrome/TitleBar.tsx | 32 +- src/hooks/useAnimatedReorder.test.ts | 274 ++++++++++++++++++ src/hooks/useAnimatedReorder.ts | 260 +++++++++++++++++ .../useAnimatedReorderConcurrency.test.ts | 122 ++++++++ src/index.css | 57 ++++ src/lib/motion.ts | 11 + 10 files changed, 925 insertions(+), 113 deletions(-) create mode 100644 src/hooks/useAnimatedReorder.test.ts create mode 100644 src/hooks/useAnimatedReorder.ts create mode 100644 src/hooks/useAnimatedReorderConcurrency.test.ts create mode 100644 src/lib/motion.ts diff --git a/src/chrome/ProjectRail.tsx b/src/chrome/ProjectRail.tsx index e690f6e4..6818b586 100644 --- a/src/chrome/ProjectRail.tsx +++ b/src/chrome/ProjectRail.tsx @@ -20,7 +20,7 @@ import { useEffect, useMemo, useRef, useState, type MouseEvent } from "react"; import { useDragResize } from "../hooks/useDragResize"; import { useLockOverscroll } from "../hooks/useLockOverscroll"; import { useProjectDiffStats } from "../hooks/useProjectDiffStats"; -import { useSortable } from "../hooks/useSortable"; +import { useAnimatedReorder } from "../hooks/useAnimatedReorder"; import { useTabGroupLogos } from "../hooks/useTabGroupLogos"; import { loadProjectRailWidth, @@ -358,14 +358,8 @@ export function ProjectRail({ const pinnedIds = sections.pinned.map((item) => item.path); const projectIds = sections.projects.map((item) => item.path); - const pinnedSortable = useSortable(pinnedIds, onReorderPinned, { - axis: "y", - onActivate: onSelectProject, - }); - const projectSortable = useSortable(projectIds, onReorderProjects, { - axis: "y", - onActivate: onSelectProject, - }); + const pinnedSortable = useAnimatedReorder(pinnedIds, onReorderPinned, "y"); + const projectSortable = useAnimatedReorder(projectIds, onReorderProjects, "y"); return (