Repository navigation
feat(offline): show queued drafts badge (#795) - #848
Merged
Jaydbrown merged 5 commits intoOct 22, 2026
Merged
Conversation
…otocol#795) Pending offline transactions sit in the queue with no count the user can trust. These tests pin the badge: the 'N drafts queued offline' label (singular for one), nothing rendered for an empty queue, and live updates when the queue changes in this tab or in another tab. They fail on main, where the label helper does not exist yet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RcnHnXiw2CqnpbuFR5q6VA
Users need to see that their offline drafts are kept and waiting for the
connection to come back. queuedDraftsLabel() gives the badge its wording
('1 draft queued offline', '3 drafts queued offline') in one tested place,
and the component now also refreshes the count on storage events for the
queue key, because a draft queued or flushed in another tab never fires
this tab's offline-transactions-changed event.
Closes conduit-protocol#795
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RcnHnXiw2CqnpbuFR5q6VA
The floating notice said 'N transactions queued for retry', which reads as an error rather than as reassurance that offline drafts are safe. It now shows the count on its own followed by 'drafts queued offline', using the label from queuedDraftsLabel(); the reconnect retry message is unchanged. Layout only: the black-and-white styling and accessible name follow in the next commit. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RcnHnXiw2CqnpbuFR5q6VA
The notice used blue utility classes, which the design system rules out (the app is black and white only). The badge is now a black pill with the count inside a bordered white box, inverted in dark mode, using tabular numbers so the width stays steady as the count changes. Screen readers get the whole sentence once through aria-label on the status region instead of the count and the words as separate fragments. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RcnHnXiw2CqnpbuFR5q6VA
Records the queued drafts badge under Unreleased so the next release notes mention it. next lint reports no warnings or errors for the changed files, and tsc reports no errors in them (the only tsc errors on this branch are the existing ones in app/dashboard/page.tsx, which main has too). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RcnHnXiw2CqnpbuFR5q6VA
|
@aratass Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Jaydbrown
approved these changes
Oct 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Shows how many offline transactions are waiting to be sent. The floating notice now reads "N drafts queued offline" ("1 draft queued offline" for one) with the count in a pill, and the count stays in sync across tabs.
Type of change
Related issue
Closes #795
Changes
lib/offline-transactions.tsqueuedDraftsLabel(count)(singular or plural; negative or NaN counts read as 0) and exportedOFFLINE_QUEUE_STORAGE_KEYcomponents/OfflineTransactionSync.tsxstorageevents for the queue key, so a draft queued or flushed in another tab updates this tab too (the existingoffline-transactions-changedevent only fires in the same tab). Black and white classes instead of the old blue ones, inverted in dark mode. The status region'saria-labelreads the whole sentence once. The reconnect retry message is unchanged.lib/__tests__/offline-transactions-badge.test.tscomponents/__tests__/OfflineTransactionSync.test.tsxqueuedTransactions; without it the 3 existing tests in this file failed on main. All 8 pass now.CHANGELOG.md[Unreleased], AddedChecklist
npm run typecheck— no errors in the changed files; the 7 errors left are inapp/dashboard/page.tsxand are the same on mainnpm run lint— no warnings in the changed filesnpm test— no new failures: main has 26 failing test files, this branch has 25 (OfflineTransactionSync.test.tsxpasses now); the others fail the same way on main, for example the dashboard tests that hit the syntax error inapp/dashboard/page.tsxaround line 681npm run build— not run, because of the existing errors inapp/dashboard/page.tsxalert()) (no new error paths)'use client'added only where genuinely needed (none added; the component already had it)CHANGELOG.mdupdated under[Unreleased]Screenshots
The badge rendered on its own with the repo's Tailwind config (wallet mocked; 1 and 3 queued drafts; light and dark). Before is main, after is this branch.
Notes for reviewers
Closes #795), UI, style, chore. Each body says why.🤖 Generated with Claude Code
https://claude.ai/code/session_01RcnHnXiw2CqnpbuFR5q6VA