refactor: workspace header (#1880)

2026-08-01 17:39:55 +08:00 · 2023-04-11 21:39:39 -05:00
parent 2e823c2fee
commit a06113d48c
42 changed files with 1653 additions and 470 deletions
@@ -0,0 +1,128 @@
+import type { PopperProps } from '@affine/component';
+import { QuickSearchTips } from '@affine/component';
+import { getEnvironment } from '@affine/env';
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
+import { assertExists } from '@blocksuite/store';
+import { useAtomValue, useSetAtom } from 'jotai';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
+
+import { currentEditorAtom, openQuickSearchModalAtom } from '../../../atoms';
+import { useGuideHidden } from '../../../hooks/use-is-first-load';
+import { usePageMeta } from '../../../hooks/use-page-meta';
+import { useElementResizeEffect } from '../../../hooks/use-workspaces';
+import { QuickSearchButton } from '../../pure/quick-search-button';
+import { EditorModeSwitch } from './editor-mode-switch';
+import type { BaseHeaderProps } from './header';
+import { Header } from './header';
+import {
+  StyledQuickSearchTipButton,
+  StyledQuickSearchTipContent,
+  StyledSearchArrowWrapper,
+  StyledSwitchWrapper,
+  StyledTitle,
+  StyledTitleContainer,
+  StyledTitleWrapper,
+} from './styles';
+
+export type WorkspaceHeaderProps = BaseHeaderProps;
+
+export const WorkspaceHeader = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<WorkspaceHeaderProps> & HTMLAttributes<HTMLDivElement>
+>((props, ref) => {
+  const { workspace, currentPage, children, isPublic } = props;
+  // fixme(himself65): remove this atom and move it to props
+  const setOpenQuickSearch = useSetAtom(openQuickSearchModalAtom);
+  const pageMeta = usePageMeta(workspace.blockSuiteWorkspace).find(
+    meta => meta.id === currentPage?.id
+  );
+  assertExists(pageMeta);
+  const title = pageMeta.title;
+  const [isTipsHidden, setTipsHidden] = useGuideHidden();
+  const isMac = () => {
+    const env = getEnvironment();
+    return env.isBrowser && env.isMacOs;
+  };
+
+  const popperRef: PopperProps['popperRef'] = useRef(null);
+
+  useElementResizeEffect(
+    useAtomValue(currentEditorAtom),
+    useCallback(() => {
+      if (isTipsHidden.quickSearchTips || !popperRef.current) {
+        return;
+      }
+      popperRef.current.update();
+    }, [isTipsHidden.quickSearchTips])
+  );
+
+  const TipsContent = (
+    <StyledQuickSearchTipContent>
+      <div>
+        Click button
+        {
+          <span
+            style={{
+              fontSize: '24px',
+              verticalAlign: 'middle',
+            }}
+          >
+            <ArrowDownSmallIcon />
+          </span>
+        }
+        or use
+        {isMac() ? ' ⌘ + K' : ' Ctrl + K'} to activate Quick Search. Then you
+        can search keywords or quickly open recently viewed pages.
+      </div>
+      <StyledQuickSearchTipButton
+        data-testid="quick-search-got-it"
+        onClick={() =>
+          setTipsHidden({ ...isTipsHidden, quickSearchTips: true })
+        }
+      >
+        Got it
+      </StyledQuickSearchTipButton>
+    </StyledQuickSearchTipContent>
+  );
+
+  return (
+    <Header ref={ref} {...props}>
+      {children}
+      {!isPublic && currentPage && (
+        <StyledTitleContainer data-tauri-drag-region>
+          <StyledTitleWrapper>
+            <StyledSwitchWrapper>
+              <EditorModeSwitch
+                blockSuiteWorkspace={workspace.blockSuiteWorkspace}
+                pageId={currentPage.id}
+                style={{
+                  marginRight: '12px',
+                }}
+              />
+            </StyledSwitchWrapper>
+            <StyledTitle>{title || 'Untitled'}</StyledTitle>
+            <QuickSearchTips
+              data-testid="quick-search-tips"
+              content={TipsContent}
+              placement="bottom"
+              popperRef={popperRef}
+              open={!isTipsHidden.quickSearchTips}
+              offset={[0, -5]}
+            >
+              <StyledSearchArrowWrapper>
+                <QuickSearchButton
+                  onClick={() => {
+                    setOpenQuickSearch(true);
+                  }}
+                />
+              </StyledSearchArrowWrapper>
+            </QuickSearchTips>
+          </StyledTitleWrapper>
+        </StyledTitleContainer>
+      )}
+    </Header>
+  );
+});
+
+WorkspaceHeader.displayName = 'BlockSuiteEditorHeader';