wip

src/app/new/components/articleCoverUploader.tsx

@@ -0,0 +1,84 @@
+import { message, open } from '@tauri-apps/plugin-dialog';
+import { readBinaryFile } from '@tauri-apps/plugin-fs';
+import { useState } from 'react';
+
+import { ImageIcon, LoaderIcon } from '@shared/icons';
+
+export function ArticleCoverUploader({ setCover }) {
+  const [loading, setLoading] = useState(false);
+
+  const uploadToNostrBuild = async () => {
+    try {
+      // start loading
+      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 content = json.data[0];
+        setCover(content.url);
+
+        // stop loading
+        setLoading(false);
+      }
+    } catch (e) {
+      // stop loading
+      setLoading(false);
+      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={uploadToNostrBuild}
+      className="inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg bg-neutral-100 px-2.5 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-800"
+    >
+      {loading ? (
+        <LoaderIcon className="h-4 w-4 animate-spin" />
+      ) : (
+        <>
+          <ImageIcon className="h-4 w-4" />
+          Add cover
+        </>
+      )}
+    </button>
+  );
+}

src/app/new/components/index.ts

@@ -0,0 +1,4 @@
+export * from './articleCoverUploader';
+export * from './mediaUploader';
+export * from './mentionPopup';
+export * from './mentionPopupItem';

src/app/new/components/mediaUploader.tsx

@@ -0,0 +1,81 @@
+import { message, open } from '@tauri-apps/plugin-dialog';
+import { readBinaryFile } from '@tauri-apps/plugin-fs';
+import { Editor } from '@tiptap/react';
+import { useState } from 'react';
+
+import { MediaIcon } from '@shared/icons';
+
+export function MediaUploader({ editor }: { editor: Editor }) {
+  const [loading, setLoading] = useState(false);
+
+  const uploadToNostrBuild = async () => {
+    try {
+      // start loading
+      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 content = json.data[0];
+
+        editor.commands.setImage({ src: content.url });
+        editor.commands.createParagraphNear();
+
+        // stop loading
+        setLoading(false);
+      }
+    } catch (e) {
+      // stop loading
+      setLoading(false);
+      await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={() => uploadToNostrBuild()}
+      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'}
+    </button>
+  );
+}

src/app/new/components/mentionPopup.tsx

@@ -0,0 +1,50 @@
+import * as Popover from '@radix-ui/react-popover';
+import { Editor } from '@tiptap/react';
+import { nip19 } from 'nostr-tools';
+
+import { MentionPopupItem } from '@app/new/components';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { MentionIcon } from '@shared/icons';
+
+export function MentionPopup({ editor }: { editor: Editor }) {
+  const { db } = useStorage();
+
+  const insertMention = (pubkey: string) => {
+    editor.commands.insertContent(`nostr:${nip19.npubEncode(pubkey)}`);
+  };
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          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
+        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.length > 0 ? (
+            db.account.follows.map((item) => (
+              <button key={item} type="button" onClick={() => insertMention(item)}>
+                <MentionPopupItem pubkey={item} />
+              </button>
+            ))
+          ) : (
+            <div className="flex h-16 items-center justify-center">
+              Contact list is empty
+            </div>
+          )}
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}

src/app/new/components/mentionPopupItem.tsx

@@ -0,0 +1,38 @@
+import { Image } from '@shared/image';
+
+import { useProfile } from '@utils/hooks/useProfile';
+import { displayNpub } from '@utils/shortenKey';
+
+export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: string }) {
+  const { status, user } = useProfile(pubkey, embed);
+
+  if (status === 'loading') {
+    return (
+      <div className="flex items-center gap-2.5 px-2">
+        <div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
+        <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
+          <span className="h-4 w-1/2 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
+          <span className="h-3 w-1/3 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-neutral-200 dark:bg-neutral-800">
+      <Image
+        src={user.picture || user.image}
+        alt={pubkey}
+        className="shirnk-0 h-8 w-8 rounded-md object-cover"
+      />
+      <div className="flex flex-col items-start gap-px">
+        <h5 className="max-w-[10rem] truncate text-sm font-medium leading-none text-neutral-900 dark:text-neutral-100">
+          {user.display_name || user.displayName || user.name}
+        </h5>
+        <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
+          {displayNpub(pubkey, 16)}
+        </span>
+      </div>
+    </div>
+  );
+}