Skip to content

feat: replace the yellow preview bar with draft chrome - #418

Draft
dmnktoe wants to merge 1 commit into
mainfrom
cursor/draft-chrome-8178
Draft

dmnktoe wants to merge 1 commit into
mainfrom
cursor/draft-chrome-8178

Conversation

@dmnktoe

@dmnktoe dmnktoe commented Sep 3, 2026

Copy link
Copy Markdown
Owner

⇝pull request

*ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚

what & why

The yellow “Preview Mode aktiv” bar is gone. Draft tools and the work live-URL sit in one glass row at the bottom.

scope

@httpjpg/ui · @httpjpg/storyblok-ui · @httpjpg/storyblok-utils · apps/portfolio · apps/storybook

change type

  • feat — new feature · Added · minor
  • fix — bug fix · Fixed · patch
  • refactor / style / revert · Changed · patch
  • perf — faster or leaner · Performance · patch
  • build / ci / docs / test · Tooling · patch
  • deps — dependency bump · Dependencies · patch
  • chore — hidden from the changelog · patch
  • carries a BREAKING CHANGE: footer · ⚠ BREAKING · major

screenshots / recordings

Work preview keeps the project accent. Editor tools stay on the default glass, same row:

One pill row: orange preview, dark glass draft/edit/exit/grid

Draft without a live URL:

Draft chrome without a work URL: draft, edit, exit, grid

12-column overlay (⊞ or G):

12-column overlay over the same pill row


checklist — every pull request
  • Follows the conventions in CLAUDE.md — I read a neighbouring file before inventing a pattern
  • Scoped: no drive-by refactors bundled with the feature
  • Server Components by default; any new "use client" boundary is as small as possible
  • Tests added or updated next to the source (*.test.ts(x)); E2E updated if a user-facing flow changed
  • Did not hand-edit the root package.json version, .release-please-manifest.json or CHANGELOG.md

notes for reviewers

Split out of #413. Independent of the margins and motion PRs.

One folder: packages/ui/src/components/floating-badge/

File What
floating-badge.tsx The glass buttons at the bottom.
editor-chrome.tsx Draft / edit / exit / grid. No work URL, no accent.
page-badge.tsx Pages publish href / editHref / accentColor.

DraftChrome wraps <main> when a draft cookie / ?_draft / ?_storyblok is set. Only the live-URL button takes the project accent.

Storybook: Display/FloatingBadge and Display/EditorChrome.

To show artifacts inline, enable in settings.

Open in Web Open in Cursor 

Work URL and editor tools share one glass row. Editor pills stay
neutral; only the live-URL pill takes the project accent.
@codecov

codecov Bot commented Sep 3, 2026

Copy link
Copy Markdown

Bundle Report

