refactor: rm antd

package.json

@@ -41,6 +41,7 @@
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.5",
+    "@radix-ui/react-tooltip": "1.0.7",
     "@reduxjs/toolkit": "1.7.1",
     "@tanstack/react-query": "5.17.12",
     "@tanstack/react-table": "8.11.3",

src/components/Comments/index.tsx

@@ -1,4 +1,3 @@
-import { Divider, Segmented, Tag } from 'antd';
 import ReplyEventInput from 'components/ReplyNoteInput';
 import { EventWithSeen } from 'pages/type';
 import { useCallWorker } from 'hooks/useWorker';
@@ -12,9 +11,8 @@ import { getEventIdsFromETags } from 'core/nostr/util';
 import { CallRelayType } from 'core/worker/type';
 
 import dynamic from 'next/dynamic';
-import styles from './index.module.scss';
 import PostItems from 'components/PostItems';
-import classNames from 'classnames';
+import Segmented from 'components/shared/ui/Segmented';
 
 const SubPostUI = dynamic(
   async () => {
@@ -148,13 +146,14 @@ const Comments: React.FC<CommentsProps> = ({ rootEvent, className }) => {
   };
 
   return (
-    <div className={classNames(className)}>
-      <div className={classNames(styles.repliesHeader)}>
-        <div className={styles.header}>
-          <div className={styles.title}>Replies{`(${commentList.length})`}</div>
+    <div className={className}>
+      <div className="flex flex-col px-4 py-5 gap-5">
+        <div className="flex justify-between w-full align-middle items-center">
+          <div className="text-neutral-900 font-bold text-[16px] font-poppins leading-24">
+            Replies{`(${commentList.length})`}
+          </div>
           <div>
             <Segmented
-              className={styles.tab}
               options={['recent', 'hot', 'zapest']}
               onChange={val => setCommentOrder(val as string)}
               value={commentOrder}
@@ -185,7 +184,7 @@ const Comments: React.FC<CommentsProps> = ({ rootEvent, className }) => {
             />
             {n.children.length > 0 && (
               <>
-                <div className={styles.subRepliesContainer}>
+                <div className="pl-16">
                   {n.children.map(c => (
                     <SubPostUI
                       key={c.value.id}
@@ -202,9 +201,9 @@ const Comments: React.FC<CommentsProps> = ({ rootEvent, className }) => {
         ))}
 
       {commentOrder !== 'recent' && (
-        <Divider orientation="left">
-          <Tag color="error">Feature Under Construction 🚧</Tag>
-        </Divider>
+        <div className="font-bold mt-2 px-2 py-1">
+          Feature Under Construction 🚧
+        </div>
       )}
     </div>
   );

src/components/CopyText/CopyText.tsx

@@ -1,4 +1,4 @@
-import { message } from 'antd';
+import { useToast } from 'components/shared/ui/Toast/use-toast';
 
 export interface CopyTextProps {
   name: string;
@@ -15,8 +15,8 @@ export const CopyText = ({
   getTextToCopy,
   successMsg,
   failedMsg,
-  alertLastSecs = 5,
 }: CopyTextProps) => {
+  const { toast } = useToast();
   const copy = async (text: string) => {
     const inputElement = document.createElement('input');
     inputElement.value = text;
@@ -53,17 +53,17 @@ export const CopyText = ({
             await copy(text);
           } catch (error: any) {
             console.error('copy failed: ', error.message);
-            message.error(
-              failedMsg || 'Failed to copied to clipboard!',
-              alertLastSecs,
-            );
+            toast({
+              title: failedMsg || 'Failed to copied to clipboard!',
+              status: 'error',
+            });
             return;
           }
 
-          message.success(
-            successMsg || 'Text copied to clipboard!',
-            alertLastSecs,
-          );
+          toast({
+            title: successMsg || 'Text copied to clipboard!',
+            status: 'success',
+          });
         }}
       >
         {name}

src/components/PostItems/PostArticleComment/index.tsx

@@ -1,6 +1,5 @@
 import { Nip23 } from 'core/nip/23';
 import { Event } from 'core/nostr/Event';
-import { Avatar } from 'antd';
 import { useTranslation } from 'next-i18next';
 
 import Icon from 'components/Icon';
@@ -23,6 +22,7 @@ import { useLiveQuery } from 'dexie-react-hooks';
 import { dbQuery, dexieDb } from 'core/db';
 import { DbEvent } from 'core/db/schema';
 import { seedRelays } from 'core/relay/pool/seed';
+import Avatar from 'components/shared/ui/Avatar';
 
 interface PostArticleCommentProps {
   event: Event;

src/components/PostItems/PostContent/Embed/Nprofile.tsx

@@ -1,10 +1,10 @@
-import { Avatar } from 'antd';
 import { Paths } from 'constants/path';
 import { i18n } from 'next-i18next';
 import { shortifyPublicKey } from 'core/nostr/content';
 import { NprofileResult } from 'core/nip/21';
 
 import styles from './index.module.scss';
+import Avatar from 'components/shared/ui/Avatar';
 
 export const Nprofile: React.FC<{ nprofile: NprofileResult }> = ({
   nprofile,
@@ -24,7 +24,12 @@ export const Nprofile: React.FC<{ nprofile: NprofileResult }> = ({
         </a>
         <div className={styles.refProfile}>
           <div className={styles.user}>
-            <Avatar src={nprofile.profile.picture} alt="picture" /> @
+            <Avatar
+              src={nprofile.profile.picture}
+              alt="picture"
+              fallback={nprofile.profile.name}
+            />{' '}
+            @
             {nprofile.profile.name ||
               shortifyPublicKey(nprofile.decodedMetadata.pubkey)}
           </div>

src/components/PostItems/PostContent/Embed/Npub.tsx

@@ -1,10 +1,10 @@
-import { Avatar } from 'antd';
 import { Paths } from 'constants/path';
 import { i18n } from 'next-i18next';
 import { shortifyPublicKey } from 'core/nostr/content';
 import { NpubResult } from 'core/nip/21';
 
 import styles from './index.module.scss';
+import Avatar from 'components/shared/ui/Avatar';
 
 export const Npub: React.FC<{ npub: NpubResult }> = ({ npub }) => {
   if (npub.profile) {
@@ -21,8 +21,12 @@ export const Npub: React.FC<{ npub: NpubResult }> = ({ npub }) => {
 
         <div className={styles.refProfile}>
           <div className={styles.user}>
-            <Avatar src={npub.profile.picture} alt="picture" /> @
-            {npub.profile.name || shortifyPublicKey(npub.pubkey)}
+            <Avatar
+              src={npub.profile.picture}
+              alt="picture"
+              fallback={npub.profile.name}
+            />{' '}
+            @{npub.profile.name || shortifyPublicKey(npub.pubkey)}
           </div>
           <div>{npub.profile.about}</div>
         </div>

src/components/PostItems/PostContent/Media/LightingInvoice.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { decode } from 'core/lighting/bolt11';
 import { getParams, LNURLPayParams } from 'js-lnurl';
 import { useTranslation } from 'next-i18next';
-import { Button } from 'antd';
 import Icon from 'components/Icon';
+import { Button } from 'components/shared/ui/Button';
 
 export function LightingInvoice({ url }: { url: string }) {
   const { t } = useTranslation();

src/components/PostItems/PostContent/index.tsx

@@ -1,7 +1,6 @@
 import { EventTags } from 'core/nostr/type';
 import { Event } from 'core/nostr/Event';
 import { useMemo, useState } from 'react';
-import { Button } from 'antd';
 import { CallWorker } from 'core/worker/caller';
 import { isNsfwEvent } from 'utils/validator';
 import { renderContent } from './content';
@@ -13,6 +12,7 @@ import { DecodedNeventResult, Nip19, Nip19DataType } from 'core/nip/19';
 
 import styles from './index.module.scss';
 import dynamic from 'next/dynamic';
+import { Button } from 'components/shared/ui/Button';
 
 const SubPostItem = dynamic(
   async () => {
@@ -113,7 +113,7 @@ export const PostContent: React.FC<PostContentProp> = ({
           <div>
             <Button
               className={styles.viewMore}
-              type="link"
+              variant="link"
               onClick={toggleExpanded}
             >
               {expanded ? 'View Less' : 'View More'}

src/components/PostItems/PostHighLight/index.tsx

@@ -6,7 +6,6 @@ import { deserializeMetadata } from 'core/nostr/content';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { Event } from 'core/nostr/Event';
 import { useMemo } from 'react';
-import { message } from 'antd';
 import { Nip9802, SourceType } from 'core/nip/9802';
 import Link from 'next/link';
 import { URLPreview } from '../PostContent/Link/embed/preview';
@@ -40,7 +39,7 @@ export interface PostHighLightProp {
   showFromCommunity?: boolean;
   extraMenu?: {
     label: string;
-    onClick: (event: Event, msg: typeof message) => any;
+    onClick: (event: Event) => any;
   }[];
   extraHeader?: React.ReactNode;
 }

src/components/PostItems/PostItem/embed.tsx

@@ -1,6 +1,5 @@
 import { Event } from 'core/nostr/Event';
 import { PostCommunityHeader } from '../PostCommunityHeader';
-import { message } from 'antd';
 import { DbEvent } from 'core/db/schema';
 import { EventSetMetadataContent } from 'core/nostr/type';
 
@@ -26,7 +25,7 @@ export interface EmbedPostUIProp {
   showFromCommunity?: boolean;
   extraMenu?: {
     label: string;
-    onClick: (event: Event, msg: typeof message) => any;
+    onClick: (event: Event) => any;
   }[];
   extraHeader?: React.ReactNode;
 }

src/components/PostItems/PostItem/index.tsx

@@ -2,7 +2,6 @@ import { Nip23 } from 'core/nip/23';
 import { Nip9802 } from 'core/nip/9802';
 import { Event } from 'core/nostr/Event';
 import { CallWorker } from 'core/worker/caller';
-import { message } from 'antd';
 import { DbEvent } from 'core/db/schema';
 import { EventSetMetadataContent } from 'core/nostr/type';
 import { Nip18 } from 'core/nip/18';
@@ -75,7 +74,7 @@ interface PostItemProps {
   showFromCommunity?: boolean;
   extraMenu?: {
     label: string;
-    onClick: (event: Event, msg: typeof message) => any;
+    onClick: (event: Event) => any;
   }[];
   extraHeader?: React.ReactNode;
   truncate?: boolean;

src/components/PostItems/PostItem/sub.tsx

@@ -1,4 +1,3 @@
-import { Button } from 'antd';
 import { dbQuery, dexieDb } from 'core/db';
 import { Nip23 } from 'core/nip/23';
 import { shortifyEventId } from 'core/nostr/content';
@@ -16,6 +15,7 @@ import styles from './sub.module.scss';
 import PostArticle from '../PostArticle';
 import Link from 'next/link';
 import PostUser from '../PostUser';
+import { Button } from 'components/shared/ui/Button';
 
 export interface SubPostUIProp {
   eventId: string;
@@ -100,7 +100,7 @@ export const SubPostUI: React.FC<SubPostUIProp> = ({ eventId, worker }) => {
       <Link href={`${Paths.event + '/' + eventId}`}>
         event@{shortifyEventId(eventId)}
       </Link>
-      <Button onClick={tryReloadLastReplyEvent} type="link">
+      <Button onClick={tryReloadLastReplyEvent} variant="link">
         try reload
       </Button>
     </>

src/components/PostItems/PostItem/ui.tsx

@@ -2,7 +2,6 @@ import { Event } from 'core/nostr/Event';
 import { CallWorker } from 'core/worker/caller';
 import { toUnSeenEvent } from 'core/nostr/util';
 import { PostCommunityHeader } from '../PostCommunityHeader';
-import { message } from 'antd';
 import { DbEvent } from 'core/db/schema';
 import { EventSetMetadataContent } from 'core/nostr/type';
 import { cn } from 'utils/classnames';
@@ -43,7 +42,7 @@ export interface PostUIProp {
   showFromCommunity?: boolean;
   extraMenu?: {
     label: string;
-    onClick: (event: Event, msg: typeof message) => any;
+    onClick: (event: Event) => any;
   }[];
   extraHeader?: React.ReactNode;
 }
@@ -59,8 +58,9 @@ export const PostUI: React.FC<PostUIProp> = ({
 }) => {
   const { toast } = useToast();
   const menu = useMemo(() => {
-    const onBroadcastEvent = async (event: Event, msg: typeof message) => {
-      if (!worker) return msg.error('worker not found.');
+    const onBroadcastEvent = async (event: Event) => {
+      if (!worker)
+        return toast({ title: 'worker not found.', status: 'error' });
       const pubHandler = worker.pubEvent(event);
       noticePubEventResult(toast, worker.relays.length, pubHandler);
     };