settings WIP

packages/web/src/forms/SettingsCheckboxField.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import SettingsCheckboxFieldRaw from './SettingsCheckboxFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let disabled = false;
+  export let templateProps = {};
+
+  const { template, setFieldValue, values } = getFormContext();
+</script>
+
+<svelte:component
+  this={template}
+  on:change
+  type="checkbox"
+  {label}
+  {disabled}
+  {...templateProps}
+  labelProps={disabled ? { disabled: true } : { onClick: () => setFieldValue(name, !$values[name]) }}
+>
+  <SettingsCheckboxFieldRaw {name} {...$$restProps} {disabled} />
+</svelte:component>

packages/web/src/forms/SettingsCheckboxFieldRaw.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import CheckboxField from './CheckboxField.svelte';
+  import { apiCall } from '../utility/api';
+  import _ from 'lodash';
+  import { useSettings } from '../utility/metadataLoaders';
+
+  export let name;
+  export let defaultValue;
+
+  const settings = useSettings();
+
+  function handleChange(e) {
+    apiCall('config/update-settings', { [name]: e.target['checked'] });
+  }
+</script>
+
+<CheckboxField {...$$restProps} checked={($settings || {})[name] ?? defaultValue} on:change={handleChange} on:change />

packages/web/src/forms/SettingsFormProvider.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" context="module">
+  import { getContext, setContext } from 'svelte';
+
+  const contextKey = 'formProviderContextKey';
+
+  export function getFormContext(): any {
+    return getContext(contextKey);
+  }
+</script>
+
+<script lang="ts">
+  import FormFieldTemplateLarge from './FormFieldTemplateLarge.svelte';
+  import createRef from '../utility/createRef';
+  import { apiCall } from '../utility/api';
+  import { useSettings } from '../utility/metadataLoaders';
+  import { derived } from 'svelte/store';
+
+  export let template = FormFieldTemplateLarge;
+
+  const settings = useSettings();
+  const values = derived(settings, $settings => {
+    if (!$settings) {
+      return {};
+    }
+    return $settings;
+  });
+
+  const setFieldValue = (name, value) => {
+    apiCall('config/update-settings', { [name]: value });
+  };
+
+  const context = {
+    values,
+    template,
+    setFieldValue,
+    submitActionRef: createRef(null),
+  };
+
+  setContext(contextKey, context);
+</script>
+
+<slot />

packages/web/src/forms/SettingsTextField.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import SettingsTextFieldRaw from './SettingsTextFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let templateProps = {};
+  export let focused = false;
+
+  const { template } = getFormContext();
+</script>
+
+<svelte:component this={template} type="text" {label} {...templateProps}>
+  <SettingsTextFieldRaw {name} {...$$restProps} {focused} />
+</svelte:component>

packages/web/src/forms/SettingsTextFieldRaw.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { apiCall } from '../utility/api';
+
+  import { useSettings } from '../utility/metadataLoaders';
+
+  import TextField from './TextField.svelte';
+
+  export let name;
+  export let defaultValue;
+
+  const settings = useSettings();
+
+  function handleChange(e) {
+    apiCall('config/update-settings', { [name]: e.target['value'] });
+  }
+</script>
+
+<TextField {...$$restProps} value={($settings || {})[name] ?? defaultValue} on:input={handleChange} />