Update

components/SettingsText.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentChildren, ContextType } from "preact";
 import { SettingsCtx } from "./SettingsContext.tsx";
 import { ConfigType } from "../config.ts";
 import TextField from "preact-material-components/TextField";
-import { Ref, useRef } from "preact/hooks";
+import { Ref, StateUpdater, useRef } from "preact/hooks";
 
 export type SettingsTextProps = {
     value: string;
@@ -14,6 +14,8 @@ export type SettingsTextProps = {
     fullwidth?: boolean;
     disabled?: boolean;
     children?: ComponentChildren;
+    set_value?: StateUpdater<string>;
+    ignore_update_value?: boolean;
 };
 
 export default class SettingsText
@@ -34,37 +36,44 @@ export default class SettingsText
             }
         }
     }
-    set_text(value: string) {
+    set_changed() {
         if (this.context) {
+            this.context.set_changed((v) => {
+                v.add(this.props.name);
+                return v;
+            });
+        }
+    }
+    set_text(value: string) {
+        if (this.props.set_value) {
+            this.props.set_value(value);
+            this.set_changed();
+        } else if (this.context) {
             this.context.set_settings((v) => {
                 if (v) {
                     const t: Record<string, unknown> = v;
                     t[this.props.name] = value;
-                    if (this.context) {
-                        this.context.set_changed((v) => {
-                            v.add(this.props.name);
-                            return v;
-                        });
-                    }
+                    this.set_changed();
                     return t as ConfigType;
                 }
             });
         }
     }
     componentDidMount() {
-        this.update(this.props.value);
+        if (!this.props.ignore_update_value) this.update(this.props.value);
     }
     componentWillUpdate(
         nextProps: Readonly<SettingsTextProps>,
         _nextState: Readonly<unknown>,
         _nextContext: unknown,
     ) {
-        this.update(nextProps.value);
+        if (!this.props.ignore_update_value) this.update(nextProps.value);
     }
     render() {
         this.ref = useRef<TextField>();
+        const id = `s-${this.props.name}`;
         return (
-            <div class="text">
+            <div class="text" id={id}>
                 <label>{this.props.description}</label>
                 <TextField
                     fullwidth={this.props.fullwidth}

islands/Settings.tsx

@@ -20,10 +20,16 @@ export default class Settings extends Component<SettingsProps> {
         const [settings, set_settings] = useState<ConfigType | undefined>();
         const [error, set_error] = useState<string | undefined>();
         const [changed, set_changed] = useState<Set<string>>(new Set());
+        const [new_cookies, set_new_cookies] = useState<string>("");
+        const cookies_ref = useRef<SettingsText>();
         const fetchSettings = async () => {
             const re = await fetch("/api/config");
             set_settings(await re.json());
             set_changed(new Set());
+            if (cookies_ref.current) {
+                const t = cookies_ref.current;
+                t.update("");
+            }
         };
         const loadData = () => {
             fetchSettings().catch((e) => {
@@ -82,8 +88,20 @@ export default class Settings extends Component<SettingsProps> {
                                 Use current browser's user agent.
                             </Button>
                         </SettingsText>
+                        <SettingsText
+                            name="cookies"
+                            value=""
+                            description="Cookies:"
+                            set_value={set_new_cookies}
+                            label={`Enter${
+                                settings.cookies ? " new" : ""
+                            } cookies here.`}
+                            ignore_update_value={true}
+                            ref={cookies_ref}
+                        />
                     </SettingsContext>
                     <Button onClick={loadData}>Reload</Button>
+                    <Button disabled={changed.size === 0}>Save</Button>
                 </div>
             );
         } else {

static/common.css

@@ -22,10 +22,20 @@
     width: 100vw;
 }
 
+.settings div.text {
+    width: 100%;
+}
+
 .settings label {
     line-height: 40px;
 }
 
-.settings label.text {
-    line-height: 64px;
+.settings .mdc-text-field label {
+    line-height: revert;
+    top: 22px;
+    bottom: auto;
+}
+
+.settings #s-cookies .mdc-text-field {
+    min-width: 50%;
 }