style(core): adjust app sidebar style (#12852)

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

## Summary by CodeRabbit

- **Style**
- Adjusted layout and spacing in sidebar and quick search components for
a more compact appearance.
- Reduced header and tab heights in the desktop app, increasing main
view space.
- Updated add-page button size, padding, and font for improved
usability.
  - Refined menu positioning in workspace selector for dense layouts.
  - Improved macOS window button positioning for better alignment.
  - Updated and restructured iOS app dependencies.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: fengmk2 <fengmk2@gmail.com>

packages/frontend/core/src/components/root-app-sidebar/index.css.ts

@@ -6,6 +6,7 @@ export const workspaceAndUserWrapper = style({
   justifyContent: 'space-between',
   gap: 8,
   width: 'calc(100% + 12px)',
+  height: 42,
   paddingRight: 6,
   alignSelf: 'center',
 });
@@ -13,8 +14,9 @@ export const quickSearchAndNewPage = style({
   display: 'flex',
   alignItems: 'center',
   gap: 8,
-  padding: '8px 0',
+  padding: '4px 0',
   marginLeft: -8,
+  marginRight: -6,
 });
 export const quickSearch = style({
   width: 0,

packages/frontend/core/src/components/workspace-selector/index.tsx

@@ -113,7 +113,7 @@ export const WorkspaceSelector = ({
       }
       contentOptions={{
         // hide trigger
-        sideOffset: -58,
+        sideOffset: dense ? -32 : -58,
         onInteractOutside: closeUserWorkspaceList,
         onEscapeKeyDown: closeUserWorkspaceList,
         ...menuContentOptions,

packages/frontend/core/src/desktop/components/app-container/styles.css.ts

@@ -59,14 +59,14 @@ export const desktopAppViewMain = style({
   display: 'flex',
   flexFlow: 'row',
   width: '100%',
-  height: 'calc(100% - 52px)',
+  height: 'calc(100% - 40px)',
   position: 'relative',
 });
 
 export const desktopTabsHeader = style({
   display: 'flex',
   flexFlow: 'row',
-  height: '52px',
+  height: '40px',
   zIndex: 1,
   width: '100%',
   overflow: 'hidden',

packages/frontend/core/src/desktop/pages/workspace/layouts/styles.css.ts

@@ -1,33 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const browserAppViewContainer = style({
-  display: 'flex',
-  flexFlow: 'row',
-  height: '100%',
-  width: '100%',
-  position: 'relative',
-});
-
-export const desktopAppViewContainer = style({
-  display: 'flex',
-  flexFlow: 'column',
-  height: '100%',
-  width: '100%',
-});
-
-export const desktopAppViewMain = style({
-  display: 'flex',
-  flexFlow: 'row',
-  width: '100%',
-  height: 'calc(100% - 52px)',
-  position: 'relative',
-});
-
-export const desktopTabsHeader = style({
-  display: 'flex',
-  flexFlow: 'row',
-  height: '52px',
-  zIndex: 1,
-  width: '100%',
-  overflow: 'hidden',
-});

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: 20,
-  height: 20,
-  borderRadius: 4,
+  width: 30,
+  height: 30,
+  borderRadius: 8,
   boxShadow: cssVar('buttonShadow'),
   borderWidth: 0,
   background: cssVarV2('button/siderbarPrimary/background'),
@@ -15,12 +15,12 @@ export const withAskRoot = style([
   root,
   {
     width: 'auto',
-    padding: 4,
+    padding: 7,
   },
 ]);
 
 export const withAskContent = style({
-  fontSize: 20,
+  fontSize: 16,
   display: 'flex',
   alignItems: 'center',
   gap: 4,

packages/frontend/core/src/modules/app-sidebar/views/quick-search-input/index.css.ts

@@ -3,9 +3,8 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const root = style({
   display: 'inline-flex',
-  background: cssVarV2('button/siderbarPrimary/background'),
   alignItems: 'center',
-  borderRadius: '8px',
+  borderRadius: '4px',
   fontSize: cssVar('fontSm'),
   width: '100%',
   height: '30px',

packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts

@@ -8,7 +8,7 @@ export const tabMaxWidth = createVar('200px');
 
 export const root = style({
   width: '100%',
-  height: '52px',
+  height: '40px',
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'row',