feat(mobile): search page ui (#8012)

feat(mobile): search page ui

fix(core): quick search tags performance issue

packages/frontend/mobile/src/views/home-header/index.tsx

@@ -1,10 +1,13 @@
 import { IconButton } from '@affine/component';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { useI18n } from '@affine/i18n';
 import { SettingsIcon } from '@blocksuite/icons/rc';
+import { useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { SearchButton, WorkspaceSelector } from '../../components';
+import { SearchInput, WorkspaceSelector } from '../../components';
 import { useGlobalEvent } from '../../hooks/use-global-events';
 import * as styles from './styles.css';
 
@@ -15,6 +18,9 @@ import * as styles from './styles.css';
  *   - hide Search
  */
 export const HomeHeader = () => {
+  const t = useI18n();
+  const workbench = useService(WorkbenchService).workbench;
+
   const [dense, setDense] = useState(false);
 
   useGlobalEvent(
@@ -24,6 +30,17 @@ export const HomeHeader = () => {
     }, [])
   );
 
+  const navSearch = useCallback(() => {
+    if (!document.startViewTransition) {
+      return workbench.open('/search');
+    }
+
+    document.startViewTransition(() => {
+      workbench.open('/search');
+      return new Promise(resolve => setTimeout(resolve, 150));
+    });
+  }, [workbench]);
+
   return (
     <div className={clsx(styles.root, { dense })}>
       <div className={styles.float}>
@@ -42,7 +59,7 @@ export const HomeHeader = () => {
           </div>
         </div>
         <div className={styles.searchWrapper}>
-          <SearchButton />
+          <SearchInput placeholder={t['Quick search']()} onClick={navSearch} />
         </div>
       </div>
       <div className={styles.space} />