feat(client): add manual sync button

Add SyncButton component that allows users to manually trigger
data synchronization. The button is disabled when offline or
when sync is already in progress.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 39 insertions, 0 deletions

diff --git a/src/client/components/SyncButton.tsx b/src/client/components/SyncButton.tsx
new file mode 100644
index 0000000..1ebfa2e
--- /dev/null
+++ b/src/client/components/SyncButton.tsx
@@ -0,0 +1,39 @@
+import { useSync } from "../stores";
+
+export function SyncButton() {
+	const { isOnline, isSyncing, sync } = useSync();
+
+	const handleSync = async () => {
+		await sync();
+	};
+
+	const isDisabled = !isOnline || isSyncing;
+
+	const getButtonText = (): string => {
+		if (isSyncing) {
+			return "Syncing...";
+		}
+		return "Sync";
+	};
+
+	return (
+		<button
+			type="button"
+			data-testid="sync-button"
+			onClick={handleSync}
+			disabled={isDisabled}
+			title={!isOnline ? "Cannot sync while offline" : undefined}
+			style={{
+				padding: "0.25rem 0.5rem",
+				borderRadius: "4px",
+				border: "1px solid #dee2e6",
+				backgroundColor: isDisabled ? "#e9ecef" : "#007bff",
+				color: isDisabled ? "#6c757d" : "white",
+				cursor: isDisabled ? "not-allowed" : "pointer",
+				fontSize: "0.875rem",
+			}}
+		>
+			{getButtonText()}
+		</button>
+	);
+}