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/NotificationsSettingsView.tsx

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/form";
 import Heading from "@/components/ui/heading";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { Toaster } from "@/components/ui/sonner";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
@@ -46,6 +45,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Trans, useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
 
 const NOTIFICATION_SERVICE_WORKER = "notifications-worker.js";
 
@@ -464,7 +464,8 @@ export default function NotificationView({
                               {allCameras?.map((camera) => (
                                 <FilterSwitch
                                   key={camera.name}
-                                  label={camera.name.replaceAll("_", " ")}
+                                  label={camera.name}
+                                  isCameraName={true}
                                   isChecked={field.value?.includes(camera.name)}
                                   onCheckedChange={(checked) => {
                                     setChangedValue(true);
@@ -697,12 +698,11 @@ export function CameraNotificationSwitch({
             <LuX className="size-6 text-danger" />
           )}
           <div className="flex flex-col">
-            <Label
+            <CameraNameLabel
               className="text-md cursor-pointer text-primary smart-capitalize"
               htmlFor="camera"
-            >
-              {camera.replaceAll("_", " ")}
-            </Label>
+              camera={camera}
+            />
 
             {!isSuspended ? (
               <div className="flex flex-row items-center gap-2 text-sm text-success">