[DevOverlay] Add floating header

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ErrorOverlayFloatingHeader } from './error-overlay-floating-header'
+import { withShadowPortal } from '../../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof ErrorOverlayFloatingHeader> = {
+  title: 'ErrorOverlayFloatingHeader',
+  component: ErrorOverlayFloatingHeader,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorOverlayFloatingHeader>
+
+export const Default: Story = {
+  args: {
+    readyErrors: [
+      {
+        id: 0,
+        runtime: true,
+        error: new Error('First error message'),
+        frames: [],
+      },
+      {
+        id: 1,
+        runtime: true,
+        error: new Error('Second error message'),
+        frames: [],
+      },
+      {
+        id: 2,
+        runtime: true,
+        error: new Error('Third error message'),
+        frames: [],
+      },
+    ],
+    activeIdx: 1,
+    versionInfo: {
+      installed: '15.0.0',
+      staleness: 'stale-major',
+    },
+  },
+}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx

@@ -0,0 +1,55 @@
+import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
+import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'
+
+import { ErrorPagination } from '../ErrorPagination/ErrorPagination'
+import { VersionStalenessInfo } from '../../VersionStalenessInfo'
+import { noop as css } from '../../../helpers/noop-template'
+
+type ErrorOverlayFloatingHeaderProps = {
+  readyErrors?: ReadyRuntimeError[]
+  activeIdx?: number
+  setActiveIndex?: (index: number) => void
+  versionInfo?: VersionInfo
+}
+
+export function ErrorOverlayFloatingHeader({
+  readyErrors,
+  activeIdx,
+  setActiveIndex,
+  versionInfo,
+}: ErrorOverlayFloatingHeaderProps) {
+  return (
+    <div className="error-overlay-floating-header">
+      {/* TODO: better passing data instead of nullish coalescing */}
+      <ErrorPagination
+        readyErrors={readyErrors ?? []}
+        activeIdx={activeIdx ?? 0}
+        onActiveIndexChange={setActiveIndex ?? (() => {})}
+      />
+      <VersionStalenessInfo versionInfo={versionInfo} />
+    </div>
+  )
+}
+
+export const styles = css`
+  .error-overlay-floating-header {
+    display: flex;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    margin-bottom: var(--size-2);
+    outline: none;
+
+    @media (min-width: 576px) {
+      max-width: 540px;
+    }
+
+    @media (min-width: 768px) {
+      max-width: 720px;
+    }
+
+    @media (min-width: 992px) {
+      max-width: 960px;
+    }
+  }
+`

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx

@@ -12,12 +12,10 @@ import {
   DialogFooter,
 } from '../../Dialog'
 import { Overlay } from '../../Overlay'
-import { ErrorPagination } from '../ErrorPagination/ErrorPagination'
 import {
   ErrorOverlayToolbar,
   styles as toolbarStyles,
 } from '../error-overlay-toolbar/error-overlay-toolbar'
-import { VersionStalenessInfo } from '../../VersionStalenessInfo'
 import { ErrorOverlayBottomStacks } from '../error-overlay-bottom-stacks/error-overlay-bottom-stacks'
 import { ErrorOverlayFooter } from '../error-overlay-footer/error-overlay-footer'
 import { noop as css } from '../../../helpers/noop-template'
@@ -29,6 +27,10 @@ import {
   ErrorTypeLabel,
   styles as errorTypeLabelStyles,
 } from '../error-type-label/error-type-label'
+import {
+  ErrorOverlayFloatingHeader,
+  styles as floatingHeaderStyles,
+} from '../error-overlay-floating-header/error-overlay-floating-header'
 
 type ErrorOverlayLayoutProps = {
   errorMessage: ErrorMessageType
@@ -64,6 +66,12 @@ export function ErrorOverlayLayout({
 }: ErrorOverlayLayoutProps) {
   return (
     <Overlay fixed={isBuildError}>
+      <ErrorOverlayFloatingHeader
+        readyErrors={readyErrors}
+        activeIdx={activeIdx}
+        setActiveIndex={setActiveIndex}
+        versionInfo={versionInfo}
+      />
       <Dialog
         type="error"
         aria-labelledby="nextjs__container_errors_label"
@@ -72,12 +80,6 @@ export function ErrorOverlayLayout({
       >
         <DialogContent>
           <DialogHeader className="nextjs-container-errors-header">
-            {/* TODO: better passing data instead of nullish coalescing */}
-            <ErrorPagination
-              readyErrors={readyErrors ?? []}
-              activeIdx={activeIdx ?? 0}
-              onActiveIndexChange={setActiveIndex ?? (() => {})}
-            />
             <div
               className="nextjs__container_errors__error_title"
               // allow assertion in tests before error rating is implemented
@@ -86,7 +88,6 @@ export function ErrorOverlayLayout({
               <ErrorTypeLabel errorType={errorType} />
               <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
             </div>
-            <VersionStalenessInfo versionInfo={versionInfo} />
             <ErrorMessage errorMessage={errorMessage} />
           </DialogHeader>
           <DialogBody className="nextjs-container-errors-body">
@@ -110,6 +111,7 @@ export function ErrorOverlayLayout({
 }
 
 export const styles = css`
+  ${floatingHeaderStyles}
   ${errorTypeLabelStyles}
   ${errorMessageStyles}
   ${toolbarStyles}