improvement: 1.left toolbar hover style#148;

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

@@ -8,6 +8,7 @@ import {
     usePageTree,
 } from '@toeverything/components/layout';
 import {
+    IconButton,
     MuiBox as Box,
     MuiCollapse as Collapse,
     styled,
@@ -27,6 +28,7 @@ const StyledBtn = styled('div')({
     cursor: 'pointer',
     userSelect: 'none',
     flex: 1,
+    marginLeft: '12px',
 });
 
 export type CollapsiblePageTreeProps = {
@@ -70,7 +72,7 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                    paddingRight: 1,
+                    paddingRight: '12px',
                     '&:hover': {
                         background: '#f5f7f8',
                         borderRadius: '5px',
@@ -80,24 +82,17 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
                 onMouseLeave={() => setNewPageBtnVisible(false)}
             >
                 <StyledBtn onClick={() => setOpen(prev => !prev)}>
-                    {open ? (
-                        <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                    ) : (
-                        <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                    )}
                     {title}
                 </StyledBtn>
 
                 {newPageBtnVisible && (
-                    <AddIcon
+                    <IconButton
-                        style={{
+                        size="small"
-                            width: '20px',
+                        hoverColor="#E0E6EB"
-                            height: '20px',
-                            color: '#98ACBD',
-                            cursor: 'pointer',
-                        }}
                         onClick={create_page}
-                    />
+                    >
+                        <AddIcon />
+                    </IconButton>
                 )}
             </Box>
             {children ? (

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

@@ -1,13 +1,16 @@
-import {
+import { styled, Input } from '@toeverything/components/ui';
-    styled,
-    MuiOutlinedInput as OutlinedInput,
-} from '@toeverything/components/ui';
 import { PinIcon } from '@toeverything/components/icons';
 import {
     useUserAndSpaces,
     useShowSpaceSidebar,
 } from '@toeverything/datasource/state';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {
+    ChangeEvent,
+    KeyboardEvent,
+    useCallback,
+    useEffect,
+    useState,
+} from 'react';
 import { services } from '@toeverything/datasource/db-service';
 import { Logo } from './components/logo/Logo';
 
@@ -124,24 +127,24 @@ export const WorkspaceName = () => {
         };
     }, [currentSpaceId, fetchWorkspaceName]);
 
-    const handleKeyDown = useCallback(
+    const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
-        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter') {
-            if (e.key === 'Enter') {
+            e.stopPropagation();
-                e.stopPropagation();
+            e.preventDefault();
-                e.preventDefault();
+            setInRename(false);
-                setInRename(false);
+        }
-            }
+    }, []);
-        },
-        []
-    );
     const handleChange = useCallback(
-        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        async (e: ChangeEvent<HTMLInputElement>) => {
-            services.api.userConfig.setWorkspaceName(
+            const name = e.target.value;
+
+            await setWorkspaceName(name);
+            await services.api.userConfig.setWorkspaceName(
                 currentSpaceId,
-                e.currentTarget.value
+                name
             );
         },
-        []
+        [currentSpaceId]
     );
 
     return (
@@ -165,7 +168,8 @@ export const WorkspaceName = () => {
                 <StyledWorkspace>
                     {inRename ? (
                         <WorkspaceReNameContainer>
-                            <OutlinedInput
+                            <Input
+                                autoFocus
                                 style={{ width: '140px', height: '28px' }}
                                 value={workspaceName}
                                 onChange={handleChange}

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

@@ -13,6 +13,7 @@ const StyledContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
+    paddingLeft: '12px',
     '&:hover': {
         background: '#f5f7f8',
         borderRadius: '5px',
@@ -36,11 +37,6 @@ export function CollapsibleTitle(props: CollapsibleTitleProps) {
     return (
         <>
             <StyledContainer onClick={() => setOpen(prev => !prev)}>
-                {open ? (
-                    <ArrowDropDownIcon sx={{ color: '#566B7D' }} />
-                ) : (
-                    <ArrowRightIcon sx={{ color: '#566B7D' }} />
-                )}
                 <div
                     style={{
                         color: '#98ACBD',

libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx

@@ -20,7 +20,6 @@ const Container = styled('div')(({ theme }) => {
     return {
         width: '64px',
         height: '32px',
-        backgroundColor: theme.affine.palette.textHover,
         border: '1px solid #ECF1FB',
         borderRadius: '8px',
         cursor: 'pointer',

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

@@ -31,6 +31,7 @@ export const LayoutHeader = () => {
                                 size="large"
                                 hoverColor={'transparent'}
                                 disabled={true}
+                                style={{ cursor: 'not-allowed' }}
                             >
                                 <SearchIcon />
                             </IconButton>
@@ -124,11 +125,11 @@ const StyledHelper = styled('div')({
     alignItems: 'center',
 });
 
-const StyledShare = styled(MuiButton)<{ disabled?: boolean }>({
+const StyledShare = styled('div')<{ disabled?: boolean }>({
     padding: '10px 12px',
     fontWeight: 600,
     fontSize: '14px',
-    cursor: 'pointer',
+    cursor: 'not-allowed',
     color: '#98ACBD',
     textTransform: 'none',
     /* disabled for current time */

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

@@ -10,9 +10,10 @@ import {
 } from '@toeverything/components/ui';
 import { useNavigate } from 'react-router';
 import { formatDistanceToNow } from 'date-fns';
+import { DotIcon } from '../dot-icon';
 
 const StyledWrapper = styled('div')({
-    paddingLeft: '12px',
+    width: '100%',
     span: {
         textOverflow: 'ellipsis',
         overflow: 'hidden',
@@ -22,8 +23,8 @@ const StyledWrapper = styled('div')({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingRight: '20px',
         whiteSpace: 'nowrap',
+        paddingLeft: '12px',
         '&:hover': {
             background: '#f5f7f8',
             borderRadius: '5px',
@@ -106,6 +107,8 @@ export const Activities = () => {
                     const { id, title, updated } = item;
                     return (
                         <ListItem className="item" key={id}>
+                            <DotIcon />
+
                             <StyledItemContent
                                 onClick={() => {
                                     navigate(`/${currentSpaceId}/${id}`);

libs/components/layout/src/workspace-sidebar/dot-icon/DotIcon.tsx

@@ -0,0 +1,9 @@
+import { PageInPageTreeIcon } from '@toeverything/components/icons';
+
+export const DotIcon = () => {
+    return (
+        <PageInPageTreeIcon
+            style={{ fill: '#98ACBD', width: '20px', height: '20px' }}
+        />
+    );
+};

libs/components/layout/src/workspace-sidebar/dot-icon/index.ts

@@ -0,0 +1 @@
+export { DotIcon } from './DotIcon';

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

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

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

@@ -3,10 +3,8 @@ import { DndTree } from './DndTree';
 import { useDndTreeAutoUpdate } from './use-page-tree';
 
 const Root = styled('div')({
-    minWidth: 160,
+    minWidth: '160px',
-    maxWidth: 260,
+    maxWidth: '276px',
-    marginLeft: 18,
-    marginRight: 6,
 });
 
 export const PageTree = () => {

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

@@ -8,6 +8,7 @@ import { useParams } from 'react-router-dom';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 
 import MoreActions from './MoreActions';
+import { DotIcon } from '../../dot-icon';
 import {
     ActionButton,
     Counter,
@@ -76,24 +77,25 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                 ghost={ghost}
                 disableSelection={disableSelection}
                 disableInteraction={disableInteraction}
-                spacing={`${indentationWidth * depth}px`}
+                spacing={`${indentationWidth * depth + 12}px`}
+                active={pageId === page_id}
                 {...props}
             >
                 <TreeItemContainer ref={ref} style={style} title={value}>
                     <ActionButton tabIndex={0} onClick={onCollapse}>
-                        {childCount !== 0 &&
+                        {childCount !== 0 ? (
-                            (collapsed ? (
+                            collapsed ? (
                                 <ArrowRightIcon />
                             ) : (
                                 <ArrowDropDownIcon />
-                            ))}
+                            )
+                        ) : (
+                            <DotIcon />
+                        )}
                     </ActionButton>
 
                     <TreeItemContent {...handleProps}>
-                        <TextLink
+                        <TextLink to={`/${workspace_id}/${pageId}`}>
-                            to={`/${workspace_id}/${pageId}`}
-                            active={pageId === page_id}
-                        >
                             {value}
                         </TextLink>
                         {BooleanPageTreeItemMoreActions && (

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/styles.ts

@@ -15,11 +15,14 @@ export const Wrapper = styled('li')<{
     indicator?: boolean;
     disableSelection?: boolean;
     disableInteraction?: boolean;
+    active?: boolean;
 }>`
     box-sizing: border-box;
     padding-left: ${({ spacing }) => spacing};
     list-style: none;
     font-size: 14px;
+    background-color: ${({ active }) => (active ? '#f5f7f8' : 'transparent')};
+    border-radius: 5px;
 
     ${({ clone, disableSelection }) =>
         (clone || disableSelection) &&
@@ -126,8 +129,6 @@ export const ActionButton = styled('button')<{
     fill?: string;
 }>`
     display: flex;
-    width: 12px;
-    padding: 0 15px;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
@@ -141,9 +142,10 @@ export const ActionButton = styled('button')<{
     -webkit-tap-highlight-color: transparent;
 
     svg {
+        width: 20px;
+        height: 20px;
         flex: 0 0 auto;
         margin: auto;
-        height: 100%;
         overflow: visible;
         fill: #919eab;
     }
@@ -182,8 +184,7 @@ export const TextLink = styled(Link, {
     appearance: none;
     text-decoration: none;
     user-select: none;
-    color: ${({ theme, active }) =>
+    color: #4c6275;
-        active ? theme.affine.palette.primary : 'unset'};
 `;
 
 export const TreeItemContent = styled('div')`
@@ -195,7 +196,7 @@ export const TreeItemContent = styled('div')`
     align-items: center;
     justify-content: space-around;
     color: #4c6275;
-    padding-right: 0.5rem;
+    padding-right: 12px;
     overflow: hidden;
 
     &:hover {