fix some bugs

src/app/notifications/components/mention.tsx

@@ -1,32 +1,25 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
 
-import { NotiContent } from '@app/notifications/components/content';
 import { NotiUser } from '@app/notifications/components/user';
 
 import { formatCreatedAt } from '@utils/createdAt';
-import { parser } from '@utils/parser';
 
 export function NotiMention({ event }: { event: NDKEvent }) {
   const createdAt = formatCreatedAt(event.created_at);
-  const content = useMemo(() => parser(event), [event]);
+  const rootId = event.tags.find((el) => el[0])?.[1];
 
   return (
-    <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
-        <div className="flex items-start justify-between">
-          <div className="flex items-start gap-1">
-            <NotiUser pubkey={event.pubkey} />
-            <p className="leading-none text-white/50">has reply you post · {createdAt}</p>
-          </div>
-        </div>
-        <div className="f- relative z-10 -mt-6 flex gap-3">
-          <div className="h-11 w-11 shrink-0" />
-          <div className="mb-2 mt-3 w-full cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
-            <NotiContent content={content} />
-          </div>
+    <Link to={`/notes/text/${rootId}`} className="h-min w-full px-3">
+      <div className="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
+        <div className="flex items-center gap-2">
+          <NotiUser pubkey={event.pubkey} />
+          <p className="leading-none text-white/50">has mention you · {createdAt}</p>
         </div>
+        <span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block">
+          View
+        </span>
       </div>
-    </div>
+    </Link>
   );
 }

src/app/notifications/components/reaction.tsx

@@ -1,30 +1,27 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { Link } from 'react-router-dom';
 
-import { SimpleNote } from '@app/notifications/components/simpleNote';
 import { NotiUser } from '@app/notifications/components/user';
 
 import { formatCreatedAt } from '@utils/createdAt';
 
 export function NotiReaction({ event }: { event: NDKEvent }) {
-  const root = event.tags.find((e) => e[0] === 'e')?.[1];
   const createdAt = formatCreatedAt(event.created_at);
+  const rootId = event.tags.find((el) => el[0])?.[1];
 
   return (
-    <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
-        <div className="flex items-start justify-between">
-          <div className="flex items-start gap-1">
-            <NotiUser pubkey={event.pubkey} />
-            <p className="leading-none text-white/50">
-              reacted {event.content} · {createdAt}
-            </p>
-          </div>
-        </div>
-        <div className="relative z-10 -mt-6 flex gap-3">
-          <div className="h-11 w-11 shrink-0" />
-          <div className="flex-1">{root && <SimpleNote id={root} />}</div>
+    <Link to={`/notes/text/${rootId}`} className="h-min w-full px-3">
+      <div className="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
+        <div className="flex items-center gap-2">
+          <NotiUser pubkey={event.pubkey} />
+          <p className="leading-none text-white/50">
+            reacted {event.content} · {createdAt}
+          </p>
         </div>
+        <span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block">
+          View
+        </span>
       </div>
-    </div>
+    </Link>
   );
 }

src/app/notifications/components/repost.tsx

@@ -1,6 +1,6 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { Link } from 'react-router-dom';
 
-import { SimpleNote } from '@app/notifications/components/simpleNote';
 import { NotiUser } from '@app/notifications/components/user';
 
 import { useStorage } from '@libs/storage/provider';
