opti: 1.adjust layout style;

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -1,16 +1,9 @@
 /* eslint-disable filename-rules/match */
-import {
+import { useEffect, useRef, type UIEvent, useState } from 'react';
-    useEffect,
-    useRef,
-    type UIEvent,
-    useState,
-    useLayoutEffect,
-} from 'react';
 import { useParams } from 'react-router';
 import {
     MuiBox as Box,
     MuiCircularProgress as CircularProgress,
-    MuiDivider as Divider,
     styled,
 } from '@toeverything/components/ui';
 import { AffineEditor } from '@toeverything/components/affine-editor';
@@ -54,11 +47,11 @@ export function Page(props: PageProps) {
                 }
             );
 
-            // await services.api.userConfig.addRecentPage(
+            await services.api.userConfig.addRecentPage(
-            //     props.workspace,
+                props.workspace,
-            //     user.id,
+                user.id,
-            //     page_id
+                page_id
-            // );
+            );
             await services.api.editorBlock.clearUndoRedo(props.workspace);
         };
         updateRecentPages();
@@ -94,14 +87,14 @@ export function Page(props: PageProps) {
                             )}
                             <div>
                                 <CollapsibleTitle
-                                    title="Activities"
+                                    title="ACTIVITIES"
                                     initialOpen={false}
                                 >
                                     <Activities />
                                 </CollapsibleTitle>
                             </div>
                             <div>
-                                <CollapsiblePageTree title="Page Tree">
+                                <CollapsiblePageTree title="PAGES">
                                     {page_id ? <PageTree /> : null}
                                 </CollapsiblePageTree>
                             </div>

apps/ligo-virgo/src/pages/workspace/docs/collapsible-page-tree.tsx

@@ -1,34 +1,34 @@
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import clsx from 'clsx';
-import style9 from 'style9';
 import {
     MuiBox as Box,
     MuiButton as Button,
     MuiCollapse as Collapse,
     MuiIconButton as IconButton,
+    styled,
 } from '@toeverything/components/ui';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+    ArrowDropDownIcon,
-
+    ArrowRightIcon,
+} from '@toeverything/components/icons';
 import { services } from '@toeverything/datasource/db-service';
-import { NewpageIcon } from '@toeverything/components/common';
 import {
     usePageTree,
     useCalendarHeatmap,
 } from '@toeverything/components/layout';
+import { AddIcon } from '@toeverything/components/icons';
 
