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/sync/manager.test.ts | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) (limited to 'src/client/sync/manager.test.ts') diff --git a/src/client/sync/manager.test.ts b/src/client/sync/manager.test.ts index 1e53bd4..96fb97d 100644 --- a/src/client/sync/manager.test.ts +++ b/src/client/sync/manager.test.ts @@ -8,8 +8,8 @@ import { describe, expect, it, - vi, type Mock, + vi, } from "vitest"; import { db } from "../db/index"; import { localDeckRepository } from "../db/repositories"; @@ -42,9 +42,8 @@ describe("SyncManager", () => { /** * Create a pending deck in the database that will need to be synced */ - async function createPendingDeck(id = "deck-1") { + async function createPendingDeck() { return localDeckRepository.create({ - id, userId: "user-1", name: "Test Deck", description: null, @@ -169,12 +168,10 @@ describe("SyncManager", () => { manager.start(); // Should only be called once for each event type - expect( - addSpy.mock.calls.filter((c) => c[0] === "online").length, - ).toBe(1); - expect( - addSpy.mock.calls.filter((c) => c[0] === "offline").length, - ).toBe(1); + expect(addSpy.mock.calls.filter((c) => c[0] === "online").length).toBe(1); + expect(addSpy.mock.calls.filter((c) => c[0] === "offline").length).toBe( + 1, + ); manager.stop(); addSpy.mockRestore(); @@ -354,20 +351,20 @@ describe("SyncManager", () => { it("should resolve conflicts when present", async () => { // Create pending data so pushToServer will be called - await createPendingDeck(); + const deck = await createPendingDeck(); const pushResult: SyncPushResult = { - decks: [{ id: "deck-1", syncVersion: 1 }], + decks: [{ id: deck.id, syncVersion: 1 }], cards: [], reviewLogs: [], - conflicts: { decks: ["deck-1"], cards: [] }, + conflicts: { decks: [deck.id], cards: [] }, }; pushToServer.mockResolvedValue(pushResult); const pullResult: SyncPullResult = { decks: [ { - id: "deck-1", + id: deck.id, userId: "user-1", name: "Server Deck", description: null, -- cgit v1.2.3-70-g09d2