Add zap split field

src/app/views/UserSettings.svelte

@@ -14,6 +14,7 @@
   const settings = getSettings()
 
   const submit = () => {
+    console.log(settings.platform_zap_split)
     publishSettings(settings)
 
     toast.show("info", "Your settings have been saved!")
@@ -21,6 +22,9 @@
 
   const searchUploadProviders = fuzzy($env.NIP96_URLS, {keys: ["url"]})
 
+  const formatPercent = d => Math.round(d * 100)
+  const parsePercent = p => parseInt(p) / 100
+
   document.title = "Settings"
 </script>
 
@@ -34,6 +38,12 @@
       <Input bind:value={settings.default_zap} />
       <p slot="info">The default amount of sats to use when sending a lightning tip.</p>
     </Field>
+    <Field label="Platform zap split">
+      <Input type="number" bind:value={settings.platform_zap_split} format={formatPercent} parse={parsePercent}>
+        <i slot="before" class="fa fa-percent" />
+      </Input>
+      <p slot="info">How much you'd like to tip the developer of {appName} whenever you send a zap.</p>
+    </Field>
     <Field>
       <div slot="label" class="flex justify-between">
         <strong>Max relays per request</strong>

src/partials/Input.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import cx from "classnames"
+  import {identity} from 'ramda'
 
   export let initialValue: string | number = ""
   export let wrapperClass = ""
@@ -7,6 +8,8 @@
   export let element = null
   export let hideBefore = false
   export let hideAfter = false
+  export let format = identity
+  export let parse = identity
 
   const showBefore = $$slots.before && !hideBefore
   const showAfter = $$slots.after && !hideAfter
@@ -16,17 +19,24 @@
     "bg-white text-black",
     {"pl-10": showBefore, "pr-10": showAfter},
   )
+
+  const onChange = e => {
+    value = parse(e.target.value)
+  }
+
+  $: inputValue = format(value)
 </script>
 
 <div class={cx(wrapperClass, "relative")}>
   <input
     {...$$props}
     class={className}
-    bind:value
+    value={inputValue}
     bind:this={element}
+    on:change={onChange}
+    on:change
     on:blur
     on:focus
-    on:change
     on:input
     on:keydown />
   {#if showBefore}