i18n fixes (#17184)

* update PR template

* fix hook

* fix input

* fix hook

* add all audio detector keys

* add frigate+ keys

* fix spelling, formatting, and spacing

* fix labels

* capitalization

* fix timestamp

* fix menu

* fix plus text

* fix download label

* docs

* fix docs build

* fix docs formatting

web/src/components/ui/calendar-range.tsx

@@ -12,10 +12,7 @@ import {
 import { Switch } from "./switch";
 import { cn } from "@/lib/utils";
 import { LuCheck } from "react-icons/lu";
-import { useTranslation } from "react-i18next";
-
-const { t } = useTranslation(["common"]);
-
+import { t } from "i18next";
 
 export interface DateRangePickerProps {
   /** Click handler for applying the updates from DateRangePicker. */
@@ -433,7 +430,7 @@ export function DateRangePicker({
             }
           }}
         >
-          {t("button.apply", { ns: "common"})}
+          {t("button.apply", { ns: "common" })}
         </Button>
         <Button
           onClick={() => {
@@ -444,7 +441,7 @@ export function DateRangePicker({
           variant="ghost"
           aria-label={t("button.reset", { ns: "common" })}
         >
-          {t("button.reset", { ns: "common"})}
+          {t("button.reset", { ns: "common" })}
         </Button>
       </div>
     </div>

web/src/components/ui/pagination.tsx

@@ -1,11 +1,9 @@
-import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
-import { useTranslation } from "react-i18next"
-
-const { t } = useTranslation(["common"])
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+import { t } from "i18next";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
@@ -14,8 +12,8 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
     className={cn("mx-auto flex w-full justify-center", className)}
     {...props}
   />
-)
-Pagination.displayName = "Pagination"
+);
+Pagination.displayName = "Pagination";
 
 const PaginationContent = React.forwardRef<
   HTMLUListElement,
@@ -26,21 +24,21 @@ const PaginationContent = React.forwardRef<
     className={cn("flex flex-row items-center gap-1", className)}
     {...props}
   />
-))
-PaginationContent.displayName = "PaginationContent"
+));
+PaginationContent.displayName = "PaginationContent";
 
 const PaginationItem = React.forwardRef<
   HTMLLIElement,
   React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
   <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
+));
+PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = {
-  isActive?: boolean
+  isActive?: boolean;
 } & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
+  React.ComponentProps<"a">;
 
 const PaginationLink = ({
   className,
@@ -55,12 +53,12 @@ const PaginationLink = ({
         variant: isActive ? "outline" : "ghost",
         size,
       }),
-      className
+      className,
     )}
     {...props}
   />
-)
-PaginationLink.displayName = "PaginationLink"
+);
+PaginationLink.displayName = "PaginationLink";
 
 const PaginationPrevious = ({
   className,
@@ -75,8 +73,8 @@ const PaginationPrevious = ({
     <ChevronLeft className="h-4 w-4" />
     <span>{t("pagination.previous")}</span>
   </PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
+);
+PaginationPrevious.displayName = "PaginationPrevious";
 
 const PaginationNext = ({
   className,
@@ -91,8 +89,8 @@ const PaginationNext = ({
     <span>{t("pagination.next")}</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
+);
+PaginationNext.displayName = "PaginationNext";
 
 const PaginationEllipsis = ({
   className,
@@ -106,8 +104,8 @@ const PaginationEllipsis = ({
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">{t("pagination.more")}</span>
   </span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export {
   Pagination,
@@ -117,4 +115,4 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-}
+};