Add steps for face step indicator (#17719)

web/public/locales/en/views/faceLibrary.json

@@ -21,6 +21,11 @@
     "new": "Create New Face",
     "nextSteps": "To build a strong foundation:<li>Use the Train tab to select and train on images for each detected person.</li><li>Focus on straight-on images for best results; avoid training images that capture faces at an angle.</li></ul>"
   },
+  "steps": {
+    "faceName": "Enter Face Name",
+    "uploadFace": "Upload Face Image",
+    "nextSteps": "Next Steps"
+  },
   "train": {
     "title": "Train",
     "aria": "Select train"

web/src/components/indicators/StepIndicator.tsx

@@ -1,13 +1,18 @@
 import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
 
 type StepIndicatorProps = {
   steps: string[];
   currentStep: number;
+  translationNameSpace: string;
 };
 export default function StepIndicator({
   steps,
   currentStep,
+  translationNameSpace,
 }: StepIndicatorProps) {
+  const { t } = useTranslation(translationNameSpace);
+
   return (
     <div className="flex flex-row justify-evenly">
       {steps.map((name, idx) => (
@@ -20,7 +25,7 @@ export default function StepIndicator({
           >
             {idx + 1}
           </div>
-          <div className="w-24 text-center md:w-24">{name}</div>
+          <div className="w-24 text-center md:w-24">{t(name)}</div>
         </div>
       ))}
     </div>

web/src/components/overlay/detail/FaceCreateWizardDialog.tsx

@@ -25,7 +25,7 @@ import { LuExternalLink } from "react-icons/lu";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
 
-const STEPS = ["Enter Face Name", "Upload Face Image", "Next Steps"];
+const STEPS = ["steps.faceName", "steps.uploadFace", "steps.nextSteps"];
 
 type CreateFaceWizardDialogProps = {
   open: boolean;
@@ -107,7 +107,11 @@ export default function CreateFaceWizardDialog({
           <Title>{t("button.addFace")}</Title>
           {isDesktop && <Description>{t("description.addFace")}</Description>}
         </Header>
-        <StepIndicator steps={STEPS} currentStep={step} />
+        <StepIndicator
+          steps={STEPS}
+          currentStep={step}
+          translationNameSpace="views/faceLibrary"
+        />
         {step == 0 && (
           <TextEntry
             placeholder={t("description.placeholder")}