feat(core): linked doc visiblity setting and new sidebar layout (#12836)

## 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.
2026-02-14 05:14:54 +00:00 · 2025-06-17 16:09:34 +08:00
parent ba718b955a
commit dfe4c22a75
23 changed files with 205 additions and 94 deletions
--- 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',
--- 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 />
--- 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>
--- 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>
--- 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>
--- 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',
--- 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>
  );
 };
--- 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)',
--- 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
--- 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}
    </>
--- 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'),
--- 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}
    >
--- 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',
--- 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 />
      )}
--- 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"]': {
--- 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>(
  (
    {
--- 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',
 });
--- 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': {
--- 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: {