Update welshman

src/app.css

@@ -108,6 +108,10 @@
   @apply flex flex-col gap-4;
 }
 
+.col-8 {
+  @apply flex flex-col gap-8;
+}
+
 .ellipsize {
   @apply overflow-hidden text-ellipsis;
 }

src/app/components/ConfirmDelete.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Confirm from "@lib/components/Confirm.svelte"
   import {publishDelete} from "@app/commands"
+  import {clearModals} from '@app/modal'
 
   export let url
   export let event
@@ -8,7 +9,7 @@
   const confirm = async () => {
     await publishDelete({event, relays: [url]})
 
-    history.back()
+    clearModals()
   }
 </script>
 

src/app/components/LogIn.svelte

@@ -63,10 +63,11 @@
       relays: rootHandle.nip46 || rootHandle.relays || nip46 || relays,
     }
 
-    const broker = Nip46Broker.get(pubkey, secret, handler)
+    // Gotta use user pubkey as the handler pubkey for historical reasons
+    const broker = Nip46Broker.get({secret, handler: {...handler, pubkey}})
 
     if (await broker.connect("", nip46Perms)) {
-      await onSuccess({method: "nip46", pubkey, secret, handler}, relays)
+      await onSuccess({method: "nip46", pubkey, secret, handler: {...handler, pubkey}}, relays)
     } else {
       pushToast({
         theme: "error",

src/app/components/SignUp.svelte

@@ -28,7 +28,7 @@
       })
     }
 
-    const signupBroker = Nip46Broker.get("", secret, handler)
+    const signupBroker = Nip46Broker.get({secret, handler})
     const pubkey = await signupBroker.createAccount(username, nip46Perms)
 
     if (!pubkey) {
@@ -38,10 +38,11 @@
       })
     }
 
-    const loginBroker = Nip46Broker.get(pubkey, secret, handler)
+    // Gotta use user pubkey as the handler pubkey for historical reasons
+    const loginBroker = Nip46Broker.get({secret, handler: {...handler, pubkey}})
 
     if (await loginBroker.connect("", nip46Perms)) {
-      addSession({method: "nip46", pubkey, secret, handler})
+      addSession({method: "nip46", pubkey, secret, handler: {...handler, pubkey}})
       pushToast({message: "Successfully logged in!"})
       clearModals()
     } else {

src/app/components/ThreadCreate.svelte

@@ -7,6 +7,7 @@
   import {createEvent} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -25,8 +26,15 @@
   const loading = writable(false)
 
   const submit = () => {
+
+    if (!title) {
+      return pushToast({
+        theme: "error",
+        message: "Please provide a title for your thread.",
+      })
+    }
+
     const content = $editor.getText()
-    const tags = append(tagRoom(GENERAL, url), getEditorTags($editor))
 
     if (!content.trim()) {
       return pushToast({
@@ -35,6 +43,12 @@
       })
     }
 
+    const tags = [
+      ["title", title],
+      tagRoom(GENERAL, url),
+      ...getEditorTags($editor),
+    ]
+
     publishThunk({
       event: createEvent(THREAD, {content, tags}),
       relays: [url],
@@ -43,10 +57,19 @@
     history.back()
   }
 
+  let title: string
   let editor: Readable<Editor>
 
   onMount(() => {
-    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints, autofocus: true}))
+    editor = createEditor(
+      getEditorOptions({
+        submit,
+        loading,
+        getPubkeyHints,
+        autofocus: true,
+        placeholder: "What's on your mind?",
+      })
+    )
   })
 </script>
 
@@ -55,10 +78,19 @@
     <div slot="title">Create a Thread</div>
     <div slot="info">Share a link, or start a discussion.</div>
   </ModalHeader>
-  <div class="relative">
-    <div class="note-editor flex-grow overflow-hidden">
-      <EditorContent editor={$editor} />
-    </div>
+  <div class="relative col-8">
+    <Field>
+      <p slot="label">Title*</p>
+      <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+        <input bind:value={title} class="grow" type="text" placeholder="What is this thread about?" />
+      </label>
+    </Field>
+    <Field>
+      <p slot="label">Message*</p>
+      <div slot="input" class="note-editor flex-grow overflow-hidden">
+        <EditorContent editor={$editor} />
+      </div>
+    </Field>
     <Button
       data-tip="Add an image"
       class="tooltip tooltip-left absolute bottom-1 right-2"

src/lib/editor/index.ts

@@ -1,6 +1,7 @@
 import type {Writable} from "svelte/store"
 import {nprofileEncode} from "nostr-tools/nip19"
 import {SvelteNodeViewRenderer} from "svelte-tiptap"
+import Placeholder from '@tiptap/extension-placeholder'
 import Code from "@tiptap/extension-code"
 import CodeBlock from "@tiptap/extension-code-block"
 import Document from "@tiptap/extension-document"
@@ -53,6 +54,7 @@ type EditorOptions = {
   loading: Writable<boolean>
   getPubkeyHints: (pubkey: string) => string[]
   submitOnEnter?: boolean
+  placeholder?: string
   autofocus?: boolean
 }
 
@@ -80,6 +82,7 @@ export const getEditorOptions = ({
   loading,
   getPubkeyHints,
   submitOnEnter,
+  placeholder = "",
   autofocus = false,
 }: EditorOptions) => ({
   autofocus,
@@ -94,6 +97,7 @@ export const getEditorOptions = ({
     Paragraph,
     Text,
     TagExtension,
+    Placeholder.configure({placeholder}),
     submitOnEnter ? getModifiedHardBreakExtension() : HardBreakExtension,
     LinkExtension.extend({addNodeView: () => SvelteNodeViewRenderer(EditLink)}),
     Bolt11Extension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(EditBolt11)})),