wip: new composer

2023-10-22 15:48:06 +07:00
parent cade8c8b4c
commit b1a44f2cbf
15 changed files with 675 additions and 116 deletions
--- a/src/shared/composer/mediaUploader.tsx
+++ b/src/shared/composer/mediaUploader.tsx
@@ -1,24 +1,61 @@
-import { UnlistenFn, listen } from '@tauri-apps/api/event';
-import { message } from '@tauri-apps/plugin-dialog';
+import { message, open } 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);
-      if (image.url) {
-        editor.commands.setImage({ src: image.url });
+      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
@@ -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'}
--- a/src/shared/composer/mention/popup.tsx
+++ b/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) => (
-            <button key={item} type="button" onClick={() => insertMention(item)}>
-              <MentionItem pubkey={item} />
-            </button>
-          ))}
+          {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>
--- a/src/shared/layouts/auth.tsx
+++ b/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>
--- a/src/shared/layouts/note.tsx
+++ b/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>
--- a/src/shared/widgets/local/network.tsx
+++ b/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" />