Set custom httpd port in Settings

src/App/Settings.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { api, changeHttpdPort } from "@app/lib/httpd";
+  import { config } from "@app/lib/config";
   import {
     codeFont,
     codeFonts,
@@ -12,6 +14,9 @@
   import Icon from "@app/components/Icon.svelte";
   import Radio from "@app/components/Radio.svelte";
   import Button from "@app/components/Button.svelte";
+  import TextInput from "@app/components/TextInput.svelte";
+
+  $: customPort = api.port;
 </script>
 
 <style>
@@ -104,4 +109,15 @@
       </Radio>
     </div>
   </div>
+  <div class="item">
+    <div>Radicle HTTP Daemon Port</div>
+    <div class="right txt-monospace" style:width="6rem">
+      <TextInput
+        name="httpd port"
+        bind:value={customPort}
+        placeholder={config.nodes.defaultLocalHttpdPort.toString()}
+        valid={Number(customPort) >= 1 && Number(customPort) <= 65535}
+        on:submit={() => changeHttpdPort(Number(customPort))} />
+    </div>
+  </div>
 </div>

src/components/TextInput.svelte

@@ -74,6 +74,7 @@
   }
   input {
     background: var(--color-background-dip);
+    font-family: inherit;
     font-size: var(--font-size-small);
     color: var(--color-foreground-contrast);
     border: 1px solid var(--color-border-hint);