fix missing i18n keys (#18309)

web/src/components/overlay/CameraInfoDialog.tsx

@@ -132,14 +132,14 @@ export default function CameraInfoDialog({
                                           /
                                           {codec.height /
                                             gcd(codec.width, codec.height)}{" "}
-                                          aspect ratio)
+                                          {t("cameras.info.aspectRatio")})
                                         </span>
                                       </>
                                     ) : (
                                       <span>
                                         {t("cameras.info.resolution")}{" "}
                                         <span className="text-primary">
-                                          Unknown
+                                          t("cameras.info.unknown")
                                         </span>
                                       </span>
                                     )}

web/src/components/overlay/CreateUserDialog.tsx

@@ -56,8 +56,10 @@ export default function CreateUserDialog({
         .regex(/^[A-Za-z0-9._]+$/, {
           message: t("users.dialog.createUser.usernameOnlyInclude"),
         }),
-      password: z.string().min(1, "Password is required"),
-      confirmPassword: z.string().min(1, "Please confirm your password"),
+      password: z.string().min(1, t("users.dialog.form.passwordIsRequired")),
+      confirmPassword: z
+        .string()
+        .min(1, t("users.dialog.createUser.confirmPassword")),
       role: z.enum(["admin", "viewer"]),
     })
     .refine((data) => data.password === data.confirmPassword, {

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -79,8 +79,8 @@ export default function FaceSelectionDialog({
           >
             {isMobile && (
               <DrawerHeader className="sr-only">
-                <DrawerTitle>Log Details</DrawerTitle>
-                <DrawerDescription>Log details</DrawerDescription>
+                <DrawerTitle>Details</DrawerTitle>
+                <DrawerDescription>Details</DrawerDescription>
               </DrawerHeader>
             )}
             <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>

web/src/components/overlay/MobileTimelineDrawer.tsx

@@ -4,6 +4,7 @@ import { Button } from "../ui/button";
 import { FaFlag } from "react-icons/fa";
 import { TimelineType } from "@/types/timeline";
 import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
 
 type MobileTimelineDrawerProps = {
   selected: TimelineType;
@@ -13,6 +14,7 @@ export default function MobileTimelineDrawer({
   selected,
   onSelect,
 }: MobileTimelineDrawerProps) {
+  const { t } = useTranslation(["views/events"]);
   const [drawer, setDrawer] = useState(false);
 
   if (!isMobile) {
@@ -38,7 +40,7 @@ export default function MobileTimelineDrawer({
             setDrawer(false);
           }}
         >
-          Timeline
+          {t("timeline")}
         </div>
         <div
           className={`mx-4 w-full py-2 text-center smart-capitalize ${selected == "events" ? "rounded-lg bg-secondary" : ""}`}
@@ -47,7 +49,7 @@ export default function MobileTimelineDrawer({
             setDrawer(false);
           }}
         >
-          Events
+          {t("events.label")}
         </div>
       </DrawerContent>
     </Drawer>

web/src/components/overlay/RoleChangeDialog.tsx

@@ -83,7 +83,7 @@ export default function RoleChangeDialog({
             }
           >
             <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select a role" />
+              <SelectValue placeholder={t("users.dialog.changeRole.select")} />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="admin" className="flex items-center gap-2">

web/src/components/overlay/SetPasswordDialog.tsx

@@ -66,12 +66,12 @@ export default function SetPasswordDialog({
 
   const handleSave = () => {
     if (!password) {
-      setError("Password cannot be empty");
+      setError(t("users.dialog.passwordSetting.cannotBeEmpty"));
       return;
     }
 
     if (password !== confirmPassword) {
-      setError("Passwords do not match");
+      setError(t("users.dialog.passwordSetting.doNotMatch"));
       return;
     }
 

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

@@ -77,7 +77,9 @@ export function AnnotationSettingsPane({
         .then((res) => {
           if (res.status === 200) {
             toast.success(
-              `Annotation offset for ${event?.camera} has been saved to the config file. Restart Frigate to apply your changes.`,
+              t("objectLifecycle.annotationSettings.offset.toast.success", {
+                camera: event?.camera,
+              }),
               {
                 position: "top-center",
               },

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

@@ -909,7 +909,9 @@ function ObjectDetailsTab({
             search.label,
           )) ? (
           <>
-            <div className="text-sm text-primary/40">Description</div>
+            <div className="text-sm text-primary/40">
+              {t("details.description.label")}
+            </div>
             <div className="flex h-64 flex-col items-center justify-center gap-3 border p-4 text-sm text-primary/40">
               <div className="flex">
                 <ActivityIndicator />