ready for alpha

2023-10-26 09:29:33 +07:00
parent 50f81a7d0b
commit 0c8dcef937
35 changed files with 426 additions and 320 deletions
--- a/src/app/auth/import.tsx
+++ b/src/app/auth/import.tsx
@@ -85,6 +85,9 @@ export function ImportAccountScreen() {
      try {
        const privkey = nip19.decode(nsec).data as string;
        await db.secureSave(pubkey, privkey);
+
+        ndk.signer = new NDKPrivateKeySigner(privkey);
+
        setSavedPrivkey(true);
      } catch (e) {
        return toast(`nsec invalid: ${e}`);
--- a/src/app/chats/index.tsx
+++ b/src/app/chats/index.tsx
@@ -36,7 +36,7 @@ export function ChatsScreen() {
      <div className="col-span-1 h-full overflow-y-auto border-r border-neutral-200 scrollbar-none dark:border-neutral-800">
        <div
          data-tauri-drag-region
-          className="flex h-11 w-full shrink-0 items-center border-b border-neutral-200 px-3 dark:border-neutral-800"
+          className="flex h-11 w-full shrink-0 items-center border-b border-neutral-100 px-3 dark:border-neutral-900"
        >
          <h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
            All chats
@@ -52,6 +52,12 @@ export function ChatsScreen() {
                </h5>
              </div>
            </div>
+          ) : data.length < 1 ? (
+            <div className="flex h-full w-full items-center justify-center pb-16">
+              <div className="inline-flex flex-col items-center justify-center gap-2">
+                <h5 className="text-neutral-900 dark:text-neutral-100">No message</h5>
+              </div>
+            </div>
          ) : (
            data.map((item) => renderItem(item))
          )}
--- a/src/app/notes/article.tsx
+++ b/src/app/notes/article.tsx
@@ -1,22 +1,12 @@
-import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { nip19 } from 'nostr-tools';
 import { AddressPointer, EventPointer } from 'nostr-tools/lib/types/nip19';
 import { useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';

-import { useStorage } from '@libs/storage/provider';
-
 import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
-import {
-  ArticleDetailNote,
-  NoteActions,
-  NoteReplyForm,
-  NoteStats,
-  UnknownNote,
-} from '@shared/notes';
+import { ArticleDetailNote, NoteActions, NoteReplyForm } from '@shared/notes';
 import { ReplyList } from '@shared/notes/replies/list';
-import { NoteSkeleton } from '@shared/notes/skeleton';
 import { User } from '@shared/user';

 import { useEvent } from '@utils/hooks/useEvent';
@@ -26,7 +16,6 @@ export function ArticleNoteScreen() {
  const replyRef = useRef(null);

  const { id } = useParams();
-  const { db } = useStorage();

  const naddr = id.startsWith('naddr') ? (nip19.decode(id).data as AddressPointer) : null;
  const { status, data } = useEvent(id, naddr);
@@ -48,83 +37,65 @@ export function ArticleNoteScreen() {
    replyRef.current.scrollIntoView();
  };

-  const renderKind = (event: NDKEvent) => {
-    switch (event.kind) {
-      case NDKKind.Article:
-        return <ArticleDetailNote event={event} />;
-      default:
-        return <UnknownNote event={event} />;
-    }
-  };
-
  return (
-    <div className="h-full w-full overflow-y-auto scroll-smooth scrollbar-none">
-      <div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-5">
-          <div className="col-span-1 pr-8">
-            <div className="sticky top-16 flex flex-col items-end gap-4">
-              <button
-                type="button"
-                onClick={() => navigate(-1)}
-                className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-200 dark:bg-neutral-800"
-              >
-                <ArrowLeftIcon className="h-5 w-5" />
-              </button>
-              <div className="flex flex-col divide-y divide-neutral-300 rounded-xl bg-neutral-200 dark:divide-neutral-700 dark:bg-neutral-800">
-                <button
-                  type="button"
-                  onClick={share}
-                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
-                >
-                  {isCopy ? (
-                    <CheckCircleIcon className="h-5 w-5 text-teal-500" />
-                  ) : (
-                    <ShareIcon className="h-5 w-5" />
-                  )}
-                </button>
-                <button
-                  type="button"
-                  onClick={scrollToReply}
-                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
-                >
-                  <ReplyIcon className="h-5 w-5" />
-                </button>
-              </div>
-            </div>
+    <div className="container mx-auto grid grid-cols-8 scroll-smooth px-4">
+      <div className="col-span-1">
+        <div className="flex flex-col items-end gap-4">
+          <button
+            type="button"
+            onClick={() => navigate(-1)}
+            className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
+          >
+            <ArrowLeftIcon className="h-5 w-5" />
+          </button>
+          <div className="flex flex-col divide-y divide-neutral-200 rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
+            <button
+              type="button"
+              onClick={share}
+              className="inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
+            >
+              {isCopy ? (
+                <CheckCircleIcon className="h-5 w-5 text-teal-500" />
+              ) : (
+                <ShareIcon className="h-5 w-5" />
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={scrollToReply}
+              className="inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
+            >
+              <ReplyIcon className="h-5 w-5" />
+            </button>
          </div>
-          <div className="col-span-3 flex flex-col gap-1.5">
-            {status === 'loading' ? (
-              <div className="px-3 py-1.5">
-                <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-                  <NoteSkeleton />
-                </div>
-              </div>
-            ) : (
-              <>
-                <div className="flex h-min w-full flex-col gap-1 px-3">
-                  <div>
-                    <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
-                    <div className="mt-2">{renderKind(data)}</div>
-                    <div className="mb-3 mt-3">
-                      <NoteActions
-                        id={data.id}
-                        pubkey={data.pubkey}
-                        extraButtons={false}
-                      />
-                    </div>
-                  </div>
-                  <NoteStats id={data.id} />
-                </div>
-                <div ref={replyRef} className="px-3">
-                  <NoteReplyForm id={data.id} pubkey={db.account.pubkey} />
-                  <ReplyList id={data.id} />
-                </div>
-              </>
-            )}
-          </div>
-          <div className="col-span-1" />
        </div>
      </div>
+      <div className="relative col-span-6 flex flex-col overflow-y-auto">
+        <div className="mx-auto w-full max-w-2xl">
+          {status === 'loading' ? (
+            <div className="px-3 py-1.5">Loading...</div>
+          ) : (
+            <div className="flex h-min w-full flex-col px-3">
+              <div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
+                <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
+                <div className="mt-3">
+                  <ArticleDetailNote event={data} />
+                </div>
+                <div className="mt-3">
+                  <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
+                </div>
+              </div>
+            </div>
+          )}
+          <div ref={replyRef} className="px-3">
+            <div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
+              <NoteReplyForm id={id} />
+            </div>
+            <ReplyList id={id} />
+          </div>
+        </div>
+      </div>
+      <div className="col-span-1" />
    </div>
  );
 }
--- a/src/app/notes/text.tsx
+++ b/src/app/notes/text.tsx
@@ -5,15 +5,12 @@ import { EventPointer } from 'nostr-tools/lib/types/nip19';
 import { useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';

-import { useStorage } from '@libs/storage/provider';
-
 import { ArrowLeftIcon, CheckCircleIcon, ReplyIcon, ShareIcon } from '@shared/icons';
 import {
  ArticleNote,
  FileNote,
  NoteActions,
  NoteReplyForm,
-  NoteStats,
  TextNote,
  UnknownNote,
 } from '@shared/notes';
@@ -23,16 +20,12 @@ import { User } from '@shared/user';
 import { useEvent } from '@utils/hooks/useEvent';

 export function TextNoteScreen() {
+  const { id } = useParams();
+  const { status, data } = useEvent(id);
+
  const navigate = useNavigate();
  const replyRef = useRef(null);

-  const { id } = useParams();
-
-  console.log(id);
-
-  const { db } = useStorage();
-  const { status, data } = useEvent(id);
-
  const [isCopy, setIsCopy] = useState(false);

  const share = async () => {
@@ -64,67 +57,62 @@ export function TextNoteScreen() {
  };

  return (
-    <div className="h-full w-full overflow-y-auto scroll-smooth scrollbar-none">
-      <div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-5">
-          <div className="col-span-1 pr-8">
-            <div className="sticky top-16 flex flex-col items-end gap-4">
-              <button
-                type="button"
-                onClick={() => navigate(-1)}
-                className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-200 dark:bg-neutral-800"
-              >
-                <ArrowLeftIcon className="h-5 w-5" />
-              </button>
-              <div className="flex flex-col divide-y divide-neutral-300 rounded-xl bg-neutral-200 dark:divide-neutral-700 dark:bg-neutral-800">
-                <button
-                  type="button"
-                  onClick={share}
-                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
-                >
-                  {isCopy ? (
-                    <CheckCircleIcon className="h-5 w-5 text-teal-500" />
-                  ) : (
-                    <ShareIcon className="h-5 w-5" />
-                  )}
-                </button>
-                <button
-                  type="button"
-                  onClick={scrollToReply}
-                  className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
-                >
-                  <ReplyIcon className="h-5 w-5" />
-                </button>
-              </div>
-            </div>
+    <div className="container mx-auto grid grid-cols-8 scroll-smooth px-4">
+      <div className="col-span-1">
+        <div className="flex flex-col items-end gap-4">
+          <button
+            type="button"
+            onClick={() => navigate(-1)}
+            className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900"
+          >
+            <ArrowLeftIcon className="h-5 w-5" />
+          </button>
+          <div className="flex flex-col divide-y divide-neutral-200 rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
+            <button
+              type="button"
+              onClick={share}
+              className="inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
+            >
+              {isCopy ? (
+                <CheckCircleIcon className="h-5 w-5 text-teal-500" />
+              ) : (
+                <ShareIcon className="h-5 w-5" />
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={scrollToReply}
+              className="inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
+            >
+              <ReplyIcon className="h-5 w-5" />
+            </button>
          </div>
-          <div className="col-span-3 flex flex-col gap-1.5">
-            {status === 'loading' ? (
-              <div className="px-3 py-1.5">
-                <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
-                  Loading...
-                </div>
-              </div>
-            ) : (
-              <div className="flex h-min w-full flex-col px-3">
-                <div className="rounded-xl bg-neutral-100 px-3 pt-3 dark:bg-neutral-900">
-                  <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
-                  <div className="mt-2">{renderKind(data)}</div>
-                  <div className="mb-3">
-                    <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
-                  </div>
-                </div>
-                <NoteStats id={id} />
-              </div>
-            )}
-            <div ref={replyRef} className="px-3">
-              <NoteReplyForm id={id} pubkey={db.account.pubkey} />
-              <ReplyList id={id} />
-            </div>
-          </div>
-          <div className="col-span-1" />
        </div>
      </div>
+      <div className="relative col-span-6 flex flex-col overflow-y-auto">
+        <div className="mx-auto w-full max-w-2xl">
+          {status === 'loading' ? (
+            <div className="px-3 py-1.5">Loading...</div>
+          ) : (
+            <div className="flex h-min w-full flex-col px-3">
+              <div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
+                <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
+                <div className="mt-3">{renderKind(data)}</div>
+                <div className="mt-3">
+                  <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
+                </div>
+              </div>
+            </div>
+          )}
+          <div ref={replyRef} className="px-3">
+            <div className="mb-3 border-b border-neutral-100 pb-3 dark:border-neutral-900">
+              <NoteReplyForm id={id} />
+            </div>
+            <ReplyList id={id} />
+          </div>
+        </div>
+      </div>
+      <div className="col-span-1" />
    </div>
  );
 }
--- a/src/app/space/components/widgetList.tsx
+++ b/src/app/space/components/widgetList.tsx
@@ -4,6 +4,7 @@ import { useStorage } from '@libs/storage/provider';

 import {
  ArticleIcon,
+  BellIcon,
  FileIcon,
  FollowsIcon,
  GroupFeedsIcon,
@@ -50,16 +51,18 @@ export function WidgetList({ params }: { params: Widget }) {
          );
        case WidgetKinds.tmp.xhashtag:
          return (
-            <HashtagIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
+            <HashtagIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
          );
        case WidgetKinds.nostrBand.trendingAccounts:
        case WidgetKinds.nostrBand.trendingNotes:
          return (
-            <TrendingIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
+            <TrendingIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
          );
+        case WidgetKinds.local.notification:
+          return <BellIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
        case WidgetKinds.other.learnNostr:
          return (
-            <ThreadsIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
+            <ThreadsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
          );
        default:
          return null;
@@ -75,7 +78,7 @@ export function WidgetList({ params }: { params: Widget }) {
          <h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-300">
            {row.title}
          </h3>
-          <div className="flex flex-col divide-y divide-neutral-200 overflow-hidden rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
+          <div className="flex flex-col divide-y divide-neutral-100 overflow-hidden rounded-xl bg-neutral-50 dark:divide-neutral-900 dark:bg-neutral-950">
            {row.data.map((item, index) => (
              <button
                onClick={() => openWidget(item)}
--- a/src/app/space/index.tsx
+++ b/src/app/space/index.tsx
@@ -90,9 +90,12 @@ export function SpaceScreen() {

  return (
    <VList
-      className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none"
+      className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
      horizontal
      ref={vlistRef}
+      initialItemSize={420}
+      aria-current="step"
+      tabIndex={0}
    >
      {!widgets ? (
        <div className="flex h-full w-[420px] flex-col items-center justify-center">
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@@ -2,7 +2,6 @@ import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { useParams } from 'react-router-dom';
-import { WVList } from 'virtua';

 import { UserProfile } from '@app/users/components/profile';

@@ -11,15 +10,12 @@ import { useNDK } from '@libs/ndk/provider';
 import {
  ArticleNote,
  FileNote,
-  NoteSkeleton,
  NoteWrapper,
  Repost,
  TextNote,
  UnknownNote,
 } from '@shared/notes';

-import { nHoursAgo } from '@utils/date';
-
 export function UserScreen() {
  const { pubkey } = useParams();
  const { ndk } = useNDK();
@@ -27,9 +23,10 @@ export function UserScreen() {
    const events = await ndk.fetchEvents({
      kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
      authors: [pubkey],
-      since: nHoursAgo(48),
+      limit: 50,
    });
-    return [...events] as unknown as NDKEvent[];
+    const sorted = [...events].sort((a, b) => b.created_at - a.created_at);
+    return sorted;
  });

  // render event match event kind
@@ -68,20 +65,16 @@ export function UserScreen() {
  );

  return (
-    <div className="relative h-full w-full overflow-y-auto scrollbar-none">
+    <div className="relative h-full w-full overflow-y-auto">
      <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
      <UserProfile pubkey={pubkey} />
-      <div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
-        <h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-white">
+      <div className="mt-6 h-full w-full border-t border-neutral-100 px-1.5 dark:border-neutral-900">
+        <h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
          Latest posts
        </h3>
        <div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
          {status === 'loading' ? (
-            <div className="px-3 py-1.5">
-              <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-                <NoteSkeleton />
-              </div>
-            </div>
+            <div>Loading...</div>
          ) : data.length === 0 ? (
            <div className="px-3 py-1.5">
              <div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900">
@@ -93,10 +86,7 @@ export function UserScreen() {
              </div>
            </div>
          ) : (
-            <WVList>
-              {data.map((item) => renderItem(item))}
-              <div className="h-16" />
-            </WVList>
+            data.map((item) => renderItem(item))
          )}
        </div>
      </div>