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, 27 insertions, 79 deletions

diff --git a/src/client/pages/HomePage.tsx b/src/client/pages/HomePage.tsx
index fcae971..b7b2c29 100644
--- a/src/client/pages/HomePage.tsx
+++ b/src/client/pages/HomePage.tsx
@@ -1,3 +1,11 @@
+import {
+	faBoxOpen,
+	faPen,
+	faPlus,
+	faSpinner,
+	faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useCallback, useEffect, useState } from "react";
 import { Link } from "wouter";
 import { ApiClientError, apiClient } from "../api";
@@ -95,20 +103,11 @@ export function HomePage() {
 						onClick={() => setIsCreateModalOpen(true)}
 						className="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 active:scale-[0.98] shadow-sm hover:shadow-md"
 					>
-						<svg
+						<FontAwesomeIcon
+							icon={faPlus}
 							className="w-5 h-5"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
 							aria-hidden="true"
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								strokeWidth={2}
-								d="M12 4v16m8-8H4"
-							/>
-						</svg>
+						/>
 						New Deck
 					</button>
 				</div>
@@ -116,26 +115,11 @@ export function HomePage() {
 				{/* Loading State */}
 				{isLoading && (
 					<div className="flex items-center justify-center py-12">
-						<svg
-							className="animate-spin h-8 w-8 text-primary"
-							viewBox="0 0 24 24"
+						<FontAwesomeIcon
+							icon={faSpinner}
+							className="h-8 w-8 text-primary animate-spin"
 							aria-hidden="true"
-						>
-							<circle
-								className="opacity-25"
-								cx="12"
-								cy="12"
-								r="10"
-								stroke="currentColor"
-								strokeWidth="4"
-								fill="none"
-							/>
-							<path
-								className="opacity-75"
-								fill="currentColor"
-								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-							/>
-						</svg>
+						/>
 					</div>
 				)}
 
@@ -160,20 +144,11 @@ export function HomePage() {
 				{!isLoading && !error && decks.length === 0 && (
 					<div className="text-center py-16 animate-fade-in">
 						<div className="w-16 h-16 mx-auto mb-4 bg-ivory rounded-2xl flex items-center justify-center">
-							<svg
+							<FontAwesomeIcon
+								icon={faBoxOpen}
 								className="w-8 h-8 text-muted"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
 								aria-hidden="true"
-							>
-								<path
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									strokeWidth={1.5}
-									d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-								/>
-							</svg>
+							/>
 						</div>
 						<h3 className="font-display text-lg font-medium text-slate mb-2">
 							No decks yet
@@ -186,20 +161,11 @@ export function HomePage() {
 							onClick={() => setIsCreateModalOpen(true)}
 							className="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-2.5 px-5 rounded-lg transition-all duration-200"
 						>
-							<svg
+							<FontAwesomeIcon
+								icon={faPlus}
 								className="w-5 h-5"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
 								aria-hidden="true"
-							>
-								<path
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									strokeWidth={2}
-									d="M12 4v16m8-8H4"
-								/>
-							</svg>
+							/>
 							Create Your First Deck
 						</button>
 					</div>
@@ -237,20 +203,11 @@ export function HomePage() {
 											className="p-2 text-muted hover:text-slate hover:bg-ivory rounded-lg transition-colors"
 											title="Edit deck"
 										>
-											<svg
+											<FontAwesomeIcon
+												icon={faPen}
 												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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-												/>
-											</svg>
+											/>
 										</button>
 										<button
 											type="button"
@@ -258,20 +215,11 @@ export function HomePage() {
 											className="p-2 text-muted hover:text-error hover:bg-error/5 rounded-lg transition-colors"
 											title="Delete deck"
 										>
-											<svg
+											<FontAwesomeIcon
+												icon={faTrash}
 												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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-												/>
-											</svg>
+											/>
 										</button>
 									</div>
 								</div>