wip: new composer

package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^4.36.1",
     "@tauri-apps/api": "2.0.0-alpha.8",
@@ -48,6 +49,7 @@
     "@tauri-apps/plugin-updater": "2.0.0-alpha.1",
     "@tauri-apps/plugin-upload": "2.0.0-alpha.1",
     "@tauri-apps/plugin-window": "2.0.0-alpha.1",
+    "@tiptap/extension-character-count": "^2.1.12",
     "@tiptap/extension-image": "^2.1.12",
     "@tiptap/extension-mention": "^2.1.12",
     "@tiptap/extension-placeholder": "^2.1.12",

pnpm-lock.yaml

@@ -44,6 +44,9 @@ dependencies:
   '@radix-ui/react-popover':
     specifier: ^1.0.7
     version: 1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-toolbar':
+    specifier: ^1.0.4
+    version: 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-tooltip':
     specifier: ^1.0.7
     version: 1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
@@ -95,6 +98,9 @@ dependencies:
   '@tauri-apps/plugin-window':
     specifier: 2.0.0-alpha.1
     version: 2.0.0-alpha.1
+  '@tiptap/extension-character-count':
+    specifier: ^2.1.12
+    version: 2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
   '@tiptap/extension-image':
     specifier: ^2.1.12
     version: 2.1.12(@tiptap/core@2.1.12)
@@ -1551,6 +1557,27 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.2
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.29
+      '@types/react-dom': 18.2.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.29)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -1566,6 +1593,83 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.2
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.29)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.29)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.29)(react@18.2.0)
+      '@types/react': 18.2.29
+      '@types/react-dom': 18.2.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.2
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.29)(react@18.2.0)
+      '@types/react': 18.2.29
+      '@types/react-dom': 18.2.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-toolbar@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.2
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.29)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.29)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-separator': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-toggle-group': 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.29
+      '@types/react-dom': 18.2.14
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
     peerDependencies:
@@ -2279,6 +2383,16 @@ packages:
       '@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
     dev: false
 
+  /@tiptap/extension-character-count@2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12):
+    resolution: {integrity: sha512-+GFbBG13nvF8mFIeisSERG/Q3CuRsTNwVZIRbJTLgGdbHXFqPhJh4Xfm7cv7OaOYevUlVyO+z5pGD7wIl1bLqQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0
+      '@tiptap/pm': ^2.0.0
+    dependencies:
+      '@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
+      '@tiptap/pm': 2.1.12
+    dev: false
+
   /@tiptap/extension-code-block@2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12):
     resolution: {integrity: sha512-RXtSYCVsnk8D+K80uNZShClfZjvv1EgO42JlXLVGWQdIgaNyuOv/6I/Jdf+ZzhnpsBnHufW+6TJjwP5vJPSPHA==}
     peerDependencies:

src/app/notes/components/editor/article.tsx

