Use applesauce properly

src/components/forms/ResharingForms.tsx

@@ -1,34 +1,46 @@
-import { createSignal, Show } from "solid-js"
+import { createSignal, createEffect, Show } from "solid-js"
 import type { ResharingSession } from "../../models"
+import PubkeyInput from "../PubkeyInput"
+import { validateInboxRelays } from "../../lib/relays"
 
 export function ProposeResharing(props: { quorumPubkey: string; onClose: () => void }) {
-  const [newMembersText, setNewMembersText] = createSignal("")
-  const [newThreshold, setNewThreshold] = createSignal(2)
-  const [error, setError] = createSignal("")
+  const [newMembers, setNewMembers] = createSignal<string[]>([])
+  const [newThreshold, setNewThreshold] = createSignal(0)
 
-  function handleSubmit(e: Event) {
+  createEffect(() => {
+    setNewThreshold(Math.max(1, Math.floor(newMembers().length * 2 / 3)))
+  })
+  const [error, setError] = createSignal("")
+  const [submitting, setSubmitting] = createSignal(false)
+
+  async function handleSubmit(e: Event) {
     e.preventDefault()
     setError("")
 
-    const lines = newMembersText()
-      .split("\n")
-      .map(l => l.trim())
-      .filter(l => l.length > 0)
-
-    if (lines.length === 0) {
-      setError("Enter at least one member pubkey.")
+    const members = newMembers()
+    if (members.length === 0) {
+      setError("Add at least one member.")
       return
     }
 
     const t = newThreshold()
-    if (t < 1 || t > lines.length) {
+    if (t < 1 || t > members.length) {
       setError("Threshold must be between 1 and the number of new members.")
       return
     }
 
+    setSubmitting(true)
+    const relayError = await validateInboxRelays(members)
+    setSubmitting(false)
+
+    if (relayError) {
+      setError(relayError)
+      return
+    }
+
     console.log("ProposeResharing", {
       quorumPubkey: props.quorumPubkey,
-      newMembers: lines,
+      newMembers: members,
       newThreshold: t,
     })
 
@@ -43,15 +55,10 @@ export function ProposeResharing(props: { quorumPubkey: string; onClose: () => v
       </p>
       <form onSubmit={handleSubmit} class="space-y-4">
         <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1">
-            New Members (one pubkey per line)
+          <label class="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1.5">
+            New Members
           </label>
-          <textarea
-            rows={5}
-            value={newMembersText()}
-            onInput={e => setNewMembersText(e.currentTarget.value)}
-            class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
+          <PubkeyInput value={newMembers()} onChange={setNewMembers} />
         </div>
         <div>
           <label class="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1">
@@ -60,10 +67,16 @@ export function ProposeResharing(props: { quorumPubkey: string; onClose: () => v
           <input
             type="number"
             min={1}
+            max={newMembers().length || undefined}
             value={newThreshold()}
             onInput={e => setNewThreshold(Number(e.currentTarget.value))}
             class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
+          <p class="text-xs text-gray-400 dark:text-neutral-500 mt-1">
+            {newMembers().length > 0
+              ? `${newThreshold()} of ${newMembers().length} signatures required`
+              : "Add members first"}
+          </p>
         </div>
         <Show when={error()}>
           <p class="text-sm text-red-600 dark:text-red-400">{error()}</p>
@@ -78,9 +91,10 @@ export function ProposeResharing(props: { quorumPubkey: string; onClose: () => v
           </button>
           <button
             type="submit"
+            disabled={submitting()}
             class="px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors"
           >
-            Propose
+            {submitting() ? "Checking…" : "Propose"}
           </button>
         </div>
       </form>