administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-10 18:43:09 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor ffmpeg section for readability

Browse Source
This commit is contained in:
Josh Hawkins 2026-02-15 22:11:01 -06:00
parent ea13342bcb
commit 2230b7b3aa
11 changed files with 527 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/public/locales/en/config/validation.json
View File

@ -25,7 +25,8 @@
"ffmpeg": {
"inputs": {
"rolesUnique": "Each role can only be assigned to one input stream.",
"detectRequired": "At least one input stream must be assigned the 'detect' role."
"detectRequired": "At least one input stream must be assigned the 'detect' role.",
"hwaccelDetectOnly": "Only the input stream with the detect role can define hardware acceleration arguments."
}
}
}

9
web/public/locales/en/views/settings.json
View File

@ -22,7 +22,7 @@
"integrations": "Integrations",
"cameras": "Camera configuration",
"ui": "UI",
"profileSettings": "Profile Settings",
"profileSettings": "Profile settings",
"globalDetect": "Object detection",
"globalRecording": "Recording",
"globalSnapshots": "Snapshots",
@ -1247,9 +1247,13 @@
"ffmpegArgs": {
"preset": "Preset",
"manual": "Manual arguments",
"inherit": "Inherit from camera setting",
"selectPreset": "Select preset",
"manualPlaceholder": "Enter FFmpeg arguments"
},
"cameraInputs": {
"itemTitle": "Stream {{index}}: {{path}}"
},
"restartRequiredField": "Restart required",
"restartRequiredFooter": "Configuration changed - Restart required",
"sections": {
@ -1341,7 +1345,8 @@
},
"timestamp_style": {
"title": "Timestamp Settings"
}
},
"searchPlaceholder": "Search..."
},
"globalConfig": {
"title": "Global Configuration",

2
web/src/components/card/SettingsGroupCard.tsx
View File

@ -2,7 +2,7 @@ import { ReactNode } from "react";
import { Label } from "../ui/label";
export const SPLIT_ROW_CLASS_NAME =
"space-y-2 md:grid md:grid-cols-[minmax(14rem,22rem)_minmax(0,1fr)] md:items-start md:gap-x-6 md:space-y-0";
"space-y-2 md:grid md:grid-cols-[minmax(14rem,24rem)_minmax(0,1fr)] md:items-start md:gap-x-6 md:space-y-0";
export const DESCRIPTION_CLASS_NAME = "text-sm text-muted-foreground";
export const CONTROL_COLUMN_CLASS_NAME = "w-full md:max-w-2xl";

34
web/src/components/config-form/section-configs/ffmpeg.ts
View File

@ -7,11 +7,15 @@ const arrayAsTextWidget = {
},
};
const ffmpegArgsWidget = (presetField: string) => ({
const ffmpegArgsWidget = (
presetField: string,
extraOptions?: Record<string, unknown>,
) => ({
"ui:widget": "FfmpegArgsWidget",
"ui:options": {
suppressMultiSchema: true,
ffmpegPresetField: presetField,
...extraOptions,
},
});
@ -23,35 +27,36 @@ const ffmpeg: SectionConfigOverrides = {
"inputs.hwaccel_args": "/configuration/ffmpeg_presets#hwaccel-presets",
input_args: "/configuration/ffmpeg_presets#input-args-presets",
"inputs.input_args": "/configuration/ffmpeg_presets#input-args-presets",
output_args: "/configuration/ffmpeg_presets#output-args-presets",
"inputs.output_args": "/configuration/ffmpeg_presets#output-args-presets",
"output_args.record": "/configuration/ffmpeg_presets#output-args-presets",
},
restartRequired: [],
fieldOrder: [
"inputs",
"path",
"global_args",
"hwaccel_args",
"input_args",
"hwaccel_args",
"output_args",
"path",
"retry_interval",
"apple_compatibility",
"gpu",
],
hiddenFields: [],
advancedFields: [
"path",
"global_args",
"hwaccel_args",
"input_args",
"output_args",
"retry_interval",
"apple_compatibility",
"gpu",
],
overrideFields: [
"inputs",
"path",
"global_args",
"hwaccel_args",
"input_args",
"hwaccel_args",
"output_args",
"retry_interval",
"apple_compatibility",
@ -73,6 +78,7 @@ const ffmpeg: SectionConfigOverrides = {
},
},
inputs: {
"ui:field": "CameraInputsField",
items: {
path: {
"ui:options": { size: "full" },
@ -83,8 +89,15 @@ const ffmpeg: SectionConfigOverrides = {
global_args: {
"ui:widget": "hidden",
},
hwaccel_args: ffmpegArgsWidget("hwaccel_args"),
input_args: ffmpegArgsWidget("input_args"),
hwaccel_args: ffmpegArgsWidget("hwaccel_args", {
allowInherit: true,
hideDescription: true,
showArrayItemDescription: true,
}),
input_args: ffmpegArgsWidget("input_args", {
hideDescription: true,
showArrayItemDescription: true,
}),
output_args: {
items: {
detect: arrayAsTextWidget,
@ -107,9 +120,9 @@ const ffmpeg: SectionConfigOverrides = {
"gpu",
],
fieldOrder: [
"hwaccel_args",
"path",
"global_args",
"hwaccel_args",
"input_args",
"output_args",
"retry_interval",
@ -120,6 +133,7 @@ const ffmpeg: SectionConfigOverrides = {
"global_args",
"input_args",
"output_args",
"path",
"retry_interval",
"apple_compatibility",
"gpu",

24
web/src/components/config-form/section-validations/ffmpeg.ts
View File

@ -3,6 +3,18 @@ import type { TFunction } from "i18next";
import { isJsonObject } from "@/lib/utils";
import type { JsonObject } from "@/types/configForm";
function hasValue(value: unknown): boolean {
if (value === null || value === undefined || value === "") {
return false;
}
if (Array.isArray(value)) {
return value.length > 0;
}
return true;
}
export function validateFfmpegInputRoles(
formData: unknown,
errors: FormValidation,
@ -19,6 +31,7 @@ export function validateFfmpegInputRoles(
const roleCounts = new Map<string, number>();
let hasDetect = false;
let hasInvalidHwaccel = false;
inputs.forEach((input) => {
if (!isJsonObject(input) || !Array.isArray(input.roles)) {
return;
@ -31,6 +44,8 @@ export function validateFfmpegInputRoles(
});
if (input.roles.includes("detect")) {
hasDetect = true;
} else if (hasValue(input.hwaccel_args)) {
hasInvalidHwaccel = true;
}
});
@ -56,5 +71,14 @@ export function validateFfmpegInputRoles(
);
}
if (hasInvalidHwaccel) {
const inputsErrors = errors.inputs as {
addError?: (message: string) => void;
};
inputsErrors?.addError?.(
t("ffmpeg.inputs.hwaccelDetectOnly", { ns: "config/validation" }),
);
}
return errors;
}

6
web/src/components/config-form/sections/BaseSection.tsx
View File

@ -211,6 +211,7 @@ export function ConfigSection({
[onPendingDataChange, sectionPath, cameraName],
);
const [isSaving, setIsSaving] = useState(false);
const [hasValidationErrors, setHasValidationErrors] = useState(false);
const [extraHasChanges, setExtraHasChanges] = useState(false);
const [formKey, setFormKey] = useState(0);
const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
@ -754,6 +755,7 @@ export function ConfigSection({
schema={modifiedSchema}
formData={currentFormData}
onChange={handleChange}
onValidationChange={setHasValidationErrors}
fieldOrder={sectionConfig.fieldOrder}
fieldGroups={sectionConfig.fieldGroups}
hiddenFields={sectionConfig.hiddenFields}
@ -851,7 +853,9 @@ export function ConfigSection({
<Button
onClick={handleSave}
variant="select"
disabled={!hasChanges || isSaving || disabled}
disabled={
!hasChanges || hasValidationErrors || isSaving || disabled
}
className="flex min-w-36 flex-1 gap-2"
>
{isSaving ? (

409
web/src/components/config-form/theme/fields/CameraInputsField.tsx Normal file
View File

@ -0,0 +1,409 @@
import type {
ErrorSchema,
FieldProps,
RJSFSchema,
UiSchema,
} from "@rjsf/utils";
import { toFieldPathId } from "@rjsf/utils";
import { cloneDeep, isEqual } from "lodash";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { applySchemaDefaults } from "@/lib/config-schema";
import { mergeUiSchema } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
LuChevronDown,
LuChevronRight,
LuPlus,
LuTrash2,
} from "react-icons/lu";
import type { ConfigFormContext } from "@/types/configForm";
type FfmpegInput = {
path?: string;
roles?: string[];
hwaccel_args?: unknown;
};
const asInputList = (formData: unknown): FfmpegInput[] => {
if (!Array.isArray(formData)) {
return [];
}
return formData.filter(
(item): item is FfmpegInput => typeof item === "object" && item !== null,
);
};
const getItemSchema = (schema: RJSFSchema): RJSFSchema | undefined => {
const items = schema.items;
if (!items || typeof items !== "object" || Array.isArray(items)) {
return undefined;
}
return items as RJSFSchema;
};
const getItemProperties = (
schema: RJSFSchema | undefined,
): Record<string, RJSFSchema> => {
if (!schema || typeof schema.properties !== "object" || !schema.properties) {
return {};
}
return schema.properties as Record<string, RJSFSchema>;
};
const hasDetectRole = (input: FfmpegInput): boolean =>
Array.isArray(input.roles) && input.roles.includes("detect");
const hasHwaccelValue = (value: unknown): boolean => {
if (value === null || value === undefined || value === "") {
return false;
}
if (Array.isArray(value)) {
return value.length > 0;
}
return true;
};
const normalizeNonDetectHwaccel = (inputs: FfmpegInput[]): FfmpegInput[] =>
inputs.map((input) => {
if (hasDetectRole(input)) {
return input;
}
if (!hasHwaccelValue(input.hwaccel_args)) {
return input;
}
return {
...input,
hwaccel_args: null,
};
});
export function CameraInputsField(props: FieldProps) {
const {
schema,
uiSchema,
formData,
onChange,
fieldPathId,
registry,
idSchema,
errorSchema,
disabled,
readonly,
hideError,
onBlur,
onFocus,
} = props;
const formContext = registry?.formContext as ConfigFormContext | undefined;
const isCameraLevel = formContext?.level === "camera";
const effectiveNamespace = isCameraLevel ? "config/cameras" : "config/global";
const { t, i18n } = useTranslation([
"common",
"views/settings",
effectiveNamespace,
]);
const inputs = useMemo(() => asInputList(formData), [formData]);
const arraySchema = schema as RJSFSchema;
const itemSchema = useMemo(() => getItemSchema(arraySchema), [arraySchema]);
const itemProperties = useMemo(
() => getItemProperties(itemSchema),
[itemSchema],
);
const itemUiSchema = useMemo(
() =>
((uiSchema as { items?: UiSchema } | undefined)?.items ?? {}) as UiSchema,
[uiSchema],
);
const SchemaField = registry.fields.SchemaField;
const [openByIndex, setOpenByIndex] = useState<Record<number, boolean>>({});
useEffect(() => {
setOpenByIndex((previous) => {
const next: Record<number, boolean> = {};
for (let index = 0; index < inputs.length; index += 1) {
next[index] = previous[index] ?? true;
}
return next;
});
}, [inputs.length]);
useEffect(() => {
const normalized = normalizeNonDetectHwaccel(inputs);
if (!isEqual(normalized, inputs)) {
onChange(normalized, fieldPathId.path);
}
}, [fieldPathId.path, inputs, onChange]);
const handleFieldValueChange = useCallback(
(index: number, fieldName: string, nextValue: unknown) => {
const nextInputs = cloneDeep(inputs);
const item =
(nextInputs[index] as Record<string, unknown> | undefined) ??
({} as Record<string, unknown>);
item[fieldName] = nextValue;
nextInputs[index] = item;
onChange(normalizeNonDetectHwaccel(nextInputs), fieldPathId.path);
},
[fieldPathId.path, inputs, onChange],
);
const handleAddInput = useCallback(() => {
const base = itemSchema
? (applySchemaDefaults(itemSchema) as FfmpegInput)
: ({} as FfmpegInput);
const nextInputs = normalizeNonDetectHwaccel([...inputs, base]);
onChange(nextInputs, fieldPathId.path);
setOpenByIndex((previous) => ({ ...previous, [inputs.length]: true }));
}, [fieldPathId.path, inputs, itemSchema, onChange]);
const handleRemoveInput = useCallback(
(index: number) => {
const nextInputs = inputs.filter(
(_, currentIndex) => currentIndex !== index,
);
onChange(nextInputs, fieldPathId.path);
setOpenByIndex((previous) => {
const next: Record<number, boolean> = {};
Object.entries(previous).forEach(([key, value]) => {
const current = Number(key);
if (Number.isNaN(current) || current === index) {
return;
}
next[current > index ? current - 1 : current] = value;
});
return next;
});
},
[fieldPathId.path, inputs, onChange],
);
const renderField = useCallback(
(
index: number,
fieldName: string,
options?: {
extraUiSchema?: UiSchema;
showSchemaDescription?: boolean;
},
) => {
if (!SchemaField) {
return null;
}
const fieldSchema = itemProperties[fieldName];
if (!fieldSchema) {
return null;
}
const itemData = inputs[index] as Record<string, unknown>;
const itemPath = [...fieldPathId.path, index];
const itemFieldPathId = toFieldPathId(
fieldName,
registry.globalFormOptions,
itemPath,
);
const itemErrors = (
errorSchema as Record<string, ErrorSchema> | undefined
)?.[index] as Record<string, ErrorSchema> | undefined;
const fieldErrorSchema = itemErrors?.[fieldName];
const baseUiSchema =
(itemUiSchema[fieldName] as UiSchema | undefined) ?? ({} as UiSchema);
const mergedUiSchema = options?.extraUiSchema
? mergeUiSchema(baseUiSchema, options.extraUiSchema)
: baseUiSchema;
const fieldTranslationDescriptionKey = `ffmpeg.inputs.${fieldName}.description`;
const translatedDescription = i18n.exists(
fieldTranslationDescriptionKey,
{
ns: effectiveNamespace,
},
)
? t(fieldTranslationDescriptionKey, { ns: effectiveNamespace })
: "";
const fieldDescription =
typeof fieldSchema.description === "string" &&
fieldSchema.description.length > 0
? fieldSchema.description
: translatedDescription;
const handleScopedFieldChange = (
nextValue: unknown,
_path: unknown,
_errors?: ErrorSchema,
_id?: string,
) => {
handleFieldValueChange(index, fieldName, nextValue);
};
return (
<div className="space-y-1">
<SchemaField
name={fieldName}
schema={fieldSchema}
uiSchema={mergedUiSchema}
fieldPathId={itemFieldPathId}
formData={itemData?.[fieldName]}
errorSchema={fieldErrorSchema}
onChange={handleScopedFieldChange}
onBlur={onBlur}
onFocus={onFocus}
registry={registry}
disabled={disabled}
readonly={readonly}
hideError={hideError}
/>
{options?.showSchemaDescription && fieldDescription ? (
<p className="text-xs text-muted-foreground">{fieldDescription}</p>
) : null}
</div>
);
},
[
SchemaField,
itemProperties,
inputs,
fieldPathId.path,
registry,
errorSchema,
itemUiSchema,
i18n,
handleFieldValueChange,
effectiveNamespace,
onBlur,
onFocus,
disabled,
readonly,
hideError,
t,
],
);
const baseId = idSchema?.$id ?? "ffmpeg_inputs";
return (
<div className="space-y-3">
{inputs.map((input, index) => {
const open = openByIndex[index] ?? true;
const itemTitle = t("configForm.cameraInputs.itemTitle", {
ns: "views/settings",
index: index + 1,
path: typeof input.path === "string" ? input.path.trim() : "",
});
return (
<Card key={`${baseId}-${index}`} className="w-full">
<Collapsible
open={open}
onOpenChange={(nextOpen) =>
setOpenByIndex((previous) => ({
...previous,
[index]: nextOpen,
}))
}
>
<CollapsibleTrigger asChild>
<CardHeader className="cursor-pointer p-4 transition-colors hover:bg-muted/50">
<div className="flex items-center justify-between gap-4">
<CardTitle className="text-sm">{itemTitle}</CardTitle>
{open ? (
<LuChevronDown className="h-4 w-4" />
) : (
<LuChevronRight className="h-4 w-4" />
)}
</div>
</CardHeader>
</CollapsibleTrigger>
<CollapsibleContent>
<CardContent className="space-y-4 p-4 pt-0">
<div className="w-full">
{renderField(index, "path", {
extraUiSchema: {
"ui:options": {
size: "full",
splitLayout: false,
},
},
showSchemaDescription: true,
})}
</div>
<div className="w-full">
{renderField(index, "roles", {
showSchemaDescription: true,
})}
</div>
{renderField(index, "input_args")}
{hasDetectRole(input)
? renderField(index, "hwaccel_args", {
extraUiSchema: {
"ui:options": {
allowInherit: true,
},
},
})
: null}
{renderField(index, "output_args")}
<div className="flex justify-end">
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => handleRemoveInput(index)}
disabled={disabled || readonly}
aria-label={t("button.delete", { ns: "common" })}
>
<LuTrash2 className="h-4 w-4" />
</Button>
</div>
</CardContent>
</CollapsibleContent>
</Collapsible>
</Card>
);
})}
<Button
type="button"
variant="outline"
size="sm"
onClick={handleAddInput}
disabled={disabled || readonly}
className="gap-2"
>
<LuPlus className="h-4 w-4" />
{t("button.add", { ns: "common" })}
</Button>
</div>
);
}
export default CameraInputsField;

2
web/src/components/config-form/theme/frigateTheme.ts
View File

@ -40,6 +40,7 @@ import { WrapIfAdditionalTemplate } from "./templates/WrapIfAdditionalTemplate";
import { LayoutGridField } from "./fields/LayoutGridField";
import { DetectorHardwareField } from "./fields/DetectorHardwareField";
import { ReplaceRulesField } from "./fields/ReplaceRulesField";
import { CameraInputsField } from "./fields/CameraInputsField";
export interface FrigateTheme {
widgets: RegistryWidgetsType;
@ -87,5 +88,6 @@ export const frigateTheme: FrigateTheme = {
LayoutGridField: LayoutGridField,
DetectorHardwareField: DetectorHardwareField,
ReplaceRulesField: ReplaceRulesField,
CameraInputsField: CameraInputsField,
},
};

9
web/src/components/config-form/theme/templates/FieldTemplate.tsx
View File

@ -28,6 +28,7 @@ import {
import { normalizeOverridePath } from "../utils/overrides";
import get from "lodash/get";
import isEqual from "lodash/isEqual";
import { SPLIT_ROW_CLASS_NAME } from "@/components/card/SettingsGroupCard";
function _isArrayItemInAdditionalProperty(
pathSegments: Array<string | number>,
@ -101,6 +102,8 @@ export function FieldTemplate(props: FieldTemplateProps) {
const uiOptionsFromSchema = uiSchema?.["ui:options"] || {};
const suppressDescription = uiOptionsFromSchema.suppressDescription === true;
const showArrayItemDescription =
uiOptionsFromSchema.showArrayItemDescription === true;
// Determine field characteristics
const isBoolean =
@ -155,7 +158,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
!isMultiSchemaWrapper &&
!isObjectField &&
!isAdditionalProperty &&
!isArrayItemInAdditionalProp &&
(!isArrayItemInAdditionalProp || showArrayItemDescription) &&
!suppressDescription;
const translationPath = buildTranslationPath(
@ -512,7 +515,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
{renderDocsLink()}
</div>
<div className="hidden md:grid md:grid-cols-[minmax(14rem,22rem)_minmax(0,1fr)] md:items-start md:gap-x-6">
<div className={cn("hidden md:grid", SPLIT_ROW_CLASS_NAME)}>
<div className="space-y-0.5">
{renderBooleanLabel()}
{renderDescription()}
@ -537,7 +540,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
);
const renderSplitValueLayout = () => (
<div className="space-y-1.5 md:grid md:grid-cols-[minmax(14rem,22rem)_minmax(0,1fr)] md:items-start md:gap-x-6 md:space-y-0 md:space-y-3">
<div className={cn(SPLIT_ROW_CLASS_NAME, "space-y-1.5 md:space-y-3")}>
<div className="space-y-1.5">
{renderSplitLabel()}
{renderDescription("hidden md:block")}

41
web/src/components/config-form/theme/widgets/FfmpegArgsWidget.tsx
View File

@ -22,7 +22,7 @@ type FfmpegPresetResponse = {
};
};
type FfmpegArgsMode = "preset" | "manual";
type FfmpegArgsMode = "preset" | "manual" | "inherit";
type PresetField =
| "hwaccel_args"
@ -58,7 +58,12 @@ const resolveMode = (
value: unknown,
presets: string[],
defaultMode: FfmpegArgsMode,
allowInherit: boolean,
): FfmpegArgsMode => {
if (allowInherit && (value === null || value === undefined)) {
return "inherit";
}
if (Array.isArray(value)) {
return "manual";
}
@ -109,6 +114,8 @@ export function FfmpegArgsWidget(props: WidgetProps) {
id,
} = props;
const presetField = options?.ffmpegPresetField as PresetField | undefined;
const allowInherit = options?.allowInherit === true;
const hideDescription = options?.hideDescription === true;
const { data } = useSWR<FfmpegPresetResponse>("ffmpeg/presets");
@ -121,14 +128,14 @@ export function FfmpegArgsWidget(props: WidgetProps) {
const defaultMode: FfmpegArgsMode = canUsePresets ? "preset" : "manual";
const detectedMode = useMemo(
() => resolveMode(value, presetOptions, defaultMode),
[value, presetOptions, defaultMode],
() => resolveMode(value, presetOptions, defaultMode, allowInherit),
[value, presetOptions, defaultMode, allowInherit],
);
const [mode, setMode] = useState<FfmpegArgsMode>(detectedMode);
useEffect(() => {
if (!canUsePresets) {
if (!canUsePresets && detectedMode === "preset") {
setMode("manual");
return;
}
@ -140,6 +147,11 @@ export function FfmpegArgsWidget(props: WidgetProps) {
(nextMode: FfmpegArgsMode) => {
setMode(nextMode);
if (nextMode === "inherit") {
onChange(null);
return;
}
if (nextMode === "preset") {
const currentValue = typeof value === "string" ? value : undefined;
const presetValue =
@ -255,9 +267,26 @@ export function FfmpegArgsWidget(props: WidgetProps) {
{t("configForm.ffmpegArgs.manual", { ns: "views/settings" })}
</label>
</div>
{allowInherit ? (
<div className="flex items-center space-x-2">
<RadioGroupItem
value="inherit"
id={`${id}-inherit`}
disabled={disabled || readonly}
className={
mode === "inherit"
? "bg-selected from-selected/50 to-selected/90 text-selected"
: "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
}
/>
<label htmlFor={`${id}-inherit`} className="cursor-pointer text-sm">
{t("configForm.ffmpegArgs.inherit", { ns: "views/settings" })}
</label>
</div>
) : null}
</RadioGroup>
{mode === "preset" && canUsePresets ? (
{mode === "inherit" ? null : mode === "preset" && canUsePresets ? (
<Select
value={presetValue}
onValueChange={handlePresetChange}
@ -297,7 +326,7 @@ export function FfmpegArgsWidget(props: WidgetProps) {
/>
)}
{fieldDescription ? (
{!hideDescription && fieldDescription ? (
<p className="text-xs text-muted-foreground">{fieldDescription}</p>
) : null}
</div>

19
web/src/components/config-form/theme/widgets/SwitchesWidget.tsx
View File

@ -185,13 +185,18 @@ export function SwitchesWidget(props: WidgetProps) {
) : (
<>
{enableSearch && (
<Input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="mb-2"
/>
<div className="mr-2">
<Input
type="text"
placeholder={t?.("configForm.searchPlaceholder", {
ns: "views/settings",
defaultValue: "Search...",
})}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="mb-2"
/>
</div>
)}
<div className={cn("grid gap-2", listClassName)}>
{filteredEntities.map((entity) => {