opti: 1.page tree; 2. icon invert; 3.topbar;

apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx

@@ -1,43 +1,73 @@
 import { useState } from 'react';
-import { MuiDivider as Divider, styled } from '@toeverything/components/ui';
+import { styled } from '@toeverything/components/ui';
 import type { ValueOf } from '@toeverything/utils';
 
-const StyledTabs = styled('div')({
+const StyledTabs = styled('div')(({ theme }) => {
-    width: '100%',
-    height: '12px',
-    marginTop: '12px',
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-});
-
-const StyledDivider = styled(Divider, {
-    shouldForwardProp: (prop: string) => !['isActive'].includes(prop),
-})<{ isActive?: boolean }>(({ isActive }) => {
     return {
-        flex: 1,
+        width: '100%',
-        backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB',
+        height: '30px',
-        borderWidth: '2px',
+        marginTop: '12px',
+        display: 'flex',
+        fontSize: '12px',
+        fontWeight: '600',
+        color: theme.affine.palette.primary,
     };
 });
 
+const StyledTabTitle = styled('div', {
+    shouldForwardProp: (prop: string) => !['isActive'].includes(prop),
+})<{ isActive?: boolean; isDisabled?: boolean }>`
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    line-height: 18px;
+    padding-top: 4px;
+    border-top: 2px solid #ecf1fb;
+    position: relative;
+
+    &::after {
+        content: '';
+        width: 0;
+        height: 2px;
+        background-color: ${({ isActive, theme }) =>
+            isActive ? theme.affine.palette.primary : ''};
+        position: absolute;
+        left: 100%;
+        top: -2px;
+        transition: all 0.2s;
+    }
+
+    &.active {
+        &::after {
+            width: 100%;
+            left: 0;
+            transition-delay: 0.1s;
+        }
+        & ~ div::after {
+            left: 0;
+        }
+    }
+`;
+
 const TAB_TITLE = {
     PAGES: 'pages',
     GALLERY: 'gallery',
     TOC: 'toc',
 } as const;
 
-const TabMap = new Map<TabKey, TabValue>([
+const TabMap = new Map<TabKey, { value: TabValue; disabled?: boolean }>([
-    ['PAGES', 'pages'],
+    ['PAGES', { value: 'pages' }],
-    ['GALLERY', 'gallery'],
+    ['GALLERY', { value: 'gallery', disabled: true }],
-    ['TOC', 'toc'],
+    ['TOC', { value: 'toc' }],
 ]);
 
 type TabKey = keyof typeof TAB_TITLE;
 type TabValue = ValueOf<typeof TAB_TITLE>;
 
 const Tabs = () => {
-    const [activeTab, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
+    const [activeValue, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
 
     const onClick = (v: TabValue) => {
         setActiveTab(v);
@@ -45,13 +75,19 @@ const Tabs = () => {
 
     return (
         <StyledTabs>
-            {[...TabMap.entries()].map(([k, v]) => {
+            {[...TabMap.entries()].map(([k, { value, disabled = false }]) => {
+                const isActive = activeValue === value;
+
                 return (
-                    <StyledDivider
+                    <StyledTabTitle
-                        key={v}
+                        key={value}
-                        isActive={v === activeTab}
+                        className={isActive ? 'active' : ''}
-                        onClick={() => onClick(v)}
+                        isActive={isActive}
-                    />
+                        isDisabled={disabled}
+                        onClick={() => onClick(value)}
+                    >
+                        {k}
+                    </StyledTabTitle>
                 );
             })}
         </StyledTabs>

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

@@ -33,9 +33,9 @@ export const LayoutHeader = () => {
 
                         <IconButton onClick={toggleInfoSidebar} size="large">
                             {showSettingsSidebar ? (
-                                <SideBarViewIcon />
-                            ) : (
                                 <SideBarViewCloseIcon />
+                            ) : (
+                                <SideBarViewIcon />
                             )}
                         </IconButton>
                     </StyledHelper>

libs/components/layout/src/settings-sidebar/ContainerTabs/ContainerTabs.tsx

@@ -100,10 +100,10 @@ export const ContainerTabs = () => {
 
 const StyledTabsTitlesContainer = styled('div')(({ theme }) => {
     return {
+        height: '60px',
         display: 'flex',
+        alignItems: 'center',
         justifyContent: 'space-between',
-        marginTop: 24,
-        marginBottom: 24,
         marginLeft: theme.affine.spacing.smSpacing,
         marginRight: theme.affine.spacing.smSpacing,
     };

libs/components/layout/src/settings-sidebar/Settings/SettingsPanel.tsx

@@ -16,7 +16,6 @@ const StyledContainerForSettingsPanel = styled('div')(({ theme }) => {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',
-        paddingTop: 44,
         paddingBottom: 44,
         height: '100%',
     };

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

@@ -15,6 +15,7 @@ import styles from './tree-item.module.scss';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 
 import MoreActions from './MoreActions';
+import { useTheme } from '@toeverything/components/ui';
 export type TreeItemProps = {
     /** The main text to display on this line */
     value: string;
@@ -61,11 +62,13 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         },
         ref
     ) => {
-        const { workspace_id } = useParams();
+        const { workspace_id, page_id } = useParams();
         const BooleanPageTreeItemMoreActions = useFlag(
             'BooleanPageTreeItemMoreActions',
             true
         );
+        const theme = useTheme();
+
         return (
             <li
                 ref={wrapperRef}
@@ -106,6 +109,11 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                             className={styles['Text']}
                             {...handleProps}
                             to={`/${workspace_id}/${pageId}`}
+                            style={{
+                                ...(pageId === page_id && {
+                                    color: theme.affine.palette.primary,
+                                }),
+                            }}
                         >
                             {value}
                         </Link>

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

@@ -2,7 +2,8 @@
     box-sizing: border-box;
     padding-left: var(--spacing);
     list-style: none;
-    padding: 6px 0;
+    padding-top: 6px;
+    padding-bottom: 6px;
     font-size: 14px;
     &:hover {
         background: #f5f7f8;