Inline sync status UI

[Joel-Joseph-George]

Context

• Part of the mobile sync epic: Mobile API integration & initial data sync #14
• Depends on: Sync trigger + MMKV state #17

Background

Show sync state inline on the home screen using values already stored
in MMKV. No new API calls or SQLite reads needed — purely UI.

UI spec

A single row sits between the "fluent" header and the Projects button.
It shows the current sync state on the left and a ↻ tap target on the right.
The row changes appearance based on state — no separate components needed.

States

Normal

• Background: default surface
• Left: "Last synced: X mins ago" in muted text
• Right: ↻ in muted text

Syncing

• Background: blue tint (#e6f1fb, border #b5d4f4)
• Left: "Syncing..." in blue
• Right: ⟳ in blue

Never synced

• Background: default surface
• Left: "Never synced" in muted text
• Right: ↻ in muted text

Error

• Background: red tint (#fcebeb, border #f7c1c1)
• Left: "Sync failed: " in red
• Right: ↻ in red

Tasks

• Add the sync row between the header and Projects button
• Read last_synced_at from MMKV and compute relative time
  e.g. "5 mins ago", "2 hours ago"
• Show "Never synced" if last_synced_at is not set
• Show "Syncing..." while sync is in progress
• Check sync_error_<step> keys in MMKV — if any exist,
  show the error state with the step name
• Tapping ↻ triggers the sync sequence (delegates to #XX Sync trigger)

Acceptance criteria

• All 4 states render correctly
• Row sits between header and Projects button
• Tapping ↻ in any state triggers sync
• Error state shows which step failed, not a generic message
• No global error toast is shown anywhere

[Joel-Joseph-George]

This is not the accurate mockup , this is just to get the idea of how the sync button will be placed and how its different states will be .

[chadw-eten]

@Joel-Joseph-George This looks good to me for now I would not spend too much time on it though. I don't think we are planning to show that detailed of sync information for the MVP.