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
-                        style={{
-                            width: '20px',
-                            height: '20px',
-                            color: '#98ACBD',
-                            cursor: 'pointer',
-                        }}
+                    <IconButton
+                        size="small"
+                        hoverColor="#E0E6EB"
                         onClick={create_page}
-                    />
+                    >
+                        <AddIcon />
+                    </IconButton>
                 )}
             </Box>
             {children ? (

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

@@ -1,13 +1,16 @@
-import {
-    styled,
-    MuiOutlinedInput as OutlinedInput,
-} from '@toeverything/components/ui';
+import { styled, Input } 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(
-        (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-            if (e.key === 'Enter') {
-                e.stopPropagation();
-                e.preventDefault();
-                setInRename(false);
-            }
-        },
-        []
-    );
+    const handleKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            e.stopPropagation();
+            e.preventDefault();
+            setInRename(false);
+        }
+    }, []);
     const handleChange = useCallback(
-        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            services.api.userConfig.setWorkspaceName(
+        async (e: ChangeEvent<HTMLInputElement>) => {
+            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}