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.test.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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

diff --git a/src/client/pages/HomePage.test.tsx b/src/client/pages/HomePage.test.tsx
index 4dd4a81..f75f88d 100644
--- a/src/client/pages/HomePage.test.tsx
+++ b/src/client/pages/HomePage.test.tsx
@@ -1,13 +1,14 @@
 /**
  * @vitest-environment jsdom
  */
+import "fake-indexeddb/auto";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Router } from "wouter";
 import { memoryLocation } from "wouter/memory-location";
 import { apiClient } from "../api/client";
-import { AuthProvider } from "../stores";
+import { AuthProvider, SyncProvider } from "../stores";
 import { HomePage } from "./HomePage";
 
 vi.mock("../api/client", () => ({
@@ -89,7 +90,9 @@ function renderWithProviders(path = "/") {
 	return render(
 		<Router hook={hook}>
 			<AuthProvider>
-				<HomePage />
+				<SyncProvider>
+					<HomePage />
+				</SyncProvider>
 			</AuthProvider>
 		</Router>,
 	);
-- 
cgit v1.2.3-70-g09d2

