From dfe4c22a75e1f94288587f70482c6330a93fc824 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Tue, 17 Jun 2025 16:09:34 +0800
Subject: [PATCH] feat(core): linked doc visiblity setting and new sidebar
 layout (#12836)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a setting to control the visibility of linked document
structures in the sidebar, enabled by default.
- Introduced a "dense" mode for workspace selectors and cards, providing
a more compact display.

- **Improvements**
- Refined sidebar and navigation panel layouts with updated padding,
spacing, and avatar/button sizing for a cleaner and more consistent
appearance.
- Enhanced sidebar appearance settings UI, including new localization
for the linked doc visibility option.
- Updated color theming and spacing in sidebar menu items and quick
search input for better usability.
- Enabled collapsible behavior control for navigation panel tree nodes,
improving user interaction flexibility.

- **Style**
- Adjusted various component styles for improved compactness and
alignment across the sidebar and navigation panels.
- Reduced sizes and padding of buttons and icons for a tidier interface.
- Updated CSS variables and dynamic sizing for workspace cards to
support dense mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 packages/common/infra/src/atom/settings.ts    |  2 +
 .../components/root-app-sidebar/index.css.ts  |  3 +
 .../src/components/root-app-sidebar/index.tsx |  1 +
 .../root-app-sidebar/user-info/index.tsx      | 12 +++-
 .../components/workspace-selector/index.tsx   |  4 ++
 .../workspace-card/index.tsx                  | 22 +++++--
 .../workspace-card/styles.css.ts              | 20 +++++--
 .../navigation-panel/nodes/doc/index.tsx      | 50 +++++++++-------
 .../navigation-panel/tree/node.css.ts         | 29 +++++++++-
 .../components/navigation-panel/tree/node.tsx | 50 ++++++++++------
 .../general-setting/appearance/index.tsx      | 57 ++++++++++++-------
 .../views/add-page-button/index.css.ts        |  6 +-
 .../views/add-page-button/index.tsx           |  1 +
 .../modules/app-sidebar/views/index.css.ts    |  2 +-
 .../src/modules/app-sidebar/views/index.tsx   |  2 +-
 .../app-sidebar/views/menu-item/index.css.ts  | 14 ++---
 .../app-sidebar/views/menu-item/index.tsx     |  4 ++
 .../views/quick-search-input/index.css.ts     |  4 +-
 .../views/sidebar-containers/index.css.ts     |  2 +-
 .../workbench/view/route-container.css.ts     |  2 +-
 .../i18n/src/i18n-completenesses.json         |  2 +-
 packages/frontend/i18n/src/i18n.gen.ts        |  8 +++
 packages/frontend/i18n/src/resources/en.json  |  2 +
 23 files changed, 205 insertions(+), 94 deletions(-)

diff --git a/packages/common/infra/src/atom/settings.ts b/packages/common/infra/src/atom/settings.ts
index 5b649aa636..2e6d72753f 100644
--- a/packages/common/infra/src/atom/settings.ts
+++ b/packages/common/infra/src/atom/settings.ts
@@ -16,6 +16,7 @@ export type AppSetting = {
   autoCheckUpdate: boolean;
   autoDownloadUpdate: boolean;
   enableTelemetry: boolean;
+  showLinkedDocInSidebar: boolean;
 };
 export const windowFrameStyleOptions: AppSetting['windowFrameStyle'][] = [
   'frameless',
@@ -33,6 +34,7 @@ const appSettingBaseAtom = atomWithStorage<AppSetting>(
     autoCheckUpdate: true,
     autoDownloadUpdate: true,
     enableTelemetry: true,
+    showLinkedDocInSidebar: true,
   },
   undefined,
   {
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
index 34553008cb..267737286e 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.css.ts
@@ -5,6 +5,9 @@ export const workspaceAndUserWrapper = style({
   alignItems: 'center',
   justifyContent: 'space-between',
   gap: 8,
+  width: 'calc(100% + 12px)',
+  paddingRight: 6,
+  alignSelf: 'center',
 });
 export const quickSearchAndNewPage = style({
   display: 'flex',
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
index 6b9be76b5f..4217715107 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -167,6 +167,7 @@ export const RootAppSidebar = memo((): ReactElement => {
               showSyncStatus
               open={workspaceSelectorOpen}
               onOpenChange={onWorkspaceSelectorOpenChange}
+              dense
             />
           </div>
           <UserInfo />
diff --git a/packages/frontend/core/src/components/root-app-sidebar/user-info/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/user-info/index.tsx
index 9e52ccb23a..9671f803d1 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/user-info/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/user-info/index.tsx
@@ -38,8 +38,14 @@ const menuContentOptions: MenuProps['contentOptions'] = {
 const AuthorizedUserInfo = ({ account }: { account: AuthAccountInfo }) => {
   return (
     <Menu items={<OperationMenu />} contentOptions={menuContentOptions}>
-      <IconButton data-testid="sidebar-user-avatar" variant="plain" size="24">
-        <Avatar size={24} name={account.label} url={account.avatar} />
+      <IconButton
+        data-testid="sidebar-user-avatar"
+        variant="plain"
+        size="20"
+        style={{ padding: 0 }}
+        withoutHover
+      >
+        <Avatar size={20} name={account.label} url={account.avatar} />
       </IconButton>
     </Menu>
   );
@@ -57,7 +63,7 @@ const UnauthorizedUserInfo = () => {
       onClick={openSignInModal}
       data-testid="sidebar-user-avatar"
       variant="plain"
-      size="24"
+      size="20"
     >
       <UnknownUserIcon />
     </IconButton>
diff --git a/packages/frontend/core/src/components/workspace-selector/index.tsx b/packages/frontend/core/src/components/workspace-selector/index.tsx
index 4423581220..28fc558ba0 100644
--- a/packages/frontend/core/src/components/workspace-selector/index.tsx
+++ b/packages/frontend/core/src/components/workspace-selector/index.tsx
@@ -32,6 +32,8 @@ interface WorkspaceSelectorProps {
   disable?: boolean;
   menuContentOptions?: MenuProps['contentOptions'];
   className?: string;
+  /** if true, will hide cloud/local, and scale the avatar */
+  dense?: boolean;
 }
 
 export const WorkspaceSelector = ({
@@ -46,6 +48,7 @@ export const WorkspaceSelector = ({
   showSyncStatus,
   className,
   menuContentOptions,
+  dense,
 }: WorkspaceSelectorProps) => {
   const { workspacesService, globalContextService } = useServices({
     GlobalContextService,
@@ -133,6 +136,7 @@ export const WorkspaceSelector = ({
           hideCollaborationIcon={true}
           hideTeamWorkspaceIcon={true}
           data-testid="current-workspace-card"
+          dense={dense}
         />
       ) : (
         <span></span>
diff --git a/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx b/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
index ee27aa5c04..9fdd97715d 100644
--- a/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
+++ b/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
@@ -174,9 +174,11 @@ const usePauseAnimation = (timeToResume = 5000) => {
 const WorkspaceSyncInfo = ({
   workspaceMetadata,
   workspaceProfile,
+  dense,
 }: {
   workspaceMetadata: WorkspaceMetadata;
   workspaceProfile: WorkspaceProfileInfo;
+  dense?: boolean;
 }) => {
   const syncStatus = useSyncEngineSyncProgress(workspaceMetadata);
   const isCloud = workspaceMetadata.flavour !== 'local';
@@ -209,15 +211,21 @@ const WorkspaceSyncInfo = ({
   }
 
   return (
-    <div className={styles.workspaceInfoSlider} data-active={delayActive}>
+    <div
+      className={styles.workspaceInfoSlider}
+      data-active={delayActive}
+      data-dense={dense}
+    >
       <div className={styles.workspaceInfoSlide}>
         <div className={styles.workspaceInfo} data-type="normal">
           <div className={styles.workspaceName} data-testid="workspace-name">
             {workspaceProfile.name}
           </div>
-          <div className={styles.workspaceStatus}>
-            {isCloud ? <CloudWorkspaceStatus /> : <LocalWorkspaceStatus />}
-          </div>
+          {!dense ? (
+            <div className={styles.workspaceStatus}>
+              {isCloud ? <CloudWorkspaceStatus /> : <LocalWorkspaceStatus />}
+            </div>
+          ) : null}
         </div>
 
         {/* when syncing/offline/... */}
@@ -250,6 +258,7 @@ export const WorkspaceCard = forwardRef<
     hideTeamWorkspaceIcon?: boolean;
     active?: boolean;
     infoClassName?: string;
+    dense?: boolean;
     onClickOpenSettings?: (workspaceMetadata: WorkspaceMetadata) => void;
     onClickEnableCloud?: (workspaceMetadata: WorkspaceMetadata) => void;
   }
@@ -259,7 +268,6 @@ export const WorkspaceCard = forwardRef<
       workspaceMetadata,
       showSyncStatus,
       showArrowDownIcon,
-      avatarSize = 32,
       onClickOpenSettings,
       onClickEnableCloud,
       className,
@@ -268,6 +276,8 @@ export const WorkspaceCard = forwardRef<
       hideCollaborationIcon,
       hideTeamWorkspaceIcon,
       active,
+      dense,
+      avatarSize = dense ? 20 : 32,
       ...props
     },
     ref
@@ -301,6 +311,7 @@ export const WorkspaceCard = forwardRef<
         <div className={clsx(styles.infoContainer, infoClassName)}>
           {information ? (
             <WorkspaceAvatar
+              className={styles.avatar}
               meta={workspaceMetadata}
               rounded={3}
               data-testid="workspace-avatar"
@@ -317,6 +328,7 @@ export const WorkspaceCard = forwardRef<
                 <WorkspaceSyncInfo
                   workspaceProfile={information}
                   workspaceMetadata={workspaceMetadata}
+                  dense={dense}
                 />
               ) : (
                 <span className={styles.workspaceName}>{information.name}</span>
diff --git a/packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts b/packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts
index 1817f24110..f9f7f35450 100644
--- a/packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts
+++ b/packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts
@@ -9,11 +9,10 @@ const wsSlideAnim = {
 };
 
 export const container = style({
-  height: '50px',
   display: 'flex',
   alignItems: 'center',
   gap: 8,
-  padding: '0 6px',
+  padding: '4px 6px',
   borderRadius: 4,
   outline: 'none',
   width: '100%',
@@ -48,8 +47,16 @@ export const disable = style({
 });
 
 export const workspaceInfoSlider = style({
-  height: 42,
+  vars: {
+    '--h': '42px',
+  },
+  height: 'var(--h)',
   overflow: 'hidden',
+  selectors: {
+    '&[data-dense="true"]': {
+      vars: { '--h': '22px' },
+    },
+  },
 });
 export const workspaceInfoSlide = style({
   display: 'flex',
@@ -59,15 +66,18 @@ export const workspaceInfoSlide = style({
   transition: `transform ${wsSlideAnim.duration} ${wsSlideAnim.ease} ${wsSlideAnim.delay}`,
   selectors: {
     [`.${workspaceInfoSlider}[data-active="true"] &`]: {
-      transform: 'translateY(-42px)',
+      transform: 'translateY(calc(var(--h) * -1))',
     },
   },
 });
+export const avatar = style({
+  border: `0.5px solid ${cssVarV2.layer.insideBorder.border}`,
+});
 export const workspaceInfo = style({
   width: '100%',
   flexGrow: 1,
   overflow: 'hidden',
-  height: 42,
+  height: 'var(--h)',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
diff --git a/packages/frontend/core/src/desktop/components/navigation-panel/nodes/doc/index.tsx b/packages/frontend/core/src/desktop/components/navigation-panel/nodes/doc/index.tsx
index 7d8cbf815c..09929cfb93 100644
--- a/packages/frontend/core/src/desktop/components/navigation-panel/nodes/doc/index.tsx
+++ b/packages/frontend/core/src/desktop/components/navigation-panel/nodes/doc/index.tsx
@@ -6,6 +6,7 @@ import {
   Tooltip,
 } from '@affine/component';
 import { Guard } from '@affine/core/components/guard';
+import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { DocsService } from '@affine/core/modules/doc';
@@ -66,10 +67,12 @@ export const NavigationPanelDocNode = ({
     FeatureFlagService,
     GuardService,
   });
+  const { appSettings } = useAppSettingHelper();
 
   const active =
     useLiveData(globalContextService.globalContext.docId.$) === docId;
   const [collapsed, setCollapsed] = useState(true);
+  const isCollapsed = appSettings.showLinkedDocInSidebar ? collapsed : true;
 
   const docRecord = useLiveData(docsService.list.doc$(docId));
   const DocIcon = useLiveData(
@@ -94,10 +97,10 @@ export const NavigationPanelDocNode = ({
     useMemo(
       () =>
         LiveData.from(
-          !collapsed ? docsSearchService.watchRefsFrom(docId) : NEVER,
+          !isCollapsed ? docsSearchService.watchRefsFrom(docId) : NEVER,
           null
         ),
-      [docsSearchService, docId, collapsed]
+      [docsSearchService, docId, isCollapsed]
     )
   );
   const searching = children === null;
@@ -247,8 +250,9 @@ export const NavigationPanelDocNode = ({
       onDrop={handleDropOnDoc}
       renameable
       extractEmojiAsIcon={enableEmojiIcon}
-      collapsed={collapsed}
+      collapsed={isCollapsed}
       setCollapsed={setCollapsed}
+      collapsible={appSettings.showLinkedDocInSidebar}
       canDrop={handleCanDrop}
       to={`/${docId}`}
       onClick={() => {
@@ -257,7 +261,7 @@ export const NavigationPanelDocNode = ({
       active={active}
       postfix={
         referencesLoading &&
-        !collapsed && (
+        !isCollapsed && (
           <Tooltip
             content={t['com.affine.rootAppSidebar.docs.references-loading']()}
           >
@@ -285,24 +289,26 @@ export const NavigationPanelDocNode = ({
       dropEffect={handleDropEffectOnDoc}
       data-testid={`navigation-panel-doc-${docId}`}
     >
-      <Guard docId={docId} permission="Doc_Read">
-        {canRead =>
-          canRead
-            ? children?.map((child, index) => (
-                <NavigationPanelDocNode
-                  key={`${child.docId}-${index}`}
-                  docId={child.docId}
-                  reorderable={false}
-                  location={{
-                    at: 'navigation-panel:doc:linked-docs',
-                    docId,
-                  }}
-                  isLinked
-                />
-              ))
-            : null
-        }
-      </Guard>
+      {appSettings.showLinkedDocInSidebar ? (
+        <Guard docId={docId} permission="Doc_Read">
+          {canRead =>
+            canRead
+              ? children?.map((child, index) => (
+                  <NavigationPanelDocNode
+                    key={`${child.docId}-${index}`}
+                    docId={child.docId}
+                    reorderable={false}
+                    location={{
+                      at: 'navigation-panel:doc:linked-docs',
+                      docId,
+                    }}
+                    isLinked
+                  />
+                ))
+              : null
+          }
+        </Guard>
+      ) : null}
     </NavigationPanelTreeNode>
   );
 };
diff --git a/packages/frontend/core/src/desktop/components/navigation-panel/tree/node.css.ts b/packages/frontend/core/src/desktop/components/navigation-panel/tree/node.css.ts
index 1a7e536db8..f96d1d1587 100644
--- a/packages/frontend/core/src/desktop/components/navigation-panel/tree/node.css.ts
+++ b/packages/frontend/core/src/desktop/components/navigation-panel/tree/node.css.ts
@@ -15,7 +15,7 @@ export const itemRoot = style({
   minHeight: '30px',
   userSelect: 'none',
   cursor: 'pointer',
-  padding: '0 4px',
+  padding: '0 6px',
   fontSize: cssVar('fontSm'),
   position: 'relative',
   marginTop: '0px',
@@ -44,6 +44,14 @@ export const itemMain = style({
   position: 'relative',
   gap: 12,
 });
+export const toggleIcon = style({
+  width: 20,
+  height: 20,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginRight: 12,
+});
 export const itemRenameAnchor = style({
   pointerEvents: 'none',
   position: 'absolute',
@@ -84,16 +92,26 @@ export const iconContainer = style({
   height: 20,
   color: cssVarV2('icon/primary'),
   fontSize: 20,
+  position: 'absolute',
+  selectors: {
+    [`${itemRoot}[data-collapsible="true"]:hover &`]: {
+      opacity: 0,
+      pointerEvents: 'none',
+    },
+  },
 });
 export const collapsedIconContainer = style({
-  width: '16px',
-  height: '16px',
+  width: '20px',
+  height: '20px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '2px',
   transition: 'transform 0.2s',
   color: cssVarV2('icon/primary'),
+  position: 'absolute',
+  opacity: 0,
+  pointerEvents: 'none',
   selectors: {
     '&[data-collapsed="true"]': {
       transform: 'rotate(-90deg)',
@@ -105,10 +123,15 @@ export const collapsedIconContainer = style({
     '&:hover': {
       background: cssVar('hoverColor'),
     },
+    [`${itemRoot}[data-collapsible="true"]:hover &`]: {
+      opacity: 1,
+      pointerEvents: 'initial',
+    },
   },
 });
 export const collapsedIcon = style({
   transition: 'transform 0.2s ease-in-out',
+  fontSize: 16,
   selectors: {
     '&[data-collapsed="true"]': {
       transform: 'rotate(-90deg)',
diff --git a/packages/frontend/core/src/desktop/components/navigation-panel/tree/node.tsx b/packages/frontend/core/src/desktop/components/navigation-panel/tree/node.tsx
index 2fde7ca0fe..26c084c2df 100644
--- a/packages/frontend/core/src/desktop/components/navigation-panel/tree/node.tsx
+++ b/packages/frontend/core/src/desktop/components/navigation-panel/tree/node.tsx
@@ -66,6 +66,7 @@ export interface BaseNavigationPanelTreeNodeProps {
   extractEmojiAsIcon?: boolean;
   collapsed: boolean;
   setCollapsed: (collapsed: boolean) => void;
+  collapsible?: boolean;
   disabled?: boolean;
   onClick?: () => void;
   to?: To;
@@ -140,6 +141,7 @@ export const NavigationPanelTreeNode = ({
   collapsed,
   extractEmojiAsIcon,
   setCollapsed,
+  collapsible = true,
   canDrop,
   reorderable = true,
   operations = [],
@@ -226,7 +228,7 @@ export const NavigationPanelTreeNode = ({
           return;
         }
         onDrop?.(data);
-        if (data.treeInstruction?.type === 'make-child') {
+        if (data.treeInstruction?.type === 'make-child' && collapsible) {
           setCollapsed(false);
         }
       },
@@ -242,6 +244,7 @@ export const NavigationPanelTreeNode = ({
       handleCanDrop,
       cid,
       onDrop,
+      collapsible,
       setCollapsed,
     ]
   );
@@ -253,6 +256,7 @@ export const NavigationPanelTreeNode = ({
       treeInstruction?.type === 'make-child' &&
       !isSelfDraggedOver
     ) {
+      if (!collapsible) return;
       // auto expand when dragged over
       const timeout = setTimeout(() => {
         setCollapsed(false);
@@ -260,7 +264,13 @@ export const NavigationPanelTreeNode = ({
       return () => clearTimeout(timeout);
     }
     return;
-  }, [draggedOver, isSelfDraggedOver, setCollapsed, treeInstruction?.type]);
+  }, [
+    collapsible,
+    draggedOver,
+    isSelfDraggedOver,
+    setCollapsed,
+    treeInstruction?.type,
+  ]);
 
   useEffect(() => {
     if (rootRef.current) {
@@ -346,9 +356,10 @@ export const NavigationPanelTreeNode = ({
     (e: React.MouseEvent) => {
       e.stopPropagation();
       e.preventDefault(); // for links
+      if (!collapsible) return;
       setCollapsed(!collapsed);
     },
-    [collapsed, setCollapsed]
+    [collapsed, collapsible, setCollapsed]
   );
 
   const handleRename = useCallback(
@@ -365,11 +376,11 @@ export const NavigationPanelTreeNode = ({
       }
       if (!clickForCollapse) {
         onClick?.();
-      } else {
+      } else if (collapsible) {
         setCollapsed(!collapsed);
       }
     },
-    [clickForCollapse, collapsed, onClick, setCollapsed]
+    [clickForCollapse, collapsed, collapsible, onClick, setCollapsed]
   );
 
   const content = (
@@ -378,20 +389,20 @@ export const NavigationPanelTreeNode = ({
       className={styles.itemRoot}
       data-active={active}
       data-disabled={disabled}
+      data-collapsible={collapsible}
     >
-      <div
-        data-disabled={disabled}
-        onClick={handleCollapsedChange}
-        data-testid="navigation-panel-collapsed-button"
-        className={styles.collapsedIconContainer}
-      >
-        <ArrowDownSmallIcon
-          className={styles.collapsedIcon}
-          data-collapsed={collapsed !== false}
-        />
-      </div>
-
-      <div className={styles.itemMain}>
+      <div className={styles.toggleIcon}>
+        <div
+          data-disabled={disabled}
+          onClick={handleCollapsedChange}
+          data-testid="navigation-panel-collapsed-button"
+          className={styles.collapsedIconContainer}
+        >
+          <ArrowDownSmallIcon
+            className={styles.collapsedIcon}
+            data-collapsed={collapsed !== false}
+          />
+        </div>
         <div className={styles.iconContainer}>
           {emoji ??
             (Icon && (
@@ -402,6 +413,9 @@ export const NavigationPanelTreeNode = ({
               />
             ))}
         </div>
+      </div>
+
+      <div className={styles.itemMain}>
         <div className={styles.itemContent}>{name}</div>
         {postfix}
         <div
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/index.tsx
index cc0b7fa59c..cb653cb428 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/index.tsx
@@ -139,10 +139,10 @@ export const AppearanceSettings = () => {
         </SettingWrapper>
       ) : null}
 
-      {BUILD_CONFIG.isElectron ? (
-        <SettingWrapper
-          title={t['com.affine.appearanceSettings.sidebar.title']()}
-        >
+      <SettingWrapper
+        title={t['com.affine.appearanceSettings.sidebar.title']()}
+      >
+        {BUILD_CONFIG.isElectron ? (
           <SettingRow
             name={t['com.affine.appearanceSettings.noisyBackground.title']()}
             desc={t[
@@ -156,23 +156,38 @@ export const AppearanceSettings = () => {
               }
             />
           </SettingRow>
-          {environment.isMacOs && (
-            <SettingRow
-              name={t['com.affine.appearanceSettings.translucentUI.title']()}
-              desc={t[
-                'com.affine.appearanceSettings.translucentUI.description'
-              ]()}
-            >
-              <Switch
-                checked={appSettings.enableBlurBackground}
-                onChange={checked =>
-                  updateSettings('enableBlurBackground', checked)
-                }
-              />
-            </SettingRow>
-          )}
-        </SettingWrapper>
-      ) : null}
+        ) : null}
+        {BUILD_CONFIG.isElectron && environment.isMacOs && (
+          <SettingRow
+            name={t['com.affine.appearanceSettings.translucentUI.title']()}
+            desc={t[
+              'com.affine.appearanceSettings.translucentUI.description'
+            ]()}
+          >
+            <Switch
+              checked={appSettings.enableBlurBackground}
+              onChange={checked =>
+                updateSettings('enableBlurBackground', checked)
+              }
+            />
+          </SettingRow>
+        )}
+        <SettingRow
+          name={t[
+            'com.affine.appearanceSettings.showLinkedDocInSidebar.title'
+          ]()}
+          desc={t[
+            'com.affine.appearanceSettings.showLinkedDocInSidebar.description'
+          ]()}
+        >
+          <Switch
+            checked={appSettings.showLinkedDocInSidebar}
+            onChange={checked =>
+              updateSettings('showLinkedDocInSidebar', checked)
+            }
+          />
+        </SettingRow>
+      </SettingWrapper>
 
       {BUILD_CONFIG.isElectron ? <MenubarSetting /> : null}
     </>
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts
index 1e1195ae0b..3cfd89df6d 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.css.ts
@@ -3,9 +3,9 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const root = style({
-  width: 28,
-  height: 28,
-  borderRadius: 8,
+  width: 20,
+  height: 20,
+  borderRadius: 4,
   boxShadow: cssVar('buttonShadow'),
   borderWidth: 0,
   background: cssVarV2('button/siderbarPrimary/background'),
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.tsx b/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.tsx
index 94c1c3a938..08b2202b3d 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.tsx
@@ -184,6 +184,7 @@ function AddPageWithoutAsk({ className, style }: AddPageButtonProps) {
       data-testid="sidebar-new-page-button"
       style={style}
       className={clsx([styles.root, className])}
+      size={16}
       onClick={onClickNewPage}
       onAuxClick={onClickNewPage}
     >
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/index.css.ts
index dc33e55268..3f0ceec287 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/index.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/index.css.ts
@@ -67,7 +67,7 @@ export const navStyle = style({
 export const navHeaderStyle = style({
   flex: '0 0 auto',
   height: '52px',
-  padding: '0px 16px',
+  padding: '0px 8px',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/index.tsx b/packages/frontend/core/src/modules/app-sidebar/views/index.tsx
index 98e78887c3..7b2ccff8cc 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/index.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/index.tsx
@@ -223,7 +223,7 @@ export function FallbackHeaderWithWorkspaceNavigator() {
   return (
     <div className={styles.fallbackHeader}>
       {currentWorkspace && navigate ? (
-        <WorkspaceNavigator showSyncStatus showEnableCloudButton />
+        <WorkspaceNavigator showSyncStatus showEnableCloudButton dense />
       ) : (
         <FallbackHeaderSkeleton />
       )}
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.css.ts
index 03eeb7785d..1d967fbbec 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.css.ts
@@ -14,20 +14,20 @@ export const root = style({
   minHeight: '30px',
   userSelect: 'none',
   cursor: 'pointer',
-  padding: '0 2px 0 12px',
+  padding: '0 2px 0 0',
   fontSize: cssVar('fontSm'),
   marginTop: '4px',
   position: 'relative',
   selectors: {
     '&:hover': {
-      background: cssVar('hoverColor'),
+      background: cssVarV2.layer.background.hoverOverlay,
     },
     '&[data-active="true"]': {
-      background: cssVar('hoverColor'),
+      background: cssVarV2.layer.background.hoverOverlay,
     },
     '&[data-disabled="true"]': {
       cursor: 'default',
-      color: cssVar('textSecondaryColor'),
+      color: cssVarV2.text.disable,
       pointerEvents: 'none',
     },
     // this is not visible in dark mode
@@ -43,7 +43,7 @@ export const root = style({
     '&[data-collapsible="false"]:is([data-active="true"], :hover)': {
       width: 'calc(100% + 8px + 8px)',
       transform: 'translateX(-8px)',
-      paddingLeft: '20px',
+      paddingLeft: '8px',
       paddingRight: '10px',
     },
     [`${linkItemRoot}:first-of-type &`]: {
@@ -93,7 +93,7 @@ export const collapsedIconContainer = style({
       pointerEvents: 'none',
     },
     '&:hover': {
-      background: cssVar('hoverColor'),
+      background: cssVarV2.layer.background.hoverOverlay,
     },
   },
 });
@@ -101,7 +101,7 @@ export const iconsContainer = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-start',
-  width: '28px',
+  width: '32px',
   flexShrink: 0,
   selectors: {
     '&[data-collapsible="true"]': {
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx b/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx
index ed8e44721d..5dde89e934 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/menu-item/index.tsx
@@ -27,6 +27,10 @@ const stopPropagation: React.MouseEventHandler = e => {
   e.stopPropagation();
 };
 
+/**
+ * This component is not a generic component.
+ * It is used for the app sidebar.
+ */
 export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
   (
     {
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts
index eb46f4c983..24bdc75f93 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts
@@ -11,7 +11,7 @@ export const root = style({
   height: '30px',
   userSelect: 'none',
   cursor: 'pointer',
-  padding: '0 12px 0 20px',
+  padding: '0 12px 0 8px',
   position: 'relative',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
@@ -20,7 +20,7 @@ export const root = style({
   },
 });
 export const icon = style({
-  marginRight: '8px',
+  marginRight: '12px',
   color: cssVarV2('icon/primary'),
   fontSize: '20px',
 });
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/sidebar-containers/index.css.ts b/packages/frontend/core/src/modules/app-sidebar/views/sidebar-containers/index.css.ts
index d0a6f90a7a..35fb740bcb 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/sidebar-containers/index.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/sidebar-containers/index.css.ts
@@ -1,7 +1,7 @@
 import { cssVar } from '@toeverything/theme';
 import { globalStyle, style } from '@vanilla-extract/css';
 export const baseContainer = style({
-  padding: '4px 16px',
+  padding: '4px 14px',
   display: 'flex',
   flexFlow: 'column nowrap',
   ':empty': {
diff --git a/packages/frontend/core/src/modules/workbench/view/route-container.css.ts b/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
index da0e3398d6..d85dd2ae16 100644
--- a/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
+++ b/packages/frontend/core/src/modules/workbench/view/route-container.css.ts
@@ -19,7 +19,7 @@ export const header = style({
   alignItems: 'center',
   flexShrink: 0,
   background: cssVar('backgroundPrimaryColor'),
-  padding: '0 16px',
+  padding: '0 16px 0px 8px',
   contain: 'strict',
   '@media': {
     print: {
diff --git a/packages/frontend/i18n/src/i18n-completenesses.json b/packages/frontend/i18n/src/i18n-completenesses.json
index ca42b9a0d2..88fc0ffc18 100644
--- a/packages/frontend/i18n/src/i18n-completenesses.json
+++ b/packages/frontend/i18n/src/i18n-completenesses.json
@@ -14,7 +14,7 @@
   "it-IT": 100,
   "it": 1,
   "ja": 100,
-  "ko": 54,
+  "ko": 53,
   "pl": 100,
   "pt-BR": 100,
   "ru": 100,
diff --git a/packages/frontend/i18n/src/i18n.gen.ts b/packages/frontend/i18n/src/i18n.gen.ts
index 3f60fb43c1..71903f2df5 100644
--- a/packages/frontend/i18n/src/i18n.gen.ts
+++ b/packages/frontend/i18n/src/i18n.gen.ts
@@ -1003,6 +1003,14 @@ export function useAFFiNEI18N(): {
       * `Translucent UI on the sidebar`
       */
     ["com.affine.appearanceSettings.translucentUI.title"](): string;
+    /**
+      * `Show linked doc in sidebar`
+      */
+    ["com.affine.appearanceSettings.showLinkedDocInSidebar.title"](): string;
+    /**
+      * `Control whether to show the structure of linked docs in the sidebar.`
+      */
+    ["com.affine.appearanceSettings.showLinkedDocInSidebar.description"](): string;
     /**
       * `Your current email is {{email}}. We'll send a temporary verification link to this email.`
       */
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 1c47ad54ff..8b558dfe37 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -240,6 +240,8 @@
   "com.affine.appearanceSettings.title": "Appearance settings",
   "com.affine.appearanceSettings.translucentUI.description": "Use transparency effect on the sidebar.",
   "com.affine.appearanceSettings.translucentUI.title": "Translucent UI on the sidebar",
+  "com.affine.appearanceSettings.showLinkedDocInSidebar.title": "Show linked doc in sidebar",
+  "com.affine.appearanceSettings.showLinkedDocInSidebar.description": "Control whether to show the structure of linked docs in the sidebar.",
   "com.affine.auth.change.email.message": "Your current email is {{email}}. We'll send a temporary verification link to this email.",
   "com.affine.auth.change.email.page.subtitle": "Please enter your new email address below. We will send a verification link to this email address to complete the process.",
   "com.affine.auth.change.email.page.success.subtitle": "Congratulations! You have successfully updated the email address associated with your AFFiNE Cloud account.",