UI/UX: Redesign the AsyncOperationsPanel and AsyncSubmissionStatus contract-progress UI

[Baskarayelu]

Description

Both the Split and Bills pages render AsyncOperationsPanel and AsyncSubmissionStatus to show contract build → wallet signature → submit/confirm progress, using stacked queue items with active/queued/complete statuses. The current presentation is verbose and copy-heavy, and the stacked rail competes with the primary form for attention. We need a redesign that keeps users informed about long-running Stellar contract operations without dominating the screen, with crisp status semantics and a clear collapse/expand behavior. The active operation should be the most prominent item.

Requirements and context

• UI/UX scope only.
• Reference components/AsyncOperationsPanel.tsx, components/AsyncSubmissionStatus.tsx, app/split/page.tsx, app/bills/page.tsx.
• Define active/queued/complete/failed states with status tokens.
• Specify desktop top-right rail vs inline mobile placement (per existing copy).
• Design collapse/expand to reduce screen dominance.

Suggested execution

• Branch: uiux/async-operations-panel-redesign
• Redline the panel and per-item status card states.
• Document placement rules for desktop vs mobile.
• Reference docs/async-contract-submissions-handoff.md for prior decisions.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: status updates announced via live region, focus not stolen.

Example commit message

feat(uiux): redesign async contract operations progress ui

Guidelines

• Document status semantics and placement rules.
• Keep card visuals consistent across split and bills.
• Timeframe: 96 hours