From 565781146732597882d555c8fef7a4cccd76aba8 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Thu, 25 Apr 2024 09:59:23 +0200
Subject: [PATCH] Set custom httpd port in Settings

---
 src/App/Settings.svelte         | 16 ++++++++++++++++
 src/components/TextInput.svelte |  1 +
 2 files changed, 17 insertions(+)

diff --git a/src/App/Settings.svelte b/src/App/Settings.svelte
index cafb8aeb9..6138000ad 100644
--- a/src/App/Settings.svelte
+++ b/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>
diff --git a/src/components/TextInput.svelte b/src/components/TextInput.svelte
index 46a28c589..1c3d05a36 100644
--- a/src/components/TextInput.svelte
+++ b/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);