problem: message box does not clear after publishing a note (#28)

package.json

@@ -39,8 +39,8 @@
 		"quilljs-markdown": "^1.2.0",
 		"radix-icons-svelte": "^1.2.1",
 		"svelte-inview": "^4.0.2",
-		"svelte-loading-spinners": "^0.3.6",
 		"svelte-radix": "^1.0.1",
+		"svelte-sonner": "0.3.27",
 		"tailwind-merge": "^2.2.1",
 		"tailwind-variants": "^0.2.0",
 		"yjs": "^13.6.12"
@@ -70,6 +70,7 @@
 		"svelte": "^4.2.8",
 		"svelte-awesome-icons": "^1.2.0",
 		"svelte-check": "^3.6.2",
+		"svelte-loading-spinners": "^0.3.6",
 		"svelte-quill": "^1.2.0",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.2",

src/lib/components/Button.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
-    export let onClick: () => void;
-    export let notifs = 0
+	export let onClick: () => void;
+	export let notifs = 0;
+	export let disabled: boolean = false;
 </script>
-<button on:click={onClick} class="relative text-slate-800 dark:text-slate-200 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center">
-    <slot></slot>
-    {#if notifs > 0}
-    <div
-    class="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-orange-500 rounded-sm -top-1 -end-1"
+
+<button
+	on:click={onClick}
+	class="relative inline-flex items-center rounded-lg p-2.5 text-center text-sm font-medium text-slate-800 dark:text-slate-200"
+	{disabled}
 >
-    {notifs}
-</div>{/if}
+	<slot />
+	{#if notifs > 0}
+		<div
+			class="absolute -end-1 -top-1 inline-flex h-5 w-5 items-center justify-center rounded-sm bg-orange-500 text-xs font-bold text-white"
+		>
+			{notifs}
+		</div>
+	{/if}
 </button>

src/lib/components/MessageInput.svelte

@@ -4,42 +4,58 @@
 	import { currentUser, ndk } from '@/ndk/ndk';
 	import { NDKEvent, type NDKTag } from '@nostr-dev-kit/ndk';
 	import { Textarea } from './ui/textarea';
+	import { Circle } from 'svelte-loading-spinners';
+	import { toast } from 'svelte-sonner';
 
 	export let selected = true;
 	export let content = '';
 	export let tags: NDKTag[] = [];
 	export let horsenote = false;
 
-	function publish(c: string) {
-		if (c.length < 1) {alert("invalid note length")}
-		console.log(15, c)
+	let isPublishing = false;
+
+	async function publish(c: string) {
+		if (c.length < 1) {
+			toast.error('Invalid note length');
+			return;
+		}
+		console.log(15, c);
 		if (!$currentUser) {
-			alert('could not find your event signer');
+			toast.error('Could not find your event signer');
 			throw new Error('invalid user');
 		} else {
+			isPublishing = true;
 			let e = new NDKEvent($ndk);
 			e.kind = 1;
 			e.created_at = Math.floor(new Date().getTime() / 1000);
 			e.content = c + (horsenote ? '\nPublished with humble.horse 🐎🐎🐎' : '');
 			e.tags = tags;
 			e.author = $currentUser;
-			console.log(e)
-			e.publish().then((r) => {
+			console.log(e);
+			try {
+				const r = await e.publish();
 				console.log(r);
 				console.log(e);
-			});
+				content = '';
+				toast.success('Note published successfully!');
+			} catch (error) {
+				console.error('Failed to publish note:', error);
+				toast.error('Failed to publish note. Please try again.');
+			} finally {
+				isPublishing = false;
+			}
 		}
 	}
 </script>
 
-<div class="flex items-center h-16 focus-within:h-36 w-full px-3 py-2 bg-zinc-300 dark:bg-cyan-900">
+<div class="flex h-16 w-full items-center bg-zinc-300 px-3 py-2 focus-within:h-36 dark:bg-cyan-900">
 	<div class="">
 		<button
 			type="button"
-			class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
+			class="inline-flex cursor-pointer justify-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
 		>
 			<svg
-				class="w-5 h-5"
+				class="h-5 w-5"
 				aria-hidden="true"
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
@@ -68,10 +84,10 @@
 		</button>
 		<button
 			type="button"
-			class="p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
+			class="cursor-pointer rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
 		>
 			<svg
-				class="w-5 h-5"
+				class="h-5 w-5"
 				aria-hidden="true"
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
@@ -94,33 +110,37 @@
 			selected = true;
 		}}
 		id="chat"
-		class="resize-none block mx-4 p-2.5 w-full h-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+		class="mx-4 block h-full w-full resize-none rounded-lg border border-gray-300 bg-white p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 		placeholder="Start typing..."
 		bind:value={content}
 	></Textarea>
-	<div class="flex flex-col">
+	<div class="flex flex-col items-center justify-center">
 		<Button
 			onClick={() => {
 				alert('ghost mode: implement me!');
 			}}><GhostSolid /></Button
 		>
 		<Button
 			onClick={() => {
-				//console.log(content)
 				publish(content);
 			}}
+			disabled={isPublishing}
 		>
-			<svg
-				class="w-5 h-5 rotate-90 rtl:-rotate-90"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 18 20"
-			>
-				<path
-					d="m17.914 18.594-8-18a1 1 0 0 0-1.828 0l-8 18a1 1 0 0 0 1.157 1.376L8 18.281V9a1 1 0 0 1 2 0v9.281l6.758 1.689a1 1 0 0 0 1.156-1.376Z"
-				/>
-			</svg>
+			{#if isPublishing}
+				<Circle size="20" color="#FFFFFF" unit="px" duration="1s" />
+			{:else}
+				<svg
+					class="h-5 w-5 rotate-90 rtl:-rotate-90"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 18 20"
+				>
+					<path
+						d="m17.914 18.594-8-18a1 1 0 0 0-1.828 0l-8 18a1 1 0 0 0 1.157 1.376L8 18.281V9a1 1 0 0 1 2 0v9.281l6.758 1.689a1 1 0 0 0 1.156-1.376Z"
+					/>
+				</svg>
+			{/if}
 			<span class="sr-only">Send message</span>
 		</Button>
 	</div>

src/routes/+layout.svelte

@@ -6,6 +6,7 @@
 	import { init } from '@/views/messages/snort';
 	import { connect, currentUser } from '@/ndk/ndk';
 	import { stableShortList } from '@/stores/shortlist';
+	import { Toaster } from 'svelte-sonner';
 
 	currentUser.subscribe((c) => {
 		if (c && c.pubkey) {
@@ -23,4 +24,5 @@
 </script>
 
 <ModeWatcher />
+<Toaster />
 <slot />