update space screen

2023-08-22 09:10:04 +07:00
parent 917e49b25d
commit 4830f0b236
33 changed files with 766 additions and 255 deletions
--- a/src/shared/icons/file.tsx
+++ b/src/shared/icons/file.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function FileIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M8.75 6.75h6.5m-6.5 4h6.5m-6.5 4h2.5m-5.5 6.5h12.5a1 1 0 001-1V3.75a1 1 0 00-1-1H5.75a1 1 0 00-1 1v16.5a1 1 0 001 1z"
+      />
+    </svg>
+  );
+}
--- a/src/shared/icons/hashtag.tsx
+++ b/src/shared/icons/hashtag.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function HashtagIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M8.75 3.75l-2 16.5m10.5-16.5l-2 16.5M3.75 7.75h16.5m0 8.5H3.75"
+      />
+    </svg>
+  );
+}
--- a/src/shared/icons/index.tsx
+++ b/src/shared/icons/index.tsx
@@ -1,4 +1,3 @@
-// @index('./*.tsx', f => `export * from '${f.path}'`)
 export * from './arrowLeft';
 export * from './arrowRight';
 export * from './bell';
@@ -49,4 +48,5 @@ export * from './strangers';
 export * from './download';
 export * from './horizontalDots';
 export * from './arrowRightCircle';
-// @endindex
+export * from './hashtag';
+export * from './file';
--- a/src/shared/lumeBar.tsx
+++ b/src/shared/lumeBar.tsx
@@ -5,7 +5,6 @@ import { useStorage } from '@libs/storage/provider';
 import { ActiveAccount } from '@shared/accounts/active';
 import { SettingsIcon } from '@shared/icons';
 import { Logout } from '@shared/logout';
