UI tweaks (#23304)
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / Synaptics Build (push) Blocked by required conditions
CI / Assemble and push default build (push) Blocked by required conditions

* restructure camera enable/disable pane

* remove obsolete camera edit form

* change terminology to off/on instead of disabled/enabled

* docs

* move menu options and add current camera name badge

* docs

* tweaks
This commit is contained in:
Josh Hawkins
2026-05-24 14:59:56 -06:00
committed by GitHub
parent ec44398b1c
commit 7e0e0635b8
17 changed files with 419 additions and 1083 deletions
+34 -3
View File
@@ -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