ENG-1051 remove drag and drop until we find a good solution for it

[sid597]

Summary by CodeRabbit

• Refactor
  • Removed drag-and-drop reordering functionality from sidebar sections and items. Sections and items now display in a static order while maintaining add and remove capabilities.

[linear]

ENG-1051 Remove Drag and drop until we find a good solution for it

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[sid597]

• ENG-1051 remove drag and drop until we find a good solution for it #544 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[sid597]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR removes the @hello-pangea/dnd dependency and eliminates all drag-and-drop functionality from sidebar components (LeftSidebarView, LeftSidebarGlobalSettings, LeftSidebarPersonalSettings), replacing interactive reordering with static list rendering and basic add/remove capabilities.

Changes

Cohort / File(s)	Summary
Dependency Removal apps/roam/package.json	Removed @hello-pangea/dnd from dependencies.
Drag-and-Drop Removal from Personal Sections apps/roam/src/components/LeftSidebarView.tsx	Removed DragDropContext, Droppable, and Draggable wrappers. Eliminated drag handlers, activeDragSourceId tracking, and per-item drag rendering logic. Simplified PersonalSections component signature to accept only config (removed setConfig). Replaced nested drag structure with direct section mapping via SectionChildren for rendering children. Updated PersonalSectionItem to remove drag-related props.
Drag-and-Drop Removal from Global Settings apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx	Removed drag-and-drop UI wrappers and drag handles from PageItem. Eliminated handleDragEnd logic and reordering functionality. Replaced dragging-based page reordering with static list rendering. Addition/removal behavior and error handling preserved.
Drag-and-Drop Removal from Personal Settings apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx	Removed Droppable/Draggable constructs and DragDropContext usage. Eliminated all drag-related props and handles (dragHandleProps). Replaced nested drag-clone/render logic with straightforward mapped list rendering of sections and children. Removed handleDragEnd and associated reordering state.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Verify completeness of DnD removal: Ensure all drag-related imports, context providers, and event handlers are removed across all three component files
• PersonalSectionItem signature changes: Confirm that removing activeDragSourceId prop and drag logic maintains proper rendering and does not break parent-child communication
• SectionChildren consolidation: Review that the new consolidated child-rendering logic in LeftSidebarView correctly handles all child item types and interactions
• Cascading effects: Check that simplified PersonalSections component (no longer using setConfig) does not affect config updates elsewhere in the application

Possibly related PRs

• ENG-882 Let user rearrange personal section and section items in place in left sidebar #456: Inverse operation—removes DnD dependency and drag-and-drop code from the same three sidebar component files.
• ENG-852 Render left sidebar based on fetched sections and settings #440: Modifies LeftSidebarView.tsx rendering and mounting logic; this PR removes drag infrastructure from the same component.
• ENG-947 dragging and/or clicking on section header crashes the sidebar #481: Modifies LeftSidebarView and PersonalSectionItem section header interactions; this PR removes drag logic that may have been intertwined with header behavior.

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'ENG-1051 remove drag and drop until we find a good solution for it' directly and clearly describes the main change: removing drag-and-drop functionality across multiple components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx (1)

210-217: Fix stale disablement of Folded toggle

disabled={!globalSection.children?.length} never re-evaluates after add/remove because globalSection stays at the snapshot captured during initialize(). After you add the first page, the Folded control is still greyed out, so users can’t enable it without reloading the settings pane. Drive the disable flag from the reactive pages state (or update globalSection.children) so the UI unlocks immediately.

-          disabled={!globalSection.children?.length}
+          disabled={!pages.length}

🧹 Nitpick comments (1)

apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx (1)

206-213: Skip the second refreshAndNotify() call

addChildToSection already invokes refreshAndNotify(). Calling it again here forces a second config refresh and duplicate sidebar notifications. Dropping the extra call keeps the behaviour identical while avoiding redundant work.

       if (childInput && section.childrenUid) {
         await addChildToSection(section, section.childrenUid, childInput);
         setChildInput("");
         setChildInputKey((prev) => prev + 1);
-        refreshAndNotify();
       }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between de69756 and 4c62956.

📒 Files selected for processing (4)

• apps/roam/package.json (0 hunks)
• apps/roam/src/components/LeftSidebarView.tsx (2 hunks)
• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx (3 hunks)
• apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx (2 hunks)

💤 Files with no reviewable changes (1)

• apps/roam/package.json

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx}: Prefer type over interface
Use explicit return types for functions
Avoid any types when possible

Files:

• apps/roam/src/components/LeftSidebarView.tsx
• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx
• apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx,js,jsx}: Prefer arrow functions over regular function declarations
Use named parameters (object destructuring) when a function has more than 2 parameters
Use Prettier with the project's configuration
Maintain consistent naming conventions: PascalCase for components and types
Maintain consistent naming conventions: camelCase for variables and functions
Maintain consistent naming conventions: UPPERCASE for constants

Files:

• apps/roam/src/components/LeftSidebarView.tsx
• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx
• apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx

apps/roam/**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

apps/roam/**/*.{js,jsx,ts,tsx}: Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension
Use the roamAlphaApi documentation from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when working with the Roam API
Use Roam Depot/Extension API documentation from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when working with the Roam Extension API

Files:

• apps/roam/src/components/LeftSidebarView.tsx
• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx
• apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx

🧠 Learnings (4)

📚 Learning: 2025-08-11T19:09:58.252Z

Learnt from: maparent
Repo: DiscourseGraphs/discourse-graph PR: 337
File: apps/roam/src/components/DiscourseFloatingMenu.tsx:43-43
Timestamp: 2025-08-11T19:09:58.252Z
Learning: The roam subdirectory (apps/roam) is constrained to React 17 and cannot use React 18+ features like createRoot API. ReactDOM.render should be used instead of createRoot in this subdirectory.

Applied to files:

• apps/roam/src/components/LeftSidebarView.tsx
• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx

📚 Learning: 2025-07-19T22:34:23.619Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.619Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Applied to files:

• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx

📚 Learning: 2025-07-19T22:34:23.619Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.619Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use the roamAlphaApi documentation from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when working with the Roam API

Applied to files:

• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx

📚 Learning: 2025-07-19T22:34:23.619Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.619Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use Roam Depot/Extension API documentation from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when working with the Roam Extension API

Applied to files:

• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx

[mdroidian]

Let's go ahead with this as I still experience issues with dnd: #545 (comment)

Also, let's make a new task to add up down (🔼🔽) arrows to each page/section in the settings panel so that they can be reordered.