-import { NotificationModal } from '@shared/notification/modal';

 export function LumeBar() {
  const { db } = useStorage();
@@ -14,7 +13,6 @@ export function LumeBar() {
    <div className="rounded-xl bg-white/10 p-2 backdrop-blur-xl">
      <div className="flex items-center justify-between">
        <ActiveAccount data={db.account} />
-        <NotificationModal pubkey={db.account.pubkey} />
        <Link
          to="/settings/general"
          className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
--- a/src/shared/notes/actions.tsx
+++ b/src/shared/notes/actions.tsx
@@ -9,8 +9,7 @@ import { NoteReply } from '@shared/notes/actions/reply';
 import { NoteRepost } from '@shared/notes/actions/repost';
 import { NoteZap } from '@shared/notes/actions/zap';

-import { widgetKinds } from '@stores/constants';
-import { useWidgets } from '@stores/widgets';
+import { WidgetKinds, useWidgets } from '@stores/widgets';

 export function NoteActions({
  id,
@@ -44,7 +43,7 @@ export function NoteActions({
                  type="button"
                  onClick={() =>
                    setWidget(db, {
-                      kind: widgetKinds.thread,
+                      kind: WidgetKinds.thread,
                      title: 'Thread',
                      content: id,
                    })
--- a/src/shared/notes/actions/more.tsx
+++ b/src/shared/notes/actions/more.tsx
@@ -1,4 +1,4 @@
-import * as Popover from '@radix-ui/react-popover';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { nip19 } from 'nostr-tools';
@@ -25,17 +25,17 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
  };

  return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
+    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
      <Tooltip.Root delayDuration={150}>
        <Tooltip.Trigger asChild>
-          <Popover.Trigger asChild>
+          <DropdownMenu.Trigger asChild>
            <button
              type="button"
              className="group ml-auto inline-flex h-7 w-7 items-center justify-center"
            >
              <HorizontalDotsIcon className="h-5 w-5 text-white group-hover:text-fuchsia-400" />
            </button>
-          </Popover.Trigger>
+          </DropdownMenu.Trigger>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
@@ -44,15 +44,17 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
-      <Popover.Portal>
-        <Popover.Content className="w-[200px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl focus:outline-none">
-          <div className="flex flex-col p-2">
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-md bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
+          <DropdownMenu.Item asChild>
            <Link
              to={`/events/${id}`}
              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
            >
              Open as new screen
            </Link>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item asChild>
            <button
              type="button"
              onClick={() => copyLink()}
@@ -60,6 +62,8 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
            >
              Copy shareable link
            </button>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item asChild>
            <button
              type="button"
              onClick={() => copyID()}
@@ -67,15 +71,17 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
            >
              Copy ID
            </button>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item asChild>
            <Link
              to={`/users/${pubkey}`}
              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
            >
              View profile
            </Link>
-          </div>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
  );
 }
--- a/src/shared/notes/mentions/hashtag.tsx
+++ b/src/shared/notes/mentions/hashtag.tsx
@@ -1,7 +1,6 @@
 import { useStorage } from '@libs/storage/provider';

-import { widgetKinds } from '@stores/constants';
-import { useWidgets } from '@stores/widgets';
+import { WidgetKinds, useWidgets } from '@stores/widgets';

 export function Hashtag({ tag }: { tag: string }) {
  const { db } = useStorage();
@@ -12,7 +11,7 @@ export function Hashtag({ tag }: { tag: string }) {
      type="button"
      onClick={() =>
        setWidget(db, {
-          kind: widgetKinds.hashtag,
+          kind: WidgetKinds.hashtag,
          title: tag,
          content: tag.replace('#', ''),
        })
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -8,28 +8,28 @@ import { Image } from '@shared/image';
 import { MentionUser, NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';

-import { widgetKinds } from '@stores/constants';
-import { useWidgets } from '@stores/widgets';
+import { WidgetKinds, useWidgets } from '@stores/widgets';

 import { useEvent } from '@utils/hooks/useEvent';
 import { isImage } from '@utils/isImage';

 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
  const { db } = useStorage();
-  const { status, data } = useEvent(id);
+  const { status, data, error } = useEvent(id);

  const setWidget = useWidgets((state) => state.setWidget);

  const openThread = (event, thread: string) => {
    const selection = window.getSelection();
    if (selection.toString().length === 0) {
-      setWidget(db, { kind: widgetKinds.thread, title: 'Thread', content: thread });
+      setWidget(db, { kind: WidgetKinds.thread, title: 'Thread', content: thread });
    } else {
      event.stopPropagation();
    }
  };

  const renderItem = useCallback(() => {
+    if (!data) return;
    switch (data.event.kind) {
      case 1: {
        return (
@@ -85,6 +85,14 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
    );
  }

+  if (error) {
+    return (
+      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
+        <p>Can&apos;t get event from relay</p>
+      </div>
+    );
+  }
+
  return (
    <div
      onClick={(e) => openThread(e, id)}
@@ -93,7 +101,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
      tabIndex={0}
      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
    >
-      <User pubkey={data?.event?.pubkey} time={data?.event?.created_at} size="small" />
+      <User pubkey={data.event.pubkey} time={data.event.created_at} size="small" />
      <div className="mt-2">{renderItem()}</div>
    </div>
  );
--- a/src/shared/notes/mentions/user.tsx
+++ b/src/shared/notes/mentions/user.tsx
@@ -1,7 +1,6 @@
 import { useStorage } from '@libs/storage/provider';

-import { widgetKinds } from '@stores/constants';
-import { useWidgets } from '@stores/widgets';
+import { WidgetKinds, useWidgets } from '@stores/widgets';

 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
@@ -17,7 +16,7 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
      type="button"
      onClick={() =>
        setWidget(db, {
-          kind: widgetKinds.user,
+          kind: WidgetKinds.user,
          title: user?.nip05 || user?.name || user?.display_name,
          content: pubkey,
        })
--- a/src/shared/notes/metadata.tsx
+++ b/src/shared/notes/metadata.tsx
@@ -8,8 +8,7 @@ import { useStorage } from '@libs/storage/provider';
 import { LoaderIcon } from '@shared/icons';
 import { MiniUser } from '@shared/notes/users/mini';

-import { widgetKinds } from '@stores/constants';
-import { useWidgets } from '@stores/widgets';
+import { WidgetKinds, useWidgets } from '@stores/widgets';

 import { compactNumber } from '@utils/number';

@@ -54,7 +53,11 @@ export function NoteMetadata({ id }: { id: string }) {

      return { replies, users, zap };
    },
-    { refetchOnWindowFocus: false, refetchOnReconnect: false, refetchOnMount: false }
+    {
+      enabled: !!ndk,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    }
  );

  if (status === 'loading') {
@@ -68,6 +71,12 @@ export function NoteMetadata({ id }: { id: string }) {
    );
  }

+  if (status === 'error') {
+    <div>
+      <div className="pb-3" />
+    </div>;
+  }
+
  return (
    <div>
      {data.replies > 0 ? (
@@ -86,7 +95,7 @@ export function NoteMetadata({ id }: { id: string }) {
                type="button"
                onClick={() =>
                  setWidget(db, {
-                    kind: widgetKinds.thread,
+                    kind: WidgetKinds.thread,
                    title: 'Thread',
                    content: id,
                  })