feat(react/dialogs): port delete_notes

apps/client/src/widgets/react/Button.tsx

@@ -10,11 +10,16 @@ interface ButtonProps {
     keyboardShortcut?: string;
     /** Called when the button is clicked. If not set, the button will submit the form (if any). */
     onClick?: () => void;
+    primary?: boolean;
 }
 
-export default function Button({ buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon }: ButtonProps) {
+export default function Button({ buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary }: ButtonProps) {
     const classes: string[] = ["btn"];
-    classes.push("btn-primary");
+    if (primary) {
+        classes.push("btn-primary");
+    } else {
+        classes.push("btn-secondary");
+    }
     if (className) {
         classes.push(className);
     }

apps/client/src/widgets/react/FormCheckbox.tsx

@@ -6,10 +6,11 @@ interface FormCheckboxProps {
      */
     hint?: string;
     currentValue: boolean;
+    disabled?: boolean;
     onChange(newValue: boolean): void;
 }
 
-export default function FormCheckbox({ name, label, currentValue, onChange, hint }: FormCheckboxProps) {
+export default function FormCheckbox({ name, disabled, label, currentValue, onChange, hint }: FormCheckboxProps) {
     return (
         <div className="form-checkbox">
             <label
@@ -21,6 +22,7 @@ export default function FormCheckbox({ name, label, currentValue, onChange, hint
                     name={name}
                     checked={currentValue || false}
                     value="1"
+                    disabled={disabled}
                     onChange={e => onChange((e.target as HTMLInputElement).checked)} />
                 {label}
             </label>

apps/client/src/widgets/react/Modal.tsx

@@ -6,7 +6,7 @@ import type { CSSProperties } from "preact/compat";
 interface ModalProps {
     className: string;
     title: string | ComponentChildren;
-    size: "lg" | "md" | "sm";
+    size: "xl" | "lg" | "md" | "sm";
     children: ComponentChildren;
     footer?: ComponentChildren;
     footerAlignment?: "right" | "between";