From d26d041fdec6d24b6272983eca820962d482f917 Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Sun, 19 Oct 2025 00:11:04 -0600 Subject: [PATCH 1/6] comment out drag-and-drop functionality to test bug --- apps/roam/src/components/LeftSidebarView.tsx | 308 ++++++++++--------- 1 file changed, 161 insertions(+), 147 deletions(-) diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 57cc0747d..b4de0b436 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -7,17 +7,17 @@ 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 { +// DragDropContext, +// Droppable, +// Draggable, +// DropResult, +// DraggableProvided, +// DraggableStateSnapshot, +// DroppableProvided, +// DragStart, +// DraggableRubric, +// } from "@hello-pangea/dnd"; import { Collapse, Icon, @@ -158,10 +158,10 @@ const SectionChildren = ({ const PersonalSectionItem = ({ section, - activeDragSourceId, + // activeDragSourceId, }: { section: LeftSidebarPersonalSectionConfig; - activeDragSourceId: string | null; + // activeDragSourceId: string | null; }) => { const titleRef = parseReference(section.text); const blockText = useMemo( @@ -174,32 +174,32 @@ 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 ( -
-
- {label} -
-
- ); - }; + // 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 ( + //
+ //
+ // {label} + //
+ //
+ // ); + // }; const handleChevronClick = () => { if (!section.settings) return; @@ -239,7 +239,7 @@ const PersonalSectionItem = ({ - )} - + */} +
+ +
); @@ -279,122 +285,130 @@ const PersonalSectionItem = ({ const PersonalSections = ({ config, - setConfig, + setConfig: _setConfig, }: { config: LeftSidebarConfig; setConfig: Dispatch>; }) => { const sections = config.personal.sections || []; - const [activeDragSourceId, setActiveDragSourceId] = useState( - null, - ); + // 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 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 }, + // }); + // } + // }; - 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} -
- )} - - + // + // + // {(provided: DroppableProvided) => ( + //
+ // {sections.map((section, index) => ( + // + // {(dragProvided: DraggableProvided) => ( + //
+ // + //
+ // )} + // + // ))} + // {provided.placeholder} + //
+ // )} + // + // +
+ {sections.map((section) => ( +
+ +
+ ))} +
); }; From 50a13be8a527764289678c220f0a504c6326bbc5 Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Sun, 19 Oct 2025 10:58:20 -0600 Subject: [PATCH 2/6] revert --- apps/roam/src/components/LeftSidebarView.tsx | 309 +++++++++---------- 1 file changed, 148 insertions(+), 161 deletions(-) diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index b4de0b436..68e468b45 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -7,17 +7,17 @@ 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 { + DragDropContext, + Droppable, + Draggable, + DropResult, + DraggableProvided, + DraggableStateSnapshot, + DroppableProvided, + DragStart, + DraggableRubric, +} from "@hello-pangea/dnd"; import { Collapse, Icon, @@ -158,10 +158,10 @@ const SectionChildren = ({ const PersonalSectionItem = ({ section, - // activeDragSourceId, + activeDragSourceId, }: { section: LeftSidebarPersonalSectionConfig; - // activeDragSourceId: string | null; + activeDragSourceId: string | null; }) => { const titleRef = parseReference(section.text); const blockText = useMemo( @@ -174,32 +174,32 @@ 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 ( - //
- //
- // {label} - //
- //
- // ); - // }; + 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 ( +
+
+ {label} +
+
+ ); + }; const handleChevronClick = () => { if (!section.settings) return; @@ -239,7 +239,7 @@ const PersonalSectionItem = ({ - {/* )} - */} -
- -
+ ); @@ -285,130 +279,123 @@ const PersonalSectionItem = ({ const PersonalSections = ({ config, - setConfig: _setConfig, + setConfig, }: { config: LeftSidebarConfig; setConfig: Dispatch>; }) => { const sections = config.personal.sections || []; - // const [activeDragSourceId, setActiveDragSourceId] = useState( - // null, - // ); + 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 }, - // }); - // } - // }; + 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) => ( -
- -
- ))} -
+ + + {(provided: DroppableProvided) => ( +
+ {sections.map((section, index) => ( + + {(dragProvided: DraggableProvided) => ( +
+ +
+ )} + + ))} + {provided.placeholder} +
+ )} + + ); }; From f4c1d0ab5ae8afbbc995e9dce6475c647474bdd2 Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Sun, 19 Oct 2025 11:01:16 -0600 Subject: [PATCH 3/6] keepChildrenMounted --- apps/roam/src/components/LeftSidebarView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 68e468b45..f3801644e 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -359,7 +359,6 @@ const PersonalSections = ({ }); } }; - return ( @@ -430,7 +429,7 @@ const GlobalSection = ({ config }: { config: LeftSidebarConfig["global"] }) => { {isCollapsable ? ( - + ) : ( From 7f96af3d86fd8397b9844e983b0595c838d91daf Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Sun, 19 Oct 2025 11:03:52 -0600 Subject: [PATCH 4/6] minify false, sourcemap true --- apps/roam/scripts/compile.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/roam/scripts/compile.ts b/apps/roam/scripts/compile.ts index b639a9df0..6d2ec87d3 100644 --- a/apps/roam/scripts/compile.ts +++ b/apps/roam/scripts/compile.ts @@ -169,8 +169,8 @@ export const compile = ({ "window.__DISCOURSE_GRAPH_VERSION__": `"${getVersion()}"`, "window.__DISCOURSE_GRAPH_BUILD_DATE__": `"${getBuildDate()}"`, }, - sourcemap: process.env.NODE_ENV === "production" ? undefined : "inline", - minify: process.env.NODE_ENV === "production", + sourcemap: "inline", + minify: false, entryNames: out, external: externalModules.map(([e]) => e).concat(["crypto"]), plugins: [ From ae6ecc1ccfe8cc2e5782a855a525c7b4e2ab7ef9 Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Sun, 19 Oct 2025 11:10:28 -0600 Subject: [PATCH 5/6] . --- apps/roam/src/components/LeftSidebarView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index f3801644e..8562e59d9 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -238,7 +238,7 @@ const PersonalSectionItem = ({ )} - + Date: Sun, 19 Oct 2025 11:54:56 -0600 Subject: [PATCH 6/6] rm overflow-scroll --- apps/roam/src/components/LeftSidebarView.tsx | 4 ++-- apps/roam/src/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 8562e59d9..9dbefe0f8 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -599,11 +599,11 @@ export const mountLeftSidebar = ( } root = document.createElement("div"); root.id = id; - root.className = "starred-pages overflow-scroll"; + root.className = "starred-pages"; root.onmousedown = (e) => e.stopPropagation(); wrapper.appendChild(root); } else { - root.className = "starred-pages overflow-scroll"; + root.className = "starred-pages"; } ReactDOM.render(, root); }; diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index 5c852e57d..4adfa4091 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -87,7 +87,7 @@ export default runExtension(async (onloadArgs) => { if (process.env.NODE_ENV === "development") { renderToast({ id: "discourse-graph-loaded", - content: "Successfully loaded", + content: "Successfully loaded-no overflow-scroll on sidebar", intent: "success", timeout: 500, });