opti: 1.adjust padding of page-tree item; 2. fetch new icon from figma;

libs/components/layout/src/header/LayoutHeader.tsx

@@ -3,13 +3,14 @@ import {
     LogoIcon,
     SideBarViewIcon,
     SearchIcon,
+    SideBarViewCloseIcon,
 } from '@toeverything/components/icons';
 import { useShowSettingsSidebar } from '@toeverything/datasource/state';
 import { CurrentPageTitle } from './Title';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 
 export const LayoutHeader = () => {
-    const { toggleSettingsSidebar: toggleInfoSidebar } =
+    const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } =
         useShowSettingsSidebar();
 
     return (
@@ -31,7 +32,11 @@ export const LayoutHeader = () => {
                         </div>
 
                         <IconButton onClick={toggleInfoSidebar} size="large">
-                            <SideBarViewIcon />
+                            {showSettingsSidebar ? (
+                                <SideBarViewIcon />
+                            ) : (
+                                <SideBarViewCloseIcon />
+                            )}
                         </IconButton>
                     </StyledHelper>
                 </FlexContainer>

libs/components/layout/src/workspace-sidebar/activities/activities.tsx

@@ -50,31 +50,35 @@ export const Activities = () => {
     const [recentPages, setRecentPages] = useState([]);
     const userId = user?.id;
 
-    const fetchRecentPages = useCallback(async () => {
-        if (!userId || !currentSpaceId) {
-            return;
-        }
-        const recent_pages = await services.api.userConfig.getRecentPages(
-            currentSpaceId,
-            userId
-        );
-        setRecentPages(recent_pages);
-    }, [userId, currentSpaceId]);
+    /* temporarily remove:show recently viewed documents */
+    // const fetchRecentPages = useCallback(async () => {
+    //     if (!userId || !currentSpaceId) {
+    //         return;
+    //     }
+    //     const recent_pages = await services.api.userConfig.getRecentPages(
+    //         currentSpaceId,
+    //         userId
+    //     );
+    //     setRecentPages(recent_pages);
+    // }, [userId, currentSpaceId]);
 
-    useEffect(() => {
-        (async () => {
-            await fetchRecentPages();
-        })();
-    }, [fetchRecentPages]);
+    // useEffect(() => {
+    //     (async () => {
+    //         await fetchRecentPages();
+    //     })();
+    // }, [fetchRecentPages]);
+
+    /* show recently edit documents */
+    const getRecentEditPages = async (state, block) => {
+        console.log(state, await block.children());
+    };
 
     useEffect(() => {
         let unobserve: () => void;
         const observe = async () => {
             unobserve = await services.api.userConfig.observe(
                 { workspace: currentSpaceId },
-                () => {
-                    fetchRecentPages();
-                }
+                getRecentEditPages
             );
         };
         observe();
@@ -82,7 +86,7 @@ export const Activities = () => {
         return () => {
             unobserve?.();
         };
-    }, [currentSpaceId, fetchRecentPages]);
+    }, [currentSpaceId, getRecentEditPages]);
 
     return (
         <StyledWrapper>

libs/components/layout/src/workspace-sidebar/page-tree/DndTree.tsx

@@ -95,30 +95,37 @@ export function DndTree(props: DndTreeProps) {
             >
                 {/* <button onClick={() => handleAdd()}> add top node</button> */}
                 {flattenedItems.map(
-                    ({ id, title, children, collapsed, depth }) => (
-                        <DndTreeItem
-                            key={id}
-                            id={id}
-                            // value={id}
-                            value={title}
-                            collapsed={Boolean(collapsed && children.length)}
-                            depth={
-                                id === activeId && projected
-                                    ? projected.depth
-                                    : depth
-                            }
-                            indentationWidth={indentationWidth}
-                            indicator={showDragIndicator}
-                            onCollapse={
-                                collapsible && children.length
-                                    ? () => handleCollapse(id)
-                                    : undefined
-                            }
-                            onRemove={
-                                removable ? () => handleRemove(id) : undefined
-                            }
-                        />
-                    )
+                    ({ id, title, children, collapsed, depth }) => {
+                        return (
+                            <DndTreeItem
+                                key={id}
+                                id={id}
+                                // value={id}
+                                value={title}
+                                collapsed={Boolean(
+                                    collapsed && children.length
+                                )}
+                                depth={
+                                    id === activeId && projected
+                                        ? projected.depth
+                                        : depth
+                                }
+                                indentationWidth={indentationWidth}
+                                indicator={showDragIndicator}
+                                childCount={children.length}
+                                onCollapse={
+                                    collapsible && children.length
+                                        ? () => handleCollapse(id)
+                                        : undefined
+                                }
+                                onRemove={
+                                    removable
+                                        ? () => handleRemove(id)
+                                        : undefined
+                                }
+                            />
+                        );
+                    }
                 )}
                 <DragOverlay
                     dropAnimation={dropAnimation}

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/MoreActions.tsx

@@ -5,6 +5,8 @@ import {
     CascaderItemProps,
     MuiDivider as Divider,
     MuiClickAwayListener as ClickAwayListener,
+    IconButton,
+    styled,
 } from '@toeverything/components/ui';
 import React from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
@@ -12,6 +14,8 @@ import { copyToClipboard } from '@toeverything/utils';
 import { services, TemplateFactory } from '@toeverything/datasource/db-service';
 import { NewFromTemplatePortal } from './NewFromTemplatePortal';
 import { useFlag } from '@toeverything/datasource/feature-flags';
+import { MoreIcon, AddIcon } from '@toeverything/components/icons';
+
 const MESSAGES = {
     COPY_LINK_SUCCESS: 'Copyed link to clipboard',
 };
@@ -20,6 +24,12 @@ interface ActionsProps {
     pageId: string;
     onRemove: () => void;
 }
+
+const StyledAction = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
+
 function DndTreeItemMoreActions(props: ActionsProps) {
     const [alert_open, set_alert_open] = React.useState(false);
     const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
@@ -236,12 +246,23 @@ function DndTreeItemMoreActions(props: ActionsProps) {
     return (
         <ClickAwayListener onClickAway={() => handleClose()}>
             <div>
-                <span
-                    className={styles['TreeItemMoreActions']}
-                    onClick={handleClick}
-                >
-                    ···
-                </span>
+                <div className={styles['TreeItemMoreActions']}>
+                    <StyledAction>
+                        <IconButton
+                            size="small"
+                            onClick={handle_new_child_page}
+                        >
+                            <AddIcon />
+                        </IconButton>
+                        <IconButton
+                            size="small"
+                            hoverColor="#E0E6EB"
+                            onClick={handleClick}
+                        >
+                            <MoreIcon />
+                        </IconButton>
+                    </StyledAction>
+                </div>
                 <Cascader
                     items={menuList}
                     anchorEl={anchorEl}

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx

@@ -65,7 +65,7 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         const navigate = useNavigate();
         const BooleanPageTreeItemMoreActions = useFlag(
             'BooleanPageTreeItemMoreActions',
-            false
+            true
         );
         return (
             <li
@@ -94,7 +94,12 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                     title={value}
                 >
                     <Action onClick={onCollapse}>
-                        {collapsed ? <ArrowRightIcon /> : <ArrowDropDownIcon />}
+                        {childCount !== 0 &&
+                            (collapsed ? (
+                                <ArrowRightIcon />
+                            ) : (
+                                <ArrowDropDownIcon />
+                            ))}
                     </Action>
                     {/*<Action>*/}
                     {/*    <DocumentIcon />*/}

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss

@@ -83,11 +83,11 @@
     justify-content: space-around;
     background-color: #fff;
     color: #4c6275;
-    padding: 0 0.5rem;
+    padding-right: 0.5rem;
     overflow: hidden;
 
     .TreeItemMoreActions {
-        visibility: hidden;
+        visibility: visible;
         cursor: pointer;
     }
     &:hover {