diff --git a/apps/roam/package.json b/apps/roam/package.json
index 517e3dc11..df76bd551 100644
--- a/apps/roam/package.json
+++ b/apps/roam/package.json
@@ -52,7 +52,6 @@
"@use-gesture/react": "^10.2.27",
"@vercel/blob": "^1.1.1",
"classnames": "^2.3.2",
- "@hello-pangea/dnd": "^18.0.1",
"colord": "^2.9.3",
"core-js": "^3.45.0",
"cytoscape": "^3.21.0",
diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx
index 009a75cdc..97fc90385 100644
--- a/apps/roam/src/components/LeftSidebarView.tsx
+++ b/apps/roam/src/components/LeftSidebarView.tsx
@@ -7,17 +7,6 @@ import React, {
useState,
} from "react";
import ReactDOM from "react-dom";
-import {
- DragDropContext,
- Droppable,
- Draggable,
- DropResult,
- DraggableProvided,
- DraggableStateSnapshot,
- DroppableProvided,
- DragStart,
- DraggableRubric,
-} from "@hello-pangea/dnd";
import {
Collapse,
Icon,
@@ -158,10 +147,8 @@ const SectionChildren = ({
const PersonalSectionItem = ({
section,
- activeDragSourceId,
}: {
section: LeftSidebarPersonalSectionConfig;
- activeDragSourceId: string | null;
}) => {
const titleRef = parseReference(section.text);
const blockText = useMemo(
@@ -174,33 +161,6 @@ const PersonalSectionItem = ({
!!section.settings?.folded.value || false,
);
- const renderChild = (
- dragProvided: DraggableProvided,
- child: { text: string; uid: string },
- ) => {
- const ref = parseReference(child.text);
- const label = truncate(ref.display, truncateAt);
- const onClick = (e: React.MouseEvent) => {
- return void openTarget(e, child.text);
- };
- return (
-
- );
- };
-
const handleChevronClick = () => {
if (!section.settings) return;
@@ -237,162 +197,28 @@ const PersonalSectionItem = ({
- {
- const child = (section.children || [])[rubric.source.index];
- return renderChild(provided, child);
- }}
- >
- {(provided: DroppableProvided) => (
-
- {(section.children || []).map((child, index) => (
-
- {(dragProvided: DraggableProvided) => {
- return renderChild(dragProvided, child);
- }}
-
- ))}
- {provided.placeholder}
-
- )}
-
+
>
);
};
-const PersonalSections = ({
- config,
- setConfig,
-}: {
- config: LeftSidebarConfig;
- setConfig: Dispatch>;
-}) => {
+const PersonalSections = ({ config }: { config: LeftSidebarConfig }) => {
const sections = config.personal.sections || [];
- const [activeDragSourceId, setActiveDragSourceId] = useState(
- null,
- );
if (!sections.length) return null;
- const handleDragStart = (start: DragStart) => {
- if (start.type === "ITEMS") {
- setActiveDragSourceId(start.source.droppableId);
- }
- };
-
- const handleDragEnd = (result: DropResult) => {
- setActiveDragSourceId(null);
- const { source, destination, type } = result;
-
- if (!destination) return;
-
- if (type === "SECTIONS") {
- if (destination.index === source.index) return;
-
- const newPersonalSections = Array.from(config.personal.sections);
- const [removed] = newPersonalSections.splice(source.index, 1);
- newPersonalSections.splice(destination.index, 0, removed);
-
- setConfig({
- ...config,
- personal: { ...config.personal, sections: newPersonalSections },
- });
- const finalIndex =
- destination.index > source.index
- ? destination.index + 1
- : destination.index;
- void window.roamAlphaAPI.moveBlock({
- location: { "parent-uid": config.personal.uid, order: finalIndex },
- block: { uid: removed.uid },
- });
- return;
- }
-
- if (type === "ITEMS") {
- if (source.droppableId !== destination.droppableId) {
- return;
- }
-
- if (destination.index === source.index) {
- return;
- }
-
- const newConfig = JSON.parse(JSON.stringify(config)) as LeftSidebarConfig;
- const { personal } = newConfig;
-
- const listToReorder = personal.sections.find(
- (s) => s.uid === source.droppableId,
- );
- const parentUid = listToReorder?.childrenUid;
- const listToReorderChildren = listToReorder?.children;
-
- if (!listToReorderChildren) return;
-
- const [removedItem] = listToReorderChildren.splice(source.index, 1);
- listToReorderChildren.splice(destination.index, 0, removedItem);
-
- setConfig(newConfig);
- const finalIndex =
- destination.index > source.index
- ? destination.index + 1
- : destination.index;
- void window.roamAlphaAPI.moveBlock({
- location: { "parent-uid": parentUid || "", order: finalIndex },
- block: { uid: removedItem.uid },
- });
- }
- };
return (
-
-
- {(provided: DroppableProvided) => (
-
- {sections.map((section, index) => (
-
- {(dragProvided: DraggableProvided) => (
-
- )}
-
- ))}
- {provided.placeholder}
-
- )}
-
-
+
+ {sections.map((section) => (
+
+ ))}
+
);
};
@@ -570,13 +396,13 @@ const FavouritesPopover = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
};
const LeftSidebarView = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
- const { config, setConfig } = useConfig();
+ const { config } = useConfig();
return (
<>
-
+
>
);
};
diff --git a/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx
index fd24affbd..cebb853ae 100644
--- a/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx
+++ b/apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx
@@ -1,12 +1,5 @@
-import React, {
- useCallback,
- useEffect,
- useMemo,
- useState,
- memo,
- ReactNode,
-} from "react";
-import { Button, Collapse, Icon } from "@blueprintjs/core";
+import React, { useCallback, useEffect, useMemo, useState, memo } from "react";
+import { Button, Collapse } from "@blueprintjs/core";
import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
import getAllPageNames from "roamjs-components/queries/getAllPageNames";
@@ -20,15 +13,6 @@ import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
import { getLeftSidebarGlobalSectionConfig } from "~/utils/getLeftSidebarSettings";
import { LeftSidebarGlobalSectionConfig } from "~/utils/getLeftSidebarSettings";
import { render as renderToast } from "roamjs-components/components/Toast";
-import {
- DragDropContext,
- Droppable,
- Draggable,
- DropResult,
- DraggableProvided,
- DraggableRubric,
- DraggableStateSnapshot,
-} from "@hello-pangea/dnd";
import refreshConfigTree from "~/utils/refreshConfigTree";
import { refreshAndNotify } from "~/components/LeftSidebarView";
@@ -36,22 +20,12 @@ const PageItem = memo(
({
page,
onRemove,
- dragProvided,
}: {
page: RoamBasicNode;
onRemove: (page: RoamBasicNode) => void;
- dragProvided: DraggableProvided;
}) => {
return (
-
-
-
-
+
{page.text}
{pages.length > 0 ? (
-
- {
- const page = pages[rubric.source.index];
- return (
- void removePage(page)}
- dragProvided={provided}
- />
- );
- }}
- >
- {(provided) => (
-
- {pages.map((page, index) => (
-
- {(dragProvided: DraggableProvided): ReactNode => (
- void removePage(page)}
- dragProvided={dragProvided}
- />
- )}
-
- ))}
- {provided.placeholder}
-
- )}
-
-
+
+ {pages.map((page) => (
+
void removePage(page)}
+ />
+ ))}
+
) : (
No pages added yet
diff --git a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
index d63dd2f1f..dcfff1935 100644
--- a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
+++ b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
@@ -19,16 +19,6 @@ import { render as renderToast } from "roamjs-components/components/Toast";
import refreshConfigTree from "~/utils/refreshConfigTree";
import { refreshAndNotify } from "~/components/LeftSidebarView";
import { memo, Dispatch, SetStateAction } from "react";
-import {
- DragDropContext,
- Droppable,
- Draggable,
- DropResult,
- DraggableProvided,
- DroppableProvided,
- DraggableRubric,
- DraggableStateSnapshot,
-} from "@hello-pangea/dnd";
const SectionItem = memo(
({
@@ -36,13 +26,11 @@ const SectionItem = memo(
setSettingsDialogSectionUid,
pageNames,
setSections,
- dragHandleProps,
}: {
section: LeftSidebarPersonalSectionConfig;
setSections: Dispatch
>;
setSettingsDialogSectionUid: (uid: string | null) => void;
pageNames: string[];
- dragHandleProps: DraggableProvided["dragHandleProps"];
}) => {
const ref = extractRef(section.text);
const blockText = getTextByBlockUid(ref);
@@ -237,10 +225,6 @@ const SectionItem = memo(
}}
>
-
-
-
-
{!sectionWithoutSettingsAndChildren && (
-
- {
- const section = sections[rubric.source.index];
- return (
-
-
-
- );
- }}
- >
- {(provided: DroppableProvided) => (
-
- {sections.map((section, index) => (
-
- {(dragProvided: DraggableProvided) => (
-
-
-
- )}
-
- ))}
- {provided.placeholder}
-
- )}
-
-
+
+ {sections.map((section) => (
+
+
+
+ ))}
+
{activeDialogSection && activeDialogSection.settings && (