Further de-emphasize filtered notifications banner and add setting to minimize it (#31250)

app/javascript/mastodon/features/notifications/components/checkbox_with_label.tsx

@@ -0,0 +1,40 @@
+import type { PropsWithChildren } from 'react';
+import { useCallback } from 'react';
+
+import Toggle from 'react-toggle';
+
+interface Props {
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export const CheckboxWithLabel: React.FC<PropsWithChildren<Props>> = ({
+  checked,
+  disabled,
+  children,
+  onChange,
+}) => {
+  const handleChange = useCallback(
+    ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(target.checked);
+    },
+    [onChange],
+  );
+
+  return (
+    <label className='app-form__toggle'>
+      <div className='app-form__toggle__label'>{children}</div>
+
+      <div className='app-form__toggle__toggle'>
+        <div>
+          <Toggle
+            checked={checked}
+            onChange={handleChange}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+    </label>
+  );
+};