feat(component): startScopedViewTranstion func to support scoped view transition (#8093)

AF-1293

packages/frontend/mobile/src/components/search-input/style.css.ts

@@ -1,10 +1,18 @@
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
+import { generateIdentifier, style } from '@vanilla-extract/css';
+
+export const searchVTName = generateIdentifier('mobile-search-input');
+export const searchVTScope = generateIdentifier('mobile-search');
 
 export const wrapper = style({
   position: 'relative',
   backgroundColor: cssVarV2('layer/background/primary'),
-  viewTransitionName: 'mobile-search-input',
+
+  selectors: {
+    [`[data-${searchVTScope}] &`]: {
+      viewTransitionName: searchVTName,
+    },
+  },
 });
 
 export const prefixIcon = style({

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

@@ -1,4 +1,4 @@
-import { IconButton } from '@affine/component';
+import { IconButton, startScopedViewTransition } from '@affine/component';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
@@ -9,6 +9,7 @@ import { useSetAtom } from 'jotai';
 import { useCallback, useState } from 'react';
 
 import { SearchInput, WorkspaceSelector } from '../../components';
+import { searchVTScope } from '../../components/search-input/style.css';
 import { useGlobalEvent } from '../../hooks/use-global-events';
 import * as styles from './styles.css';
 
@@ -33,13 +34,8 @@ export const HomeHeader = () => {
   );
 
   const navSearch = useCallback(() => {
-    if (!document.startViewTransition) {
-      return workbench.open('/search');
-    }
-
-    document.startViewTransition(() => {
+    startScopedViewTransition(searchVTScope, () => {
       workbench.open('/search');
-      return new Promise(resolve => setTimeout(resolve, 150));
     });
   }, [workbench]);