[feature] Allow users to set default interaction policies per status visibility (#3108)

* [feature] Allow users to set default interaction policies

* use vars for default policies

* avoid some code repetition

* unfuck form binding

* avoid bonkers loop

* beep boop

* put policyValsToAPIPolicyVals in separate function

* don't bother with slices.Grow

* oops

1 files changed, 26 insertions, 2 deletions

diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx
index c68095d95..e6c530b53 100644
--- a/web/source/settings/components/form/inputs.tsx
+++ b/web/source/settings/components/form/inputs.tsx
@@ -141,9 +141,28 @@ export interface SelectProps extends React.DetailedHTMLProps<
 	field: TextFormInputHook;
 	children?: ReactNode;
 	options: React.JSX.Element;
+
+	/**
+	 * Optional callback function that is
+	 * triggered along with the select's onChange.
+	 * 
+	 * _selectValue is the current value of
+	 * the select after onChange is triggered.
+	 * 
+	 * @param _selectValue 
+	 * @returns 
+	 */
+	onChangeCallback?: (_selectValue: string | undefined) => void;
 }
 
-export function Select({ label, field, children, options, ...props }: SelectProps) {
+export function Select({
+	label,
+	field,
+	children,
+	options,
+	onChangeCallback,
+	...props
+}: SelectProps) {
 	const { onChange, value, ref } = field;
 
 	return (
@@ -152,7 +171,12 @@ export function Select({ label, field, children, options, ...props }: SelectProp
 				{label}
 				{children}
 				<select
-					onChange={onChange}
+					onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+						onChange(e);
+						if (onChangeCallback !== undefined) {
+							onChangeCallback(e.target.value);
+						}
+					}}
 					value={value}
 					ref={ref as RefObject<HTMLSelectElement>}
 					{...props}