refactor: reverted auxpanes to not have children

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

···
     >
       <avatar
         [src]="author().banner"
-        class="w-full"
+        class="w-full aspect-[3_/_1]"
       />
 
       <div
···
       >
         <avatar
           [src]="author().avatar"
-          class="h-18 w-18 absolute -top-8 left-2 border-[0.25rem] border-bg !box-content"
+          class="h-18 w-18 absolute -top-9 left-2 border-[0.25rem] border-bg !box-content"
         />
       </div>
 

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

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

src/app/components/cards/notification-card/notification-card.component.html

···
   >
     @for (author of notification().authors | slice : 0: 5; track author.did) {
       <a
-        (click)="openAuthor($event, author.did)"
+        (click)="openAuthor($event, author)"
         class="h-8 w-8 relative cursor-pointer"
       >
         <avatar
           [src]="author.avatar"
-          (click)="openAuthor($event, author.did)"
+          (click)="openAuthor($event, author)"
         />
       </a>
     }
···
     @switch (notification().authors.length) {
       @case (1) {
         <a
-          (click)="openAuthor($event, notification().authors[0].did)"
+          (click)="openAuthor($event, notification().authors[0])"
           class="font-bold hover:underline cursor-pointer"
         >{{notification().authors[0] | displayName}}</a>
       }
       @case (2) {
         <a
-          (click)="openAuthor($event, notification().authors[0].did)"
+          (click)="openAuthor($event, notification().authors[0])"
           class="font-bold hover:underline cursor-pointer"
         >{{notification().authors[0] | displayName}}</a>
 
         and
 
         <a
-          (click)="openAuthor($event, notification().authors[1].did)"
+          (click)="openAuthor($event, notification().authors[1])"
           class="font-bold hover:underline cursor-pointer"
         >{{notification().authors[1] | displayName}}</a>
       }
       @default {
         <a
-          (click)="openAuthor($event, notification().authors[0].did)"
+          (click)="openAuthor($event, notification().authors[0])"
           class="font-bold hover:underline cursor-pointer"
         >{{notification().authors[0] | displayName}}</a>
 

src/app/components/cards/notification-card/notification-card.component.ts

···
     this.cdRef.markForCheck();
   }
 
-  openAuthor(event: Event, did: string) {
-    //TODO: OpenAuthor
+  openAuthor(event: Event, author: Partial<{did: string, handle: string}>) {
     event.stopPropagation();
-    this.dialogService.openAuthor(did);
+    this.dialogService.openAuthor(author);
   }
 
   openImage(event: Event, images: AppBskyEmbedImages.ViewImage[], index: number) {

src/app/components/embeds/external-embed/external-embed.component.html

···
 @if (snippet.type == BlueskyGifSnippetType) {
   <video
     #target
-    class="video-js vjs-show-big-play-button-on-pause rounded-md overflow-hidden"
+    class="video-js vjs-show-big-play-button-on-pause"
     (click)="$event.stopPropagation()"
   ></video>
 }

src/app/components/embeds/external-embed/external-embed.component.ts

···
   ],
   templateUrl: './external-embed.component.html',
   styles: `
-    :host(::ng-deep youtube-player) {
-      display: flex;
-    }
-    :host(::ng-deep youtube-player) youtube-player-placeholder {
-      width: 100% !important;
-      height: unset !important;
-    }
-    :host(::ng-deep youtube-player) > div {
-      width: 100%;
-    }
-    :host(::ng-deep youtube-player) > div iframe {
-      height: unset;
+    .video-js {
+      height: auto;
       width: 100%;
-      aspect-ratio: 16 / 9;
     }
-
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })

src/app/components/feeds/timeline-feed/timeline-feed.component.ts

···
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, effect,
+  Component,
+  effect,
   ElementRef,
   input,
   OnDestroy,

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) {
+      @if (dialogService.auxPanes().length > 1) {
         <button
-          (click)="dialogService.closeAuxPaneChildren()"
+          (click)="dialogService.closeAuxPane()"
           class="btn-primary border-b-0 font-black text-lg"
         ><</button>
       }
 
       <span
-        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,
-        }"
+        class="bg-primary text-bg text-xl font-medium flex items-center p-3"
       >thread view</span>
 
       @if (dialogService.auxPanes().length > 1) {
···
       }
 
       <button
-        (click)="dialogService.closeAuxPane(); cdRef.markForCheck()"
+        (click)="dialogService.auxPanes.set([])"
         class="h-9 w-9 text-2xl font-semibold border border-primary hover:bg-primary/10 cursor-pointer ml-auto"
       >x</button>
     }
···
             @if (pane | isAuxPaneThread) {
               thread
             }
+            @if (pane | isAuxPaneAuthor) {
+              {{'@' + pane.handle}}
+            }
           </button>
         </li>
       }
···
 <ng-template
   #auxPane
 >
-  @for (pane of dialogService.auxPanes(); track pane.uuid; let iPane = $index) {
+  @for (pane of dialogService.auxPanes(); track pane.uuid; let i = $index) {
     <div
       class="absolute h-full w-full bg-bg"
-      [class.hidden]="iPane"
+      [class.hidden]="i"
     >
-      @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"
-          [class.hidden]="pane.children.length"
         />
       } @else if (pane | isAuxPaneAuthor) {
         <author-view
           [did]="pane.did"
-          [class.hidden]="pane.children.length"
         />
       }
     </div>

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

···
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, signal} from '@angular/core';
+import {ChangeDetectorRef, Component, signal} from '@angular/core';
 import {from} from 'rxjs';
 import {agent} from '@core/bsky.api';
 import {AuthService} from '@core/auth/auth.service';
···
     IsAuxPaneAuthorPipe,
     AuthorViewComponent,
   ],
-  templateUrl: './auxbar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  templateUrl: './auxbar.component.html'
 })
 export class AuxbarComponent {
   topics = signal<AppBskyUnspeccedDefs.TrendingTopic[]>([]);

src/app/models/aux-pane.ts

···
 
 export class AuxPane {
   uuid: string = uuid.v4();
-  children: Partial<AuxPane>[] = [];
 }
 
 export class ThreadAuxPane extends AuxPane {
   type: AuxPaneType.THREAD = AuxPaneType.THREAD;
   uri: string;
+
+  constructor(uri: string) {
+    super();
+    this.uri = uri;
+  }
 }
 
 export class AuthorAuxPane extends AuxPane {
   type: AuxPaneType.AUTHOR = AuxPaneType.AUTHOR;
   did: string;
   handle: string;
-  displayName: string;
+
+  constructor(author: Partial<{did: string, handle: string}>) {
+    super();
+    this.did = author.did;
+    this.handle = author.handle;
+  }
 }
 
 export class ListAuxPane extends AuxPane {

src/app/services/dialog.service.ts

···
     })
   }
 
-  closeAuxPaneChildren() {
-    this.auxPanes.update(panes => {
-      panes[0].children.shift();
-      return panes;
-    })
-  }
-
-  openThread(uri: string, children?: boolean) {
+  openThread(uri: string) {
     // 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
-    if (
-      this.auxPanes().length &&
-      (this.auxPanes()[this.auxPanes().length-1] as ThreadAuxPane).uri &&
-      (this.auxPanes()[this.auxPanes().length-1] as ThreadAuxPane).uri == uri
-    ) return;
+    // Bring pane to front if thread is already open
+    const pane = this.auxPanes().find(p => (p as ThreadAuxPane).uri && (p as ThreadAuxPane).uri == uri);
+    if (pane) {
+      this.reorderAuxPane(pane.uuid);
+      return;
+    }
     // Mute all video players on auxbar
     document.querySelector('auxbar').querySelectorAll('video').forEach((video: HTMLVideoElement) => {
       video.muted = true;
     });
 
-    const pane = new ThreadAuxPane();
-    pane.uri = uri;
-
-    if (children) {
-      this.auxPanes.update(panes => {
-        panes[0].children.unshift(pane);
-        return panes;
-      });
-    } else {
-      this.auxPanes.update(panes => {
-        return [pane, ...panes];
-      });
-    }
+    this.auxPanes.update(panes => {
+      return [new ThreadAuxPane(uri), ...panes];
+    });
   }
 
-  openAuthor(did: string, children?: boolean) {
+  openAuthor(author: Partial<{did: string, handle: string}>) {
     // Cancel action if user is selecting text
     if (window.getSelection().toString().length) return;
+    // Bring pane to front if author is already open
+    const pane = this.auxPanes().find(p => (p as AuthorAuxPane).did && (p as AuthorAuxPane).did == author.did);
+    if (pane) {
+      this.reorderAuxPane(pane.uuid);
+      return;
+    }
     // Mute all video players on auxbar
     document.querySelector('auxbar').querySelectorAll('video').forEach((video: HTMLVideoElement) => {
       video.muted = true;
     });
 
-    const pane = new AuthorAuxPane();
-    pane.did = did;
-
-    if (children) {
-      this.auxPanes.update(panes => {
-        panes[0].children.unshift(pane);
-        return panes;
-      });
-    } else {
-      this.auxPanes.update(panes => {
-        return [pane, ...panes];
-      });
-    }
+    this.auxPanes.update(panes => {
+      return [new AuthorAuxPane(author), ...panes];
+    });
   }
 
-  openRecord(record: AppBskyEmbedRecord.View, children?: boolean) {
+  openRecord(record: AppBskyEmbedRecord.View) {
     switch (record.record.$type) {
       case 'app.bsky.embed.record#viewRecord':
-        this.openThread((record.record as AppBskyEmbedRecord.ViewRecord).uri, children);
+        this.openThread((record.record as AppBskyEmbedRecord.ViewRecord).uri);
         break;
       case 'app.bsky.graph.defs#listView':
         break;