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/pages/DeckDetailPage.tsx | 144 +++++++++---------------------------
 1 file changed, 35 insertions(+), 109 deletions(-)

(limited to 'src/client/pages/DeckDetailPage.tsx')

diff --git a/src/client/pages/DeckDetailPage.tsx b/src/client/pages/DeckDetailPage.tsx
index cb1e3fb..5a3c14e 100644
--- a/src/client/pages/DeckDetailPage.tsx
+++ b/src/client/pages/DeckDetailPage.tsx
@@ -1,3 +1,13 @@
+import {
+	faChevronLeft,
+	faCirclePlay,
+	faFile,
+	faPen,
+	faPlus,
+	faSpinner,
+	faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useCallback, useEffect, useState } from "react";
 import { Link, useParams } from "wouter";
 import { ApiClientError, apiClient } from "../api";
@@ -144,20 +154,11 @@ export function DeckDetailPage() {
 						href="/"
 						className="inline-flex items-center gap-2 text-muted hover:text-slate transition-colors text-sm"
 					>
-						<svg
+						<FontAwesomeIcon
+							icon={faChevronLeft}
 							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="M15 19l-7-7 7-7"
-							/>
-						</svg>
+						/>
 						Back to Decks
 					</Link>
 				</div>
@@ -168,26 +169,11 @@ export function DeckDetailPage() {
 				{/* 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>
 				)}
 
@@ -227,26 +213,11 @@ export function DeckDetailPage() {
 								href={`/decks/${deckId}/study`}
 								className="inline-flex items-center gap-2 bg-success hover:bg-success/90 text-white font-medium py-3 px-6 rounded-xl transition-all duration-200 active:scale-[0.98] shadow-sm hover:shadow-md"
 							>
-								<svg
+								<FontAwesomeIcon
+									icon={faCirclePlay}
 									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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-									/>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth={2}
-										d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-									/>
-								</svg>
+								/>
 								Study Now
 							</Link>
 						</div>
@@ -262,20 +233,11 @@ export function DeckDetailPage() {
 								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]"
 							>
-								<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>
+								/>
 								Add Card
 							</button>
 						</div>
@@ -284,20 +246,11 @@ export function DeckDetailPage() {
 						{cards.length === 0 && (
 							<div className="text-center py-12 bg-white rounded-xl border border-border/50">
 								<div className="w-14 h-14 mx-auto mb-4 bg-ivory rounded-xl flex items-center justify-center">
-									<svg
+									<FontAwesomeIcon
+										icon={faFile}
 										className="w-7 h-7 text-muted"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
 										aria-hidden="true"
-									>
-										<path
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											strokeWidth={1.5}
-											d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-										/>
-									</svg>
+									/>
 								</div>
 								<h3 className="font-display text-lg font-medium text-slate mb-2">
 									No cards yet
@@ -310,20 +263,11 @@ export function DeckDetailPage() {
 									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"
 								>
-									<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>
+									/>
 									Add Your First Card
 								</button>
 							</div>
@@ -386,20 +330,11 @@ export function DeckDetailPage() {
 													className="p-2 text-muted hover:text-slate hover:bg-ivory rounded-lg transition-colors"
 													title="Edit card"
 												>
-													<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"
@@ -407,20 +342,11 @@ export function DeckDetailPage() {
 													className="p-2 text-muted hover:text-error hover:bg-error/5 rounded-lg transition-colors"
 													title="Delete card"
 												>
-													<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>
-- 
cgit v1.2.3-70-g09d2