ENG-1639: Re-implement sidebar drag-and-drop with @dnd-kit (#973)

* ENG-1639: Re-implement sidebar drag-and-drop with @dnd-kit

Replaces the removed @hello-pangea/dnd (ENG-1051, PR #544) with
@dnd-kit/core + @dnd-kit/sortable across three surfaces: the left
sidebar, Global settings, and Personal settings. dnd-kit was chosen
over re-introducing pangea because pangea's portal handling crashed
inside Blueprint's Dialog (ENG-985) and couldn't be fixed.

- Shared SortableList primitive: PointerSensor (8px activation so
  clicks still work) + KeyboardSensor (space/enter to pick up, arrows
  to move) for a11y.
- moveRoamBlockToIndex util encapsulates the finalIndex off-by-one
  that Roam moveBlock requires.
- Settings panels: up/down arrow buttons replaced by drag; keyboard
  users retain reorder via KeyboardSensor.

* ENG-1639: Drop KeyboardSensor — out of scope for re-implementation

The prior pangea implementation had no keyboard reorder; restoring
that baseline, not expanding on it.

* ENG-1639: Use named args for reorderChildren (AGENTS.md:36)

Addresses Devin review: functions with >2 params should use object
destructuring per AGENTS.md. Applies to both reorderChildren callbacks
and the onChildrenReorder prop type in LeftSidebarView.

* ENG-1639: Fix drag stretching, add global children DnD, restore cursor affordance

- Use CSS.Translate instead of CSS.Transform to prevent scale-induced stretching
- Add drag-and-drop reordering to global section children in sidebar view
- Restore cursor-pointer on clickable section titles in personal settings
- Scope eslint-disable to the specific line in moveRoamBlock.ts

Author: sid597

apps/roam/package.json

@@ -37,6 +37,9 @@
     "@blueprintjs/core": "3.50.4",
     "@blueprintjs/icons": "3.30.2",
     "@blueprintjs/select": "3.19.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@octokit/auth-app": "^7.1.4",
     "@octokit/core": "^6.1.3",
     "@repo/database": "workspace:*",

apps/roam/src/components/LeftSidebarView.tsx

@@ -7,6 +7,9 @@ import React, {
   useState,
 } from "react";
 import ReactDOM from "react-dom";
+import { arrayMove } from "@dnd-kit/sortable";
+import { SortableList, type SortableHandle } from "./SortableList";
+import { moveRoamBlockToIndex } from "~/utils/moveRoamBlock";
 import {
   Button,
   Collapse,
@@ -132,61 +135,86 @@ const toggleFoldedState = ({
   }
 };
 
+type ChildNode = { uid: string; text: string; alias?: { value: string } };
+
+const ChildRow = ({
+  child,
+  truncateAt,
+  onloadArgs,
+}: {
+  child: ChildNode;
+  truncateAt?: number;
+  onloadArgs: OnloadArgs;
+}) => {
+  const ref = parseReference(child.text);
+  const alias = child.alias?.value;
+  const display =
+    ref.type === "command"
+      ? ref.display
+      : ref.type === "page"
+        ? getPageTitleByPageUid(ref.display)
+        : getTextByBlockUid(ref.uid);
+  const label = alias || truncate(display, truncateAt);
+  const onClick = (e: React.MouseEvent) => {
+    return void openTarget(e, child.text, onloadArgs);
+  };
+  return (
+    <div className="pl-8 pr-2.5">
+      {ref.type === "command" ? (
+        <span className="bp3-dark">
+          <Button onClick={onClick} minimal className="m-px">
+            {cleanCommandName(label)}
+          </Button>
+        </span>
+      ) : (
+        <div
+          className="section-child-item page cursor-pointer rounded-sm leading-normal text-gray-600"
+          onClick={onClick}
+        >
+          {label}
+        </div>
+      )}
+    </div>
+  );
+};
+
 const SectionChildren = ({
   childrenNodes,
   truncateAt,
   onloadArgs,
 }: {
-  childrenNodes: { uid: string; text: string; alias?: { value: string } }[];
+  childrenNodes: ChildNode[];
   truncateAt?: number;
   onloadArgs: OnloadArgs;
 }) => {
   if (!childrenNodes?.length) return null;
   return (
     <>
-      {childrenNodes.map((child) => {
-        const ref = parseReference(child.text);
-        const alias = child.alias?.value;
-        const display =
-          ref.type === "command"
-            ? ref.display
-            : ref.type === "page"
-              ? getPageTitleByPageUid(ref.display)
-              : getTextByBlockUid(ref.uid);
-        const label = alias || truncate(display, truncateAt);
-        const onClick = (e: React.MouseEvent) => {
-          return void openTarget(e, child.text, onloadArgs);
-        };
-        return (
-          <div key={child.uid} className="pl-8 pr-2.5">
-            {ref.type === "command" ? (
-              <span className="bp3-dark">
-                <Button onClick={onClick} minimal className="m-px">
-                  {cleanCommandName(label)}
-                </Button>
-              </span>
-            ) : (
-              <div
-                className={
-                  "section-child-item page cursor-pointer rounded-sm leading-normal text-gray-600"
-                }
-                onClick={onClick}
-              >
-                {label}
-              </div>
-            )}
-          </div>
-        );
-      })}
+      {childrenNodes.map((child) => (
+        <ChildRow
+          key={child.uid}
+          child={child}
+          truncateAt={truncateAt}
+          onloadArgs={onloadArgs}
+        />
+      ))}
     </>
   );
 };
 
 const PersonalSectionItem = ({
   section,
+  dragHandle,
+  onChildrenReorder,
   onloadArgs,
 }: {
   section: LeftSidebarPersonalSectionConfig;
+  dragHandle: SortableHandle;
+  onChildrenReorder: (args: {
+    sectionUid: string;
+    oldIndex: number;
+    newIndex: number;
+  }) => void;
   onloadArgs: OnloadArgs;
 }) => {
   const titleRef = parseReference(section.text);
@@ -213,7 +241,11 @@ const PersonalSectionItem = ({
 
   return (
     <>
-      <div className="sidebar-title-button flex w-full cursor-pointer items-center border-none bg-transparent pl-6 pr-2.5 font-semibold outline-none">
+      <div
+        {...dragHandle.attributes}
+        {...dragHandle.listeners}
+        className="sidebar-title-button flex w-full cursor-pointer items-center border-none bg-transparent pl-6 pr-2.5 font-semibold outline-none"
+      >
         <div className="flex w-full items-center justify-between">
           <div
             className="flex items-center"
@@ -236,10 +268,21 @@ const PersonalSectionItem = ({
         </div>
       </div>
       <Collapse isOpen={isOpen}>
-        <SectionChildren
-          childrenNodes={section.children || []}
-          truncateAt={truncateAt}
-          onloadArgs={onloadArgs}
+        <SortableList
+          items={section.children || []}
+          getId={(c) => c.uid}
+          onReorder={(oldIndex, newIndex) =>
+            onChildrenReorder({ sectionUid: section.uid, oldIndex, newIndex })
+          }
+          renderItem={(child, handle) => (
+            <div {...handle.attributes} {...handle.listeners}>
+              <ChildRow
+                child={child}
+                truncateAt={truncateAt}
+                onloadArgs={onloadArgs}
+              />
+            </div>
+          )}
         />
       </Collapse>
     </>
@@ -248,31 +291,92 @@ const PersonalSectionItem = ({
 
 const PersonalSections = ({
   config,
+  setConfig,
   onloadArgs,
 }: {
   config: LeftSidebarConfig;
+  setConfig: Dispatch<SetStateAction<LeftSidebarConfig>>;
   onloadArgs: OnloadArgs;
 }) => {
   const sections = config.personal.sections || [];
 
   if (!sections.length) return null;
 
+  const reorderSections = (oldIndex: number, newIndex: number) => {
+    const moved = sections[oldIndex];
+    if (!moved) return;
+    const reordered = arrayMove(sections, oldIndex, newIndex);
+    setConfig({
+      ...config,
+      personal: { ...config.personal, sections: reordered },
+    });
+    void moveRoamBlockToIndex({
+      blockUid: moved.uid,
+      parentUid: config.personal.uid,
+      sourceIndex: oldIndex,
+      destIndex: newIndex,
+    }).then(() => {
+      refreshAndNotify();
+    });
+  };
+
+  const reorderChildren = ({
+    sectionUid,
+    oldIndex,
+    newIndex,
+  }: {
+    sectionUid: string;
+    oldIndex: number;
+    newIndex: number;
+  }) => {
+    const section = sections.find((s) => s.uid === sectionUid);
+    const children = section?.children;
+    if (!section || !children || !section.childrenUid) return;
+    const child = children[oldIndex];
+    if (!child) return;
+    const reorderedChildren = arrayMove(children, oldIndex, newIndex);
+    const newSections = sections.map((s) =>
+      s.uid === sectionUid ? { ...s, children: reorderedChildren } : s,
+    );
+    setConfig({
+      ...config,
+      personal: { ...config.personal, sections: newSections },
+    });
+    void moveRoamBlockToIndex({
+      blockUid: child.uid,
+      parentUid: section.childrenUid,
+      sourceIndex: oldIndex,
+      destIndex: newIndex,
+    }).then(() => {
+      refreshAndNotify();
+    });
+  };
+
   return (
-    <div className="personal-left-sidebar-sections">
-      {sections.map((section) => (
-        <div key={section.uid}>
-          <PersonalSectionItem section={section} onloadArgs={onloadArgs} />
-        </div>
-      ))}
-    </div>
+    <SortableList
+      items={sections}
+      getId={(s) => s.uid}
+      onReorder={reorderSections}
+      className="personal-left-sidebar-sections"
+      renderItem={(section, handle) => (
+        <PersonalSectionItem
+          section={section}
+          dragHandle={handle}
+          onChildrenReorder={reorderChildren}
+          onloadArgs={onloadArgs}
+        />
+      )}
+    />
   );
 };
 
 const GlobalSection = ({
   config,
+  onGlobalChildrenReorder,
   onloadArgs,
 }: {
   config: LeftSidebarConfig["global"];
+  onGlobalChildrenReorder: (oldIndex: number, newIndex: number) => void;
   onloadArgs: OnloadArgs;
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(
@@ -281,6 +385,19 @@ const GlobalSection = ({
   if (!config.children?.length) return null;
   const isCollapsable = config.settings?.collapsable.value;
 
+  const children = (
+    <SortableList
+      items={config.children}
+      getId={(c) => c.uid}
+      onReorder={onGlobalChildrenReorder}
+      renderItem={(child, handle) => (
+        <div {...handle.attributes} {...handle.listeners}>
+          <ChildRow child={child} onloadArgs={onloadArgs} />
+        </div>
+      )}
+    />
+  );
+
   return (
     <>
       <div
@@ -305,17 +422,9 @@ const GlobalSection = ({
         </div>
       </div>
       {isCollapsable ? (
-        <Collapse isOpen={isOpen}>
-          <SectionChildren
-            childrenNodes={config.children}
-            onloadArgs={onloadArgs}
-          />
-        </Collapse>
+        <Collapse isOpen={isOpen}>{children}</Collapse>
       ) : (
-        <SectionChildren
-          childrenNodes={config.children}
-          onloadArgs={onloadArgs}
-        />
+        children
       )}
     </>
   );
@@ -453,13 +562,41 @@ const FavoritesPopover = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
 };
 
 const LeftSidebarView = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
-  const { config } = useConfig();
+  const { config, setConfig } = useConfig();
+
+  const reorderGlobalChildren = (oldIndex: number, newIndex: number) => {
+    const children = config.global.children;
+    if (!children) return;
+    const moved = children[oldIndex];
+    if (!moved) return;
+    const reordered = arrayMove(children, oldIndex, newIndex);
+    setConfig({
+      ...config,
+      global: { ...config.global, children: reordered },
+    });
+    void moveRoamBlockToIndex({
+      blockUid: moved.uid,
+      parentUid: config.global.childrenUid,
+      sourceIndex: oldIndex,
+      destIndex: newIndex,
+    }).then(() => {
+      refreshAndNotify();
+    });
+  };
 
   return (
     <>
       <FavoritesPopover onloadArgs={onloadArgs} />
-      <GlobalSection config={config.global} onloadArgs={onloadArgs} />
-      <PersonalSections config={config} onloadArgs={onloadArgs} />
+      <GlobalSection
+        config={config.global}
+        onGlobalChildrenReorder={reorderGlobalChildren}
+        onloadArgs={onloadArgs}
+      />
+      <PersonalSections
+        config={config}
+        setConfig={setConfig}
+        onloadArgs={onloadArgs}
+      />
     </>
   );
 };