-const styles = style9.create({
+const StyledContainer = styled('div')({
-    ligoButton: {
+    height: '32px',
-        textTransform: 'none',
+    display: 'flex',
-    },
+    alignItems: 'center',
-    newPage: {
+});
-        color: '#B6C7D3',
+
-        width: '26px',
+const StyledBtn = styled('div')({
-        fontSize: '18px',
+    color: '#98ACBD',
-        textAlign: 'center',
+    textTransform: 'none',
-        cursor: 'pointer',
+    fontSize: '12px',
-    },
+    fontWeight: '600',
 });
 
 export type CollapsiblePageTreeProps = {
@@ -73,31 +73,35 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
                     justifyContent: 'space-between',
                     alignItems: 'center',
                     paddingRight: 1,
+                    '&:hover': {
+                        background: '#f5f7f8',
+                        borderRadius: '5px',
+                    },
                 }}
                 onMouseEnter={() => setNewPageBtnVisible(true)}
                 onMouseLeave={() => setNewPageBtnVisible(false)}
             >
-                <Button
+                <StyledContainer>
-                    startIcon={
+                    {open ? (
-                        open ? <ArrowDropDownIcon /> : <ArrowRightIcon />
+                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                    }
+                    ) : (
-                    onClick={() => setOpen(prev => !prev)}
+                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                    sx={{ color: '#566B7D', textTransform: 'none' }}
+                    )}
-                    className={clsx(styles('ligoButton'), className)}
+                    <StyledBtn onClick={() => setOpen(prev => !prev)}>
-                    style={style}
+                        {title}
-                    disableElevation
+                    </StyledBtn>
-                    disableRipple
+                </StyledContainer>
-                >
-                    {title}
-                </Button>
 
                 {newPageBtnVisible && (
-                    <div
+                    <AddIcon
+                        style={{
+                            width: '20px',
+                            height: '20px',
+                            color: '#98ACBD',
+                            cursor: 'pointer',
+                        }}
                         onClick={create_page}
-                        className={clsx(styles('newPage'), className)}
+                    />
-                    >
-                        +
-                    </div>
                 )}
             </Box>
             {children ? (

libs/components/common/src/lib/collapsible-title/index.tsx

@@ -1,16 +1,21 @@
 import { useState } from 'react';
-import clsx from 'clsx';
-import style9 from 'style9';
 import {
     MuiButton as Button,
     MuiCollapse as Collapse,
+    styled,
 } from '@toeverything/components/ui';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+    ArrowDropDownIcon,
+    ArrowRightIcon,
+} from '@toeverything/components/icons';
 
-const styles = style9.create({
+const StyledContainer = styled('div')({
-    ligoButton: {
+    display: 'flex',
-        textTransform: 'none',
+    alignItems: 'center',
+    cursor: 'pointer',
+    '&:hover': {
+        background: '#f5f7f8',
+        borderRadius: '5px',
     },
 });
 
@@ -24,29 +29,32 @@ export type CollapsibleTitleProps = {
 };
 
 export function CollapsibleTitle(props: CollapsibleTitleProps) {
-    const { className, style, children, title, initialOpen = true } = props;
+    const { children, title, initialOpen = true } = props;
 
     const [open, setOpen] = useState(initialOpen);
 
     return (
         <>
-            <Button
+            <StyledContainer onClick={() => setOpen(prev => !prev)}>
-                startIcon={
+                {open ? (
-                    open ? (
+                    <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
+                ) : (
-                    ) : (
+                    <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
+                )}
-                    )
+                <div
-                }
+                    style={{
-                onClick={() => setOpen(prev => !prev)}
+                        color: '#98ACBD',
-                sx={{ color: '#566B7D', textTransform: 'none' }}
+                        textTransform: 'none',
-                className={clsx(styles('ligoButton'), className)}
+                        fontSize: '12px',
-                style={style}
+                        fontWeight: '600',
-                disableElevation
+                        height: '32px',
-                disableRipple
+                        display: 'flex',
-            >
+                        alignItems: 'center',
-                {title}
+                    }}
-            </Button>
+                >
+                    {title}
+                </div>
+            </StyledContainer>
             {children ? (
                 <Collapse in={open} timeout="auto" unmountOnExit>
                     {children}

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

@@ -12,17 +12,22 @@ import { useNavigate } from 'react-router';
 import { formatDistanceToNow } from 'date-fns';
 
 const StyledWrapper = styled('div')({
-    margin: '0 16px 0 32px',
+    paddingLeft: '12px',
     span: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
     },
     '.item': {
+        height: '32px',
         display: 'flex',
         alignItems: 'center',
-        ustifyContent: 'space-between',
+        justifyContent: 'space-between',
-        padding: '7px 0px',
+        paddingRight: '20px',
         whiteSpace: 'nowrap',
+        '&:hover': {
+            background: '#f5f7f8',
+            borderRadius: '5px',
+        },
     },
     '.itemButton': {
         padding: 0,
@@ -31,6 +36,7 @@ const StyledWrapper = styled('div')({
     '.itemLeft': {
         color: '#4c6275',
         marginRight: '20px',
+        cursor: 'pointer',
         span: {
             fontSize: 14,
         },
@@ -44,6 +50,14 @@ const StyledWrapper = styled('div')({
     },
 });
 
+const StyledItemContent = styled('div')({
+    width: '100%',
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+});
+
 export const Activities = () => {
     const navigate = useNavigate();
     const { user, currentSpaceId } = useUserAndSpaces();
@@ -51,34 +65,29 @@ export const Activities = () => {
     const userId = user?.id;
 
     /* temporarily remove:show recently viewed documents */
-    // const fetchRecentPages = useCallback(async () => {
+    const fetchRecentPages = useCallback(async () => {
-    //     if (!userId || !currentSpaceId) {
+        if (!userId || !currentSpaceId) {
-    //         return;
+            return;
-    //     }
+        }
-    //     const recent_pages = await services.api.userConfig.getRecentPages(
+        const recent_pages = await services.api.userConfig.getRecentPages(
-    //         currentSpaceId,
+            currentSpaceId,
-    //         userId
+            userId
-    //     );
+        );
-    //     setRecentPages(recent_pages);
+        setRecentPages(recent_pages);
-    // }, [userId, currentSpaceId]);
+    }, [userId, currentSpaceId]);
 
-    // useEffect(() => {
+    useEffect(() => {
-    //     (async () => {
+        (async () => {
-    //         await fetchRecentPages();
+            await fetchRecentPages();
-    //     })();
+        })();
-    // }, [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 },
-                getRecentEditPages
+                fetchRecentPages
             );
         };
         observe();
@@ -86,16 +95,15 @@ export const Activities = () => {
         return () => {
             unobserve?.();
         };
-    }, [currentSpaceId, getRecentEditPages]);
+    }, [currentSpaceId, fetchRecentPages]);
 
     return (
         <StyledWrapper>
-            <List>
+            <List style={{ padding: '0px' }}>
                 {recentPages.map(({ id, title, lastOpenTime }) => {
                     return (
                         <ListItem className="item" key={id}>
-                            <ListItemButton
+                            <StyledItemContent
-                                className="itemButton"
                                 onClick={() => {
                                     navigate(`/${currentSpaceId}/${id}`);
                                 }}
@@ -110,7 +118,7 @@ export const Activities = () => {
                                         includeSeconds: true,
                                     })}
                                 />
-                            </ListItemButton>
+                            </StyledItemContent>
                         </ListItem>
                     );
                 })}

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

@@ -44,7 +44,7 @@ export type DndTreeProps = {
  */
 export function DndTree(props: DndTreeProps) {
     const {
-        indentationWidth = 16,
+        indentationWidth = 12,
         collapsible,
         removable,
         showDragIndicator,

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

@@ -101,9 +101,6 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                                 <ArrowDropDownIcon />
                             ))}
                     </Action>
-                    {/*<Action>*/}
-                    {/*    <DocumentIcon />*/}
-                    {/*</Action>*/}
 
                     <div className={styles['ItemContent']}>
                         <span
@@ -161,7 +158,6 @@ export function Action({
             style={
                 {
                     ...style,
-                    // cursor,
                     '--fill': active?.fill,
                     '--background': active?.background,
                 } as CSSProperties

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

@@ -4,6 +4,10 @@
     list-style: none;
     padding: 6px 0;
     font-size: 14px;
+    &:hover {
+        background: #f5f7f8;
+        border-radius: 5px;
+    }
 
     &.clone {
         display: inline-block;
@@ -43,7 +47,6 @@
                     height: 12px;
                     border-radius: 50%;
                     border: 1px solid #2389ff;
-                    background-color: #ffffff;
                 }
 
                 > * {
@@ -69,7 +72,6 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    background-color: #fff;
     color: #4c6275;
 }
 
@@ -81,7 +83,6 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    background-color: #fff;
     color: #4c6275;
     padding-right: 0.5rem;
     overflow: hidden;
@@ -96,11 +97,6 @@
             display: block;
         }
     }
-
-    &:hover {
-        background: #f5f7f8;
-        border-radius: 5px;
-    }
 }
 
 .Text {
@@ -167,14 +163,6 @@
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
 
-    &:hover {
-        background-color: var(--action-background, rgba(0, 0, 0, 0.05));
-
-        svg {
-            fill: #6f7b88;
-        }
-    }
-
     svg {
         flex: 0 0 auto;
         margin: auto;