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

.github/workflows/pull_request.yml

@@ -27,6 +27,9 @@ jobs:
       - name: Lint
         run: npm run lint
         working-directory: ./web
+      - name: Check i18n keys
+        run: npm run i18n:extract:ci
+        working-directory: ./web
 
   web_test:
     name: Web - Test

web/i18next.config.ts

@@ -0,0 +1,51 @@
+import { defineConfig, type Plugin } from "i18next-cli";
+
+/**
+ * Plugin to remove false positive keys generated by dynamic namespace patterns
+ * like useTranslation([i18nLibrary]) and t("key", { ns: configNamespace }).
+ * These keys already exist in their correct runtime namespaces.
+ */
+function ignoreDynamicNamespaceKeys(): Plugin {
+  // Keys that the extractor misattributes to the wrong namespace
+  // because it can't resolve dynamic ns values at build time.
+  const falsePositiveKeys = new Set([
+    // From useTranslation([i18nLibrary]) in ClassificationCard.tsx
+    // Already in views/classificationModel and views/faceLibrary
+    "details.unknown",
+    "details.none",
+    // From t("key", { ns: configNamespace }) in DetectorHardwareField.tsx
+    // Already in config/global
+    "detectors.type.label",
+    // From t(`${prefix}`) template literals producing empty/partial keys
+    "",
+    "_one",
+    "_other",
+  ]);
+
+  return {
+    name: "ignore-dynamic-namespace-keys",
+    onEnd: async (keys) => {
+      for (const key of keys.keys()) {
+        // Each map key is "ns:actualKey" format
+        const separatorIndex = key.indexOf(":");
+        const actualKey =
+          separatorIndex >= 0 ? key.slice(separatorIndex + 1) : key;
+        if (falsePositiveKeys.has(actualKey)) {
+          keys.delete(key);
+        }
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  locales: ["en"],
+  extract: {
+    input: ["src/**/*.{ts,tsx}"],
+    output: "public/locales/{{language}}/{{namespace}}.json",
+    defaultNS: "common",
+    removeUnusedKeys: false,
+    sort: false,
+  },
+  plugins: [ignoreDynamicNamespaceKeys()],
+});

web/package.json

@@ -12,7 +12,10 @@
     "preview": "vite preview",
     "prettier:write": "prettier -u -w --ignore-path .gitignore \"*.{ts,tsx,js,jsx,css,html}\"",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "i18n:extract": "i18next-cli extract",
+    "i18n:extract:ci": "i18next-cli extract --ci",
+    "i18n:status": "i18next-cli status"
   },
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^6.1.2",
@@ -114,6 +117,7 @@
     "eslint-plugin-react-refresh": "^0.4.8",
     "eslint-plugin-vitest-globals": "^1.5.0",
     "fake-indexeddb": "^6.0.0",
+    "i18next-cli": "^1.5.11",
     "jest-websocket-mock": "^2.5.0",
     "jsdom": "^24.1.1",
     "monaco-editor": "^0.52.2",

web/public/locales/en/common.json

@@ -161,7 +161,8 @@
     "resetToDefault": "Reset to Default",
     "saveAll": "Save All",
     "savingAll": "Saving All…",
-    "undoAll": "Undo All"
+    "undoAll": "Undo All",
+    "retry": "Retry"
   },
   "menu": {
     "system": "System",
@@ -275,7 +276,8 @@
       "error": {
         "title": "Failed to save config changes: {{errorMessage}}",
         "noMessage": "Failed to save config changes"
-      }
+      },
+      "success": "Successfully saved config changes."
     }
   },
   "role": {
@@ -310,5 +312,7 @@
   "readTheDocumentation": "Read the documentation",
   "information": {
     "pixels": "{{area}}px"
-  }
+  },
+  "no_items": "No items",
+  "validation_errors": "Validation Errors"
 }

web/public/locales/en/components/camera.json

@@ -81,6 +81,7 @@
     "zones": "Zones",
     "mask": "Mask",
     "motion": "Motion",
-    "regions": "Regions"
+    "regions": "Regions",
+    "paths": "Paths"
   }
 }

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

