Make send delay configurable

src/app/components/Chat.svelte

@@ -33,7 +33,7 @@
   import ProfileList from "@app/components/ProfileList.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChannelCompose.svelte"
-  import {deriveChat, splitChatId, PLATFORM_NAME, pubkeyLink} from "@app/state"
+  import {userSettingValues, deriveChat, splitChatId, PLATFORM_NAME, pubkeyLink} from "@app/state"
   import {pushModal} from "@app/modal"
   import {sendWrapped} from "@app/commands"
 
@@ -57,7 +57,7 @@
   const onSubmit = async ({content, ...params}: EventContent) => {
     const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
     const template = createEvent(DIRECT_MESSAGE, {content, tags})
-    const thunk = await sendWrapped({template, pubkeys, delay: 3000})
+    const thunk = await sendWrapped({template, pubkeys, delay: $userSettingValues.send_delay})
 
     thunks.update(assoc(thunk.thunks[0].event.id, thunk))
   }

src/app/components/ThunkStatus.svelte

@@ -7,6 +7,7 @@
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
   import ThunkStatusDetail from "@app/components/ThunkStatusDetail.svelte"
+  import {userSettingValues} from '@app/state'
 
   export let thunk: Thunk | MergedThunk
 
@@ -20,12 +21,22 @@
       : publishThunk((thunk as Thunk).request)
   }
 
+  let isPending = true
+
   $: status = throttled(300, thunk.status)
   $: ps = Object.values($status)
-  $: canCancel = ps.length === 0
+  $: canCancel = ps.length === 0 && $userSettingValues.send_delay > 0
   $: isFailure = !canCancel && ps.every(s => [Failure, Timeout].includes(s.status))
-  $: isPending = !isFailure && ps.some(s => s.status === Pending)
   $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
+
+  $: {
+    // Delay updating isPending so users can see that the message is sent
+    if (isFailure || !ps.some(s => s.status == Pending)) {
+      setTimeout(() => {
+        isPending = false
+      }, 2000)
+    }
+  }
 </script>
 
 <div class="flex justify-end px-1 text-xs">

src/app/state.ts

@@ -264,12 +264,14 @@ export type Settings = {
   values: {
     show_media: boolean
     hide_sensitive: boolean
+    send_delay: number,
   }
 }
 
 export const defaultSettings = {
   show_media: true,
   hide_sensitive: true,
+  send_delay: 3000,
 }
 
 export const settings = deriveEventsMapped<Settings>(repository, {

src/routes/settings/+page.svelte

@@ -36,6 +36,7 @@
 
 <form class="content column gap-4" on:submit|preventDefault={onSubmit}>
   <div class="card2 bg-alt col-4 shadow-xl">
+    <p class="text-lg">Content Settings</p>
     <FieldInline>
       <p slot="label">Hide sensitive content?</p>
       <input
@@ -62,6 +63,22 @@
         <ProfileMultiSelect bind:value={mutedPubkeys} />
       </div>
     </Field>
+    <p class="text-lg">Editor Settings</p>
+    <FieldInline>
+      <p slot="label">Send Delay</p>
+      <input
+        class="range range-primary"
+        slot="input"
+        type="range"
+        min="0"
+        max="10000"
+        step="1000"
+        bind:value={settings.send_delay} />
+      <p slot="info">
+        Delay sending chat messages for {settings.send_delay/1000}
+        {settings.send_delay === 1000 ? 'second' : 'seconds'}.
+      </p>
+    </FieldInline>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">
       <Button class="btn btn-neutral" on:click={reset}>Discard Changes</Button>
       <Button type="submit" class="btn btn-primary">Save Changes</Button>

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -26,6 +26,7 @@
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
   import {
+    userSettingValues,
     userMembership,
     decodeRelay,
     makeChannelId,
@@ -52,7 +53,7 @@
 
   const onSubmit = ({content, tags}: EventContent) => {
     const event = createEvent(MESSAGE, {content, tags: append(tagRoom(room, url), tags)})
-    const thunk = publishThunk({event, relays: [url], delay: 3000})
+    const thunk = publishThunk({event, relays: [url], delay: $userSettingValues.send_delay})
 
     thunks.update(assoc(thunk.event.id, thunk))
   }