Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DevTools] create error state for indicator #74717

Merged
merged 1 commit into from
Jan 10, 2025
Merged

[DevTools] create error state for indicator #74717

merged 1 commit into from
Jan 10, 2025

Conversation

gaojude
Copy link
Contributor

@gaojude gaojude commented Jan 9, 2025

Add Issue Count Indicator to Next.js Dev Tools Logo

What?

Adds a visual indicator showing the number of issues in the Next.js dev tools logo. The logo now displays a red circle with the issue count when there are active issues, and changes color to indicate error states.

CleanShot 2025-01-09 at 18 19 35@2x

Why?

Improves developer experience by providing immediate visual feedback about the presence and number of issues without requiring interaction with the dev tools panel.

How?

  • Created a new NextLogo component with issue count display
  • Added Storybook stories to showcase different states (no issues, single issue, multiple issues)
  • Implemented dynamic styling based on issue count
  • Added a red circular badge that appears when issues are present
  • Updated the logo colors to reflect error states

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 9, 2025
@gaojude gaojude changed the title create error state for indicator [DevTools] create error state for indicator Jan 9, 2025
Copy link
Contributor Author

gaojude commented Jan 9, 2025

This stack of pull requests is managed by Graphite. Learn more about stacking.

@gaojude gaojude marked this pull request as ready for review January 9, 2025 23:09
@gaojude gaojude force-pushed the 01-09-remove_dead_code branch from 933caff to a646691 Compare January 9, 2025 23:15
@gaojude gaojude requested a review from devjiwonchoi January 9, 2025 23:19
@ijjk
Copy link
Member

ijjk commented Jan 9, 2025

Tests Passed

@ijjk
Copy link
Member

ijjk commented Jan 9, 2025

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js logo-with-error Change
buildDuration 30.5s 29.7s N/A
buildDurationCached 25.9s 25.3s N/A
nodeModulesSize 416 MB 416 MB ⚠️ +51.1 kB
nextStartRea..uration (ms) 888ms 849ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js logo-with-error Change
5306-HASH.js gzip 53.3 kB 53.3 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.44 kB 5.44 kB N/A
bccd1874-HASH.js gzip 53 kB 53 kB
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 240 B 242 B N/A
main-HASH.js gzip 34.1 kB 34.1 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 53 kB 53 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js logo-with-error Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Overall change 39.4 kB 39.4 kB
Client Pages
vercel/next.js canary vercel/next.js logo-with-error Change
_app-HASH.js gzip 193 B 193 B
_error-HASH.js gzip 193 B 193 B
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.57 kB 4.57 kB N/A
index-HASH.js gzip 268 B 268 B
link-HASH.js gzip 2.35 kB 2.34 kB N/A
routerDirect..HASH.js gzip 328 B 328 B
script-HASH.js gzip 397 B 397 B
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.59 kB 3.59 kB
Client Build Manifests
vercel/next.js canary vercel/next.js logo-with-error Change
_buildManifest.js gzip 749 B 747 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js logo-with-error Change
index.html gzip 522 B 521 B N/A
link.html gzip 538 B 535 B N/A
withRouter.html gzip 518 B 518 B
Overall change 518 B 518 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js logo-with-error Change
edge-ssr.js gzip 128 kB 128 kB N/A
page.js gzip 207 kB 207 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js logo-with-error Change
middleware-b..fest.js gzip 672 B 667 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.2 kB 31.2 kB N/A
edge-runtime..pack.js gzip 844 B 844 B
Overall change 844 B 844 B
Next Runtimes Overall increase ⚠️
vercel/next.js canary vercel/next.js logo-with-error Change
274-experime...dev.js gzip 322 B 322 B
274.runtime.dev.js gzip 314 B 314 B
app-page-exp...dev.js gzip 367 kB 367 kB ⚠️ +173 B
app-page-exp..prod.js gzip 129 kB 129 kB
app-page-tur..prod.js gzip 142 kB 142 kB
app-page-tur..prod.js gzip 138 kB 138 kB
app-page.run...dev.js gzip 355 kB 355 kB ⚠️ +183 B
app-page.run..prod.js gzip 126 kB 126 kB
app-route-ex...dev.js gzip 37.6 kB 37.6 kB
app-route-ex..prod.js gzip 25.6 kB 25.6 kB
app-route-tu..prod.js gzip 25.6 kB 25.6 kB
app-route-tu..prod.js gzip 25.4 kB 25.4 kB
app-route.ru...dev.js gzip 39.2 kB 39.2 kB
app-route.ru..prod.js gzip 25.4 kB 25.4 kB
pages-api-tu..prod.js gzip 9.69 kB 9.69 kB
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB
pages-api.ru..prod.js gzip 9.68 kB 9.68 kB
pages-turbo...prod.js gzip 21.7 kB 21.7 kB
pages.runtim...dev.js gzip 27.5 kB 27.5 kB
pages.runtim..prod.js gzip 21.7 kB 21.7 kB
server.runti..prod.js gzip 916 kB 916 kB
Overall change 2.46 MB 2.46 MB ⚠️ +356 B
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js logo-with-error Change
0.pack gzip 2.09 MB 2.09 MB ⚠️ +2.04 kB
index.pack gzip 76 kB 74.8 kB N/A
Overall change 2.09 MB 2.09 MB ⚠️ +2.04 kB
Diff details
Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js
failed to diff
Diff for app-page.runtime.dev.js
failed to diff
Commit: 117edd1

@gaojude gaojude force-pushed the 01-09-remove_dead_code branch 2 times, most recently from 1cc160b to cb33e8e Compare January 10, 2025 00:57
@gaojude gaojude force-pushed the 01-09-remove_dead_code branch from cb33e8e to 51fceba Compare January 10, 2025 01:50
Base automatically changed from 01-09-remove_dead_code to canary January 10, 2025 02:30
@gaojude gaojude merged commit 91cfa64 into canary Jan 10, 2025
125 of 130 checks passed
@gaojude gaojude deleted the logo-with-error branch January 10, 2025 04:02
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 24, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants