connection modal converted

packages/web/src/forms/CheckboxField.svelte

@@ -1 +1 @@
-<input type="checkbox" {...$$restProps} />
+<input type="checkbox" {...$$restProps} on:change />

packages/web/src/forms/FormCheckboxField.svelte

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

packages/web/src/forms/FormElectronFileSelector.svelte

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

packages/web/src/forms/FormElectronFileSelectorRaw.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import getElectron from '../utility/getElectron';
+
+  import InlineButton from '../widgets/InlineButton.svelte';
+
+  import { getFormContext } from './FormProviderCore.svelte';
+  import TextField from './TextField.svelte';
+
+  export let name;
+  export let disabled = false;
+
+  const { values, setFieldValue } = getFormContext();
+
+  function handleBrowse() {
+    const electron = getElectron();
+    if (!electron) return;
+    const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+      defaultPath: values[name],
+      properties: ['showHiddenFiles'],
+    });
+    const filePath = filePaths && filePaths[0];
+    if (filePath) setFieldValue(name, filePath);
+  }
+</script>
+
+<div class="flex">
+  <TextField {...$$restProps} value={$values[name]} onClick={handleBrowse} readOnly {disabled} />
+  <InlineButton on:click={handleBrowse} {disabled}>Browse</InlineButton>
+</div>

packages/web/src/forms/FromCheckboxFieldRaw.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { getFormContext } from './FormProviderCore.svelte';
-  import TextField from './TextField.svelte';
+  import CheckboxField from './CheckboxField.svelte';
 
   export let name;
 
   const { values, setFieldValue } = getFormContext();
+  function handleChange(e) {
+    setFieldValue(name, e.target['checked']);
+  }
 </script>
 
-<TextField {...$$restProps} value={$values[name]} on:change={e => setFieldValue(name, e.target['checked'])} />
+<CheckboxField {...$$restProps} checked={$values[name]} on:change={handleChange} />

packages/web/src/forms/SelectField.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import _ from 'lodash';
+
   export let options = [];
   export let value;
-
-  $: console.log('FIELD', $$props.value);
 </script>
 
 <select {...$$restProps} on:change>
-  {#each options as x (x.value)}
+  {#each _.compact(options) as x (x.value)}
     <option value={x.value} selected={value == x.value}>
       {x.label}
     </option>