@@ -10,29 +10,24 @@ import { formatCreatedAt } from '@utils/createdAt';
 export function NotiRepost({ event }: { event: NDKEvent }) {
   const { db } = useStorage();
 
-  const root = event.tags.find((e) => e[0] === 'e')?.[1];
   const createdAt = formatCreatedAt(event.created_at);
+  const rootId = event.tags.find((el) => el[0])?.[1];
 
   return (
-    <div className="h-min w-full px-3 py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
-        <div className="flex items-start justify-between">
-          <div className="flex items-start gap-1">
-            <NotiUser pubkey={event.pubkey} />
-            <p className="leading-none text-white/50">
-              repost{' '}
-              {event.pubkey !== db.account.pubkey
-                ? 'a post that mention you'
-                : 'your post'}{' '}
-              · {createdAt}
-            </p>
-          </div>
-        </div>
-        <div className="relative z-10 -mt-6 flex gap-3">
-          <div className="h-11 w-11 shrink-0" />
-          <div className="flex-1">{root && <SimpleNote id={root} />}</div>
+    <Link to={`/notes/text/${rootId}`} className="h-min w-full px-3">
+      <div className="group flex items-center justify-between rounded-xl px-3 py-3 hover:bg-white/10">
+        <div className="flex items-center gap-2">
+          <NotiUser pubkey={event.pubkey} />
+          <p className="leading-none text-white/50">
+            repost{' '}
+            {event.pubkey !== db.account.pubkey ? 'a post that mention you' : 'your post'}{' '}
+            · {createdAt}
+          </p>
         </div>
+        <span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block">
+          View
+        </span>
       </div>
-    </div>
+    </Link>
   );
 }

src/app/notifications/components/user.tsx

@@ -18,13 +18,13 @@ export function NotiUser({ pubkey }: { pubkey: string }) {
   }
 
   return (
-    <div className="flex shrink-0 items-start justify-start gap-3">
+    <div className="flex shrink-0 items-center justify-start gap-2">
       <Image
         src={user?.picture || user?.image}
         alt={pubkey}
-        className="h-11 w-11 shrink-0 rounded-lg object-cover"
+        className="h-8 w-8 shrink-0 rounded-md object-cover"
       />
-      <span className="max-w-[10rem] flex-1 truncate font-medium leading-none text-white">
+      <span className="max-w-[10rem] truncate font-medium leading-none text-white">
         {user?.name || user?.display_name || displayNpub(pubkey, 16)}
       </span>
     </div>

src/app/notifications/index.tsx

@@ -1,16 +1,24 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { NotiMention } from '@app/notifications/components/mention';
 import { NotiReaction } from '@app/notifications/components/reaction';
 import { NotiRepost } from '@app/notifications/components/repost';
 
+import { LoaderIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
 
 import { useActivities } from '@stores/activities';
 
+import { useNostr } from '@utils/hooks/useNostr';
+
 export function NotificationScreen() {
-  const activities = useActivities((state) => state.activities);
+  const { fetchActivities } = useNostr();
+  const [activities, setActivities, clearTotalNewActivities] = useActivities((state) => [
+    state.activities,
+    state.setActivities,
+    state.clearTotalNewActivities,
+  ]);
 
   const renderItem = useCallback(
     (event: NDKEvent) => {
@@ -28,24 +36,40 @@ export function NotificationScreen() {
     [activities]
   );
 
+  useEffect(() => {
+    async function getActivities() {
+      const events = await fetchActivities();
+      setActivities(events);
+      // clear total new activities
+      clearTotalNewActivities();
+    }
+
+    getActivities();
+  }, []);
+
   return (
     <div className="scrollbar-hide h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl">
       <div className="grid h-full grid-cols-3">
         <div className="col-span-2 flex flex-col border-r border-white/5">
           <TitleBar title="Activities in the last 24 hours" />
-          <div className="flex h-full flex-col gap-1.5">
-            <div className="flex h-full flex-col">
-              {activities?.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">
-                    Yo!, no new activities around you in the last 24 hours
-                  </p>
+          <div className="flex h-full flex-col">
+            {!activities ? (
+              <div className="flex h-full w-full items-center justify-center">
+                <div className="flex flex-col items-center gap-1.5">
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                  <p className="text-sm font-medium text-white/50">Loading</p>
                 </div>
-              ) : (
-                activities.map((event) => renderItem(event))
-              )}
-            </div>
+              </div>
+            ) : activities.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">
+                  Yo!, no new activities around you in the last 24 hours
+                </p>
+              </div>
+            ) : (
+              activities.map((event) => renderItem(event))
+            )}
           </div>
         </div>
       </div>