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/pages/HomePage.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'src/client/pages/HomePage.tsx')

diff --git a/src/client/pages/HomePage.tsx b/src/client/pages/HomePage.tsx
index fb13422..debc935 100644
--- a/src/client/pages/HomePage.tsx
+++ b/src/client/pages/HomePage.tsx
@@ -4,6 +4,7 @@ import { ApiClientError, apiClient } from "../api";
 import { CreateDeckModal } from "../components/CreateDeckModal";
 import { DeleteDeckModal } from "../components/DeleteDeckModal";
 import { EditDeckModal } from "../components/EditDeckModal";
+import { SyncStatusIndicator } from "../components/SyncStatusIndicator";
 import { useAuth } from "../stores";
 
 interface Deck {
@@ -70,9 +71,12 @@ export function HomePage() {
 				}}
 			>
 				<h1>Kioku</h1>
-				<button type="button" onClick={logout}>
-					Logout
-				</button>
+				<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+					<SyncStatusIndicator />
+					<button type="button" onClick={logout}>
+						Logout
+					</button>
+				</div>
 			</header>
 
 			<main>
-- 
cgit v1.2.3-70-g09d2