Add zones friend name (#20761)

* feat: add zones friendly name

* fix: fix the issue where the input field was empty when there was no friendly_name

* chore: fix the issue where the friendly name would replace spaces with underscores

* docs: update zones docs

* Update web/src/components/settings/ZoneEditPane.tsx

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Add friendly_name option for zone configuration

Added optional friendly name for zones in configuration.

* fix: fix the logical error in the null/empty check for the polygons parameter

* fix: remove the toast name for zones will use the friendly_name instead

* docs: remove emoji tips

* revert: revert zones doc ui tips

* Update docs/docs/configuration/zones.md

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update docs/docs/configuration/zones.md

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Update docs/docs/configuration/zones.md

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* feat: add friendly zone names to tracking details and lifecycle item descriptions

* chore: lint fix

* refactor: add friendly zone names to timeline entries and clean up unused code

* refactor: add formatList

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

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

@@ -8,6 +8,9 @@ import {
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
 import { useTranslation } from "react-i18next";
+import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
+import { FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
 
 type ObjectPathProps = {
   positions?: Position[];
@@ -42,16 +45,31 @@ export function ObjectPath({
   visible = true,
 }: ObjectPathProps) {
   const { t } = useTranslation(["views/explore"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
   const getAbsolutePositions = useCallback(() => {
     if (!imgRef.current || !positions) return [];
     const imgRect = imgRef.current.getBoundingClientRect();
-    return positions.map((pos) => ({
-      x: pos.x * imgRect.width,
-      y: pos.y * imgRect.height,
-      timestamp: pos.timestamp,
-      lifecycle_item: pos.lifecycle_item,
-    }));
-  }, [positions, imgRef]);
+    return positions.map((pos) => {
+      return {
+        x: pos.x * imgRect.width,
+        y: pos.y * imgRect.height,
+        timestamp: pos.timestamp,
+        lifecycle_item: pos.lifecycle_item?.data?.zones
+          ? {
+              ...pos.lifecycle_item,
+              data: {
+                ...pos.lifecycle_item?.data,
+                zones_friendly_names: pos.lifecycle_item?.data.zones.map(
+                  (zone) => {
+                    return resolveZoneName(config, zone);
+                  },
+                ),
+              },
+            }
+          : pos.lifecycle_item,
+      };
+    });
+  }, [imgRef, positions, config]);
 
   const generateStraightPath = useCallback((points: Position[]) => {
     if (!points || points.length < 2) return "";