Build Sync Page Core Layout and Upload Progress

[chadw-eten]

When a translator reconnects after working offline, the Sync page is the primary surface showing whether uploads are running, how far along they are, and what state sync is in. It is reached exclusively by tapping the cloud sync status icon; there is no other entry point. This ticket builds the page scaffolding, the animated sync indicator, the upload progress bar, and the four states the page can present: syncing, paused, upload complete, and all complete. Action controls (Pause, Cancel, Sync Now) and the cellular toggle are covered in a follow-on ticket; the download queue section is already drafted separately.

Functional Requirements

Page Structure

• Display the Sync page as a full-screen destination.
• Display "Sync" as the page title.
• Include a back button (li:chevron-left) in the top left.

Sync Status Indicator

• Display a large centered icon as the primary visual element below the page title.
• Use the same icon composition as the navigation bar syncing states in Build Cloud Sync Status Icon #38.
• When sync is active, animate the li:refresh-cw arrows with a continuous clockwise rotation.
• When sync is not active (paused or complete), display the icon static.

Upload Progress Bar

• Display a horizontal progress bar below the sync status indicator.
• Show an "Uploading" label above the bar.
• Show a chapter count beneath the bar (e.g., "12 of 34 chapters uploaded").
• Fill the bar left to right as chapter uploads complete; update in real time.

Syncing State

• Show the sync indicator icon in the top pane with animated rotating arrows.
• Show the upload progress bar with the current chapter count.

Paused State

• Show the sync indicator with arrows static in the top pane.
• Show the upload progress bar frozen at the current progress level.
• Display a "Paused" label below the progress bar.
• Display the next auto-retry time below the paused label (e.g., "Resumes automatically in 23 hours").

Upload Complete State

• Display li:cloud-check (static) as the sync indicator.
• Replace the progress bar and chapter count with an "Upload complete" label.

All Complete State

• Display when all uploads are done and no downloads are pending.
• Display li:cloud-check (static) as the sync indicator.
• Display an "All synced" label in place of the progress bar.

Note: Pause, Cancel, and Sync Now buttons are covered in a follow-on ticket (#151 ). Reserve layout space between the progress bar and the bottom of the screen for those controls.

Note: The download queue section (already drafted separately) renders below the action controls. The "Upload complete" state may appear while downloads are still running — the page should support both sections being visible simultaneously.

Only uploads are complete; Downloads still active

Upload AND Downloads are complete