polish

2023-08-19 15:27:10 +07:00
parent 08e3a66ece
commit bac70b19ec
20 changed files with 117 additions and 142 deletions
--- a/src/shared/composer/composer.tsx
+++ b/src/shared/composer/composer.tsx
@@ -87,13 +87,13 @@ export function Composer() {
      if (reply.id && reply.pubkey) {
        if (reply.root && reply.root.length > 1) {
          tags = [
-            ['e', reply.root, 'wss://relayable.org', 'root'],
-            ['e', reply.id, 'wss://relayable.org', 'reply'],
+            ['e', reply.root, '', 'root'],
+            ['e', reply.id, '', 'reply'],
            ['p', reply.pubkey],
          ];
        } else {
          tags = [
-            ['e', reply.id, 'wss://relayable.org', 'reply'],
+            ['e', reply.id, '', 'reply'],
            ['p', reply.pubkey],
          ];
        }
--- a/src/shared/image.tsx
+++ b/src/shared/image.tsx
@@ -1,16 +1,12 @@
 import { minidenticon } from 'minidenticons';
 import { ImgHTMLAttributes, useState } from 'react';
-import { useMemo } from 'react';

 export function Image({ src, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
  const [isError, setIsError] = useState(false);

  if (isError || !src) {
-    const svgURI = useMemo(
-      () =>
-        'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.alt, 90, 50)),
-      [props.alt]
-    );
+    const svgURI =
+      'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.alt, 90, 50));
    return (
      <img src={svgURI} alt={props.alt} {...props} style={{ backgroundColor: '#000' }} />
    );
@@ -20,7 +16,8 @@ export function Image({ src, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
    <img
      {...props}
      src={src}
-      onError={() => {
+      onError={({ currentTarget }) => {
+        currentTarget.onerror = null;
        setIsError(true);
      }}
      decoding="async"
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -3,15 +3,13 @@ import { useState } from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';

-import { ChatsList } from '@app/chats/components/list';
-
+// import { ChatsList } from '@app/chats/components/list';
 import { ComposerModal } from '@shared/composer/modal';
 import {
  ArrowLeftIcon,
  ArrowRightIcon,
  NavArrowDownIcon,
  SpaceIcon,
-  TrendingIcon,
 } from '@shared/icons';
 import { LumeBar } from '@shared/lumeBar';

@@ -19,7 +17,7 @@ export function Navigation() {
  const navigate = useNavigate();

  const [feeds, setFeeds] = useState(true);
-  const [chats, setChats] = useState(true);
+  // const [chats, setChats] = useState(true);

  return (
    <div className="relative h-full w-[232px] bg-black/80">
@@ -54,10 +52,15 @@ export function Navigation() {
                    open ? '' : 'rotate-180'
                  )}
                >
-                  <NavArrowDownIcon className="h-3 w-3 text-white/50" />
+                  <NavArrowDownIcon
+                    className={twMerge(
+                      'h-3 w-3 text-white/50',
+                      feeds ? '' : 'rotate-180'
+                    )}
+                  />
                </div>
                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
-                  Feeds
+                  Personal
                </h3>
              </button>
            </Collapsible.Trigger>
@@ -76,54 +79,12 @@ export function Navigation() {
                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
                    <SpaceIcon className="h-3 w-3 text-white" />
                  </span>
-                  <span className="font-medium">Spaces</span>
-                </NavLink>
-                <NavLink
-                  to="/trending"
-                  preventScrollReset={true}
-                  className={({ isActive }) =>
-                    twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2 ',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
-                    )
-                  }
-                >
-                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
-                    <TrendingIcon className="h-3 w-3 text-white" />
-                  </span>
-                  <span className="font-medium">Trending</span>
+                  <span className="font-medium">Space</span>
                </NavLink>
              </div>
            </Collapsible.Content>
          </div>
        </Collapsible.Root>
-        {/* Channels
-				<Disclosure defaultOpen={true}>
-					{({ open }) => (
-						<div className="flex flex-col gap-0.5 px-1.5">
-							<Disclosure.Button className="flex items-center gap-1 px-3">
-								<div
-									className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
-										open ? "" : "rotate-180"
-									}`}
-								>
-									<NavArrowDownIcon
-										width={12}
-										height={12}
-										className="text-zinc-700"
-									/>
-								</div>
-								<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
-									Channels
-								</h3>
-							</Disclosure.Button>
-							<Disclosure.Panel>
-								<ChannelsList />
-							</Disclosure.Panel>
-						</div>
-					)}
-				</Disclosure>
-				 */}
      </div>
      <div className="absolute bottom-3 left-0 w-full px-10">
        <LumeBar />
--- a/src/shared/notes/replies/list.tsx
+++ b/src/shared/notes/replies/list.tsx
@@ -1,10 +1,13 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';

 import { useNDK } from '@libs/ndk/provider';

 import { NoteSkeleton, Reply } from '@shared/notes';

-import { LumeEvent } from '@utils/types';
+interface ReplyEvent extends NDKEvent {
+  replies: Array<NDKEvent>;
+}

 export function RepliesList({ id }: { id: string }) {
  const { ndk } = useNDK();
@@ -12,10 +15,9 @@ export function RepliesList({ id }: { id: string }) {
    const events = await ndk.fetchEvents({
      kinds: [1],
      '#e': [id],
-      since: 0,
    });

-    const array = [...events] as unknown as LumeEvent[];
+    const array = [...events] as unknown as ReplyEvent[];

    if (array.length > 0) {
      const replies = new Set();
@@ -55,7 +57,7 @@ export function RepliesList({ id }: { id: string }) {
  }

  return (
-    <div className="mt-3">
+    <div className="mt-3 pb-10">
      <div className="mb-2">
        <h5 className="text-lg font-semibold text-white">{data?.length || 0} replies</h5>
      </div>
@@ -71,8 +73,8 @@ export function RepliesList({ id }: { id: string }) {
          </div>
        ) : (
          data
-            ?.reverse()
-            .map((event: LumeEvent) => <Reply key={event.id} event={event} root={id} />)
+            .reverse()
+            .map((event: NDKEvent) => <Reply key={event.id} event={event} root={id} />)
        )}
      </div>
    </div>
--- a/src/shared/notification/modal.tsx
+++ b/src/shared/notification/modal.tsx
@@ -9,7 +9,6 @@ import { BellIcon, CancelIcon, LoaderIcon } from '@shared/icons';
 import { NotiMention, NotiReaction, NotiRepost } from '@shared/notification';

 import { nHoursAgo } from '@utils/date';
-import { LumeEvent } from '@utils/types';

 export function NotificationModal({ pubkey }: { pubkey: string }) {
  const { ndk } = useNDK();
@@ -23,10 +22,12 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
      });
      const filterSelf = [...events].filter((el) => el.pubkey !== pubkey);
      const sorted = filterSelf.sort((a, b) => a.created_at - b.created_at);
-      return sorted as unknown as LumeEvent[];
+      return sorted as unknown as NDKEvent[];
    },
    {
      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
    }
  );

@@ -80,7 +81,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
                <div className="inline-flex items-center justify-center px-4 py-3">
                  <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
                </div>
-              ) : data.length < 1 ? (
+              ) : data?.length < 1 ? (
                <div className="flex h-full w-full flex-col items-center justify-center">
                  <p className="mb-1 text-4xl">🎉</p>
                  <p className="font-medium text-white/50">
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -90,7 +90,7 @@ export function User({
      </div>
      <Popover.Portal>
        <Popover.Content
-          className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-xl focus:outline-none"
+          className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl focus:outline-none"
          sideOffset={5}
        >
          <div className="flex gap-2.5 border-b border-white/5 px-3 py-3">