refactor(client): replace inline SVGs with Font Awesome icons

Migrate all 28 inline SVG icons across 8 components to use Font Awesome
React components for better maintainability and consistency.

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

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

1 files changed, 8 insertions, 30 deletions

diff --git a/src/client/components/SyncButton.tsx b/src/client/components/SyncButton.tsx
index 82a6c68..1c214ad 100644
--- a/src/client/components/SyncButton.tsx
+++ b/src/client/components/SyncButton.tsx
@@ -1,3 +1,5 @@
+import { faArrowsRotate, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSync } from "../stores";
 
 export function SyncButton() {
@@ -24,44 +26,20 @@ export function SyncButton() {
 		>
 			{isSyncing ? (
 				<>
-					<svg
+					<FontAwesomeIcon
+						icon={faSpinner}
 						className="w-4 h-4 animate-spin"
-						fill="none"
-						viewBox="0 0 24 24"
 						aria-hidden="true"
-					>
-						<circle
-							className="opacity-25"
-							cx="12"
-							cy="12"
-							r="10"
-							stroke="currentColor"
-							strokeWidth="4"
-						/>
-						<path
-							className="opacity-75"
-							fill="currentColor"
-							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-						/>
-					</svg>
+					/>
 					<span>Syncing...</span>
 				</>
 			) : (
 				<>
-					<svg
+					<FontAwesomeIcon
+						icon={faArrowsRotate}
 						className="w-4 h-4"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
 						aria-hidden="true"
-					>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							strokeWidth={2}
-							d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-						/>
-					</svg>
+					/>
 					<span>Sync</span>
 				</>
 			)}