feat: open nested auxpanes

src/app/components/aux-panes/thread-view/thread-view.component.html

···
         <post-card
           [post]="parent()"
           (postChange)="parent.set($event)"
-          (click)="dialogService.openThread(parent().uri)"
-          (onEmbedRecord)="dialogService.openRecord($event)"
+          (click)="dialogService.openThread(parent().uri, true)"
+          (onEmbedRecord)="dialogService.openRecord($event, true)"
           class="cursor-pointer hover:bg-primary/2 w-full px-3 pt-3 pb-1"
           parent
         />
···
     @for (reply of replies(); track reply.uuid) {
       <divider/>
 
-      @for (post of reply.thread; track post.uuid; let i = $index) {
+      @for (child of reply.thread; track child.uuid; let i = $index) {
         <post-card
-          [post]="post.post()"
-          (postChange)="post.post.set($event)"
-          (click)="dialogService.openThread(post.post().uri)"
-          (onEmbedRecord)="dialogService.openRecord($event)"
+          [post]="child.post()"
+          (postChange)="child.post.set($event)"
+          (click)="dialogService.openThread(child.post().uri, true)"
+          (onEmbedRecord)="dialogService.openRecord($event, true)"
           class="cursor-pointer hover:bg-primary/2 w-full px-3 pt-3 pb-1"
           [parent]="i !== reply.thread.length - 1"
         />

src/app/components/aux-panes/thread-view/thread-view.component.ts

···
             this.parents.set(parents);
           }
 
-          this.loadReady.set(true);
-          this.cdRef.markForCheck();
-
-          if (thread.parent) {
-            setTimeout(() => {
-              this.scroll().nativeElement.scrollTo({
-                top: this.mainCard().nativeElement.offsetTop,
-                behavior: 'smooth'
-              });
-            }, 50);
-          }
-
           //Set grouped replies
           if (thread.replies) {
             const replies = thread.replies
···
                 })
               }
             });
+          }
+
+          this.loadReady.set(true);
+          this.cdRef.markForCheck();
+
+          if (thread.parent) {
+            setTimeout(() => {
+              this.scroll().nativeElement.scrollTo({
+                top: this.mainCard().nativeElement.offsetTop,
+                behavior: 'smooth'
+              });
+            }, 50);
           }
         }
       }, error: err => this.messageService.error(err.message)

src/app/components/navigation/auxbar/auxbar.component.html

···
     [ngClass]="{'border-b border-primary': dialogService.auxPanes().length}"
   >
     @if (dialogService.auxPanes().length) {
+      @if (dialogService.auxPanes()[0].children.length) {
+        <button
+          (click)="dialogService.closeAuxPaneChildren()"
+          class="btn-primary border-b-0 font-black text-lg"
+        ><</button>
+      }
       <span
-        class="bg-primary text-bg text-xl font-medium flex items-center px-3"
+        class="bg-primary text-bg text-xl font-medium flex items-center pr-3"
+        [ngClass]="{
+          'pl-2': dialogService.auxPanes()[0].children.length,
+          'pl-3': !dialogService.auxPanes()[0].children.length,
+        }"
       >thread view</span>
-      <span
-        (click)="closePane()"
-        class="text-primary font-semibold flex items-center px-3 hover:underline cursor-pointer"
-      >close</span>
+      <button
+        (click)="dialogService.closeAuxPane(); cdRef.markForCheck()"
+        class="h-9 w-9 text-xl font-bold border border-primary hover:bg-primary/10 cursor-pointer"
+      >x</button>
 
       <span
         (click)="dialogService.auxPanes.set([])"
···
 <ng-template
   #auxPane
 >
-  @for (pane of dialogService.auxPanes(); track $index) {
+  @for (pane of dialogService.auxPanes(); track pane.uuid; let iPane = $index) {
     <div
       class="absolute h-full w-full bg-bg"
+      [class.hidden]="pane.children.length || iPane"
     >
+      @if (pane.children.length) {
+        @for (child of pane.children; track child.uuid; let iChild = $index) {
+          @if (child | isAuxPaneThread) {
+            <thread-view
+              [uri]="child.uri"
+              [class.hidden]="iChild"
+            />
+          }
+        }
+      }
       @if (pane | isAuxPaneThread) {
         <thread-view
           [uri]="pane.uri"

src/app/components/navigation/auxbar/auxbar.component.ts

···
     protected dialogService: DialogService,
     private messageService: MessageService,
     private authService: AuthService,
-    private cdRef: ChangeDetectorRef
+    protected cdRef: ChangeDetectorRef
   ) {
     this.loadTopics();
   }
···
         this.topics.set(response.data.topics);
         this.cdRef.markForCheck();
       }, error: err => this.messageService.error(err.message)
-    });
-  }
-
-  closePane() {
-    this.dialogService.auxPanes.update(panes => {
-      panes.pop();
-      return panes;
     });
   }
 }

src/app/models/aux-pane.ts

···
+import * as uuid from "uuid";
+
 export class AuxPane {
+  uuid: string = uuid.v4();
+  children: Partial<AuxPane>[] = [];
 }
 
 export class ThreadAuxPane extends AuxPane {

src/app/services/dialog.service.ts

···
     });
   }
 
-  openThread(uri: string) {
+  closeAuxPane() {
+    this.auxPanes.update(panes => {
+      panes.shift();
+      return panes;
+    })
+  }
+
+  closeAuxPaneChildren() {
+    this.auxPanes.update(panes => {
+      panes[0].children.shift();
+      return panes;
+    })
+  }
+
+  openThread(uri: string, children?: boolean) {
     // Cancel action if user is selecting text
     if (window.getSelection().toString().length) return;
     // Cancel action if post is the same than the last opened thread
···
 
     const pane = new ThreadAuxPane();
     pane.uri = uri;
-    this.auxPanes.update(panes => {
-      return [...panes, pane];
-    });
+
+    if (children) {
+      this.auxPanes.update(panes => {
+        panes[0].children.unshift(pane);
+        return panes;
+      });
+    } else {
+      this.auxPanes.update(panes => {
+        return [pane, ...panes];
+      });
+    }
   }
 
-  openRecord(record: AppBskyEmbedRecord.View) {
+  openRecord(record: AppBskyEmbedRecord.View, children?: boolean) {
     switch (record.record.$type) {
       case 'app.bsky.embed.record#viewRecord':
-        this.openThread((record.record as AppBskyEmbedRecord.ViewRecord).uri);
+        this.openThread((record.record as AppBskyEmbedRecord.ViewRecord).uri, children);
         break;
       case 'app.bsky.graph.defs#listView':
         break;