From 0c042ac89fc0822fcbe09c48702857faa5494ae1 Mon Sep 17 00:00:00 2001 From: nsfisis 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 --- src/client/App.test.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'src/client/App.test.tsx') diff --git a/src/client/App.test.tsx b/src/client/App.test.tsx index c11eb88..8359e67 100644 --- a/src/client/App.test.tsx +++ b/src/client/App.test.tsx @@ -1,13 +1,14 @@ /** * @vitest-environment jsdom */ +import "fake-indexeddb/auto"; import { cleanup, render, screen } from "@testing-library/react"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { Router } from "wouter"; import { memoryLocation } from "wouter/memory-location"; import { App } from "./App"; import { apiClient } from "./api/client"; -import { AuthProvider } from "./stores"; +import { AuthProvider, SyncProvider } from "./stores"; vi.mock("./api/client", () => ({ apiClient: { @@ -53,7 +54,9 @@ function renderWithRouter(path: string) { return render( - + + + , ); -- cgit v1.2.3-70-g09d2