From 0c042ac89fc0822fcbe09c48702857faa5494ae1 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 7 Dec 2025 23:34:03 +0900
Subject: feat(client): add sync status indicator component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add SyncStatusIndicator component to display current sync state in the
UI header. The component shows online/offline status, syncing progress,
pending changes count, and sync errors.

- Create SyncProvider context to wrap SyncManager for React components
- Add SyncStatusIndicator component with visual status indicators
- Integrate indicator into HomePage header
- Add comprehensive tests for SyncStatusIndicator and SyncProvider
- Update existing tests to include SyncProvider wrapper

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/client/main.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/client/main.tsx')

diff --git a/src/client/main.tsx b/src/client/main.tsx
index 5a12f68..bff0889 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
-import { AuthProvider } from "./stores";
+import { AuthProvider, SyncProvider } from "./stores";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) {
@@ -11,7 +11,9 @@ if (!rootElement) {
 createRoot(rootElement).render(
 	<StrictMode>
 		<AuthProvider>
-			<App />
+			<SyncProvider>
+				<App />
+			</SyncProvider>
 		</AuthProvider>
 	</StrictMode>,
 );
-- 
cgit v1.2.3-70-g09d2

