Add support for walking the thread hierarchy

src/app/note/note.html

@@ -40,6 +40,16 @@
     </div>
   </ng-template> -->
 
+  <div class="events 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>
+    </div>
+    <app-content class="thread-content" [ngClass]="{ 'no-lines': !optionsService.options.showLines, 'lines': optionsService.options.showLines }" [event]="event"></app-content>
+    <app-event-reactions class="thread-reactions" [threadEntry]="thread.getTreeEntry(thread.threadId)"></app-event-reactions>
+    <app-event-buttons [event]="event"></app-event-buttons>
+  </div>
+
   <div class="current-event events noclick" *ngIf="thread.event$ | 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>
@@ -48,9 +58,8 @@
     <app-content class="thread-content" [ngClass]="{ 'no-lines': !optionsService.options.showLines, 'lines': optionsService.options.showLines }" [event]="event"></app-content>
     <app-event-reactions class="thread-reactions" [threadEntry]="thread.getTreeEntry(thread.threadId)"></app-event-reactions>
     <app-event-buttons [event]="event"></app-event-buttons>
-    <app-event-thread [threadEntry]="thread.getTreeEntry(thread.threadId)"> </app-event-thread>
+    <app-event-thread [threadEntry]="thread.getTreeEntry(thread.threadId)"></app-event-thread>
   </div>
-  
 </div>
 <mat-divider></mat-divider>
 

src/app/services/event.ts

@@ -57,6 +57,20 @@ export class EventService {
     return eTags;
   }
 
+  parentEventId(event: NostrEventDocument | undefined) {
+    if (!event) {
+      return;
+    }
+
+    const eTags = event.tags.filter((t) => t[0] === 'e');
+
+    if (eTags.length == 0) {
+      return undefined;
+    }
+
+    return eTags[eTags.length - 1][1];
+  }
+
   /** Returns the root event, first looks for "root" attribute on the e tag element or picks first in array. */
   rootEventId(event: NostrEventDocument | null) {
     if (!event) {

src/app/services/profile.ts

@@ -485,9 +485,6 @@ export class ProfileService {
       existingProfile.followed = now;
       existingProfile.circle = circle;
       existingProfile.status = ProfileStatus.Follow;
-
-      console.log('Created new empty profile: ', existingProfile);
-
       existingProfile.npub = this.utilities.getNostrIdentifier(existingProfile.pubkey);
 
       // Save directly, don't put in cache.

src/app/services/thread.ts

@@ -22,6 +22,10 @@ export class ThreadService {
   #events: NostrEventDocument[] | undefined = [];
   #eventsChanged: BehaviorSubject<NostrEventDocument[] | undefined> = new BehaviorSubject<NostrEventDocument[] | undefined>(this.#events);
 
+  above: NostrEventDocument | undefined = undefined;
+  #aboveChanged: BehaviorSubject<NostrEventDocument | undefined> = new BehaviorSubject<NostrEventDocument | undefined>(this.above);
+  above$ = this.#aboveChanged.asObservable();
+
   hasLoaded = false;
 
   get before$(): Observable<NostrEventDocument[]> {
@@ -146,6 +150,20 @@ export class ThreadService {
         rootEventId = event.id!;
       }
 
+      // Grab the immediate parent, which will be clickable.
+      const parentId = this.eventService.parentEventId(event);
+
+      this.above = undefined;
+      this.#aboveChanged.next(this.above);
+
+      // If not parent Id, it means user is looking at root so we don't need to load additional events.
+      if (parentId) {
+        this.dataService.downloadEvent(parentId).subscribe((event) => {
+          this.above = event;
+          this.#aboveChanged.next(this.above);
+        });
+      }
+
       // this.feedService
       //   .downloadThread(rootEventId)
       //   // .pipe(