feat: Add camera nickname (#19567)

* refactor: Refactor camera nickname

* fix: fix cameraNameLabel visually

* chore: The Explore search function also displays the Camera's nickname in English

* chore: add mobile page camera nickname

* feat: webpush support camera nickname

* fix: fix storage camera name is null

* chore: fix review detail and context menu camera nickname

* chore: fix use-stats and notification setting camera nickname

* fix: fix stats camera if not nickname need capitalize

* fix: fix debug page open camera web ui i18n and camera nickname support

* fix: fix camera metrics not use nickname

* refactor: refactor use-camera-nickname hook.

web/src/views/settings/ObjectSettingsView.tsx

@@ -30,6 +30,7 @@ import { isDesktop } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { useCameraNickname } from "@/hooks/use-camera-nickname";
 import { AudioLevelGraph } from "@/components/audio/AudioLevelGraph";
 import { useWs } from "@/api/ws";
 
@@ -128,6 +129,8 @@ export default function ObjectSettingsView({
     }
   }, [config, selectedCamera]);
 
+  const cameraName = useCameraNickname(cameraConfig);
+
   const { objects, audio_detections } = useCameraActivity(
     cameraConfig ?? ({} as CameraConfig),
   );
@@ -186,7 +189,9 @@ export default function ObjectSettingsView({
                 rel="noopener noreferrer"
                 className="inline"
               >
-                Open {capitalizeFirstLetter(cameraConfig.name)}'s Web UI
+                {t("debug.openCameraWebUI", {
+                  camera: cameraName,
+                })}
                 <LuExternalLink className="ml-2 inline-flex size-3" />
               </Link>
             </div>