feat(frontend): show status indicator icon

5 files changed, 104 insertions, 6 deletions

diff --git a/frontend/app/components/ExecStatusIndicatorIcon.tsx b/frontend/app/components/ExecStatusIndicatorIcon.tsx
new file mode 100644
index 0000000..a76e957
--- /dev/null
+++ b/frontend/app/components/ExecStatusIndicatorIcon.tsx
@@ -0,0 +1,45 @@
+import {
+	faBan,
+	faCircleCheck,
+	faCircleExclamation,
+	faRotate,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+	status: string;
+};
+
+export default function ExecStatusIndicatorIcon({ status }: Props) {
+	switch (status) {
+		case "running":
+			return (
+				<FontAwesomeIcon
+					icon={faRotate}
+					spin
+					fixedWidth
+					className="text-gray-700"
+				/>
+			);
+		case "success":
+			return (
+				<FontAwesomeIcon
+					icon={faCircleCheck}
+					fixedWidth
+					className="text-green-500"
+				/>
+			);
+		case "canceled":
+			return (
+				<FontAwesomeIcon icon={faBan} fixedWidth className="text-gray-400" />
+			);
+		default:
+			return (
+				<FontAwesomeIcon
+					icon={faCircleExclamation}
+					fixedWidth
+					className="text-red-500"
+				/>
+			);
+	}
+}
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index 992ce7a..53d5bce 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -1,3 +1,5 @@
+import ExecStatusIndicatorIcon from "../ExecStatusIndicatorIcon";
+
 type Props = {
 	problem: string;
 	playerInfoA: PlayerInfo;
@@ -128,7 +130,8 @@ export default function GolfWatchAppGaming({
 									<li key={idx}>
 										<div>
 											<div>
-												{result.status} {result.label}
+												<ExecStatusIndicatorIcon status={result.status} />{" "}
+												{result.label}
 											</div>
 											<div>
 												{result.stdout}
@@ -160,7 +163,8 @@ export default function GolfWatchAppGaming({
 									<li key={idx}>
 										<div>
 											<div>
-												{result.status} {result.label}
+												<ExecStatusIndicatorIcon status={result.status} />{" "}
+												{result.label}
 											</div>
 											<div>
 												{result.stdout}
diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx
index 2fcf1f2..25b9c81 100644
--- a/frontend/app/routes/_index.tsx
+++ b/frontend/app/routes/_index.tsx
@@ -1,7 +1,11 @@
+import { config } from "@fortawesome/fontawesome-svg-core";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
+import "@fortawesome/fontawesome-svg-core/styles.css";
 import { ensureUserNotLoggedIn } from "../.server/auth";
 
+config.autoAddCss = false;
+
 export const meta: MetaFunction = () => [
 	{ title: "iOSDC Japan 2024 Albatross.swift" },
 ];
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d5c12fe..b706788 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -6,6 +6,9 @@
 		"": {
 			"name": "iosdc-japan-2024-albatross-frontend",
 			"dependencies": {
+				"@fortawesome/fontawesome-svg-core": "^6.6.0",
+				"@fortawesome/free-solid-svg-icons": "^6.6.0",
+				"@fortawesome/react-fontawesome": "^0.2.2",
 				"@remix-run/node": "^2.10.3",
 				"@remix-run/react": "^2.10.3",
 				"@remix-run/serve": "^2.10.3",
@@ -1306,6 +1309,48 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@fortawesome/fontawesome-common-types": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+			"integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/fontawesome-svg-core": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+			"integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.6.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-solid-svg-icons": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+			"integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.6.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/react-fontawesome": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+			"integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+			"dependencies": {
+				"prop-types": "^15.8.1"
+			},
+			"peerDependencies": {
+				"@fortawesome/fontawesome-svg-core": "~1 || ~6",
+				"react": ">=16.3"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.14",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -8087,7 +8132,6 @@
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
 			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -8953,7 +8997,6 @@
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
 			"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-			"dev": true,
 			"dependencies": {
 				"loose-envify": "^1.4.0",
 				"object-assign": "^4.1.1",
@@ -9102,8 +9145,7 @@
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-			"dev": true
+			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
 		},
 		"node_modules/react-refresh": {
 			"version": "0.14.2",
diff --git a/frontend/package.json b/frontend/package.json
index 44af089..4c630a0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,9 @@
 		"start": "remix-serve ./build/server/index.js"
 	},
 	"dependencies": {
+		"@fortawesome/fontawesome-svg-core": "^6.6.0",
+		"@fortawesome/free-solid-svg-icons": "^6.6.0",
+		"@fortawesome/react-fontawesome": "^0.2.2",
 		"@remix-run/node": "^2.10.3",
 		"@remix-run/react": "^2.10.3",
 		"@remix-run/serve": "^2.10.3",