Refactor and clean up i18n (#17198)

* clean up i18n

* fix key

* fix key

web/src/components/menu/AccountSettings.tsx

@@ -15,9 +15,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
-import { DialogClose } from "../ui/dialog";
+} from "@/components/ui/dropdown-menu";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+  DrawerClose,
+} from "@/components/ui/drawer";
 import { LuLogOut, LuSquarePen } from "react-icons/lu";
 import useSWR from "swr";
 
@@ -32,7 +36,7 @@ type AccountSettingsProps = {
 };
 
 export default function AccountSettings({ className }: AccountSettingsProps) {
-  const { t } = useTranslation(["views/settings"]);
+  const { t } = useTranslation(["views/settings", "common"]);
   const { data: profile } = useSWR("profile");
   const { data: config } = useSWR("config");
   const logoutUrl = config?.proxy?.logout_url || `${baseUrl}api/logout`;
@@ -42,7 +46,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
   const Container = isDesktop ? DropdownMenu : Drawer;
   const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
   const Content = isDesktop ? DropdownMenuContent : DrawerContent;
-  const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
+  const MenuItem = isDesktop ? DropdownMenuItem : DrawerClose;
 
   const handlePasswordSave = async (password: string) => {
     if (!profile?.username || profile.username === "anonymous") return;
@@ -74,8 +78,8 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
 
   return (
     <Container modal={!isDesktop}>
-      <Trigger>
-        <Tooltip>
+      <Tooltip>
+        <Trigger asChild>
           <TooltipTrigger asChild>
             <div
               className={cn(
@@ -89,34 +93,41 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
               <VscAccount className="size-5 md:m-[6px]" />
             </div>
           </TooltipTrigger>
-          <TooltipPortal>
-            <TooltipContent side="right">
-              <p>{t("menu.user.account", { ns: "common" })}</p>
-            </TooltipContent>
-          </TooltipPortal>
-        </Tooltip>
-      </Trigger>
+        </Trigger>
+        <TooltipPortal>
+          <TooltipContent side="right" sideOffset={5}>
+            <p>{t("menu.user.account", { ns: "common" })}</p>
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+
       <Content
-        className={
-          isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
-        }
+        className={cn(
+          isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-4",
+        )}
       >
         <div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
-          <DropdownMenuLabel>
-            {t("menu.user.current", {
-              ns: "common",
-              user:
-                profile?.username || t("menu.user.anonymous", { ns: "common" }),
-            })}{" "}
-            {t("role." + profile?.role) &&
-              `(${t("role." + profile?.role, { ns: "common" })})`}
+          <DropdownMenuLabel className="flex flex-col gap-1.5">
+            <div>
+              {t("menu.user.current", {
+                ns: "common",
+                user:
+                  profile?.username ||
+                  t("menu.user.anonymous", { ns: "common" }),
+              })}{" "}
+              {t("role." + profile?.role) &&
+                `(${t("role." + profile?.role, { ns: "common" })})`}
+            </div>
           </DropdownMenuLabel>
-          <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
+
+          <DropdownMenuSeparator className={isDesktop ? "my-2" : "my-2"} />
+
           {profile?.username && profile.username !== "anonymous" && (
             <MenuItem
-              className={
-                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
-              }
+              className={cn(
+                "flex w-full items-center gap-2",
+                isDesktop ? "cursor-pointer" : "p-2 text-sm",
+              )}
               aria-label={t("menu.user.setPassword", { ns: "common" })}
               onClick={() => setPasswordDialogOpen(true)}
             >
@@ -124,13 +135,16 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
               <span>{t("menu.user.setPassword", { ns: "common" })}</span>
             </MenuItem>
           )}
+
           <MenuItem
-            className={
-              isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
-            }
+            className={cn(
+              "flex w-full items-center gap-2",
+              isDesktop ? "cursor-pointer" : "p-2 text-sm",
+            )}
+            asChild
             aria-label={t("menu.user.logout", { ns: "common" })}
           >
-            <a className="flex" href={logoutUrl}>
+            <a href={logoutUrl} className="flex items-center gap-2">
               <LuLogOut className="mr-2 size-4" />
               <span>{t("menu.user.logout", { ns: "common" })}</span>
             </a>

web/src/components/menu/GeneralSettings.tsx

@@ -68,7 +68,7 @@ type GeneralSettingsProps = {
 };
 
 export default function GeneralSettings({ className }: GeneralSettingsProps) {
-  const { t } = useTranslation(["common"]);
+  const { t } = useTranslation(["common", "views/settings"]);
   const { data: profile } = useSWR("profile");
   const { data: config } = useSWR<FrigateConfig>("config");
   const logoutUrl = config?.proxy?.logout_url || "/api/logout";
@@ -100,7 +100,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
         if (response.status === 200) {
           setPasswordDialogOpen(false);
           toast.success(
-            t("users.toast.success.updatePassword", { ns: "views/settings" }),
+            t("users.toast.success.updatePassword", {
+              ns: "views/settings",
+            }),
             {
               position: "top-center",
             },
@@ -184,11 +186,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                         ? "cursor-pointer"
                         : "flex items-center p-2 text-sm"
                     }
-                    aria-label={t("menu.user.setPassword")}
+                    aria-label={t("menu.user.setPassword", { ns: "common" })}
                     onClick={() => setPasswordDialogOpen(true)}
                   >
                     <LuSquarePen className="mr-2 size-4" />
-                    <span>{t("menu.user.setPassword")}</span>
+                    <span>{t("menu.user.setPassword", { ns: "common" })}</span>
                   </MenuItem>
                 )}
                 <MenuItem
@@ -501,7 +503,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                 aria-label={t("menu.documentation.label")}
               >
                 <LuLifeBuoy className="mr-2 size-4" />
-                <span>{t("menu.documentation")}</span>
+                <span>{t("menu.documentation.title")}</span>
               </MenuItem>
             </a>
             <a

web/src/components/menu/LiveContextMenu.tsx

@@ -246,7 +246,7 @@ export default function LiveContextMenu({
       strftime_fmt:
         config?.ui.time_format == "24hour"
           ? t("time.formattedTimestampExcludeSeconds.24hour", { ns: "common" })
-          : t("time.formattedTimestampExcludeSeconds", { ns: "common" }),
+          : t("time.formattedTimestampExcludeSeconds.12hour", { ns: "common" }),
     });
     return t("time.untilForTime", { ns: "common", time });
   };
@@ -343,7 +343,9 @@ export default function LiveContextMenu({
               }
             >
               <div className="text-primary">
-                {t("streaming.debugView", { ns: "components/dialog" })}
+                {t("streaming.debugView", {
+                  ns: "components/dialog",
+                })}
               </div>
             </div>
           </ContextMenuItem>

web/src/components/menu/SearchResultActions.tsx

@@ -149,7 +149,7 @@ export default function SearchResultActions({
             onClick={showSnapshot}
           >
             <FrigatePlusIcon className="mr-2 size-4 cursor-pointer text-primary" />
-            <span>{t("itemMenu.submitToPlus")}</span>
+            <span>{t("itemMenu.submitToPlus.label")}</span>
           </MenuItem>
         )}
       <MenuItem
@@ -170,7 +170,9 @@ export default function SearchResultActions({
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t("dialog.confirmDelete")}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("dialog.confirmDelete.title")}
+            </AlertDialogTitle>
           </AlertDialogHeader>
           <AlertDialogDescription>
             <Trans ns="views/explore">dialog.confirmDelete.desc</Trans>