Improve visualization of notifications

src/app/notifications/notifications.html

@@ -1 +1,4 @@
-<div *ngFor="let notification of ui.notifications">{{notification.message}}</div>
+<div *ngFor="let notification of ui.notifications">
+  <app-profile-name [pubkey]="notification.pubkey"></app-profile-name>
+  {{notification.message}}
+</div>

src/app/services/interfaces.ts

@@ -251,9 +251,11 @@ export interface LabelModel {
 }
 
 export interface NotificationModel {
-  /** The event ID or pubkey of the notification */
+  /** The event ID of the notification */
   id: string;
 
+  pubkey: string;
+
   message: string;
 
   created: number;

src/app/services/relay.ts

@@ -333,22 +333,25 @@ export class RelayService {
     console.log('SAVE EVENT?:', event);
 
     // If the event is a result of notification subscription, we'll parse and update the notification history.
-    if (response.subscription == 'notification') {
+    if (response.subscription == 'notifications') {
       let notification = await this.db.storage.getNotification(event.id!);
 
       if (!notification) {
         let msg = '';
 
         if (event.kind == Kind.Reaction) {
-          msg = `#[${event.pubkey}] reacted with ${event.content} to your post.`;
+          msg = `reacted with ${event.content} to your post.`;
         } else if (event.kind == Kind.Text) {
-          msg = `#[${event.pubkey}] replied to your post.`;
+          msg = `replied to your post.`;
+        } else if (event.kind == Kind.Contacts) {
+          msg = `started following you.`;
         } else {
           msg = `Event kind ${event.kind} notification.`;
         }
 
         notification = {
           id: event.id!,
+          pubkey: event.pubkey,
           message: msg,
           seen: false,
           created: event.created_at,

src/app/services/ui.ts

@@ -134,7 +134,13 @@ export class UIService {
   notifications: NotificationModel[] = [];
 
   putNotification(notification: NotificationModel) {
+    const index = this.notifications.findIndex((n) => n.id == notification.id);
+
+    if (index == -1) {
       this.notifications.unshift(notification);
+    } else {
+      this.notifications[index] = notification;
+    }
   }
 
   putEvent(event: NostrEventDocument) {

src/app/shared/profile-name/profile-name.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { ProfileService } from 'src/app/services/profile';
+import { StorageService } from 'src/app/services/storage';
 import { Utilities } from 'src/app/services/utilities';
 import { NostrProfile } from '../../services/interfaces';
 
@@ -8,14 +9,22 @@ import { NostrProfile } from '../../services/interfaces';
   templateUrl: './profile-name.html',
 })
 export class ProfileNameComponent {
-  @Input() publicKey: string = '';
+  @Input() pubkey: string = '';
 
-  profileName = '';
+  profileName? = '';
   tooltip = '';
 
-  constructor(private profiles: ProfileService, private utilities: Utilities) {}
+  constructor(private db: StorageService, private profiles: ProfileService, private utilities: Utilities) {}
+
+  async ngOnInit() {
+    const profile = await this.db.storage.getProfile(this.pubkey);
+
+    if (profile) {
+      this.profileName = profile?.display_name ?? profile.name;
+    } else {
+      this.profileName = this.utilities.getShortenedIdentifier(this.pubkey);
+    }
 
-  ngOnInit() {
     // this.profileName = this.utilities.getNostrIdentifier(this.publicKey);
     // const profile = this.profiles.profiles[this.publicKey] as NostrProfile;
     // if (!profile || !profile.name) {