🏠 Overview › 🧩 Components ›🧩 Sync Status Widget

Sync Status Widget

Component Detail

User Interface medium complexity mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

Visual indicator that surfaces the current synchronization state to the user. Displays queue depth, last successful sync timestamp, and any error conditions encountered during reconciliation.

Feature: Background Sync

sync-status-widget

Sources & reasoning

Second canonical feature of the Offline & Sync area per §8. The Core/Shared architecture block explicitly describes mutation outbox, retry/backoff, ID mapping, and conflict resolver - all responsibilities of this feature. MVP because offline support is unsafe without reconciliation.

  • Offline-first persistence (Drift + SQLCipher encrypted local DB, mutation outbox, sync queue with retry/backoff, ID mapping for offline-created entities, conflict resolver)
  • Optimistic mutations with automatic rollback on failure (contact edits and paginated list updates)
  • offline-sync | Offline & Sync | Offline Data Support, Background Sync

Responsibilities

  • Render current sync status (idle, syncing, error, offline)
  • Display pending mutation count from the outbox
  • Show last successful sync timestamp in human-readable form
  • Surface error states with actionable retry affordance
  • Subscribe to sync engine events for real-time updates

Interfaces

render(): ReactNode
onRetryPressed(): void
subscribeToSyncEvents(handler): Unsubscribe