feat: sync notifications read time

src/components/BottomNavigationBar/NotificationsButton.tsx

@@ -15,7 +15,7 @@ export default function NotificationsButton() {
       <div className="relative">
         <Bell />
         {hasNewNotification && (
-          <div className="absolute -top-0.5 right-0.5 w-2 h-2 bg-primary rounded-full" />
+          <div className="absolute -top-0.5 right-0.5 w-2 h-2 ring-2 ring-background bg-primary rounded-full" />
         )}
       </div>
     </BottomNavigationBarItem>

src/components/NotificationList/index.tsx

@@ -5,6 +5,7 @@ import { cn } from '@/lib/utils'
 import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { useNoteStats } from '@/providers/NoteStatsProvider'
+import { useNotification } from '@/providers/NotificationProvider'
 import client from '@/services/client.service'
 import storage from '@/services/local-storage.service'
 import { TNotificationType } from '@/types'
@@ -21,6 +22,7 @@ const SHOW_COUNT = 30
 const NotificationList = forwardRef((_, ref) => {
   const { t } = useTranslation()
   const { pubkey } = useNostr()
+  const { clearNewNotifications: updateReadNotificationTime } = useNotification()
   const { updateNoteStatsByEvents } = useNoteStats()
   const [notificationType, setNotificationType] = useState<TNotificationType>('all')
   const [lastReadTime, setLastReadTime] = useState(0)
@@ -67,6 +69,7 @@ const NotificationList = forwardRef((_, ref) => {
       setNotifications([])
       setShowCount(SHOW_COUNT)
       setLastReadTime(storage.getLastReadNotificationTime(pubkey))
+      updateReadNotificationTime()
       const relayList = await client.fetchRelayList(pubkey)
 
       const { closer, timelineKey } = await client.subscribeTimeline(

src/components/Sidebar/NotificationButton.tsx

@@ -16,7 +16,7 @@ export default function NotificationsButton() {
       <div className="relative">
         <Bell strokeWidth={3} />
         {hasNewNotification && (
-          <div className="absolute -top-1 right-0 w-2 h-2 bg-primary rounded-full" />
+          <div className="absolute -top-1 right-0 w-2 h-2 ring-2 ring-background bg-primary rounded-full" />
         )}
       </div>
     </SidebarItem>