From 18fbdeca372996e37a58cf79b4d07b8c6afd7e75 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 8 Dec 2025 00:34:57 +0900
Subject: refactor(client): replace inline SVGs with Font Awesome icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/client/components/SyncStatusIndicator.tsx | 77 ++++++++-------------------
 1 file changed, 23 insertions(+), 54 deletions(-)

(limited to 'src/client/components/SyncStatusIndicator.tsx')

diff --git a/src/client/components/SyncStatusIndicator.tsx b/src/client/components/SyncStatusIndicator.tsx
index 0f555ca..dd1a77d 100644
--- a/src/client/components/SyncStatusIndicator.tsx
+++ b/src/client/components/SyncStatusIndicator.tsx
@@ -1,3 +1,11 @@
+import {
+	faCircle,
+	faCircleCheck,
+	faCircleXmark,
+	faClock,
+	faSpinner,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSync } from "../stores";
 import { SyncStatus } from "../sync";
 
@@ -39,85 +47,46 @@ export function SyncStatusIndicator() {
 	const getStatusIcon = () => {
 		if (!isOnline) {
 			return (
-				<svg
+				<FontAwesomeIcon
+					icon={faCircle}
 					className="w-3.5 h-3.5"
-					fill="currentColor"
-					viewBox="0 0 20 20"
 					aria-hidden="true"
-				>
-					<circle cx="10" cy="10" r="4" />
-				</svg>
+				/>
 			);
 		}
 		if (isSyncing) {
 			return (
-				<svg
+				<FontAwesomeIcon
+					icon={faSpinner}
 					className="w-3.5 h-3.5 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>
+				/>
 			);
 		}
 		if (status === SyncStatus.Error) {
 			return (
-				<svg
+				<FontAwesomeIcon
+					icon={faCircleXmark}
 					className="w-3.5 h-3.5"
-					fill="currentColor"
-					viewBox="0 0 20 20"
 					aria-hidden="true"
-				>
-					<path
-						fillRule="evenodd"
-						d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-						clipRule="evenodd"
-					/>
-				</svg>
+				/>
 			);
 		}
 		if (pendingCount > 0) {
 			return (
-				<svg
+				<FontAwesomeIcon
+					icon={faClock}
 					className="w-3.5 h-3.5"
-					fill="currentColor"
-					viewBox="0 0 20 20"
 					aria-hidden="true"
-				>
-					<path
-						fillRule="evenodd"
-						d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
-						clipRule="evenodd"
-					/>
-				</svg>
+				/>
 			);
 		}
 		return (
-			<svg
+			<FontAwesomeIcon
+				icon={faCircleCheck}
 				className="w-3.5 h-3.5"
-				fill="currentColor"
-				viewBox="0 0 20 20"
 				aria-hidden="true"
-			>
-				<path
-					fillRule="evenodd"
-					d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-					clipRule="evenodd"
-				/>
-			</svg>
+			/>
 		);
 	};
 
-- 
cgit v1.2.3-70-g09d2