Changes will increase total bundle size by 37.34kB (0.21%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
portfolio-server-cjs 11.06MB 7.6kB (0.07%) ⬆️
portfolio-client-array-push 3.43MB 29.74kB (0.87%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: portfolio-client-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
static/chunks/7515-*.js (New) 186.77kB 186.77kB 100.0% 🚀
static/css/*.css 804 bytes 124.15kB 0.65%
server/app/_global-*.js 1.58kB 98.14kB 1.64%
server/app/_not-*.js 1.58kB 98.13kB 1.64%
server/app/(portfolio)/[...slug]/page_client-*.js 1.58kB 98.07kB 1.64%
server/app/page_client-*.js 1.58kB 98.05kB 1.64%
server/app/(portfolio)/cookie-*.js 1.29kB 89.29kB 1.47%
server/app/api/psn-*.js 1.57kB 64.7kB 2.49%
server/app/api/cloudflare/route_client-*.js 1.57kB 64.54kB 2.49%
server/app/api/letterboxd/route_client-*.js 1.57kB 64.54kB 2.49%
server/app/work/feed.xml/route_client-*.js 1.56kB 64.45kB 2.49%
server/app/api/discogs/route_client-*.js 1.56kB 64.29kB 2.49%
server/app/api/discord/route_client-*.js 1.56kB 64.29kB 2.49%
server/app/api/weather/route_client-*.js 1.56kB 64.29kB 2.49%
server/app/api/status/route_client-*.js 1.56kB 64.12kB 2.49%
server/app/api/x/route_client-*.js 1.55kB 63.79kB 2.49%
static/chunks/app/layout-*.js -152 bytes 47.07kB -0.32%
server/app/api/og/[...slug]/route_client-*.js 1.2kB 44.32kB 2.77%
static/chunks/4680-*.js -1 bytes 28.11kB -0.0%
static/chunks/6996-*.js 408 bytes 18.62kB 2.24%
static/chunks/app/(portfolio)/[...slug]/page-*.js 81 bytes 11.46kB 0.71%
static/chunks/webpack-*.js -1 bytes 3.52kB -0.03%
static/chunks/app/api/discogs/route-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/api/cloudflare/route-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/api/discord/route-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/api/letterboxd/route-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/api/psn-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/api/status/route-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/api/weather/route-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/api/x/route-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/work/feed.xml/route-*.js 79 bytes 3.52kB 2.3%
static/chunks/app/(portfolio)/cookie-*.js 81 bytes 3.34kB 2.48%
static/chunks/app/(portfolio)/[...slug]/not-*.js 81 bytes 3.16kB 2.63%
static/chunks/app/not-*.js 81 bytes 3.16kB 2.63%
static/chunks/app/(portfolio)/loading-*.js 81 bytes 3.16kB 2.63%
static/chunks/app/loading-*.js 81 bytes 3.16kB 2.63%
static/chunks/app/api/og/[...slug]/route-*.js 81 bytes 3.16kB 2.63%
static/S4eQ7RqIirzMTeHaYeeKO/_buildManifest.js (New) 1.5kB 1.5kB 100.0% 🚀
react-*.json -1 bytes 901 bytes -0.11%
server/middleware-*.js 346 bytes 841 bytes 69.9% ⚠️
server/middleware-*.js -347 bytes 495 bytes -41.21%
static/chunks/2418.*.js (New) 681 bytes 681 bytes 100.0% 🚀
static/chunks/405.*.js (New) 679 bytes 679 bytes 100.0% 🚀
static/S4eQ7RqIirzMTeHaYeeKO/_ssgManifest.js (New) 77 bytes 77 bytes 100.0% 🚀
static/chunks/9378-*.js (Deleted) -182.24kB 0 bytes -100.0% 🗑️
static/sFSdLuN4TFQ8DKJwNDPqs/_buildManifest.js (Deleted) -1.5kB 0 bytes -100.0% 🗑️
static/chunks/3218.*.js (Deleted) -681 bytes 0 bytes -100.0% 🗑️
static/chunks/8586.*.js (Deleted) -681 bytes 0 bytes -100.0% 🗑️
static/sFSdLuN4TFQ8DKJwNDPqs/_ssgManifest.js (Deleted) -77 bytes 0 bytes -100.0% 🗑️

Files in static/chunks/app/layout-*.js:

  • ./components/ui/draft-chrome.tsx → Total Size: 1.64kB

App Routes Affected:

App Route Size Change Total Size Change (%)
/ -154 bytes 77.98kB -0.2%
view changes for bundle: portfolio-server-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
5613.js -5 bytes 1.57MB -0.0%
7321.js (New) 429.17kB 429.17kB 100.0% 🚀
2176.js (New) 238.06kB 238.06kB 100.0% 🚀
../app/(portfolio)/[...slug]/page.js 162 bytes 160.5kB 0.1%
5071.js (New) 74.09kB 74.09kB 100.0% 🚀
6040.js 516 bytes 67.17kB 0.77%
2728.js 2 bytes 52.37kB 0.0%
../app/_global-error/page.js 1 bytes 22.61kB 0.0%
../app/(portfolio)/cookie-policy/page.js 161 bytes 22.11kB 0.73%
../app/api/og/[...slug]/route.js 1 bytes 17.89kB 0.01%
3951.js (New) 12.85kB 12.85kB 100.0% 🚀
../app/work/feed.xml/route.js 1 bytes 12.46kB 0.01%
../app/api/cloudflare/route.js 1 bytes 11.61kB 0.01%
../app/api/discord/route.js 1 bytes 11.03kB 0.01%
../app/api/weather/route.js 1 bytes 10.54kB 0.01%
../app/api/psn-trophies/route.js 1 bytes 9.75kB 0.01%
../app/api/x/route.js 1 bytes 9.55kB 0.01%
../app/api/letterboxd/route.js 1 bytes 9.54kB 0.01%
../app/api/discogs/route.js 1 bytes 9.51kB 0.01%
../app/api/status/route.js 1 bytes 9.24kB 0.01%
../app/page.js 1 bytes 7.33kB 0.01%
7038.js (New) 6.72kB 6.72kB 100.0% 🚀
2103.js (New) 6.36kB 6.36kB 100.0% 🚀
../app/_not-found/page.js 1 bytes 4.07kB 0.02%
../app/(portfolio)/[...slug]/page.js.nft.json 3 bytes 1.26kB 0.24%
../app/api/cloudflare/route.js.nft.json 3 bytes 1.24kB 0.24%
../app/api/discogs/route.js.nft.json 3 bytes 1.24kB 0.24%
../app/api/letterboxd/route.js.nft.json 3 bytes 1.24kB 0.24%
../app/api/discord/route.js.nft.json 3 bytes 1.24kB 0.24%
../app/api/psn-trophies/route.js.nft.json 3 bytes 1.24kB 0.24%
../app/api/status/route.js.nft.json 3 bytes 1.24kB 0.24%
../app/api/weather/route.js.nft.json 3 bytes 1.24kB 0.24%
../app/api/x/route.js.nft.json 3 bytes 1.24kB 0.24%
../app/work/feed.xml/route.js.nft.json 3 bytes 1.16kB 0.26%
../app/api/og/[...slug]/route.js.nft.json 1 bytes 977 bytes 0.1%
../app/page.js.nft.json 3 bytes 854 bytes 0.35%
../app/(portfolio)/cookie-policy/page.js.nft.json 3 bytes 776 bytes 0.39%
1381.js (New) 616 bytes 616 bytes 100.0% 🚀
1673.js (New) 616 bytes 616 bytes 100.0% 🚀
../app/_not-found/page.js.nft.json 3 bytes 546 bytes 0.55%
../app/_global-error/page.js.nft.json 1 bytes 201 bytes 0.5%
463.js (Deleted) -429.17kB 0 bytes -100.0% 🗑️
6524.js (Deleted) -231.92kB 0 bytes -100.0% 🗑️
4493.js (Deleted) -74.24kB 0 bytes -100.0% 🗑️
1581.js (Deleted) -12.45kB 0 bytes -100.0% 🗑️
5696.js (Deleted) -6.56kB 0 bytes -100.0% 🗑️
1775.js (Deleted) -6.2kB 0 bytes -100.0% 🗑️
718.js (Deleted) -614 bytes 0 bytes -100.0% 🗑️
853.js (Deleted) -614 bytes 0 bytes -100.0% 🗑️

Files in 5071.js:

  • ./components/ui/draft-chrome.tsx → Total Size: 550 bytes

  • ./components/ui/draft-chrome.tsx → Total Size: 1.7kB

App Routes Affected:

App Route Size Change Total Size Change (%)
/api/x 5 bytes 261.28kB 0.0%
/api/letterboxd 5 bytes 261.27kB 0.0%
/api/discogs 5 bytes 261.24kB 0.0%
/api/cloudflare 5 bytes 263.34kB 0.0%
/ -146 bytes 355.76kB -0.04%
/api/discord 5 bytes 262.76kB 0.0%
/(portfolio)/cookie-policy 165 bytes 273.84kB 0.06%
/api/status 5 bytes 260.97kB 0.0%
/work/feed.xml 5 bytes 264.19kB 0.0%
/(portfolio)/[...slug] 166 bytes 412.23kB 0.04%
/api/og/[...slug] 1 bytes 17.89kB 0.01%
/api/psn-trophies 5 bytes 261.48kB 0.0%
/(portfolio) 327 bytes 434.34kB 0.08%
/api/weather 5 bytes 262.27kB 0.0%

@codecov

codecov Bot commented Sep 3, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 94.52055% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.27%. Comparing base (5fad6f3) to head (a7cee23).
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...ui/src/components/floating-badge/editor-chrome.tsx 89.47% 4 Missing ⚠️
apps/portfolio/components/ui/draft-chrome.tsx 90.47% 2 Missing ⚠️
packages/storyblok-utils/src/editable.ts 95.00% 1 Missing ⚠️
...i/src/components/floating-badge/floating-badge.tsx 97.56% 1 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main     #418      +/-   ##
==========================================
- Coverage   97.29%   97.27%   -0.03%     
==========================================
  Files         356      360       +4     
  Lines        9109     9218     +109     
  Branches     3091     3030      -61     
==========================================
+ Hits         8863     8967     +104     
- Misses        238      243       +5     
  Partials        8        8              
Components Coverage Δ
ui 97.38% <95.09%> (-0.06%) ⬇️
storyblok 96.78% <95.65%> (-0.03%) ⬇️
integrations 93.73% <ø> (ø)
foundations 92.10% <ø> (ø)
portfolio 98.15% <90.47%> (+<0.01%) ⬆️
Files with missing lines Coverage Δ
...oryblok-ui/src/components/page-work/SbPageWork.tsx 100.00% <100.00%> (ø)
...ckages/storyblok-ui/src/components/page/SbPage.tsx 100.00% <ø> (ø)
packages/storyblok-ui/src/lib/editor-chrome.ts 100.00% <100.00%> (ø)
...es/ui/src/components/floating-badge/page-badge.tsx 100.00% <100.00%> (ø)
packages/storyblok-utils/src/editable.ts 95.00% <95.00%> (ø)
...i/src/components/floating-badge/floating-badge.tsx 97.56% <97.56%> (ø)
apps/portfolio/components/ui/draft-chrome.tsx 90.47% <90.47%> (ø)
...ui/src/components/floating-badge/editor-chrome.tsx 89.47% <89.47%> (ø)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants