tweaks and add ability enable disabled cameras

more backend changes required

web/public/locales/en/views/settings.json

@@ -17,13 +17,13 @@
   },
   "menu": {
     "general": "General",
-    "globalConfig": "Global Config",
+    "globalConfig": "Global configuration",
     "system": "System",
     "integrations": "Integrations",
-    "cameras": "Camera Configuration",
+    "cameras": "Camera configuration",
     "ui": "UI",
     "profileSettings": "Profile Settings",
-    "globalDetect": "Object Detection",
+    "globalDetect": "Object detection",
     "globalRecording": "Recording",
     "globalSnapshots": "Snapshots",
     "globalFfmpeg": "FFmpeg",
@@ -47,13 +47,13 @@
     "systemDetectorHardware": "Detector hardware",
     "systemDetectionModel": "Detection model",
     "systemMqtt": "MQTT",
-    "integrationSemanticSearch": "Semantic Search",
+    "integrationSemanticSearch": "Semantic search",
     "integrationGenerativeAi": "Generative AI",
     "integrationFaceRecognition": "Face recognition",
-    "integrationLpr": "License Plate Recognition",
+    "integrationLpr": "License plate recognition",
     "integrationObjectClassification": "Object classification",
     "integrationAudioTranscription": "Audio transcription",
-    "cameraDetect": "Object Detection",
+    "cameraDetect": "Object detection",
     "cameraFfmpeg": "FFmpeg",
     "cameraRecording": "Recording",
     "cameraSnapshots": "Snapshots",
@@ -66,7 +66,7 @@
     "cameraLivePlayback": "Live playback",
     "cameraBirdseye": "Birdseye",
     "cameraFaceRecognition": "Face recognition",
-    "cameraLpr": "License Plate Recognition",
+    "cameraLpr": "License plate recognition",
     "cameraMqttConfig": "MQTT",
     "cameraOnvif": "ONVIF",
     "cameraUi": "Camera UI",
@@ -75,7 +75,7 @@
     "cameraManagement": "Management",
     "cameraReview": "Review",
     "masksAndZones": "Masks / Zones",
-    "motionTuner": "Motion Tuner",
+    "motionTuner": "Motion tuner",
     "enrichments": "Enrichments",
     "users": "Users",
     "roles": "Roles",
@@ -426,7 +426,11 @@
     "backToSettings": "Back to Camera Settings",
     "streams": {
       "title": "Enable / Disable Cameras",
-      "desc": "Temporarily disable a camera until Frigate restarts. Disabling a camera completely stops Frigate's processing of this camera's streams. Detection, recording, and debugging will be unavailable.<br /> <em>Note: This does not disable go2rtc restreams.</em>"
+      "enableLabel": "Enabled cameras",
+      "enableDesc": "Temporarily disable an enabled camera until Frigate restarts. Disabling a camera completely stops Frigate's processing of this camera's streams. Detection, recording, and debugging will be unavailable.<br /> <em>Note: This does not disable go2rtc restreams.</em>",
+      "disableLabel": "Disabled cameras",
+      "disableDesc": "Enable a camera that is currently not visible in the UI and disabled in the configuration. A restart of Frigate is required after enabling.",
+      "enableSuccess": "Enabled {{cameraName}} in configuration"
     },
     "cameraConfig": {
       "add": "Add Camera",

web/src/components/config-form/theme/components/index.tsx

@@ -118,7 +118,7 @@ export function AdvancedCollapsible({
         <Button
           variant="ghost"
           size={effectiveSize}
-          className="w-full justify-start gap-2 pl-0"
+          className="w-full justify-start gap-2 pl-0 hover:bg-transparent"
         >
           {open ? (
             <LuChevronDown className="h-4 w-4" />
@@ -128,7 +128,7 @@ export function AdvancedCollapsible({
           {label}
         </Button>
       </CollapsibleTrigger>
-      <CollapsibleContent className="mt-2 space-y-4 rounded-lg border border-border/60 bg-background_alt/70 p-4">
+      <CollapsibleContent className="mt-2 space-y-4 rounded-lg border border-border/60 bg-secondary/40 p-4">
         {children}
       </CollapsibleContent>
     </Collapsible>

web/src/pages/Settings.tsx

@@ -585,9 +585,7 @@ function MobileMenuItem({
       }}
     >
       <div className="w-full">
-        {label ?? (
+        {label ?? <div>{t("menu." + item.key)}</div>}
-          <div className="smart-capitalize">{t("menu." + item.key)}</div>
-        )}
       </div>
       <LuChevronRight className="size-4" />
     </div>
@@ -1048,7 +1046,7 @@ export default function Settings() {
 
       return (
         <div className="flex w-full items-center justify-between pr-4 md:pr-0">
-          <div className="smart-capitalize">{t("menu." + key)}</div>
+          <div>{t("menu." + key)}</div>
           {(showOverrideDot || showUnsavedDot) && (
             <div className="ml-2 flex items-center gap-2">
               {showOverrideDot && (
@@ -1104,9 +1102,7 @@ export default function Settings() {
                   <div key={group.label} className="mb-3">
                     {filteredItems.length > 1 && (
                       <h3 className="mb-2 ml-2 text-sm font-medium text-secondary-foreground">
-                        <div className="smart-capitalize">
+                        <div>{t("menu." + group.label)}</div>
-                          {t("menu." + group.label)}
-                        </div>
                       </h3>
                     )}
                     {filteredItems.map((item) => (
@@ -1275,7 +1271,7 @@ export default function Settings() {
   return (
     <div className="flex h-full flex-col">
       <Toaster position="top-center" />
-      <div className="flex items-center justify-between border-b border-secondary p-3">
+      <div className="flex min-h-16 items-center justify-between border-b border-secondary p-3">
         <Heading as="h3" className="mb-0">
           {t("menu.settings", { ns: "common" })}
         </Heading>
@@ -1393,9 +1389,7 @@ export default function Settings() {
                               : "text-sidebar-foreground/80",
                           )}
                         >
-                          <div className="smart-capitalize">
+                          <div>{t("menu." + group.label)}</div>
-                            {t("menu." + group.label)}
-                          </div>
                         </SidebarGroupLabel>
                         <SidebarMenuSub className="mx-2 border-0">
                           {filteredItems.map((item) => (

web/src/views/settings/CameraManagementView.tsx

@@ -1,6 +1,11 @@
 import Heading from "@/components/ui/heading";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { SettingsGroupCard } from "@/components/card/SettingsGroupCard";
+import {
+  CONTROL_COLUMN_CLASS_NAME,
+  SettingsGroupCard,
+  SPLIT_ROW_CLASS_NAME,
+} from "@/components/card/SettingsGroupCard";
+import { toast } from "sonner";
 import { Toaster } from "@/components/ui/sonner";
 import { Button } from "@/components/ui/button";
 import useSWR from "swr";
@@ -15,6 +20,9 @@ import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import { Switch } from "@/components/ui/switch";
 import { Trans } from "react-i18next";
 import { useEnabledState } from "@/api/ws";
+import { Label } from "@/components/ui/label";
+import axios from "axios";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 type CameraManagementViewProps = {
   setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
@@ -37,9 +45,20 @@ export default function CameraManagementView({
   const [showWizard, setShowWizard] = useState(false);
 
   // List of cameras for dropdown
-  const cameras = useMemo(() => {
+  const enabledCameras = useMemo(() => {
     if (config) {
-      return Object.keys(config.cameras).sort();
+      return Object.keys(config.cameras)
+        .filter((camera) => config.cameras[camera].enabled_in_config)
+        .sort();
+    }
+    return [];
+  }, [config]);
+
+  const disabledCameras = useMemo(() => {
+    if (config) {
+      return Object.keys(config.cameras)
+        .filter((camera) => !config.cameras[camera].enabled_in_config)
+        .sort();
     }
     return [];
   }, [config]);
@@ -82,7 +101,7 @@ export default function CameraManagementView({
                   {t("cameraManagement.addCamera")}
                 </Button>
 
-                {cameras.length > 0 && (
+                {enabledCameras.length > 0 && (
                   <SettingsGroupCard
                     title={
                       <Trans ns="views/settings">
@@ -90,14 +109,22 @@ export default function CameraManagementView({
                       </Trans>
                     }
                   >
-                    <div className="space-y-4">
+                    <div className={SPLIT_ROW_CLASS_NAME}>
-                      <div className="max-w-md text-sm text-muted-foreground">
+                      <div className="space-y-1.5">
-                        <Trans ns="views/settings">
+                        <Label
-                          cameraManagement.streams.desc
+                          className="cursor-pointer"
-                        </Trans>
+                          htmlFor={"enabled-cameras-switch"}
+                        >
+                          {t("cameraManagement.streams.enableLabel")}
+                          <p className="hidden text-sm text-muted-foreground md:block">
+                            <Trans ns="views/settings">
+                              cameraManagement.streams.enableDesc
+                            </Trans>
+                          </p>
+                        </Label>
                       </div>
                       <div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
-                        {cameras.map((camera) => (
+                        {enabledCameras.map((camera) => (
                           <div
                             key={camera}
                             className="flex flex-row items-center justify-between"
@@ -107,7 +134,48 @@ export default function CameraManagementView({
                           </div>
                         ))}
                       </div>
+                      <p className="text-sm text-muted-foreground md:hidden">
+                        <Trans ns="views/settings">
+                          cameraManagement.streams.enableDesc
+                        </Trans>
+                      </p>
                     </div>
+                    {disabledCameras.length > 0 && (
+                      <div className={SPLIT_ROW_CLASS_NAME}>
+                        <div className="space-y-1.5">
+                          <Label
+                            className="cursor-pointer"
+                            htmlFor={"disabled-cameras-switch"}
+                          >
+                            {t("cameraManagement.streams.disableLabel")}
+                          </Label>
+                          <p className="hidden text-sm text-muted-foreground md:block">
+                            {t("cameraManagement.streams.disableDesc")}
+                          </p>
+                        </div>
+                        <div
+                          className={`${CONTROL_COLUMN_CLASS_NAME} space-y-1.5`}
+                        >
+                          <div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
+                            {disabledCameras.map((camera) => (
+                              <div
+                                key={camera}
+                                className="flex flex-row items-center justify-between"
+                              >
+                                <CameraNameLabel camera={camera} />
+                                <CameraConfigEnableSwitch
+                                  cameraName={camera}
+                                  onConfigChanged={updateConfig}
+                                />
+                              </div>
+                            ))}
+                          </div>
+                          <p className="text-sm text-muted-foreground md:hidden">
+                            {t("cameraManagement.streams.disableDesc")}
+                          </p>
+                        </div>
+                      </div>
+                    )}
                   </SettingsGroupCard>
                 )}
               </div>
@@ -169,3 +237,79 @@ function CameraEnableSwitch({ cameraName }: CameraEnableSwitchProps) {
     </div>
   );
 }
+
+function CameraConfigEnableSwitch({
+  cameraName,
+  onConfigChanged,
+}: CameraEnableSwitchProps & {
+  onConfigChanged: () => Promise<unknown>;
+}) {
+  const { t } = useTranslation(["common", "views/settings"]);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const onCheckedChange = useCallback(
+    async (isChecked: boolean) => {
+      if (!isChecked || isSaving) {
+        return;
+      }
+
+      setIsSaving(true);
+
+      try {
+        await axios.put("config/set", {
+          requires_restart: 0,
+          config_data: {
+            cameras: {
+              [cameraName]: {
+                enabled: true,
+              },
+            },
+          },
+          update_topic: `config/cameras/${cameraName}/enabled`,
+        });
+
+        await onConfigChanged();
+
+        toast.success(
+          t("cameraManagement.streams.enableSuccess", {
+            ns: "views/settings",
+            cameraName,
+          }),
+          {
+            position: "top-center",
+          },
+        );
+      } catch (error) {
+        const errorMessage =
+          axios.isAxiosError(error) &&
+          (error.response?.data?.message || error.response?.data?.detail)
+            ? error.response?.data?.message || error.response?.data?.detail
+            : t("toast.save.error.noMessage", { ns: "common" });
+
+        toast.error(
+          t("toast.save.error.title", { errorMessage, ns: "common" }),
+          {
+            position: "top-center",
+          },
+        );
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [cameraName, isSaving, onConfigChanged, t],
+  );
+
+  return (
+    <div className="flex flex-row items-center">
+      {isSaving ? (
+        <ActivityIndicator className="h-5 w-8" size={16} />
+      ) : (
+        <Switch
+          id={`camera-enabled-${cameraName}`}
+          checked={false}
+          onCheckedChange={onCheckedChange}
+        />
+      )}
+    </div>
+  );
+}

web/src/views/settings/UiSettingsView.tsx

@@ -25,6 +25,7 @@ import {
   DESCRIPTION_CLASS_NAME,
   CONTROL_COLUMN_CLASS_NAME,
 } from "@/components/card/SettingsGroupCard";
+import Heading from "@/components/ui/heading";
 
 const WEEK_STARTS_ON = ["Sunday", "Monday"];
 
@@ -209,9 +210,12 @@ export default function UiSettingsView() {
   ];
 
   return (
-    <div className="flex size-full flex-col md:flex-row md:pb-8">
+    <div className="flex size-full flex-col md:pb-8">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+      <Heading as="h4" className="mb-3">
+        {t("general.title")}
+      </Heading>
+      <div className="scrollbar-container mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2">
         <div className="w-full max-w-5xl space-y-6">
           <SettingsGroupCard title={t("general.liveDashboard.title")}>
             <div className="space-y-6">