[iduhtheman]

Summary

Batches four assigned issues: date grouping, status filtering, and large-list rendering in ActivityTimeline, mobile and accessibility fixes in TxRow, prefers-reduced-motion support plus a new SkeletonTable primitive, and a flex-collapse fix plus decorative role support in Separator.

#960: ActivityTimeline date grouping, status filter, and virtualization

Date grouping by calendar day already existed server-side via TimelineGroup, but headers always showed a full weekday/month/day label. Added Today/Yesterday labels for the two most recent groups, made the date headers sticky so the current group's date stays visible while scrolling, and added All/Succeeded/Unsuccessful status filter chips (client-side, since the current page's transactions are already loaded). For large lists, used content-visibility: auto on each row rather than adding a virtualization dependency, switching to visible on the expanded row so its operation details stay rendered and measurable.

Also hardened loadTimeline against a stale response landing after a newer request or an unmount, matching the fetchId-guard pattern already used in TransactionHistory. This surfaced while adding tests: the status filter chips' "Succeeded"/"Unsuccessful" labels needed to be visibly distinct from the row-level "Success"/"Failed" badge text, since an earlier attempt at "Success"/"Failed" chip labels collided with existing getByText("Success") assertions elsewhere in the suite and intermittently let a test proceed before the real transaction data had loaded.

#961: TxRow mobile truncation, copy-hash tooltip, icon accessibility

Added a truncate class to the memo span so a long memo clips instead of pushing the timestamp and fee columns off-screen on narrow viewports. Added a copy-hash control with an accessible name and a "Copy transaction hash" tooltip, matching the pattern already used in ActivityTimeline's GroupedTxRow. It renders with role="button" on a span rather than a native button, since the row itself can be an <a> linking to the block explorer, and a button nested inside an a is invalid HTML. Marked the status icon aria-hidden since the adjacent Success/Failed badge already announces the same status as real, readable text.

#962: Skeleton reduced-motion support and SkeletonTable

Neither Tailwind's animate-pulse nor the custom skeleton-shimmer keyframe respected prefers-reduced-motion on their own. Gated both on motion-safe: with a static motion-reduce: fallback, matching the convention already established in WalletStatusBadge. Added a SkeletonTable primitive (header row + N body rows of M cell placeholders, grid-aligned) for table loading states, exported alongside the other pre-composed skeletons.

Left the surface color tokens unchanged: this app's dark and light themes already use the same semantic --color-surface/--color-surface-2 pair, and computing their actual contrast ratio shows dark mode (approximately 1.08:1) is not meaningfully worse than light mode (also approximately 1.08:1). There wasn't a real dark-mode-specific contrast gap to fix, and changing the palette without one risked a visual regression.

#963: Separator flex collapse and decorative role

Added self-stretch min-h-full to the vertical separator so it keeps its height inside a flex container using align-items: stretch, where an unconstrained h-full alone collapses to 0px. Added a decorative prop that switches role="separator"/aria-orientation to role="none"/aria-hidden="true" for purely visual separators, so they stop being announced as a separator landmark on every render.

Verification

• npm run lint clean
• npm run typecheck clean
• npm run build succeeds
• npm run test:exports clean
• npm test: 1953 passed, 1 pre-existing failure unrelated to this change (BudgetScreen.test.tsx, confirmed failing identically on a clean checkout of upstream main before any of these commits)
• npm run size: ES module and CommonJS bundles both within the configured gzip budget
• The ActivityTimeline.test.tsx suite was run 15+ times after each change to confirm no flakiness remains

closes #960
closes #961
closes #962
closes #963

[drips-wave]

@iduhtheman 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! 🚀

Learn more about application limits