Add load of events from persistent storage

- Breaking change, next index in the database

src/app/note/note.html

@@ -40,7 +40,7 @@
     </div>
   </ng-template> -->
 
-  <div class="events above-event clickable" (click)="navigation.openEvent($event, event)"  *ngIf="thread.above$ | async as event">
+  <div class="events above-event clickable" (click)="navigation.openEvent($event, event)" *ngIf="thread.above$ | async as event">
     <div class="events-header">
       <app-event-header [pubkey]="event.pubkey"><span class="event-date" [matTooltip]="event.created_at.toString()">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
       <app-event-actions [event]="event" [pubkey]="event.pubkey"></app-event-actions>

src/app/services/database.ts

@@ -11,9 +11,9 @@ export class DatabaseService extends Dexie {
   constructor(name: string) {
     super(name);
 
-    this.version(1).stores({
+    this.version(2).stores({
       relays: 'url',
-      events: 'id',
+      events: 'id,pubkey',
       notes: 'id',
       profiles: 'pubkey,status',
       circles: '++id',

src/app/services/profile.ts

@@ -223,9 +223,9 @@ export class ProfileService {
   //   this.#profileRequested.next(pubkey);
   // }
 
-  downloadRecent(pubkey: string) {
-    this.#profileRequested.next(pubkey);
-  }
+  // downloadRecent(pubkey: string) {
+  //   this.#profileRequested.next(pubkey);
+  // }
 
   // #getProfile(pubkey: string) {
   //   return new Observable((observer) => {

src/app/services/ui.ts

@@ -29,9 +29,9 @@ export class UIService {
     this.#profile = undefined;
     this.events = [];
 
-    this.#pubkeyChanged.next(this.#pubkey);
-    this.#profileChanged.next(this.#profile);
     this.#eventsChanged.next(this.events);
+    this.#profileChanged.next(this.#profile);
+    this.#pubkeyChanged.next(this.#pubkey);
   }
 
   setProfile(profile: NostrProfileDocument | undefined) {
@@ -60,14 +60,26 @@ export class UIService {
   }
 
   putEvent(event: NostrEventDocument) {
+    // It might happen that async events are triggering this method after user have selected another
+    // profile to watch, so we must ignore those events to avoid UI-glitches.
+    if (event.pubkey != this.pubkey) {
+      return;
+    }
+
     const existingIndex = this.events.findIndex((e) => e.id == event.id);
 
     if (existingIndex > -1) {
       this.events[existingIndex] = event;
     } else {
       this.events.unshift(event);
-    }
 
+      // Attempting to only trigger events changed if there is an actual change in the content.
+      this.#eventsChanged.next(this.events);
+    }
+  }
+
+  putEvents(events: NostrEventDocument[]) {
+    this.events = events;
     this.#eventsChanged.next(this.events);
   }
 

src/app/services/utilities.ts

@@ -169,11 +169,15 @@ export class Utilities {
 
   sanitizeLUD06(url?: string) {
     // Do not allow http prefix.
-    if (!url && url?.startsWith('http')) {
+    if (!url) {
       return undefined;
     }
 
-    return url;
+    if (url.startsWith('http')) {
+      return undefined;
+    }
+
+    return this.bypassUrl(url);
   }
 
   sanitizeUrlAndBypass(url?: string) {

src/app/user/user.html

@@ -10,6 +10,10 @@
   </div>
 </ng-template>
 
+<!-- <div *ngIf="rootEvents$ | withStatus | async as items">
+  <div *ngFor="let event of items.value; trackBy: trackByFn">{{event.id}}</div>
+</div> -->
+
 <mat-tab-group *ngIf="layout == 1" [selectedIndex]="tabIndex" (selectedTabChange)="onTabChanged($event)">
   <mat-tab label="Notes">
     <div *ngIf="rootEvents$ | withStatus | async as items" class="feed-page">

src/app/user/user.ts

@@ -17,6 +17,7 @@ import { DataService } from '../services/data';
 import { NotesService } from '../services/notes';
 import { QueueService } from '../services/queue';
 import { UIService } from '../services/ui';
+import { StorageService } from '../services/storage';
 
 @Component({
   selector: 'app-user',
@@ -124,6 +125,7 @@ export class UserComponent {
     public ui: UIService,
     private validator: DataValidation,
     public circleService: CircleService,
+    private storage: StorageService,
     private utilities: Utilities,
     public notesService: NotesService,
     private router: Router,
@@ -281,6 +283,11 @@ export class UserComponent {
         //   // this.profileName = this.profile.name;
         // });
 
+        // First load all events from the persistent storage
+        const events = await this.storage.events.where('pubkey').equals(pubkey).toArray();
+        this.ui.putEvents(events);
+
+        // Then query for the latest events.
         this.queueService.enqueEvent(
           pubkey,
           (data: NostrEventDocument) => {
@@ -291,6 +298,25 @@ export class UserComponent {
           100
         );
 
+        // setTimeout(async () => {
+        //   const events = await this.storage.events.where('pubkey').equals(pubkey).toArray();
+        //   this.ui.putEvents(events);
+        // }, 0);
+
+        // setTimeout(async () => {
+        //   // First load all events from the persistent storage
+        //   // Then query for the latest events.
+        //   this.queueService.enqueEvent(
+        //     pubkey,
+        //     (data: NostrEventDocument) => {
+        //       this.ui.putEvent(data);
+        //       // this.notesService.currentViewNotes.sort((a, b) => (a.created_at < b.created_at ? 1 : -1));
+        //       // this.#changed();
+        //     },
+        //     100
+        //   );
+        // }, 50);
+
         // this.feedSubscription = this.dataService.downloadNewestEventsByQuery([{ kinds: [1], authors: [pubkey], limit: 100 }]).subscribe((event) => {
         //   debugger;