From 72eb0352ad2e31c86f3138b5ef2b960e4e18c3e6 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 19 Jan 2026 08:33:03 -0600
Subject: [PATCH] improve no camera view

instead of showing an "add camera" message, show a specific message for empty camera groups when frigate already has cameras added
---
 web/public/locales/en/views/live.json    | 10 +++++++
 web/src/components/card/EmptyCard.tsx    |  4 ++-
 web/src/views/live/LiveDashboardView.tsx | 33 ++++++++++++++++--------
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/web/public/locales/en/views/live.json b/web/public/locales/en/views/live.json
index 21f367ea9..c2efef84f 100644
--- a/web/public/locales/en/views/live.json
+++ b/web/public/locales/en/views/live.json
@@ -181,6 +181,16 @@
     "restricted": {
       "title": "No Cameras Available",
       "description": "You don't have permission to view any cameras in this group."
+    },
+    "default": {
+      "title": "No Cameras Configured",
+      "description": "Get started by connecting a camera to Frigate.",
+      "buttonText": "Add Camera"
+    },
+    "group": {
+      "title": "No Cameras in Group",
+      "description": "This camera group has no assigned or enabled cameras.",
+      "buttonText": "Manage Groups"
     }
   }
 }
diff --git a/web/src/components/card/EmptyCard.tsx b/web/src/components/card/EmptyCard.tsx
index 00b22d197..b9943b31a 100644
--- a/web/src/components/card/EmptyCard.tsx
+++ b/web/src/components/card/EmptyCard.tsx
@@ -35,7 +35,9 @@ export function EmptyCard({
       {icon}
       {TitleComponent}
       {description && (
-        <div className="mb-3 text-secondary-foreground">{description}</div>
+        <div className="mb-3 text-center text-secondary-foreground">
+          {description}
+        </div>
       )}
       {buttonText?.length && (
         <Button size="sm" variant="select">
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index e9729182f..dd8bb83f5 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -447,7 +447,7 @@ export default function LiveDashboardView({
       )}
 
       {cameras.length == 0 && !includeBirdseye ? (
-        <NoCameraView />
+        <NoCameraView cameraGroup={cameraGroup} />
       ) : (
         <>
           {!fullscreen && events && events.length > 0 && (
@@ -666,28 +666,39 @@ export default function LiveDashboardView({
   );
 }
 
-function NoCameraView() {
+function NoCameraView({ cameraGroup }: { cameraGroup?: string }) {
   const { t } = useTranslation(["views/live"]);
   const { auth } = useContext(AuthContext);
   const isAdmin = useIsAdmin();
 
-  // Check if this is a restricted user with no cameras in this group
+  const isDefault = cameraGroup === "default";
   const isRestricted = !isAdmin && auth.isAuthenticated;
 
+  let type: "default" | "group" | "restricted";
+  if (isRestricted) {
+    type = "restricted";
+  } else if (isDefault) {
+    type = "default";
+  } else {
+    type = "group";
+  }
+
   return (
     <div className="flex size-full items-center justify-center">
       <EmptyCard
         icon={<BsFillCameraVideoOffFill className="size-8" />}
-        title={
-          isRestricted ? t("noCameras.restricted.title") : t("noCameras.title")
+        title={t(`noCameras.${type}.title`)}
+        description={t(`noCameras.${type}.description`)}
+        buttonText={
+          type !== "restricted" && isDefault
+            ? t(`noCameras.${type}.buttonText`)
+            : undefined
         }
-        description={
-          isRestricted
-            ? t("noCameras.restricted.description")
-            : t("noCameras.description")
+        link={
+          type !== "restricted" && isDefault
+            ? "/settings?page=cameraManagement"
+            : undefined
         }
-        buttonText={!isRestricted ? t("noCameras.buttonText") : undefined}
-        link={!isRestricted ? "/settings?page=cameraManagement" : undefined}
       />
     </div>
   );