From 36e5dcc75afe405eb611ba7f84d877eceacbce8d Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 19 Jun 2026 07:47:00 -0500
Subject: [PATCH] display zone names consistently using friendly_name or raw id
 without transformation

---
 .../sectionExtras/CameraReviewClassification.tsx       |  7 +------
 .../config-form/theme/widgets/ZoneSwitchesWidget.tsx   |  4 ++--
 web/src/components/overlay/detail/TrackingDetails.tsx  |  9 +--------
 web/src/hooks/use-zone-friendly-name.ts                | 10 +++++-----
 4 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/web/src/components/config-form/sectionExtras/CameraReviewClassification.tsx b/web/src/components/config-form/sectionExtras/CameraReviewClassification.tsx
index 86f363aec7..1a5c3cd844 100644
--- a/web/src/components/config-form/sectionExtras/CameraReviewClassification.tsx
+++ b/web/src/components/config-form/sectionExtras/CameraReviewClassification.tsx
@@ -243,12 +243,7 @@ export default function CameraReviewClassification({
                         handleZoneToggle("alerts.required_zones", zone.name)
                       }
                     />
-                    <Label
-                      className={cn(
-                        "font-normal",
-                        !zone.friendly_name && "smart-capitalize",
-                      )}
-                    >
+                    <Label className="font-normal">
                       {zone.friendly_name || zone.name}
                     </Label>
                   </div>
diff --git a/web/src/components/config-form/theme/widgets/ZoneSwitchesWidget.tsx b/web/src/components/config-form/theme/widgets/ZoneSwitchesWidget.tsx
index 0acb83b785..94ca405126 100644
--- a/web/src/components/config-form/theme/widgets/ZoneSwitchesWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/ZoneSwitchesWidget.tsx
@@ -29,8 +29,8 @@ function getZoneDisplayName(zoneName: string, context?: FormContext): string {
       }
     }
   }
-  // Fallback to cleaning up the zone name
-  return String(zoneName).replace(/_/g, " ");
+  // Fallback to the raw zone id verbatim (no friendly_name available)
+  return String(zoneName);
 }
 
 export function ZoneSwitchesWidget(props: WidgetProps) {
diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index 66843d3e4f..c0f109e165 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -1197,14 +1197,7 @@ function LifecycleIconRow({
                           backgroundColor: `rgb(${color})`,
                         }}
                       />
-                      <span
-                        className={cn(
-                          item.data?.zones_friendly_names?.[zidx] === zone &&
-                            "smart-capitalize",
-                        )}
-                      >
-                        {item.data?.zones_friendly_names?.[zidx]}
-                      </span>
+                      <span>{item.data?.zones_friendly_names?.[zidx]}</span>
                     </Badge>
                   );
                 })}
diff --git a/web/src/hooks/use-zone-friendly-name.ts b/web/src/hooks/use-zone-friendly-name.ts
index 18ce2a45c5..e827a215a8 100644
--- a/web/src/hooks/use-zone-friendly-name.ts
+++ b/web/src/hooks/use-zone-friendly-name.ts
@@ -7,12 +7,12 @@ export function resolveZoneName(
   zoneId: string,
   cameraId?: string,
 ) {
-  if (!config) return String(zoneId).replace(/_/g, " ");
+  if (!config) return String(zoneId);
 
   if (cameraId) {
     const camera = config.cameras?.[String(cameraId)];
     const zone = camera?.zones?.[zoneId];
-    return zone?.friendly_name || String(zoneId).replace(/_/g, " ");
+    return zone?.friendly_name || String(zoneId);
   }
 
   for (const camKey in config.cameras) {
@@ -21,12 +21,12 @@ export function resolveZoneName(
     if (!cam?.zones) continue;
     if (Object.prototype.hasOwnProperty.call(cam.zones, zoneId)) {
       const zone = cam.zones[zoneId];
-      return zone?.friendly_name || String(zoneId).replace(/_/g, " ");
+      return zone?.friendly_name || String(zoneId);
     }
   }
 
-  // Fallback: return a cleaned-up zoneId string
-  return String(zoneId).replace(/_/g, " ");
+  // Fallback: display the raw zone id verbatim (no friendly_name available)
+  return String(zoneId);
 }
 
 export function useZoneFriendlyName(zoneId: string, cameraId?: string): string {