update notification screen

src/app.tsx

@@ -70,10 +70,10 @@ const router = createBrowserRouter([
         },
       },
       {
-        path: 'lodge',
+        path: 'notifications',
         async lazy() {
-          const { LodgeScreen } = await import('@app/lodge');
-          return { Component: LodgeScreen };
+          const { NotificationScreen } = await import('@app/notifications');
+          return { Component: NotificationScreen };
         },
       },
     ],

src/app/lodge/components/base/list.tsx

@@ -1,3 +0,0 @@
-export function BaseList() {
-  return <div />;
-}

src/app/notifications/components/mention.tsx

@@ -1,8 +1,8 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useMemo } from 'react';
 
-import { NotiContent } from '@app/lodge/components/content';
-import { NotiUser } from '@app/lodge/components/user';
+import { NotiContent } from '@app/notifications/components/content';
+import { NotiUser } from '@app/notifications/components/user';
 
 import { formatCreatedAt } from '@utils/createdAt';
 import { parser } from '@utils/parser';

src/app/notifications/components/reaction.tsx

@@ -1,7 +1,7 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 
-import { SimpleNote } from '@app/lodge/components/simpleNote';
-import { NotiUser } from '@app/lodge/components/user';
+import { SimpleNote } from '@app/notifications/components/simpleNote';
+import { NotiUser } from '@app/notifications/components/user';
 
 import { formatCreatedAt } from '@utils/createdAt';
 

src/app/notifications/components/repost.tsx

@@ -1,7 +1,7 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 
-import { SimpleNote } from '@app/lodge/components/simpleNote';
-import { NotiUser } from '@app/lodge/components/user';
+import { SimpleNote } from '@app/notifications/components/simpleNote';
+import { NotiUser } from '@app/notifications/components/user';
 
 import { useStorage } from '@libs/storage/provider';
 

src/app/notifications/index.tsx

@@ -1,10 +1,10 @@
-import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 
-import { NotiMention } from '@app/lodge/components/mention';
-import { NotiReaction } from '@app/lodge/components/reaction';
-import { NotiRepost } from '@app/lodge/components/repost';
+import { NotiMention } from '@app/notifications/components/mention';
+import { NotiReaction } from '@app/notifications/components/reaction';
+import { NotiRepost } from '@app/notifications/components/repost';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -13,11 +13,11 @@ import { TitleBar } from '@shared/titleBar';
 
 import { useNostr } from '@utils/hooks/useNostr';
 
-export function LodgeScreen() {
+export function NotificationScreen() {
   const { db } = useStorage();
-  const { sub, fetchActivities } = useNostr();
+  const { fetchActivities } = useNostr();
   const { status, data } = useQuery(
-    ['lodge', db.account.pubkey],
+    ['notifications', db.account.pubkey],
     async () => {
       return await fetchActivities();
     },
@@ -40,22 +40,10 @@ export function LodgeScreen() {
     [data]
   );
 
-  useEffect(() => {
-    const filter: NDKFilter = {
-      '#p': [db.account.pubkey],
-      kinds: [1, 3, 6, 7, 9735],
-      since: db.account.last_login_at ?? Math.floor(Date.now() / 1000),
-    };
-
-    sub(filter, async (event) => {
-      console.log('[notify] new noti', event.id);
-    });
-  }, []);
-
   return (
     <div className="scrollbar-hide h-full w-full overflow-y-auto bg-white/10">
       <div className="grid grid-cols-3">
-        <div className="col-span-2 h-full border-r border-white/5">
+        <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 flex-col">

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>

src/utils/notification.ts

@@ -4,13 +4,13 @@ import {
   sendNotification,
 } from '@tauri-apps/plugin-notification';
 
-export async function sendNativeNotification(content: string) {
+export async function sendNativeNotification(content: string, title?: string) {
   let permissionGranted = await isPermissionGranted();
   if (!permissionGranted) {
     const permission = await requestPermission();
     permissionGranted = permission === 'granted';
   }
   if (permissionGranted) {
-    sendNotification({ title: 'Lume', body: content });
+    sendNotification({ title: title || 'Lume', body: content });
   }
 }