i18n workflow improvements and tweaks (#22586)

* mobile button spacing

* prevent console warning about div being descendant of p

* ensure consistent spacing

* add missing i18n keys

* i18n fixes

- add missing translations
- fix dot notation keys

* use plain string

* add missing key

* add i18next-cli commands for extraction and status

also add false positives removal for several keys

* add i18n key check step to PR workflow

* formatting

web/src/components/overlay/DeleteRoleDialog.tsx

@@ -60,7 +60,7 @@ export default function DeleteRoleDialog({
           <div className="text-sm text-muted-foreground">
             <p>
               <Trans
-                ns={"views/settings"}
+                ns="views/settings"
                 values={{ role }}
                 components={{ strong: <span className="font-medium" /> }}
               >

web/src/components/overlay/DeleteTriggerDialog.tsx

@@ -35,7 +35,7 @@ export default function DeleteTriggerDialog({
           <DialogTitle>{t("triggers.dialog.deleteTrigger.title")}</DialogTitle>
           <DialogDescription>
             <Trans
-              ns={"views/settings"}
+              ns="views/settings"
               values={{ triggerName }}
               components={{ strong: <span className="font-medium" /> }}
             >

web/src/components/overlay/EditRoleCamerasDialog.tsx

@@ -90,7 +90,7 @@ export default function EditRoleCamerasDialog({
           </DialogTitle>
           <DialogDescription>
             <Trans
-              ns={"views/settings"}
+              ns="views/settings"
               values={{ role }}
               components={{ strong: <span className="font-medium" /> }}
             >

web/src/components/overlay/MobileTimelineDrawer.tsx

@@ -40,7 +40,7 @@ export default function MobileTimelineDrawer({
             setDrawer(false);
           }}
         >
-          {t("timeline")}
+          {t("timeline.label")}
         </div>
         <div
           className={`mx-4 w-full py-2 text-center smart-capitalize ${selected == "events" ? "rounded-lg bg-secondary" : ""}`}

web/src/components/settings/CameraEditForm.tsx

@@ -494,7 +494,7 @@ export default function CameraEditForm({
                 <CardContent className="space-y-4 p-4">
                   <div className="flex items-center justify-between">
                     <h4 className="font-medium">
-                      {t("cameraWizard.step2.streamTitle", {
+                      {t("cameraWizard.step3.streamTitle", {
                         number: index + 1,
                       })}
                     </h4>

web/src/components/settings/CameraWizardDialog.tsx

@@ -338,8 +338,8 @@ export default function CameraWizardDialog({
               }
             } else {
               toast.success(
-                t("camera.cameraConfig.toast.success", {
-                  cameraName: wizardData.cameraName,
+                t("cameraWizard.save.success", {
+                  cameraName: friendlyName || finalCameraName,
                 }),
                 { position: "top-center" },
               );

web/src/components/settings/ZoneEditPane.tsx

@@ -785,7 +785,7 @@ export default function ZoneEditPane({
                 </div>
                 <FormDescription>
                   {t("masksAndZones.zones.speedEstimation.desc")}
-                  <div className="mt-2 flex items-center text-primary">
+                  <span className="mt-2 flex items-center text-primary">
                     <Link
                       to={getLocaleDocUrl(
                         "configuration/zones#speed-estimation",
@@ -797,7 +797,7 @@ export default function ZoneEditPane({
                       {t("readTheDocumentation", { ns: "common" })}
                       <LuExternalLink className="ml-2 inline-flex size-3" />
                     </Link>
-                  </div>
+                  </span>
                 </FormDescription>
                 <FormMessage />
               </FormItem>