Merge pull request #89 from toeverything/opti-page-tree-mitsuha-dev

opti: 1.adjust layout style;

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 ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import {
+    ArrowDropDownIcon,
+    ArrowRightIcon,
+} from '@toeverything/components/icons';
 
-const styles = style9.create({
-    ligoButton: {
-        textTransform: 'none',
+const StyledContainer = styled('div')({
+    display: 'flex',
+    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
-                startIcon={
-                    open ? (
-                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                    ) : (
-                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                    )
-                }
-                onClick={() => setOpen(prev => !prev)}
-                sx={{ color: '#566B7D', textTransform: 'none' }}
-                className={clsx(styles('ligoButton'), className)}
-                style={style}
-                disableElevation
-                disableRipple
-            >
-                {title}
-            </Button>
+            <StyledContainer onClick={() => setOpen(prev => !prev)}>
+                {open ? (
+                    <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
+                ) : (
+                    <ArrowRightIcon sx={{ color: '#566B7D' }} />
+                )}
+                <div
+                    style={{
+                        color: '#98ACBD',
+                        textTransform: 'none',
+                        fontSize: '12px',
+                        fontWeight: '600',
+                        height: '32px',
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
+                >
+                    {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',
-        padding: '7px 0px',
+        justifyContent: 'space-between',
+        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 () => {
-    //     if (!userId || !currentSpaceId) {
-    //         return;
-    //     }
-    //     const recent_pages = await services.api.userConfig.getRecentPages(
-    //         currentSpaceId,
-    //         userId
-    //     );
-    //     setRecentPages(recent_pages);
-    // }, [userId, currentSpaceId]);
+    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]);
-
-    /* show recently edit documents */
-    const getRecentEditPages = async (state, block) => {
-        console.log(state, await block.children());
-    };
+    useEffect(() => {
+        (async () => {
+            await fetchRecentPages();
+        })();
+    }, [fetchRecentPages]);
 
     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
-                                className="itemButton"
+                            <StyledItemContent
                                 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;