@@ -32,6 +32,7 @@ import {
3232 isQueryBlockRef ,
3333 type LeftSidebarConfig ,
3434 type LeftSidebarPersonalSectionConfig ,
35+ getGlobalSectionFoldedMarkerText ,
3536 mergeGlobalSectionWithAccessor ,
3637 mergePersonalSectionsWithAccessor ,
3738} from "~/utils/getLeftSidebarSettings" ;
@@ -51,7 +52,6 @@ import {
5152 PERSONAL_KEYS ,
5253 GLOBAL_KEYS ,
5354 LEFT_SIDEBAR_KEYS ,
54- LEFT_SIDEBAR_SETTINGS_KEYS ,
5555} from "~/components/settings/utils/settingKeys" ;
5656import type { LeftSidebarGlobalSettings } from "~/components/settings/utils/zodSchema" ;
5757import { createBlock } from "roamjs-components/writes" ;
@@ -179,7 +179,13 @@ const toggleFoldedState = async ({
179179 }
180180} ;
181181
182- const RoamRenderedBlock = ( { uid } : { uid : string } ) => {
182+ const RoamRenderedBlock = ( {
183+ uid,
184+ onNavigate,
185+ } : {
186+ uid : string ;
187+ onNavigate : ( e : React . MouseEvent ) => void ;
188+ } ) => {
183189 const [ version , setVersion ] = useState ( 0 ) ;
184190
185191 useEffect ( ( ) => {
@@ -192,8 +198,14 @@ const RoamRenderedBlock = ({ uid }: { uid: string }) => {
192198 } ;
193199 } , [ uid ] ) ;
194200
201+ const handleClick = ( e : React . MouseEvent ) => {
202+ const target = e . target as HTMLElement ;
203+ if ( target . closest ( "button" ) ) return ;
204+ onNavigate ( e ) ;
205+ } ;
206+
195207 return (
196- < div className = "dg-sidebar-rendered-block" >
208+ < div className = "dg-sidebar-rendered-block" onClick = { handleClick } >
197209 < RenderRoamBlock key = { version } uid = { uid } open = { false } />
198210 </ div >
199211 ) ;
@@ -215,8 +227,11 @@ const ChildRow = ({
215227 if ( ref . type === "block" && isSmartBlockUid ( ref . uid ) ) {
216228 return (
217229 < div className = "pl-8 pr-2.5" >
218- < div className = "section-child-item rounded-sm leading-normal text-gray-600" >
219- < RoamRenderedBlock uid = { ref . uid } />
230+ < div className = "section-child-item cursor-pointer rounded-sm leading-normal text-gray-600" >
231+ < RoamRenderedBlock
232+ uid = { ref . uid }
233+ onNavigate = { ( e ) => void openTarget ( e , child . text , onloadArgs ) }
234+ />
220235 </ div >
221236 </ div >
222237 ) ;
@@ -617,53 +632,46 @@ const PersonalSections = ({
617632
618633const GlobalSection = ( {
619634 config,
635+ folded,
636+ leftSidebarUid,
620637 onGlobalChildrenReorder,
621638 onloadArgs,
622639} : {
623640 config : LeftSidebarConfig [ "global" ] ;
641+ folded : boolean ;
642+ leftSidebarUid : string ;
624643 onGlobalChildrenReorder : ( oldIndex : number , newIndex : number ) => void ;
625644 onloadArgs : OnloadArgs ;
626645} ) => {
627- const [ isOpen , setIsOpen ] = useState < boolean > ( ! config . settings ?. folded . value ) ;
646+ const [ isOpen , setIsOpen ] = useState < boolean > ( ! folded ) ;
628647 const isTogglingRef = useRef ( false ) ;
629648 if ( ! config . children ?. length ) return null ;
630- const isCollapsable = config . settings ?. collapsable . value ;
631649
632650 const handleToggle = async ( ) => {
633- if ( ! isCollapsable || ! config . settings ) return ;
634651 if ( isTogglingRef . current ) return ;
635652 isTogglingRef . current = true ;
636653 try {
637- const settings = config . settings ;
638654 const nextIsOpen = ! isOpen ;
639655 setIsOpen ( nextIsOpen ) ;
640- if ( nextIsOpen ) {
641- const children = getBasicTreeByParentUid ( settings . uid ) ;
642- await Promise . all (
643- children
644- . filter ( ( c ) => c . text === "Folded" )
645- . map ( ( c ) => deleteBlock ( c . uid ) ) ,
646- ) ;
647- settings . folded . uid = undefined ;
648- settings . folded . value = false ;
649- } else {
650- const newUid = window . roamAlphaAPI . util . generateUID ( ) ;
651- await createBlock ( {
652- parentUid : settings . uid ,
653- node : { text : "Folded" , uid : newUid } ,
654- } ) ;
655- settings . folded . uid = newUid ;
656- settings . folded . value = true ;
656+ const userUid = window . roamAlphaAPI . user . uid ( ) ;
657+ if ( userUid ) {
658+ const markerText = getGlobalSectionFoldedMarkerText ( userUid ) ;
659+ if ( nextIsOpen ) {
660+ const children = getBasicTreeByParentUid ( leftSidebarUid ) ;
661+ await Promise . all (
662+ children
663+ . filter ( ( c ) => c . text === markerText )
664+ . map ( ( c ) => deleteBlock ( c . uid ) ) ,
665+ ) ;
666+ } else {
667+ await createBlock ( {
668+ parentUid : leftSidebarUid ,
669+ node : { text : markerText } ,
670+ } ) ;
671+ }
672+ refreshConfigTree ( ) ;
657673 }
658- refreshConfigTree ( ) ;
659- setGlobalSetting (
660- [
661- GLOBAL_KEYS . leftSidebar ,
662- LEFT_SIDEBAR_KEYS . settings ,
663- LEFT_SIDEBAR_SETTINGS_KEYS . folded ,
664- ] ,
665- ! nextIsOpen ,
666- ) ;
674+ setPersonalSetting ( [ PERSONAL_KEYS . globalSectionFolded ] , ! nextIsOpen ) ;
667675 } finally {
668676 isTogglingRef . current = false ;
669677 }
@@ -690,18 +698,12 @@ const GlobalSection = ({
690698 >
691699 < div className = "flex w-full items-center justify-between" >
692700 < span > GLOBAL</ span >
693- { isCollapsable && (
694- < span className = "sidebar-title-button-chevron p-1" >
695- < Icon icon = { isOpen ? "chevron-down" : "chevron-right" } />
696- </ span >
697- ) }
701+ < span className = "sidebar-title-button-chevron p-1" >
702+ < Icon icon = { isOpen ? "chevron-down" : "chevron-right" } />
703+ </ span >
698704 </ div >
699705 </ div >
700- { isCollapsable ? (
701- < Collapse isOpen = { isOpen } > { children } </ Collapse >
702- ) : (
703- children
704- ) }
706+ < Collapse isOpen = { isOpen } > { children } </ Collapse >
705707 </ >
706708 ) ;
707709} ;
@@ -718,6 +720,9 @@ const buildConfig = (snapshot?: SettingsSnapshot): LeftSidebarConfig => {
718720 : getPersonalSetting <
719721 ReturnType < typeof getPersonalSettings > [ typeof PERSONAL_KEYS . leftSidebar ]
720722 > ( [ PERSONAL_KEYS . leftSidebar ] ) ;
723+ const globalSectionFoldedValue = snapshot
724+ ? snapshot . personalSettings [ PERSONAL_KEYS . globalSectionFolded ]
725+ : getPersonalSetting < boolean > ( [ PERSONAL_KEYS . globalSectionFolded ] ) ;
721726
722727 // Read UIDs from old system (needed for fold CRUD during dual-write)
723728 const oldConfig = getCurrentLeftSidebarConfig ( ) ;
@@ -727,6 +732,10 @@ const buildConfig = (snapshot?: SettingsSnapshot): LeftSidebarConfig => {
727732 favoritesMigrated : oldConfig . favoritesMigrated ,
728733 sidebarMigrated : oldConfig . sidebarMigrated ,
729734 global : mergeGlobalSectionWithAccessor ( oldConfig . global , globalValues ) ,
735+ globalSectionFolded : {
736+ uid : oldConfig . globalSectionFolded . uid ,
737+ value : globalSectionFoldedValue ?? oldConfig . globalSectionFolded . value ,
738+ } ,
730739 personal : {
731740 uid : oldConfig . personal . uid ,
732741 sections : mergePersonalSectionsWithAccessor (
@@ -916,6 +925,8 @@ const LeftSidebarView = ({
916925 < FavoritesPopover onloadArgs = { onloadArgs } />
917926 < GlobalSection
918927 config = { config . global }
928+ folded = { config . globalSectionFolded . value }
929+ leftSidebarUid = { config . uid }
919930 onGlobalChildrenReorder = { reorderGlobalChildren }
920931 onloadArgs = { onloadArgs }
921932 />
@@ -1045,6 +1056,9 @@ export const mountLeftSidebar = async ({
10451056 .dg-sidebar-rendered-block .block-border-left { display: none; }
10461057 .dg-sidebar-rendered-block .block-ref-count-button { display: none; }
10471058 .dg-sidebar-rendered-block .rm-block-main { min-height: unset; padding: 0; }
1059+ .dg-sidebar-rendered-block * { pointer-events: none; }
1060+ .dg-sidebar-rendered-block button,
1061+ .dg-sidebar-rendered-block button * { pointer-events: auto; }
10481062 ` ;
10491063 document . head . appendChild ( style ) ;
10501064 }
0 commit comments