feat(core): move sidebar new page button beside quick-search (#7578)

close AF-1078

packages/frontend/core/src/components/app-sidebar/add-page-button/index.css.ts

@@ -1,30 +1,16 @@
-import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
+
 export const root = style({
-  display: 'inline-flex',
+  width: 32,
-  background: cssVar('white30'),
+  height: 32,
-  alignItems: 'center',
+  borderRadius: 8,
-  borderRadius: '8px',
+  boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.15)',
-  border: `1px solid ${cssVar('black10')}`,
+  border: `1px solid ${cssVarV2('layer/border')}`,
-  fontSize: cssVar('fontSm'),
+  background: cssVarV2('button/siderbarPrimary/background'),
-  width: '100%',
-  position: 'relative',
-  height: '52px',
-  userSelect: 'none',
-  cursor: 'pointer',
-  padding: '0 24px',
-  transition: 'background 0.2s ease',
-  selectors: {
-    '&:active': {
-      background: cssVar('white50'),
-    },
-  },
 });
 export const icon = style({
-  marginRight: '18px',
+  color: cssVarV2('icon/primary'),
-  color: cssVar('iconColor'),
+  fontSize: 20,
-  fontSize: '24px',
+  display: 'block',
-});
-export const spacer = style({
-  flex: 1,
 });

packages/frontend/core/src/components/app-sidebar/add-page-button/index.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react';
-
-import { AddPageButton } from './index';
-
-export default {
-  title: 'Components/AppSidebar/AddPageButton',
-  component: AddPageButton,
-} satisfies Meta;
-
-export const Default: StoryFn = () => {
-  return (
-    <main style={{ width: '240px' }}>
-      <AddPageButton onClick={() => alert('opened')} />
-    </main>
-  );
-};

packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx

@@ -1,9 +1,9 @@
+import { Button, Tooltip } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import type React from 'react';
 
-import { Spotlight } from '../spolight';
 import * as styles from './index.css';
 
 interface AddPageButtonProps {
@@ -20,14 +20,15 @@ export function AddPageButton({
   const t = useI18n();
 
   return (
-    <button
+    <Tooltip content={t['New Page']()} side="bottom">
-      data-testid="sidebar-new-page-button"
+      <Button
-      style={style}
+        data-testid="sidebar-new-page-button"
-      className={clsx([styles.root, className])}
+        style={style}
-      onClick={onClick}
+        className={clsx([styles.root, className])}
-    >
+        onClick={onClick}
-      <PlusIcon className={styles.icon} /> {t['New Page']()}
+      >
-      <Spotlight />
+        <PlusIcon className={styles.icon} />
-    </button>
+      </Button>
+    </Tooltip>
   );
 }

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

@@ -1,11 +1,12 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const root = style({
   display: 'inline-flex',
-  background: cssVar('white10'),
+  background: cssVarV2('button/siderbarPrimary/background'),
   alignItems: 'center',
   borderRadius: '8px',
-  border: `1px solid ${cssVar('black10')}`,
+  border: `1px solid ${cssVarV2('layer/border')}`,
   fontSize: cssVar('fontSm'),
   width: '100%',
   height: '36px',
@@ -14,16 +15,17 @@ export const root = style({
   padding: '0 12px',
   margin: '20px 0',
   position: 'relative',
+  whiteSpace: 'nowrap',
 });
 export const icon = style({
   marginRight: '8px',
-  color: cssVar('iconColor'),
+  color: cssVarV2('icon/primary'),
   fontSize: '20px',
 });
 export const spacer = style({
   flex: 1,
 });
 export const shortcutHint = style({
-  color: cssVar('black30'),
+  color: cssVarV2('text/tertiary'),
   fontSize: cssVar('fontBase'),
 });

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

@@ -9,6 +9,15 @@ export const workspaceAndUserWrapper = style({
   justifyContent: 'space-between',
   gap: 8,
 });
+export const quickSearchAndNewPage = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+});
+export const quickSearch = style({
+  width: 0,
+  flex: 1,
+});
 
 export const workspaceWrapper = style({
   width: 0,

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

@@ -37,7 +37,12 @@ import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/ad
 import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { WorkspaceSelector } from '../workspace-selector';
 import ImportPage from './import-page';
-import { workspaceAndUserWrapper, workspaceWrapper } from './index.css';
+import {
+  quickSearch,
+  quickSearchAndNewPage,
+  workspaceAndUserWrapper,
+  workspaceWrapper,
+} from './index.css';
 import { AppSidebarJournalButton } from './journal-button';
 import { UpdaterButton } from './updater-button';
 import { UserInfo } from './user-info';
@@ -176,10 +181,14 @@ export const RootAppSidebar = memo(
             </div>
             <UserInfo />
           </div>
-          <QuickSearchInput
+          <div className={quickSearchAndNewPage}>
-            data-testid="slider-bar-quick-search-button"
+            <QuickSearchInput
-            onClick={onOpenQuickSearchModal}
+              className={quickSearch}
-          />
+              data-testid="slider-bar-quick-search-button"
+              onClick={onOpenQuickSearchModal}
+            />
+            <AddPageButton onClick={onClickNewPage} />
+          </div>
           <RouteMenuLinkItem
             icon={<FolderIcon />}
             active={allPageActive}
@@ -230,8 +239,6 @@ export const RootAppSidebar = memo(
         </SidebarScrollableContainer>
         <SidebarContainer>
           {environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}
-          <div style={{ height: '4px' }} />
-          <AddPageButton onClick={onClickNewPage} />
         </SidebarContainer>
       </AppSidebar>
     );

packages/frontend/i18n/src/resources/en.json

@@ -233,7 +233,7 @@
   "Publishing": "Publishing to web requires AFFiNE Cloud service.",
   "Publishing Description": "After publishing to the web, everyone can view the content of this workspace through the link.",
   "Quick Search": "Quick Search",
-  "Quick search": "Quick search",
+  "Quick search": "Search",
   "Quick search placeholder": "Quick Search...",
   "Quick search placeholder2": "Search in {{workspace}}",
   "RFP": "Docs can be freely added/removed from pivots, remaining accessible from \"All Docs\".",