Update settings page

components/SettingsCheckbox.tsx

@@ -0,0 +1,46 @@
+import { Component, ContextType } from "preact";
+import { SettingsCtx } from "./SettingsContext.tsx";
+import { ConfigType } from "../config.ts";
+import Checkbox from "preact-material-components/Checkbox";
+
+export type SettingsCheckboxProps = {
+    checked: boolean;
+    name: keyof ConfigType;
+    description: string;
+};
+
+export default class SettingsCheckbox
+    extends Component<SettingsCheckboxProps, unknown> {
+    static contextType = SettingsCtx;
+    declare context: ContextType<typeof SettingsCtx>;
+    render() {
+        const id = `s-${this.props.name}`;
+        return (
+            <div>
+                <Checkbox
+                    id={id}
+                    checked={this.props.checked}
+                    onInput={(ev: Event) => {
+                        if (ev.target && this.context) {
+                            const e = ev.target as HTMLInputElement;
+                            this.context.set_settings((v) => {
+                                if (v) {
+                                    const t: Record<string, unknown> = v;
+                                    t[this.props.name] = e.checked;
+                                    if (this.context) {
+                                        this.context.set_changed((v) => {
+                                            v.add(this.props.name);
+                                            return v;
+                                        });
+                                    }
+                                    return t as ConfigType;
+                                }
+                            });
+                        }
+                    }}
+                />
+                <label for={id}>{this.props.description}</label>
+            </div>
+        );
+    }
+}

components/SettingsContext.tsx

@@ -0,0 +1,33 @@
+import { Component, ComponentChild, createContext } from "preact";
+import { StateUpdater } from "preact/hooks";
+import { ConfigType } from "../config.ts";
+
+export const SettingsCtx = createContext<State | null>(null);
+
+type State = {
+    set_settings: StateUpdater<ConfigType | undefined>;
+    set_changed: StateUpdater<Set<string>>;
+};
+
+type Props = {
+    children: ComponentChild;
+    set_settings: StateUpdater<ConfigType | undefined>;
+    set_changed: StateUpdater<Set<string>>;
+};
+
+export default class SettingsContext extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            set_settings: props.set_settings,
+            set_changed: props.set_changed,
+        };
+    }
+    render() {
+        return (
+            <SettingsCtx.Provider value={this.props}>
+                {this.props.children}
+            </SettingsCtx.Provider>
+        );
+    }
+}