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/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'),

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}
     >

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',

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 />
       )}

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"]': {

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>(
   (
     {

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',
 });

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': {

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: {