From 79f0570511bbd4fc309ded5690f294e36e7dad38 Mon Sep 17 00:00:00 2001
From: ZhaiSoul <842607283@qq.com>
Date: Wed, 5 Nov 2025 15:42:46 +0000
Subject: [PATCH] feat: add friendly zone names to tracking details and
 lifecycle item descriptions

---
 web/src/components/overlay/detail/TrackingDetails.tsx | 10 +++++++++-
 web/src/components/timeline/DetailStream.tsx          | 11 +++++++++++
 web/src/utils/lifecycleUtil.ts                        |  4 +++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index 82fb14771..ed60b8164 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -32,6 +32,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
 import { Badge } from "@/components/ui/badge";
 import { HiDotsHorizontal } from "react-icons/hi";
 import axios from "axios";
@@ -73,6 +74,12 @@ export function TrackingDetails({
 
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  eventSequence?.map((event) => {
+    event.data.zones_friendly_names = event.data?.zones?.map((zone) => {
+      return resolveZoneName(config, zone);
+    });
+  });
+
   const effectiveTime = useMemo(() => {
     return currentTime - annotationOffset / 1000;
   }, [currentTime, annotationOffset]);
@@ -703,7 +710,8 @@ function LifecycleIconRow({
                           }}
                         />
                         <span className="smart-capitalize">
-                          {zone.replaceAll("_", " ")}
+                          {item.data?.zones_friendly_names?.[zidx] ??
+                            zone.replaceAll("_", " ")}
                         </span>
                       </Badge>
                     );
diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index e8d609cdb..e7950ee4d 100644
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@@ -31,6 +31,7 @@ import { Link } from "react-router-dom";
 import { Switch } from "@/components/ui/switch";
 import { usePersistence } from "@/hooks/use-persistence";
 import { isDesktop } from "react-device-detect";
+import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
 
 type DetailStreamProps = {
   reviewItems?: ReviewSegment[];
@@ -646,6 +647,16 @@ function LifecycleItem({
   const { t } = useTranslation("views/events");
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  item = {
+    ...item,
+    data: {
+      ...item.data,
+      zones_friendly_names: item?.data?.zones?.map((zone) => {
+        return resolveZoneName(config, zone);
+      }),
+    },
+  };
+
   const aspectRatio = useMemo(() => {
     if (!config || !item?.camera) {
       return 16 / 9;
diff --git a/web/src/utils/lifecycleUtil.ts b/web/src/utils/lifecycleUtil.ts
index d672445ff..fa9ce9281 100644
--- a/web/src/utils/lifecycleUtil.ts
+++ b/web/src/utils/lifecycleUtil.ts
@@ -42,7 +42,9 @@ export function getLifecycleItemDescription(
       return t("trackingDetails.lifecycleItemDesc.entered_zone", {
         ns: "views/explore",
         label,
-        zones: formatZonesList(lifecycleItem.data.zones),
+        zones: formatZonesList(
+          lifecycleItem.data.zones_friendly_names ?? lifecycleItem.data.zones,
+        ),
       });
     case "active":
       return t("trackingDetails.lifecycleItemDesc.active", {