@@ -0,0 +1,124 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import CharacterCount from '@tiptap/extension-character-count';
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { convert } from 'html-to-text';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import { MediaUploader, MentionPopup } from '@shared/composer';
+import { LoaderIcon } from '@shared/icons';
+
+export function ArticleEditor() {
+  const { ndk } = useNDK();
+  const [loading, setLoading] = useState(false);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure(),
+      Placeholder.configure({ placeholder: 'Type something...' }),
+      Image.configure({
+        HTMLAttributes: {
+          class:
+            'rounded-lg w-full object-cover h-auto max-h-[400px] border border-neutral-200 dark:border-neutral-800 outline outline-1 outline-offset-0 outline-neutral-300 dark:outline-neutral-700',
+        },
+      }),
+      CharacterCount.configure(),
+    ],
+    content: JSON.parse(localStorage.getItem('editor-post') || '{}'),
+    editorProps: {
+      attributes: {
+        class:
+          'outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
+      },
+    },
+    onUpdate: ({ editor }) => {
+      const jsonContent = JSON.stringify(editor.getJSON());
+      localStorage.setItem('editor-post', jsonContent);
+    },
+  });
+
+  const submit = async () => {
+    try {
+      setLoading(true);
+
+      // get plaintext content
+      const html = editor.getHTML();
+      const serializedContent = convert(html, {
+        selectors: [
+          { selector: 'a', options: { linkBrackets: false } },
+          { selector: 'img', options: { linkBrackets: false } },
+        ],
+      });
+
+      // define tags
+      const tags: string[][] = [];
+
+      // add hashtag to tags if present
+      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.Article;
+      event.tags = tags;
+
+      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-post', '{}');
+      }
+    } catch (e) {
+      setLoading(false);
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col justify-between">
+      <EditorContent
+        editor={editor}
+        spellCheck="false"
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+      />
+      <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()}
+        </span>
+        <div className="flex items-center">
+          <div className="inline-flex items-center gap-2">
+            <MediaUploader editor={editor} />
+            <MentionPopup editor={editor} />
+          </div>
+          <div className="mx-3 h-6 w-px bg-neutral-200 dark:bg-neutral-800" />
+          <button
+            onClick={() => submit()}
+            disabled={editor && editor.isEmpty}
+            className="inline-flex h-9 w-max items-center justify-center rounded-lg bg-blue-500 px-2.5 font-medium text-white hover:bg-blue-600 disabled:opacity-50"
+          >
+            {loading === true ? (
+              <LoaderIcon className="h-5 w-5 animate-spin" />
+            ) : (
+              'Publish article'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/notes/components/editor/file.tsx

@@ -0,0 +1,162 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { message, open } from '@tauri-apps/plugin-dialog';
+import { readBinaryFile } from '@tauri-apps/plugin-fs';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import { LoaderIcon } from '@shared/icons';
+
+export function FileEditor() {
+  const { ndk } = useNDK();
+
+  const [loading, setLoading] = useState(false);
+  const [isPublish, setIsPublish] = useState(false);
+  const [metadata, setMetadata] = useState(null);
+  const [caption, setCaption] = useState('');
+
+  const uploadFile = async () => {
+    try {
+      setLoading(true);
+
+      const selected = await open({
+        multiple: false,
+        filters: [
+          {
+            name: 'Media',
+            extensions: [
+              'png',
+              'jpeg',
+              'jpg',
+              'gif',
+              'mp4',
+              'mp3',
+              'webm',
+              'mkv',
+              'avi',
+              'mov',
+            ],
+          },
+        ],
+      });
+
+      if (!selected) {
+        setLoading(false);
+        return;
+      }
+
+      const file = await readBinaryFile(selected.path);
+      const blob = new Blob([file]);
+
+      const data = new FormData();
+      data.append('fileToUpload', blob);
+      data.append('submit', 'Upload Image');
+
+      const res = await fetch('https://nostr.build/api/v2/upload/files', {
+        method: 'POST',
+        body: data,
+      });
+
+      if (res.ok) {
+        const json = await res.json();
+        const data = json.data[0];
+
+        setMetadata([
+          ['url', data.url],
+          ['m', data.mime ?? 'application/octet-stream'],
+          ['x', data.sha256 ?? ''],
+          ['size', data.size.toString() ?? '0'],
+          ['dim', `${data.dimensions.width}x${data.dimensions.height}` ?? '0'],
+          ['blurhash', data.blurhash ?? ''],
+          ['thumb', data.thumbnail ?? ''],
+        ]);
+
+        // stop loading
+        setLoading(false);
+      }
+    } catch (e) {
+      // stop loading
+      setLoading(false);
+      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
+    }
+  };
+
+  const submit = async () => {
+    try {
+      setIsPublish(true);
+
+      const event = new NDKEvent(ndk);
+      event.content = caption;
+      event.kind = 1063;
+      event.tags = metadata;
+
+      const publishedRelays = await event.publish();
+      if (publishedRelays) {
+        setMetadata(null);
+        setIsPublish(false);
+        toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
+      }
+    } catch (e) {
+      setIsPublish(false);
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="h-full">
+      <div className="flex flex-col gap-4">
+        <button
+          type="button"
+          onClick={uploadFile}
+          className="flex h-72 w-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-neutral-200 bg-neutral-100 hover:border-blue-500 hover:text-blue-500 dark:border-neutral-800 dark:bg-neutral-900"
+        >
+          {loading ? (
+            <LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
+          ) : !metadata ? (
+            <div className="flex flex-col text-center">
+              <h5 className="text-lg font-semibold">
+                Click or drag a file to this area to upload
+              </h5>
+              <p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                Supports: jpg, png, webp, gif, mov, mp4 or mp3
+              </p>
+            </div>
+          ) : (
+            <div>
+              <img
+                src={metadata[0][1]}
+                alt={metadata[1][1]}
+                className="h-56 w-56 rounded-lg object-cover shadow-lg"
+              />
+            </div>
+          )}
+        </button>
+        <div className="mx-auto w-full max-w-sm">
+          <div className="inline-flex w-full items-center gap-2">
+            <input
+              name="caption"
+              type="text"
+              value={caption}
+              onChange={(e) => setCaption(e.target.value)}
+              spellCheck={false}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              placeholder="Caption (Optional)..."
+              className="h-11 flex-1 rounded-lg bg-neutral-100 px-3 placeholder:text-neutral-500 dark:bg-neutral-900 dark:placeholder:text-neutral-400"
+            />
+            <button
+              type="button"
+              onClick={submit}
+              disabled={!metadata}
+              className="inline-flex h-11 w-20 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+            >
+              {isPublish ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Share'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/notes/components/editor/post.tsx

@@ -1,25 +1,39 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import CharacterCount from '@tiptap/extension-character-count';
 import Image from '@tiptap/extension-image';
 import Placeholder from '@tiptap/extension-placeholder';
 import { EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { convert } from 'html-to-text';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+
+import { MediaUploader, MentionPopup } from '@shared/composer';
+import { LoaderIcon } from '@shared/icons';
 
 export function PostEditor() {
+  const { ndk } = useNDK();
+  const [loading, setLoading] = useState(false);
+
   const editor = useEditor({
     extensions: [
       StarterKit.configure(),
-      Placeholder.configure({ placeholder: 'Type something...' }),
+      Placeholder.configure({ placeholder: 'Sharing some thoughts...' }),
       Image.configure({
         HTMLAttributes: {
           class:
-            'rounded-lg w-full h-auto border border-white/10 outline outline-2 outline-offset-0 outline-white/20 ml-1',
+            'rounded-lg w-full object-cover h-auto max-h-[400px] border border-neutral-200 dark:border-neutral-800 outline outline-1 outline-offset-0 outline-neutral-300 dark:outline-neutral-700',
         },
       }),
+      CharacterCount.configure(),
     ],
     content: JSON.parse(localStorage.getItem('editor-post') || '{}'),
     editorProps: {
       attributes: {
         class:
-          'h-full outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
+          'outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
       },
     },
     onUpdate: ({ editor }) => {
@@ -28,7 +42,53 @@ export function PostEditor() {
     },
   });
 
+  const submit = async () => {
+    try {
+      setLoading(true);
+
+      // get plaintext content
+      const html = editor.getHTML();
+      const serializedContent = convert(html, {
+        selectors: [
+          { selector: 'a', options: { linkBrackets: false } },
+          { selector: 'img', options: { linkBrackets: false } },
+        ],
+      });
+
+      // define tags
+      const tags: string[][] = [];
+
+      // add hashtag to tags if present
+      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;
+
+      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-post', '{}');
+      }
+    } catch (e) {
+      setLoading(false);
+      toast.error(e);
+    }
+  };
+
   return (
+    <div className="flex h-full flex-col justify-between">
       <EditorContent
         editor={editor}
         spellCheck="false"
@@ -36,5 +96,25 @@ export function PostEditor() {
         autoCorrect="off"
         autoCapitalize="off"
       />
+      <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()}
+        </span>
+        <div className="flex items-center">
+          <div className="inline-flex items-center gap-2">
+            <MediaUploader editor={editor} />
+            <MentionPopup editor={editor} />
+          </div>
+          <div className="mx-3 h-6 w-px bg-neutral-200 dark:bg-neutral-800" />
+          <button
+            onClick={() => submit()}
+            disabled={editor && editor.isEmpty}
+            className="inline-flex h-9 w-20 items-center justify-center rounded-lg bg-blue-500 px-2 font-medium text-white hover:bg-blue-600 disabled:opacity-50"
+          >
+            {loading === true ? <LoaderIcon className="h-5 w-5 animate-spin" /> : 'Post'}
+          </button>
+        </div>
+      </div>
+    </div>
   );
 }

src/app/notes/components/index.ts

@@ -1 +1,3 @@
 export * from './editor/post';
+export * from './editor/article';
+export * from './editor/file';

src/app/notes/new.tsx

@@ -2,15 +2,27 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
-import { PostEditor } from '@app/notes/components';
+import { ArticleEditor, FileEditor, PostEditor } from '@app/notes/components';
 
 import { ArrowLeftIcon } from '@shared/icons';
 
 export function NewNoteScreen() {
   const [type, setType] = useState<'post' | 'article' | 'file' | 'raw'>('post');
 
+  const renderEditor = () => {
+    switch (type) {
+      case 'post':
+        return <PostEditor />;
+      case 'article':
+        return <ArticleEditor />;
+      case 'file':
+        return <FileEditor />;
+      default:
+        return null;
+    }
+  };
+
   return (
-    <div className="h-full w-full pt-4">
     <div className="container mx-auto grid grid-cols-8 px-4">
       <div className="col-span-1">
         <Link
@@ -20,8 +32,8 @@ export function NewNoteScreen() {
           <ArrowLeftIcon className="h-5 w-5" />
         </Link>
       </div>
-        <div className="col-span-6">
+      <div className="relative col-span-6 flex flex-col">
-          <div className="mb-8 flex items-center gap-3">
+        <div className="mb-8 flex h-10 shrink-0 items-center gap-3">
           <div className="flex h-10 items-center gap-2 rounded-lg bg-neutral-100 px-0.5 dark:bg-neutral-800">
             <button
               type="button"
@@ -47,28 +59,27 @@ export function NewNoteScreen() {
               type="button"
               onClick={() => setType('file')}
               className={twMerge(
-                  'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
+                'inline-flex h-9 w-28 items-center justify-center rounded-lg text-sm font-medium',
                 type === 'file' ? 'bg-white shadow' : 'bg-transparent'
               )}
             >
-                File
+              File Sharing
             </button>
             <button
               type="button"
               onClick={() => setType('raw')}
               className={twMerge(
-                  'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
+                'inline-flex h-9 w-32 items-center justify-center rounded-lg text-sm font-medium',
-                  type === 'file' ? 'bg-white shadow' : 'bg-transparent'
+                type === 'raw' ? 'bg-white shadow' : 'bg-transparent'
               )}
             >
               Raw (advance)
             </button>
           </div>
         </div>
-          {type === 'post' ? <PostEditor /> : null}
+        <div className="h-full min-h-0 w-full">{renderEditor()}</div>
       </div>
       <div className="col-span-1" />
     </div>
-    </div>
   );
 }

src/libs/storage/instance.ts

@@ -52,10 +52,10 @@ export class LumeStorage {
       const account = results[0];
 
       if (typeof account.follows === 'string')
-        account.follows = JSON.parse(account.follows);
+        account.follows = JSON.parse(account.follows) ?? [];
 
       if (typeof account.circles === 'string')
-        account.circles = JSON.parse(account.circles);
+        account.circles = JSON.parse(account.circles) ?? [];
 
       if (typeof account.last_login_at === 'string')
         account.last_login_at = parseInt(account.last_login_at);

src/main.jsx

@@ -16,7 +16,7 @@ root.render(
   <QueryClientProvider client={queryClient}>
     <StorageProvider>
       <NDKProvider>
-        <Toaster position="top-center" />
+        <Toaster position="top-center" closeButton />
         <App />
       </NDKProvider>
     </StorageProvider>

src/shared/composer/mediaUploader.tsx

@@ -1,24 +1,61 @@
-import { UnlistenFn, listen } from '@tauri-apps/api/event';
+import { message, open } from '@tauri-apps/plugin-dialog';
-import { message } from '@tauri-apps/plugin-dialog';
+import { readBinaryFile } from '@tauri-apps/plugin-fs';
 import { Editor } from '@tiptap/react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { MediaIcon } from '@shared/icons';
 
-import { useNostr } from '@utils/hooks/useNostr';
-
 export function MediaUploader({ editor }: { editor: Editor }) {
-  const { upload } = useNostr();
   const [loading, setLoading] = useState(false);
 
-  const uploadToNostrBuild = async (file?: string) => {
+  const uploadToNostrBuild = async () => {
     try {
       // start loading
       setLoading(true);
 
-      const image = await upload(file, true);
+      const selected = await open({
-      if (image.url) {
+        multiple: false,
-        editor.commands.setImage({ src: image.url });
+        filters: [
+          {
+            name: 'Media',
+            extensions: [
+              'png',
+              'jpeg',
+              'jpg',
+              'gif',
+              'mp4',
+              'mp3',
+              'webm',
+              'mkv',
+              'avi',
+              'mov',
+            ],
+          },
+        ],
+      });
+
+      if (!selected) {
+        setLoading(false);
+        return;
+      }
+
+      const file = await readBinaryFile(selected.path);
+      const blob = new Blob([file]);
+
+      const data = new FormData();
+      data.append('fileToUpload', blob);
+      data.append('submit', 'Upload Image');
+
+      const res = await fetch('https://nostr.build/api/v2/upload/files', {
+        method: 'POST',
+        body: data,
+      });
+
+      if (res.ok) {
+        const json = await res.json();
+        const content = json.data[0];
+
+        editor.commands.setImage({ src: content.url });
         editor.commands.createParagraphNear();
 
         // stop loading
@@ -31,29 +68,11 @@ export function MediaUploader({ editor }: { editor: Editor }) {
     }
   };
 
-  useEffect(() => {
-    let unlisten: UnlistenFn;
-
-    async function listenDnD() {
-      unlisten = await listen('tauri://file-drop', (event) => {
-        uploadToNostrBuild(event.payload[0]);
-      });
-    }
-
-    // start listen drag and drop event
-    listenDnD();
-
-    // clean up
-    return () => {
-      unlisten();
-    };
-  }, []);
-
   return (
     <button
       type="button"
       onClick={() => uploadToNostrBuild()}
-      className="ml-2 inline-flex h-10 w-max items-center justify-center gap-1.5 rounded-lg px-2 text-sm font-medium text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-400"
+      className="inline-flex h-9 w-max items-center justify-center gap-1.5 rounded-lg bg-neutral-100 px-2 text-sm font-medium text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
     >
       <MediaIcon className="h-5 w-5" />
       {loading ? 'Uploading...' : 'Add media'}

src/shared/composer/mention/popup.tsx

@@ -19,18 +19,29 @@ export function MentionPopup({ editor }: { editor: Editor }) {
       <Popover.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-600 hover:bg-neutral-200 dark:text-neutral-400 dark:hover:bg-neutral-800"
+          className="inline-flex h-9 w-max items-center justify-center gap-1.5 rounded-lg bg-neutral-100 px-2 text-sm font-medium text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
         >
           <MentionIcon className="h-5 w-5" />
+          Mention
         </button>
       </Popover.Trigger>
-      <Popover.Content className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg bg-neutral-400 focus:outline-none dark:bg-neutral-600">
+      <Popover.Content
+        side="top"
+        sideOffset={5}
+        className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg border border-neutral-200 bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:bg-neutral-900"
+      >
         <div className="flex flex-col gap-1 py-1">
-          {db.account.follows.map((item) => (
+          {db.account.follows.length > 0 ? (
+            db.account.follows.map((item) => (
               <button key={item} type="button" onClick={() => insertMention(item)}>
                 <MentionItem pubkey={item} />
               </button>
-          ))}
+            ))
+          ) : (
+            <div className="flex h-16 items-center justify-center">
+              Contact list is empty
+            </div>
+          )}
         </div>
       </Popover.Content>
     </Popover.Root>

src/shared/layouts/auth.tsx

@@ -7,13 +7,13 @@ export function AuthLayout() {
   const { db } = useStorage();
 
   return (
-    <div className="h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
+    <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
       {db.platform !== 'macos' ? (
         <WindowTitlebar />
       ) : (
         <div data-tauri-drag-region className="h-9" />
       )}
-      <div className="h-full w-full">
+      <div className="flex h-full min-h-0 w-full">
         <Outlet />
         <ScrollRestoration />
       </div>

src/shared/layouts/note.tsx

@@ -7,13 +7,14 @@ export function NoteLayout() {
   const { db } = useStorage();
 
   return (
-    <div className="h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
+    <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
       {db.platform !== 'macos' ? (
         <WindowTitlebar />
       ) : (
         <div data-tauri-drag-region className="h-9" />
       )}
-      <div className="h-full w-full">
+      <div data-tauri-drag-region className="h-6" />
+      <div className="flex h-full min-h-0 w-full">
         <Outlet />
         <ScrollRestoration />
       </div>

src/shared/widgets/local/network.tsx

@@ -5,7 +5,7 @@ import { VList } from 'virtua';
 
 import { useStorage } from '@libs/storage/provider';
 
-import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon, ArrowRightIcon, LoaderIcon } from '@shared/icons';
 import {
   MemoizedArticleNote,
   MemoizedFileNote,
@@ -18,7 +18,7 @@ import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 import { EventLoader, WidgetWrapper } from '@shared/widgets';
 
-import { useWidgets } from '@stores/widgets';
+import { WidgetKinds, useWidgets } from '@stores/widgets';
 
 import { useNostr } from '@utils/hooks/useNostr';
 import { toRawEvent } from '@utils/rawEvent';
@@ -36,6 +36,7 @@ export function LocalNetworkWidget() {
       getNextPageParam: (lastPage) => lastPage.nextCursor,
     });
 
+  const setWidget = useWidgets((state) => state.setWidget);
   const isFetched = useWidgets((state) => state.isFetched);
   const dbEvents = useMemo(
     () => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
@@ -83,10 +84,18 @@ export function LocalNetworkWidget() {
     [dbEvents]
   );
 
+  const openTrendingWidgets = async () => {
+    setWidget(db, {
+      kind: WidgetKinds.nostrBand.trendingAccounts,
+      title: 'Trending Accounts',
+      content: '',
+    });
+  };
+
   // subscribe for new event
   // sub will be managed by lru-cache
   useEffect(() => {
-    if (db.account && db.account.circles && dbEvents.length > 0) {
+    if (db.account && db.account.circles.length > 0 && dbEvents.length > 0) {
       const filter: NDKFilter = {
         kinds: [NDKKind.Text, NDKKind.Repost],
         authors: db.account.circles,
@@ -100,6 +109,31 @@ export function LocalNetworkWidget() {
     }
   }, [data]);
 
+  if (db.account.circles.length < 1) {
+    return (
+      <WidgetWrapper>
+        <div className="flex h-full w-full items-center justify-center">
+          <div className="px-8 text-center">
+            <p className="mb-2 text-3xl">👋</p>
+            <h1 className="text-lg font-semibold">You have not follow anyone yet</h1>
+            <h5 className="text-sm text-neutral-600 dark:text-neutral-400">
+              If you are new to Nostr, you can click button below to open trending users
+              and start follow some of theme
+            </h5>
+            <button
+              type="button"
+              onClick={() => openTrendingWidgets()}
+              className="mt-4 inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg bg-blue-500 px-3 font-semibold text-white hover:bg-blue-600"
+            >
+              Open trending
+              <ArrowRightIcon className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </WidgetWrapper>
+    );
+  }
+
   return (
     <WidgetWrapper>
       <TitleBar id="9999" />

src/utils/rawEvent.ts

@@ -8,6 +8,5 @@ export function toRawEvent(event: NDKEvent) {
   delete event.isParamReplaceable;
   delete event.isReplaceable;
   delete event.repost;
-  delete event.relay;
   return event;
 }