minor updates

src/app/space/components/blocks/following.tsx

@@ -12,8 +12,6 @@ import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
-import { useNote } from '@stores/note';
-
 import { LumeEvent } from '@utils/types';
 
 const ITEM_PER_PAGE = 10;
@@ -21,13 +19,8 @@ const ITEM_PER_PAGE = 10;
 export function FollowingBlock() {
   // subscribe for live update
   useNewsfeed();
-  // notify user that new note is arrive
-  const [hasNewNote, toggleHasNewNote] = useNote((state) => [
-    state.hasNewNote,
-    state.toggleHasNewNote,
-  ]);
 
-  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
+  const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       queryKey: ['newsfeed-circle'],
       queryFn: async ({ pageParam = 0 }) => {
@@ -60,15 +53,6 @@ export function FollowingBlock() {
     }
   }, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
 
-  const refreshFirstPage = () => {
-    // refetch
-    refetch({ refetchPage: (_, index: number) => index === 0 });
-    // scroll to top
-    rowVirtualizer.scrollToIndex(1);
-    // stop notify
-    toggleHasNewNote(false);
-  };
-
   const renderItem = useCallback(
     (index: string | number) => {
       const note: LumeEvent = notes[index];
@@ -143,17 +127,6 @@ export function FollowingBlock() {
   return (
     <div className="relative w-[400px] shrink-0 border-r border-zinc-900">
       <TitleBar title="Your Circle" />
-      {hasNewNote && (
-        <div className="absolute left-1/2 top-12 z-50 -translate-x-1/2 transform">
-          <button
-            type="button"
-            onClick={() => refreshFirstPage()}
-            className="inline-flex w-min items-center justify-center rounded-full border border-fuchsia-800/50 bg-fuchsia-500 px-3.5 py-1.5 text-sm hover:bg-fuchsia-600"
-          >
-            Newest
-          </button>
-        </div>
-      )}
       <div
         ref={parentRef}
         className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"

src/app/user/index.tsx

@@ -1,12 +1,11 @@
-import { Tab } from '@headlessui/react';
-import { Fragment, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 
 import { UserFeed } from '@app/user/components/feed';
 import { UserMetadata } from '@app/user/components/metadata';
 
 import { EditProfileModal } from '@shared/editProfileModal';
-import { ThreadsIcon, ZapIcon } from '@shared/icons';
+import { ZapIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
@@ -136,35 +135,11 @@ export function UserScreen() {
           </div>
         </div>
         <div className="mt-8 w-full border-t border-zinc-900">
-          <Tab.Group>
-            <Tab.List className="mb-2 px-5">
-              <Tab as={Fragment}>
-                {({ selected }) => (
-                  <button
-                    type="button"
-                    className={`${
-                      selected ? 'border-fuchsia-500' : 'border-transparent'
-                    } inline-flex h-16 items-start gap-2 border-t pt-4 font-medium`}
-                  >
-                    <ThreadsIcon className="h-3.5 w-3.5" />
-                    <div className="flex flex-col justify-start gap-0.5 text-start">
-                      <p className="text-sm font-medium leading-none text-zinc-200">
-                        Activities
-                      </p>
-                      <span className="text-sm leading-none text-zinc-500">
-                        48 hours ago
-                      </span>
-                    </div>
-                  </button>
-                )}
-              </Tab>
-            </Tab.List>
-            <Tab.Panels>
-              <Tab.Panel>
-                <UserFeed pubkey={pubkey} />
-              </Tab.Panel>
-            </Tab.Panels>
-          </Tab.Group>
+          <div className="flex flex-col justify-start gap-0.5 text-start">
+            <p className="text-sm font-medium leading-none text-zinc-200">Latest posts</p>
+            <span className="text-sm leading-none text-zinc-500">48 hours ago</span>
+          </div>
+          <UserFeed pubkey={pubkey} />
         </div>
       </div>
     </div>

src/index.css

@@ -15,7 +15,10 @@ button {
 }
 
 .markdown {
-  @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mt-3 prose-img:mb-2 prose-hr:mx-0 prose-hr:my-2;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+  @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
 }
 
 .ProseMirror p.is-empty::before {

src/shared/notes/hashtag.tsx

@@ -15,7 +15,7 @@ export function Hashtag({ tag }: { tag: string }) {
           content: tag.replace('#', ''),
         })
       }
-      className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
+      className="break-words font-normal text-orange-400 no-underline hover:text-orange-500"
     >
       {tag}
     </button>

src/shared/notes/mentions/note.tsx

@@ -29,7 +29,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
       onKeyDown={(e) => openThread(e, id)}
       role="button"
       tabIndex={0}
-      className="mb-2 mt-3 rounded-lg border-t border-zinc-700/50 bg-zinc-800/50 px-3 py-3"
+      className="mb-2 mt-3 cursor-default rounded-lg border-t border-zinc-700/50 bg-zinc-800/50 px-3 py-3"
     >
       {status === 'loading' ? (
         <NoteSkeleton />

src/shared/notes/mentions/user.tsx

@@ -2,7 +2,7 @@ import { BLOCK_KINDS } from '@stores/constants';
 
 import { useBlock } from '@utils/hooks/useBlock';
 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub } from '@utils/shortenKey';
 
 export function MentionUser({ pubkey }: { pubkey: string }) {
   const { add } = useBlock();
@@ -18,9 +18,9 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
           content: pubkey,
         })
       }
-      className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-zinc-700 hover:text-blue-500"
+      className="break-words font-normal text-blue-400 no-underline hover:text-blue-500"
     >
-      {'@' + user?.name || user?.displayName || shortenKey(pubkey)}
+      {'@' + user?.name || user?.displayName || displayNpub(pubkey, 16)}
     </button>
   );
 }

src/shared/notification/modal.tsx

@@ -1,7 +1,7 @@
-import { Dialog, Transition } from '@headlessui/react';
 import { NDKEvent } from '@nostr-dev-kit/ndk';
+import * as Dialog from '@radix-ui/react-dialog';
 import { useQuery } from '@tanstack/react-query';
-import { Fragment, useState } from 'react';
+import { useCallback } from 'react';
 
 import { useNDK } from '@libs/ndk/provider';
 
@@ -13,8 +13,6 @@ import { nHoursAgo } from '@utils/date';
 import { LumeEvent } from '@utils/types';
 
 export function NotificationModal({ pubkey }: { pubkey: string }) {
-  const [isOpen, setIsOpen] = useState(false);
-
   const { fetcher, relayUrls } = useNDK();
   const { status, data } = useQuery(
     ['notification', pubkey],
@@ -22,8 +20,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
       const events = await fetcher.fetchAllEvents(
         relayUrls,
         { '#p': [pubkey], kinds: [1, 6, 7, 9735] },
-        { since: nHoursAgo(48) },
-        { sort: true }
+        { since: nHoursAgo(24) }
       );
       return events as unknown as LumeEvent[];
     },
@@ -32,132 +29,98 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
     }
   );
 
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-
-  const openModal = () => {
-    setIsOpen(true);
-  };
-
-  const renderItem = (event: NDKEvent) => {
-    if (event.kind === 1) {
-      return (
-        <div key={event.id} className="flex flex-col px-5 py-2">
-          <User pubkey={event.pubkey} time={event.created_at} isChat={true} />
-          <div className="-mt-[20px] pl-[49px]">
-            <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
-              {event.content}
-            </p>
-          </div>
-        </div>
-      );
-    }
-
-    if (event.kind === 6) {
-      return (
-        <div key={event.id} className="flex flex-col px-5 py-2">
-          <NotificationUser pubkey={event.pubkey} desc="repost your post" />
-        </div>
-      );
-    }
-
-    if (event.kind === 7) {
-      return (
-        <div key={event.id} className="flex flex-col px-5 py-2">
-          <NotificationUser pubkey={event.pubkey} desc="liked your post" />
-        </div>
-      );
-    }
-
-    if (event.kind === 9735) {
-      return (
-        <div key={event.id} className="flex flex-col px-5 py-2">
-          <NotificationUser pubkey={event.pubkey} desc="zapped your post" />
-        </div>
-      );
-    }
-
-    return <div className="flex flex-col px-5 py-2">{event.content}</div>;
-  };
+  const renderItem = useCallback(
+    (event: NDKEvent) => {
+      switch (event.kind) {
+        case 1:
+          return (
+            <div key={event.id} className="flex flex-col px-5 py-2">
+              <User pubkey={event.pubkey} time={event.created_at} isChat={true} />
+              <div className="-mt-[20px] pl-[49px]">
+                <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
+                  {event.content}
+                </p>
+              </div>
+            </div>
+          );
+        case 6:
+          return (
+            <div key={event.id} className="flex flex-col px-5 py-2">
+              <NotificationUser pubkey={event.pubkey} desc="repost your post" />
+            </div>
+          );
+        case 7:
+          return (
+            <div key={event.id} className="flex flex-col px-5 py-2">
+              <NotificationUser pubkey={event.pubkey} desc="liked your post" />
+            </div>
+          );
+        case 9735:
+          return (
+            <div key={event.id} className="flex flex-col px-5 py-2">
+              <NotificationUser pubkey={event.pubkey} desc="zapped your post" />
+            </div>
+          );
+        default:
+          return <div className="flex flex-col px-5 py-2">{event.content}</div>;
+      }
+    },
+    [data]
+  );
 
   return (
-    <>
-      <button
-        type="button"
-        onClick={() => openModal()}
-        aria-label="Notification"
-        className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
-      >
-        <BellIcon className="h-4 w-4 text-zinc-400" />
-      </button>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
-                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
-                  <div className="flex flex-col gap-1">
-                    <div className="flex items-center justify-between">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-semibold leading-none text-zinc-100"
-                      >
-                        Notification
-                      </Dialog.Title>
-                      <button
-                        type="button"
-                        onClick={closeModal}
-                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-                      >
-                        <CancelIcon className="h-5 w-5 text-zinc-300" />
-                      </button>
-                    </div>
-                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
-                      All things happen when you rest in 48 hours ago
-                    </Dialog.Description>
-                  </div>
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-9 w-9 transform items-center justify-center rounded-md border-t border-zinc-700/50 bg-zinc-800 active:translate-y-1"
+        >
+          <BellIcon className="h-4 w-4 text-zinc-400" />
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal className="relative z-10">
+        <Dialog.Overlay className="fixed inset-0 z-[1000px] bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
+        <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center data-[state=open]:animate-contentShow">
+          <Dialog.Content className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
+            <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between">
+                  <Dialog.Title className="text-lg font-semibold leading-none text-zinc-100">
+                    Notification
+                  </Dialog.Title>
+                  <Dialog.Close asChild>
+                    <button
+                      type="button"
+                      className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+                    >
+                      <CancelIcon className="h-5 w-5 text-zinc-300" />
+                    </button>
+                  </Dialog.Close>
                 </div>
-                <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
-                  {status === 'loading' ? (
-                    <div className="inline-flex items-center justify-center px-4 py-3">
-                      <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
-                    </div>
-                  ) : 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-zinc-500">
-                        Yo!, you&apos;ve no new notifications
-                      </p>
-                    </div>
-                  ) : (
-                    data.map((event) => renderItem(event))
-                  )}
+                <Dialog.Description className="text-sm leading-tight text-zinc-400">
+                  All things happen when you rest in 24 hours ago
+                </Dialog.Description>
+              </div>
+            </div>
+            <div className="scrollbar-hide flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
+              {status === 'loading' ? (
+                <div className="inline-flex items-center justify-center px-4 py-3">
+                  <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
                 </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition>
-    </>
+              ) : 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-zinc-500">
+                    Yo!, you&apos;ve no new notifications
+                  </p>
+                </div>
+              ) : (
+                data.map((event) => renderItem(event))
+              )}
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }