[DevOverlay] Open Error Overlay when DevTools Indicator clicked

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react'
 import type { OverlayState } from '../../../../../shared'
 
 import { useState, useEffect, useRef } from 'react'
@@ -19,7 +20,7 @@ export function DevToolsIndicator({
 }: {
   state: OverlayState
   readyErrorsLength: number
-  setIsErrorOverlayOpen: (value: boolean) => void
+  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>
 }) {
   const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)
   // Register `(cmd|ctrl) + .` to show/hide the error indicator.
@@ -36,14 +37,12 @@ export function DevToolsIndicator({
     isDevToolsIndicatorOpen && (
       <DevToolsPopover
         semver={state.versionInfo.installed}
-        onIssuesClick={() => {
-          setIsErrorOverlayOpen(true)
-        }}
         issueCount={readyErrorsLength}
         isStaticRoute={state.staticIndicator}
         hide={() => {
           setIsDevToolsIndicatorOpen(false)
         }}
+        setIsErrorOverlayOpen={setIsErrorOverlayOpen}
         isTurbopack={!!process.env.TURBOPACK}
       />
     )
@@ -54,19 +53,19 @@ const ANIMATE_OUT_DURATION_MS = 200
 const ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'
 
 const DevToolsPopover = ({
-  onIssuesClick,
   issueCount,
   isStaticRoute,
-  hide,
   semver,
   isTurbopack,
+  hide,
+  setIsErrorOverlayOpen,
 }: {
-  onIssuesClick: () => void
   issueCount: number
   isStaticRoute: boolean
-  hide: () => void
   semver: string | undefined
   isTurbopack: boolean
+  hide: () => void
+  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>
 }) => {
   const popoverRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLDivElement>(null)
@@ -117,6 +116,13 @@ const DevToolsPopover = ({
   }, [])
 
   const togglePopover = () => setIsPopoverOpen((prev) => !prev)
+  const onIssuesClick = () =>
+    issueCount > 0 ? setIsErrorOverlayOpen(true) : null
+
+  const onLogoClick = () => {
+    togglePopover()
+    onIssuesClick()
+  }
 
   return (
     <Toast
@@ -129,7 +135,7 @@ const DevToolsPopover = ({
         <NextLogo
           key={issueCount}
           issueCount={issueCount}
-          onClick={togglePopover}
+          onLogoClick={onLogoClick}
           onIssuesClick={onIssuesClick}
           isDevBuilding={useIsDevBuilding()}
           isDevRendering={useIsDevRendering()}
@@ -174,7 +180,7 @@ const DevToolsPopover = ({
               <IndicatorRow
                 label="Issues"
                 value={<IssueCount count={issueCount} />}
-                onClick={issueCount > 0 ? onIssuesClick : undefined}
+                onClick={onIssuesClick}
               />
             </div>
           </div>

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx

@@ -3,19 +3,19 @@ import { noop as css } from '../../../../../../internal/helpers/noop-template'
 
 interface Props extends React.ComponentProps<'button'> {
   issueCount: number
-  onClick: () => void
   isDevBuilding: boolean
   isDevRendering: boolean
+  onLogoClick: () => void
   onIssuesClick: () => void
 }
 
 const SIZE = 36
 
 export const NextLogo = ({
   issueCount,
-  onClick,
   isDevBuilding,
   isDevRendering,
+  onLogoClick,
   onIssuesClick,
   ...props
 }: Props) => {
@@ -223,7 +223,7 @@ export const NextLogo = ({
       >
         <div ref={ref}>
           {/* Children */}
-          <button data-next-mark onClick={onClick} {...props}>
+          <button data-next-mark onClick={onLogoClick} {...props}>
             <NextMark isLoading={isLoading} />
           </button>
           {isErrorExpanded && (