update notification screen

src/shared/accounts/active.tsx

@@ -1,13 +1,53 @@
+import { NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
+import { useStorage } from '@libs/storage/provider';
+
 import { Image } from '@shared/image';
 import { NetworkStatusIndicator } from '@shared/networkStatusIndicator';
 
+import { useNostr } from '@utils/hooks/useNostr';
 import { useProfile } from '@utils/hooks/useProfile';
+import { sendNativeNotification } from '@utils/notification';
 
 export function ActiveAccount({ data }: { data: { pubkey: string; npub: string } }) {
+  const { sub } = useNostr();
+  const { db } = useStorage();
   const { status, user } = useProfile(data.pubkey);
 
+  useEffect(() => {
+    const filter: NDKFilter = {
+      '#p': [db.account.pubkey],
+      kinds: [
+        NDKKind.Text,
+        NDKKind.Contacts,
+        NDKKind.Repost,
+        NDKKind.Reaction,
+        NDKKind.Zap,
+      ],
+      since: Math.floor(Date.now() / 1000),
+    };
+
+    sub(filter, async (event) => {
+      switch (event.kind) {
+        case NDKKind.Text:
+          return await sendNativeNotification('Mention');
+        case NDKKind.Contacts:
+          return await sendNativeNotification("You've new follower");
+        case NDKKind.Repost:
+          return await sendNativeNotification('Repost');
+        case NDKKind.Reaction:
+          return await sendNativeNotification('Reaction');
+        case NDKKind.Zap:
+          return await sendNativeNotification('Zap');
+        default:
+          console.log('[notify] new event: ', event);
+          break;
+      }
+    });
+  }, []);
+
   if (status === 'loading') {
     return <div className="h-9 w-9 animate-pulse rounded-md bg-white/50" />;
   }

src/shared/navigation.tsx

@@ -85,7 +85,7 @@ export function Navigation() {
                   Space
                 </NavLink>
                 <NavLink
-                  to="/lodge"
+                  to="/notifications"
                   preventScrollReset={true}
                   className={({ isActive }) =>
                     twMerge(
@@ -97,7 +97,7 @@ export function Navigation() {
                   <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
                     <BellIcon className="h-3 w-3 text-white" />
                   </span>
-                  Lodge
+                  Notifications
                 </NavLink>
               </div>
             </Collapsible.Content>