@@ -23,15 +23,17 @@
   },
   "toast": {
     "success": {
-      "deletedCategory": "Deleted Class",
-      "deletedImage": "Deleted Images",
       "deletedModel_one": "Successfully deleted {{count}} model",
       "deletedModel_other": "Successfully deleted {{count}} models",
       "categorizedImage": "Successfully Classified Image",
       "trainedModel": "Successfully trained model.",
       "trainingModel": "Successfully started model training.",
       "updatedModel": "Successfully updated model configuration",
-      "renamedCategory": "Successfully renamed class to {{name}}"
+      "renamedCategory": "Successfully renamed class to {{name}}",
+      "deletedCategory_one": "Deleted {{count}} class",
+      "deletedCategory_other": "Deleted {{count}} classes",
+      "deletedImage_one": "Deleted {{count}} image",
+      "deletedImage_other": "Deleted {{count}} images"
     },
     "error": {
       "deleteImageFailed": "Failed to delete: {{errorMessage}}",

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

@@ -15,8 +15,10 @@
       "description": "Review items can only be created for a camera when recordings are enabled for that camera."
     }
   },
-  "timeline": "Timeline",
-  "timeline.aria": "Select timeline",
+  "timeline": {
+    "label": "Timeline",
+    "aria": "Select timeline"
+  },
   "zoomIn": "Zoom In",
   "zoomOut": "Zoom Out",
   "events": {

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

@@ -169,7 +169,8 @@
     },
     "title": {
       "label": "Title"
-    }
+    },
+    "scoreInfo": "Score Information"
   },
   "itemMenu": {
     "downloadVideo": {
@@ -220,12 +221,18 @@
     "debugReplay": {
       "label": "Debug replay",
       "aria": "View this tracked object in the debug replay view"
+    },
+    "more": {
+      "aria": "More"
     }
   },
   "dialog": {
     "confirmDelete": {
       "title": "Confirm Delete",
       "desc": "Deleting this tracked object removes the snapshot, any saved embeddings, and any associated tracking details entries. Recorded footage of this tracked object in History view will <em>NOT</em> be deleted.<br /><br />Are you sure you want to proceed?"
+    },
+    "toast": {
+      "error": "Error deleting this tracked object: {{errorMessage}}"
     }
   },
   "noTrackedObjects": "No Tracked Objects Found",
@@ -248,5 +255,8 @@
   },
   "concerns": {
     "label": "Concerns"
+  },
+  "objectLifecycle": {
+    "noImageFound": "No image found for this tracked object."
   }
 }

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

@@ -6,8 +6,10 @@
     "cases": "Cases",
     "uncategorizedExports": "Uncategorized Exports"
   },
