[DevOverlay]: hook up issue click handlers in NextLogo (vercel#75069)

vercel#74975 hooked up the issue count to the NextLogo indicator but we still
need to attach a click handler so it toggles / dismisses issues.


https://github.com/user-attachments/assets/ef434937-5c99-44a6-8fef-4c0c6d8d5860

Author: ztanner

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

@@ -114,8 +114,10 @@ const DevToolsPopover = ({
     >
       <div ref={buttonRef}>
         <NextLogo
+          key={issueCount}
           issueCount={issueCount}
           onClick={togglePopover}
+          onIssuesClick={onIssuesClick}
           isDevBuilding={useIsDevBuilding()}
           isDevRendering={useIsDevRendering()}
           aria-haspopup="true"

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

@@ -6,6 +6,7 @@ interface Props extends React.ComponentProps<'button'> {
   onClick: () => void
   isDevBuilding: boolean
   isDevRendering: boolean
+  onIssuesClick: () => void
 }
 
 const SIZE = 36
@@ -15,9 +16,11 @@ export const NextLogo = ({
   onClick,
   isDevBuilding,
   isDevRendering,
+  onIssuesClick,
   ...props
 }: Props) => {
   const hasError = issueCount > 0
+  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)
   const [isLoading, setIsLoading] = useState(false)
 
   const ref = useRef<HTMLDivElement | null>(null)
@@ -223,12 +226,22 @@ export const NextLogo = ({
           <button data-next-mark onClick={onClick} {...props}>
             <NextMark isLoading={isLoading} />
           </button>
-          {hasError && (
+          {isErrorExpanded && (
             <div data-issues>
-              <button data-issues-open aria-label="Open issues overlay">
+              <button
+                data-issues-open
+                aria-label="Open issues overlay"
+                onClick={onIssuesClick}
+              >
                 {issueCount} {issueCount === 1 ? 'Issue' : 'Issues'}
               </button>
-              <button data-issues-close aria-label="Clear issues">
+              <button
+                data-issues-close
+                aria-label="Dismiss"
+                onClick={() => {
+                  setIsErrorExpanded(false)
+                }}
+              >
                 <Cross />
               </button>
             </div>