Reset viewport on page add (#5877)

**Problem:**

When adding a new page, the canvas viewport stays the same, which means
that the new page could be far away.

**Fix:**

After adding a new page, scroll to the active scene (top-left) so the
new content sits at a usable spot.

Note: I did not reset the zoom too because after trying it out a bit it
seems potentially confusing, but it's easy to add it.



https://github.com/concrete-utopia/utopia/assets/1081051/e0da869d-884e-4dd8-872c-61e54d78a627



**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

Fixes #5867

editor/src/components/navigator/left-pane/pages-pane.tsx

@@ -33,7 +33,7 @@ import {
   ActiveRemixSceneAtom,
   RemixNavigationAtom,
 } from '../../canvas/remix/utopia-remix-root-component'
-import { Substores, useEditorState } from '../../editor/store/store-hook'
+import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
 import { ExpandableIndicator } from '../navigator-item/expandable-indicator'
 import {
   getFeaturedRoutesFromPackageJSON,
@@ -50,15 +50,20 @@ import {
   updateRemixRoute,
   addNewFeaturedRoute,
   removeFeaturedRoute,
+  scrollToPosition,
 } from '../../editor/actions/action-creators'
 import type { ElementContextMenuInstance } from '../../element-context-menu'
 import ReactDOM from 'react-dom'
 import { createNewPageName } from '../../editor/store/editor-state'
 import urljoin from 'url-join'
 import { notice } from '../../common/notice'
-import type { EditorDispatch } from '../../editor/action-types'
+import type { EditorAction, EditorDispatch } from '../../editor/action-types'
 import { maybeToArray } from '../../../core/shared/optional-utils'
 import { StarUnstarIcon } from '../../canvas/star-unstar-icon'
+import { canvasRectangle, isFiniteRectangle } from '../../../core/shared/math-utils'
+import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
+import type { ElementPath } from 'utopia-shared/src/types'
 
 type RouteMatch = {
   path: string
@@ -506,6 +511,23 @@ function fillInGapsInRoutes(routes: RouteMatches): Array<RouteMatch> {
   return Object.values(result).sort((a, b) => a.path.localeCompare(b.path))
 }
 
+function resetCanvasForNewPage(
+  metadata: ElementInstanceMetadataMap,
+  activeScenePath: ElementPath,
+): EditorAction[] {
+  const sceneFrame = MetadataUtils.getFrameInCanvasCoords(activeScenePath, metadata)
+  if (sceneFrame != null && isFiniteRectangle(sceneFrame)) {
+    const target = canvasRectangle({
+      x: sceneFrame.x,
+      y: sceneFrame.y,
+      width: 0,
+      height: 0,
+    })
+    return [scrollToPosition(target, 'keep-scroll-position-if-visible')]
+  }
+  return []
+}
+
 export const AddPageContextMenu = React.memo(
   ({
     contextMenuInstance,
@@ -518,13 +540,19 @@ export const AddPageContextMenu = React.memo(
   }) => {
     const dispatch = useDispatch()
 
+    const metadata = useRefEditorState((store) => store.editor.jsxMetadata)
+    const [activeRemixScene] = useAtom(ActiveRemixSceneAtom)
+
     const addPageAction = React.useCallback(
       (template: PageTemplate) => () => {
         const newPageName = createNewPageName()
-        dispatch([addNewPage('/app/routes', template, newPageName)])
+        dispatch([
+          addNewPage('/app/routes', template, newPageName),
+          ...resetCanvasForNewPage(metadata.current, activeRemixScene),
+        ])
         onAfterPageAdd(newPageName)
       },
-      [dispatch, onAfterPageAdd],
+      [dispatch, onAfterPageAdd, activeRemixScene, metadata],
     )
 
     const portalTarget = document.getElementById(PortalTargetID)