smal fixes and update article layout

src/app/new/article.tsx

@@ -1,4 +1,4 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { NDKEvent, NDKKind, NDKTag } from '@nostr-dev-kit/ndk';
 import CharacterCount from '@tiptap/extension-character-count';
 import Image from '@tiptap/extension-image';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -71,7 +71,7 @@ export function NewArticleScreen() {
       const content = editor.storage.markdown.getMarkdown();
 
       // define tags
-      const tags: string[][] = [
+      const tags: NDKTag[] = [
         ['d', ident],
         ['title', title],
         ['image', cover],
@@ -85,17 +85,20 @@ export function NewArticleScreen() {
         tags.push(['t', tag.replace('#', '')]);
       });
 
-      // publish message
       const event = new NDKEvent(ndk);
       event.content = content;
       event.kind = NDKKind.Article;
       event.tags = tags;
 
+      // publish
       const publishedRelays = await event.publish();
+
       if (publishedRelays) {
         toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
+
         // update state
         setLoading(false);
+
         // reset editor
         editor.commands.clearContent();
         localStorage.setItem('editor-article', '{}');
@@ -235,7 +238,7 @@ export function NewArticleScreen() {
         <div className="flex h-16 w-full items-center justify-between border-t border-neutral-100 dark:border-neutral-900">
           <div className="inline-flex items-center gap-3">
             <span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
-              {editor?.storage?.characterCount.characters()}
+              {editor?.storage?.characterCount.characters()} characters
             </span>
             <span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
               -

src/app/new/post.tsx

@@ -1,4 +1,4 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { NDKEvent, NDKKind, NDKTag } from '@nostr-dev-kit/ndk';
 import CharacterCount from '@tiptap/extension-character-count';
 import Image from '@tiptap/extension-image';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -16,8 +16,13 @@ import { useNDK } from '@libs/ndk/provider';
 import { CancelIcon, LoaderIcon } from '@shared/icons';
 import { MentionNote } from '@shared/notes';
 
+import { WIDGET_KIND } from '@stores/constants';
+
+import { useWidget } from '@utils/hooks/useWidget';
+
 export function NewPostScreen() {
   const { ndk, relayUrls } = useNDK();
+  const { addWidget } = useWidget();
 
   const [loading, setLoading] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -67,11 +72,11 @@ export function NewPostScreen() {
       });
 
       // define tags
-      let tags: string[][] = [];
+      let tags: NDKTag[] = [];
 
       // add reply to tags if present
       if (reply.id && reply.pubkey) {
-        if (reply.root && reply.root.length > 1) {
+        if (reply.root) {
           tags = [
             ['e', reply.root, relayUrls[0], 'root'],
             ['e', reply.id, relayUrls[0], 'reply'],
@@ -89,24 +94,35 @@ export function NewPostScreen() {
       const hashtags = serializedContent
         .split(/\s/gm)
         .filter((s: string) => s.startsWith('#'));
-
       hashtags?.forEach((tag: string) => {
         tags.push(['t', tag.replace('#', '')]);
       });
 
-      // publish message
       const event = new NDKEvent(ndk);
       event.content = serializedContent;
       event.kind = NDKKind.Text;
       event.tags = tags;
 
+      // publish event
       const publishedRelays = await event.publish();
+
       if (publishedRelays) {
         toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
+
         // update state
         setLoading(false);
-        // reset editor
         setSearchParams({});
+
+        // open new widget with this event id
+        if (!reply.id && !reply.pubkey) {
+          addWidget.mutate({
+            title: 'Thread',
+            content: event.id,
+            kind: WIDGET_KIND.thread,
+          });
+        }
+
+        // reset editor
         editor.commands.clearContent();
         localStorage.setItem('editor-post', '{}');
       }
@@ -132,20 +148,20 @@ export function NewPostScreen() {
         />
         {searchParams.get('id') && (
           <div className="relative max-w-lg">
-            <MentionNote id={searchParams.get('id')} />
+            <MentionNote id={searchParams.get('id')} editing />
             <button
               type="button"
               onClick={() => setSearchParams({})}
-              className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-neutral-300 px-2 dark:bg-neutral-700"
+              className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-neutral-200 px-2 dark:bg-neutral-800"
             >
-              <CancelIcon className="h-4 w-4" />
+              <CancelIcon className="h-5 w-5" />
             </button>
           </div>
         )}
       </div>
       <div className="flex h-16 w-full items-center justify-between border-t border-neutral-100 dark:border-neutral-900">
         <span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
-          {editor?.storage?.characterCount.characters()}
+          {editor?.storage?.characterCount.characters()} characters
         </span>
         <div className="flex items-center">
           <div className="inline-flex items-center gap-2">