show runtime overrides in the settings form

The settings form read a camera section's saved config value, but its dependent warnings (audio transcription requiring audio detection, snapshots requiring detect, etc.) read the live config instead. A runtime toggle from the live view, MQTT, or an active profile can turn a section off without touching yaml, and that override persists across restarts, so the Enable switch showed on while the warning said the feature wasn't enabled. This adds an "Overridden (Live)" badge to any field whose live value differs from what's saved, and swaps the affected warnings to runtime-specific wording when a runtime override is the actual cause instead of the config.
This commit is contained in:
Josh Hawkins
2026-09-18 06:55:55 -05:00
parent ac0f6c9dd3
commit e24bb8be72
16 changed files with 431 additions and 11 deletions
@@ -0,0 +1,55 @@
import { useTranslation } from "react-i18next";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { Tooltip, TooltipContent } from "../ui/tooltip";
import { TooltipTrigger } from "@radix-ui/react-tooltip";
type RuntimeOverrideIndicatorProps = {
/** The value the camera is running with, which differs from the saved config. */
runtimeValue: unknown;
className?: string;
};
/**
* Field-level companion to the section override badges. Marks a field the
* running camera has drifted from, so the saved value on screen never reads as
* the live one.
*/
export default function RuntimeOverrideIndicator({
runtimeValue,
className,
}: RuntimeOverrideIndicatorProps) {
const { t } = useTranslation(["views/settings", "common"]);
const displayValue =
typeof runtimeValue === "boolean"
? t(runtimeValue ? "button.on" : "button.off", { ns: "common" })
: Array.isArray(runtimeValue)
? runtimeValue.join(", ")
: String(runtimeValue);
return (
<Tooltip>
<TooltipTrigger asChild>
<Badge
variant="secondary"
className={cn(
"cursor-default border-2 border-selected text-center align-middle text-xs font-normal text-primary-variant",
className,
)}
>
{t("button.overriddenLive", { ns: "views/settings" })}
</Badge>
</TooltipTrigger>
<TooltipContent className="max-w-72">
<p>{t("button.overriddenLiveTooltip", { ns: "views/settings" })}</p>
<p className="mt-1">
{t("button.overriddenLiveValue", {
ns: "views/settings",
value: displayValue,
})}
</p>
</TooltipContent>
</Tooltip>
);
}