feat(editor): add animation for switching to edgeless mode firstly (#10021)

Close [BS-2327](https://linear.app/affine-design/issue/BS-2327/page-block-%E5%9C%A8-edgeless-%E5%88%87%E6%8D%A2%E7%BC%A9%E6%94%BE%E5%8A%A8%E7%94%BB)

### What Changes:
- Add a zoom animation when switching to edgeless mode firstly
- Move viewport record from `sessionStorage` to `localStorage`

https://github.com/user-attachments/assets/dac11aab-76bd-44b1-8c0e-4a8a10919841

tests/affine-local/e2e/blocksuite/outline/outline-panel.spec.ts

@@ -6,7 +6,9 @@ import {
   createEdgelessNoteBlock,
   focusDocTitle,
   getEdgelessSelectedIds,
+  getViewportCenter,
   locateElementToolbar,
+  setViewportCenter,
 } from '@affine-test/kit/utils/editor';
 import {
   pressBackspace,
@@ -207,7 +209,8 @@ test.describe('TOC display', () => {
   }) => {
     await clickEdgelessModeButton(page);
     const toc = await openTocPanel(page);
-    await createEdgelessNoteBlock(page, [100, 100]);
+    const viewportCenter = await getViewportCenter(page);
+    await createEdgelessNoteBlock(page, [viewportCenter.x, viewportCenter.y]);
     const card = locateCards(toc, 'edgeless');
     await changeNoteDisplayMode(card, 'doc');
 
@@ -337,6 +340,7 @@ test.describe('TOC and edgeless selection', () => {
     page,
   }) => {
     await clickEdgelessModeButton(page);
+    await setViewportCenter(page, [0, 0]);
     await selectAllByKeyboard(page);
     await pressBackspace(page);
     await createEdgelessNoteBlock(page, [100, 100]);
@@ -490,6 +494,7 @@ test.describe('advanced visibility control', () => {
     page,
   }) => {
     await clickEdgelessModeButton(page);
+    await setViewportCenter(page, [0, 0]);
     await createEdgelessNoteBlock(page, [100, 100]);
     await type(page, 'hello');
     await clickView(page, [200, 200]);