From b0aa2c3510dc51b9bcb19f47b99148ccbe6e6443 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 24 May 2026 15:43:25 -0500
Subject: [PATCH] move menu options and add current camera name badge

---
 web/public/locales/en/views/settings.json |  2 +-
 web/src/pages/Settings.tsx                | 37 +++++++++++++++++++++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json
index 78d41ed590..7d180d2f2e 100644
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@@ -103,7 +103,7 @@
     "cameraUi": "Camera UI",
     "cameraTimestampStyle": "Timestamp style",
     "cameraMqtt": "Camera MQTT",
-    "cameraManagement": "Management",
+    "cameraManagement": "Camera management",
     "cameraReview": "Review",
     "masksAndZones": "Masks / Zones",
     "motionTuner": "Motion tuner",
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index be4a036c0b..8f02826285 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -15,6 +15,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import {
   Collapsible,
@@ -310,6 +311,8 @@ const settingsGroups = [
   {
     label: "globalConfig",
     items: [
+      { key: "profiles", component: ProfilesView },
+      { key: "cameraManagement", component: CameraManagementView },
       { key: "globalDetect", component: GlobalDetectSettingsPage },
       { key: "globalObjects", component: GlobalObjectsSettingsPage },
       { key: "globalMotion", component: GlobalMotionSettingsPage },
@@ -331,8 +334,6 @@ const settingsGroups = [
   {
     label: "cameras",
     items: [
-      { key: "profiles", component: ProfilesView },
-      { key: "cameraManagement", component: CameraManagementView },
       { key: "cameraDetect", component: CameraDetectSettingsPage },
       { key: "cameraObjects", component: CameraObjectsSettingsPage },
       { key: "cameraMotion", component: CameraMotionSettingsPage },
@@ -1651,6 +1652,8 @@ export default function Settings() {
                 const isMultiItem = filteredItems.length > 1;
                 const renderedExpanded =
                   !isMultiItem || !collapsedGroups.has(group.label);
+                const showCameraBadge =
+                  group.label === "cameras" && !!selectedCamera;
                 const items = filteredItems.map((item) => (
                   <MobileMenuItem
                     key={item.key}
@@ -1686,7 +1689,19 @@ export default function Settings() {
                             )}
                           />
                         </CollapsibleTrigger>
-                        <CollapsibleContent>{items}</CollapsibleContent>
+                        <CollapsibleContent>
+                          {showCameraBadge && (
+                            <div className="mb-2 ml-4 mr-4 mt-2">
+                              <Badge
+                                variant="outline"
+                                className="max-w-full break-words smart-capitalize"
+                              >
+                                <CameraNameLabel camera={selectedCamera} />
+                              </Badge>
+                            </div>
+                          )}
+                          {items}
+                        </CollapsibleContent>
                       </Collapsible>
                     ) : (
                       items
@@ -2027,6 +2042,22 @@ export default function Settings() {
                             </SidebarGroupLabel>
                             <CollapsibleContent>
                               <SidebarMenuSub className="mx-2 border-0 md:mx-0">
+                                {group.label === "cameras" &&
+                                  selectedCamera && (
+                                    <li
+                                      className="mb-1 ml-0 mr-3 mt-0"
+                                      aria-hidden="true"
+                                    >
+                                      <Badge
+                                        variant="outline"
+                                        className="max-w-full break-words smart-capitalize"
+                                      >
+                                        <CameraNameLabel
+                                          camera={selectedCamera}
+                                        />
+                                      </Badge>
+                                    </li>
+                                  )}
                                 {filteredItems.map((item) => (
                                   <SidebarMenuSubItem key={item.key}>
                                     <SidebarMenuSubButton