-  "deleteExport": "Delete Export",
-  "deleteExport.desc": "Are you sure you want to delete {{exportName}}?",
+  "deleteExport": {
+    "label": "Delete Export",
+    "desc": "Are you sure you want to delete {{exportName}}?"
+  },
   "editExport": {
     "title": "Rename Export",
     "desc": "Enter a new name for this export.",

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

@@ -1,6 +1,8 @@
 {
-  "documentTitle": "Live - Frigate",
-  "documentTitle.withCamera": "{{camera}} - Live - Frigate",
+  "documentTitle": {
+    "default": "Live - Frigate",
+    "withCamera": "{{camera}} - Live - Frigate"
+  },
   "lowBandwidthMode": "Low-bandwidth Mode",
   "twoWayTalk": {
     "enable": "Enable Two Way Talk",

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

@@ -515,7 +515,6 @@
     "reviewClassification": {
       "title": "Review Classification",
       "desc": "Frigate categorizes review items as Alerts and Detections. By default, all <em>person</em> and <em>car</em> objects are considered Alerts. You can refine categorization of your review items by configuring required zones for them.",
-
       "noDefinedZones": "No zones are defined for this camera.",
       "objectAlertsTips": "All {{alertsLabels}} objects on {{cameraName}} will be shown as Alerts.",
       "zoneObjectAlertsTips": "All {{alertsLabels}} objects detected in {{zone}} on {{cameraName}} will be shown as Alerts.",
@@ -553,6 +552,17 @@
     "motionMaskLabel": "Motion Mask {{number}}",
     "objectMaskLabel": "Object Mask {{number}}",
     "form": {
+      "id": {
+        "error": {
+          "mustNotBeEmpty": "ID must not be empty.",
+          "alreadyExists": "A mask with this ID already exists for this camera."
+        }
+      },
+      "name": {
+        "error": {
+          "mustNotBeEmpty": "Name must not be empty."
+        }
+      },
       "zoneName": {
         "error": {
           "mustBeAtLeastTwoCharacters": "Zone name must be at least 2 characters.",
@@ -1286,7 +1296,8 @@
     },
     "camera": {
       "title": "Camera Settings",
-      "description": "These settings apply only to this camera and override the global settings."
+      "description": "These settings apply only to this camera and override the global settings.",
+      "noCameras": "No cameras available"
     },
     "advancedSettingsCount": "Advanced Settings ({{count}})",
     "advancedCount": "Advanced ({{count}})",

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

@@ -35,7 +35,8 @@
         "cameras_count_other": "{{count}} Cameras"
       },
       "empty": "No messages captured yet",
-      "count": "{{count}} messages",
+      "count_one": "{{count}} message",
+      "count_other": "{{count}} messages",
       "expanded": {
         "payload": "Payload"
       }

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>

web/src/pages/Exports.tsx

@@ -220,7 +220,7 @@ function Exports() {
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t("deleteExport")}</AlertDialogTitle>
+            <AlertDialogTitle>{t("deleteExport.label")}</AlertDialogTitle>
             <AlertDialogDescription>
               {t("deleteExport.desc", { exportName: deleteClip?.exportName })}
             </AlertDialogDescription>

web/src/pages/Live.tsx

@@ -81,7 +81,7 @@ function Live() {
         camera: `${cameraGroup[0].toUpperCase()}${cameraGroup.substring(1)}`,
       });
     } else {
-      document.title = t("documentTitle", { ns: "views/live" });
+      document.title = t("documentTitle.default", { ns: "views/live" });
     }
   }, [cameraGroup, selectedCameraName, t]);
 

web/src/pages/Settings.tsx

@@ -1397,10 +1397,12 @@ export default function Settings() {
           : "bg-selected";
 
       return (
-        <div className="flex w-full items-center justify-between pr-4 md:pr-0">
-          <div>{t("menu." + key)}</div>
+        <div className="flex w-full min-w-0 items-center justify-between pr-4 md:pr-0">
+          <div className="min-w-0 flex-1 whitespace-normal break-words">
+            {t("menu." + key)}
+          </div>
           {(showOverrideDot || showUnsavedDot) && (
-            <div className="ml-2 flex items-center gap-2">
+            <div className="ml-2 flex shrink-0 items-center gap-2">
               {showOverrideDot && (
                 <span
                   className={cn("inline-block size-2 rounded-full", dotColor)}
@@ -1747,7 +1749,7 @@ export default function Settings() {
                       <SidebarMenu>
                         <SidebarMenuItem>
                           <SidebarMenuButton
-                            className="ml-0"
+                            className="ml-0 h-auto min-h-8 py-1.5"
                             isActive={pageToggle === filteredItems[0].key}
                             onClick={() => {
                               if (
@@ -1788,6 +1790,7 @@ export default function Settings() {
                           {filteredItems.map((item) => (
                             <SidebarMenuSubItem key={item.key}>
                               <SidebarMenuSubButton
+                                className="h-auto w-full py-1.5"
                                 isActive={pageToggle === item.key}
                                 onClick={() => {
                                   if (

web/src/utils/passwordUtil.ts

@@ -1,3 +1,5 @@
+import { TFunction } from "i18next";
+
 export const calculatePasswordStrength = (password: string): number => {
   if (!password) return 0;
 
@@ -16,13 +18,18 @@ export const getPasswordRequirements = (password: string) => ({
 
 export const getPasswordStrengthLabel = (
   password: string,
-  t: (key: string) => string,
+  t: TFunction,
 ): string => {
   const strength = calculatePasswordStrength(password);
 
   if (!password) return "";
-  if (strength < 1) return t("users.dialog.form.password.strength.weak");
-  return t("users.dialog.form.password.strength.veryStrong");
+  if (strength < 1)
+    return t("users.dialog.form.password.strength.weak", {
+      ns: "views/settings",
+    });
+  return t("users.dialog.form.password.strength.veryStrong", {
+    ns: "views/settings",
+  });
 };
 
 export const getPasswordStrengthColor = (password: string): string => {

web/src/views/recording/RecordingView.tsx

@@ -700,7 +700,7 @@ export function RecordingView({
                   value="timeline"
                   aria-label={t("timeline.aria")}
                 >
-                  <div className="">{t("timeline")}</div>
+                  <div className="">{t("timeline.label")}</div>
                 </ToggleGroupItem>
                 <ToggleGroupItem
                   className={`${timelineType == "events" ? "" : "text-muted-foreground"}`}

web/src/views/settings/ProfilesView.tsx

@@ -618,7 +618,7 @@ export default function ProfilesView({
                   ns: "views/settings",
                 })}
               />
-              <DialogFooter>
+              <DialogFooter className="gap-2 md:gap-0">
                 <Button
                   type="button"
                   variant="outline"