feat: status icons

package.json

@@ -7,6 +7,7 @@
     "format": "wp-scripts format"
   },
   "dependencies": {
+    "@wordpress/icons": "^9.46.0",
     "@wordpress/scripts": "^27.6.0",
     "ts-dom-utils": "^2.2.0"
   },

src/components/BulkGenerateModal.tsx

@@ -88,7 +88,9 @@ export default function BulkGenerateModal({
         .then((alt) => {
           setAltGenerationMap(
             (prevMap) =>
-              new Map(prevMap.set(id, { ...details, alt, status: "done" })),
+              new Map(
+                prevMap.set(id, { ...details, alt, status: "generated" }),
+              ),
           );
         })
         .catch((error) => {

src/components/BulkGenerationStatus.tsx

@@ -1,41 +1,54 @@
 import { _x, sprintf } from "@wordpress/i18n";
-import { Flex, Spinner } from "@wordpress/components";
+import { Flex, Icon, Spinner } from "@wordpress/components";
+import { check, next, warning } from "@wordpress/icons";
 import type { AltGenerationDetails } from "../types";
 
 export default function BulkGenerationStatus({
   details,
 }: BulkGenerationStatusProps) {
   const { status, message } = details;
 
-  switch (status) {
-    case "generating":
-      return (
-        <Flex justify="start">
-          {/*@ts-ignore - wrong Spinner prop types*/}
+  return (
+    <Flex justify="start">
+      {status === "generating" ? (
+        <>
+          {/* @ts-ignore - wrong Spinner prop types */}
           <Spinner />
           {_x(
             "Generating...",
             "Generation status",
             "alt-text-generator-gpt-vision",
           )}
-        </Flex>
-      );
-    case "done":
-      return _x("Done", "Generation status", "alt-text-generator-gpt-vision");
-    case "skipped":
-      return _x(
-        "Skipped",
-        "Generation status",
-        "alt-text-generator-gpt-vision",
-      );
-    case "error":
-      return sprintf(
-        _x("Error: %s", "Generation status", "alt-text-generator-gpt-vision"),
-        message,
-      );
-    default:
-      return "";
-  }
+        </>
+      ) : status === "generated" ? (
+        <>
+          <Icon icon={check} />
+          {_x(
+            "Generated",
+            "Generation status",
+            "alt-text-generator-gpt-vision",
+          )}
+        </>
+      ) : status === "skipped" ? (
+        <>
+          <Icon icon={next} />
+          {_x("Skipped", "Generation status", "alt-text-generator-gpt-vision")}
+        </>
+      ) : status === "error" ? (
+        <>
+          <Icon icon={warning} />
+          {sprintf(
+            _x(
+              "Error: %s",
+              "Generation status",
+              "alt-text-generator-gpt-vision",
+            ),
+            message,
+          )}
+        </>
+      ) : null}
+    </Flex>
+  );
 }
 
 export type BulkGenerationStatusProps = {

src/types/index.ts

@@ -1,7 +1,7 @@
 import type { Attachment } from "@wordpress/core-data";
 
 export interface AltGenerationDetails {
-  status: "" | "generating" | "done" | "skipped" | "error";
+  status: "" | "generating" | "generated" | "skipped" | "error";
   message?: string;
   alt: Attachment<"view">["alt_text"];
   title?: Attachment<"view">["title"]["rendered"];