fix(core): page header style changes (#5279)

![CleanShot 2023-12-13 at 00.09.19@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/476fe4de-4066-4b1d-8823-d23a31ef692b.png)

packages/frontend/core/src/components/blocksuite/block-suite-header-title/index.tsx

@@ -14,7 +14,7 @@ import {
 
 import type { PageMode } from '../../../atoms';
 import { EditorModeSwitch } from '../block-suite-mode-switch';
-import { PageMenu } from './operation-menu';
+import { PageHeaderMenuButton } from './operation-menu';
 import * as styles from './styles.css';
 
 export interface BlockSuiteHeaderTitleProps {
@@ -81,9 +81,6 @@ const StableTitle = ({
         pageId={pageId}
         isPublic={isPublic}
         publicMode={publicMode}
-        style={{
-          marginRight: '12px',
-        }}
       />
       <span
         data-testid="title-edit-button"
@@ -92,7 +89,9 @@ const StableTitle = ({
       >
         {title || 'Untitled'}
       </span>
-      {isPublic ? null : <PageMenu rename={onRename} pageId={pageId} />}
+      {isPublic ? null : (
+        <PageHeaderMenuButton rename={onRename} pageId={pageId} />
+      )}
     </div>
   );
 };

packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -1,5 +1,4 @@
-import { FlexWrapper } from '@affine/component';
-import { Export, MoveToTrash } from '@affine/component/page-list';
+import { Export, FavoriteTag, MoveToTrash } from '@affine/component/page-list';
 import {
   Menu,
   MenuIcon,
@@ -22,7 +21,7 @@ import {
 import type { PageMeta } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtomValue } from 'jotai';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { currentModeAtom } from '../../../atoms/mode';
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
@@ -39,9 +38,8 @@ type PageMenuProps = {
   pageId: string;
 };
 // fixme: refactor this file
-export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
+export const PageHeaderMenuButton = ({ rename, pageId }: PageMenuProps) => {
   const t = useAFFiNEI18N();
-  const ref = useRef(null);
 
   // fixme(himself65): remove these hooks ASAP
   const [workspace] = useCurrentWorkspace();
@@ -148,7 +146,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
           ? t['com.affine.favoritePageOperation.remove']()
           : t['com.affine.favoritePageOperation.add']()}
       </MenuItem>
-      {/* {TODO: add tag and duplicate function support} */}
+      {/* {TODO: add tag function support} */}
       {/* <MenuItem
         icon={<TagsIcon />}
         data-testid="editor-option-menu-add-tag"
@@ -211,7 +209,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
     return null;
   }
   return (
-    <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
+    <>
       <Menu
         items={EditMenu}
         contentOptions={{
@@ -228,6 +226,7 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
           onOpenChange={setHistoryModalOpen}
         />
       ) : null}
-    </FlexWrapper>
+      <FavoriteTag active={!!pageMeta?.favorite} onClick={handleFavorite} />
+    </>
   );
 };

packages/frontend/core/src/components/blocksuite/block-suite-header-title/styles.css.ts

@@ -7,6 +7,7 @@ export const headerTitleContainer = style({
   flexGrow: 1,
   position: 'relative',
   width: '100%',
+  columnGap: 12,
 });
 
 export const titleEditButton = style({

packages/frontend/core/src/components/pure/header-drop-down-button/index.tsx

@@ -1,5 +1,5 @@
 import { IconButton, type IconButtonProps } from '@affine/component/ui/button';
-import { ArrowDownSmallIcon } from '@blocksuite/icons';
+import { MoreHorizontalIcon } from '@blocksuite/icons';
 import { forwardRef } from 'react';
 
 import { headerMenuTrigger } from './styles.css';
@@ -17,7 +17,7 @@ export const HeaderDropDownButton = forwardRef<
       withoutHoverStyle={true}
       type="plain"
     >
-      <ArrowDownSmallIcon />
+      <MoreHorizontalIcon />
     </IconButton>
   );
 });

packages/frontend/core/src/components/pure/header-drop-down-button/styles.css.ts

@@ -1,10 +1,9 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
-export const headerMenuTrigger = style({});
-
-globalStyle(`${headerMenuTrigger} svg`, {
-  transition: 'transform 0.15s ease-in-out',
-});
-globalStyle(`${headerMenuTrigger}:hover svg`, {
-  transform: 'translateY(3px)',
+export const headerMenuTrigger = style({
+  selectors: {
+    '&[data-state=open], &:hover': {
+      backgroundColor: 'var(--affine-hover-color)',
+    },
+  },
 });

tests/kit/utils/cloud.ts

@@ -183,7 +183,7 @@ export async function enableCloudWorkspace(page: Page) {
 
 export async function enableCloudWorkspaceFromShareButton(page: Page) {
   const shareMenuButton = page.getByTestId('local-share-menu-button');
-  expect(await shareMenuButton.isVisible()).toBeTruthy();
+  await expect(shareMenuButton).toBeVisible();
 
   // FIXME: this is a workaround for the flaky test
   // For unknown reasons,