feat(ui): render release notes toast with markdown and visible scroll by Astro-Han · Pull Request #538 · Astro-Han/pawwork

Astro-Han · 2026-05-11T03:55:42Z

Summary

Render release notes toast description as markdown HTML (<ul><li>) instead of pre-line plain text
Show thin visible scrollbar when content overflows (was scrollbar-width: none)
Fix gap: 2px to gap: 6px in toast content area (4pt grid compliance)
Remove white-space: pre-line override; markdown slot handles formatting

Why

Release notes toast content was cramped, not obviously scrollable, and markdown formatting was not rendered. The subtle variant used white-space: pre-line which only preserves newlines but does not render - bullet as actual list items. The scrollbar was hidden (scrollbar-width: none), making it impossible for users to discover they can scroll long content.

Implementation

Because markdown.tsx requires useMarked() context (unavailable inside Kobalte's toaster.show() render root), we use an innerHTML approach:

highlights.tsx: new buildToastMarkdownHtml() converts the existing buildToastDescription() output (bullet lines prefixed with •) to <ul><li> HTML. Content is HTML-escaped by escapeHtml() before insertion.
toast.tsx: new markdownHtml?: string field in ToastOptions; DOMPurify.sanitize() applied at render time as a second-layer defense. Existing description path is unchanged.
E2E selectors updated from toast-description to toast-markdown slot; bullet assertions drop the • prefix since text is now in <li> elements.

Human Review Status

Pending. A human should make the final merge decision after reviewing the diff and verification evidence.

Review Focus

toast.tsx: new markdownHtml field and DOMPurify.sanitize() at render
toast.css: scrollbar-width change, gap fix, new [data-slot="toast-markdown"] block
highlights.tsx: buildToastMarkdownHtml() converter and call-site change
E2E: selectors updated to match new DOM structure

Risk Notes

markdownHtml content is HTML-escaped via escapeHtml() before conversion; DOMPurify in toast.tsx is a second layer
Only toasts with markdownHtml set are affected; existing description path is unchanged
scrollbar-width: thin shows system scrollbar on Windows/Linux; on macOS it shows on hover — no layout impact
buildToastDescription is kept as-is (all 22 unit tests pass); only the call site changes

How To Verify

Typecheck packages/ui:  bunx tsgo --noEmit   — 0 errors
Typecheck packages/app: bunx tsgo -b         — 0 errors
Unit tests highlights:  bun test src/context/highlights — 22 pass, 0 fail
E2E release-notes-toast.spec.ts: verify <ul><li> rendering (needs Electron + updater simulation)

Checklist

Human review status is stated above as pending
Relates to user-reported issues (cramped layout, hidden scrollbar, plain-text rendering)
No unrelated refactors or file changes beyond stated scope
Existing buildToastDescription and its 22 unit tests are untouched
PR targets dev; title and commit use Conventional Commits in English

coderabbitai · 2026-05-11T03:55:48Z

Warning

Rate limit exceeded

@Astro-Han has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 11 minutes and 19 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: fe622d79-4c4c-408a-a6e0-c1510b431cde

📥 Commits

Reviewing files that changed from the base of the PR and between 5a787fc and be06b8e.

📒 Files selected for processing (4)

packages/app/e2e/release-notes/release-notes-toast.spec.ts
packages/app/src/context/highlights.tsx
packages/ui/src/components/toast.css
packages/ui/src/components/toast.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/i539-toast-markdown

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request implements markdown-to-HTML conversion for release notes in toasts, adding a new markdownHtml property, a parsing utility, and DOMPurify sanitization. Feedback highlights a logic error in the markdown parser that prevents correct list rendering when mixed with other text, suggests adding single-quote escaping to the escapeHtml function for better security, and notes that several CSS rules for headers and bold text are currently unused by the parser.

- Add markdownHtml option to ToastOptions for pre-converted HTML content - Render markdown bullet lists as <ul><li> in release notes toast - Show thin scrollbar (scrollbar-width: thin) instead of hidden - Fix gap: 2px -> 6px in toast-content for 4pt grid compliance - Remove pre-line whitespace override; markdown slot handles formatting - Update highlights.tsx to convert description to HTML before passing - Update E2E selectors from toast-description to toast-markdown slot

…/h3/h4

gemini-code-assist Bot reviewed May 11, 2026

View reviewed changes

Comment thread packages/app/src/context/highlights.tsx

Comment thread packages/app/src/context/highlights.tsx

Comment thread packages/ui/src/components/toast.css Outdated

Astro-Han added bug Something isn't working app Application behavior and product flows P2 Medium priority task Narrow execution, audit, spike, migration, tracking, or upstream follow-up work labels May 11, 2026

Astro-Han added 3 commits May 11, 2026 12:13

fix(app): handle mixed-line sections in buildToastMarkdownHtml

3672078

fix(ui): escape single quotes in escapeHtml; drop dead CSS for strong…

be06b8e

…/h3/h4

Astro-Han force-pushed the claude/i539-toast-markdown branch from ecdb8e1 to be06b8e Compare May 11, 2026 04:13

Astro-Han merged commit 6080683 into dev May 11, 2026
20 checks passed

Astro-Han deleted the claude/i539-toast-markdown branch May 11, 2026 04:17

Astro-Han mentioned this pull request May 11, 2026

[Task] Clean up release-gate E2E test debt from v2026.5.11 #529

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): render release notes toast with markdown and visible scroll#538

feat(ui): render release notes toast with markdown and visible scroll#538
Astro-Han merged 3 commits into
devfrom
claude/i539-toast-markdown

Astro-Han commented May 11, 2026

Uh oh!

coderabbitai Bot commented May 11, 2026 •

edited

Loading

Rate limit exceeded

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Astro-Han commented May 11, 2026

Summary

Why

Implementation

Human Review Status

Review Focus

Risk Notes

How To Verify

Checklist

Uh oh!

coderabbitai Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai Bot commented May 11, 2026 •

edited

Loading