feat: post-replies grouping in author-feed

src/app/components/feeds/author-feed/author-feed.component.html

···
   (scrollTop)="manageRefresh();"
 >
   @if (posts) {
-    @for (post of posts; track post.uuid) {
-      <post-card
-        [post]="post.post()"
-        [reply]="post.reply"
-        [reason]="post.reason"
-        (postChange)="post.post.set($event)"
-        (click)="dialogService.openThread(post.post().uri)"
-        (onEmbedRecord)="dialogService.openRecord($event)"
-        class="cursor-pointer hover:bg-primary/2 w-full py-3 px-2"
-      />
+    @for (group of posts; track group.uuid) {
+      @for (post of group.thread; track post.uuid; let i = $index) {
+        <post-card
+          [post]="post.post()"
+          [reply]="group.thread.length == 1 ? post.reply : undefined"
+          [reason]="post.reason"
+          (postChange)="post.post.set($event)"
+          (click)="dialogService.openThread(post.post().uri)"
+          (onEmbedRecord)="dialogService.openRecord($event)"
+          [parent]="group | postCardParentPipe: i"
+          [grandParent]="group | postCardGrandParentPipe: i"
+          class="cursor-pointer hover:bg-primary/2 w-full px-3 pb-1"
+          [ngClass]="{
+            'pt-3': i == 0,
+            'pt-2': i > 0
+          }"
+        />
+      }
 
       <divider/>
     }

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

···
 import {$Typed} from '@atproto/api';
 import {ReasonRepost} from '@atproto/api/dist/client/types/app/bsky/feed/defs';
 import {PostService} from '@services/post.service';
-import {SignalizedFeedViewPost} from '@models/signalized-feed-view-post';
 import {from} from 'rxjs';
 import {PostCardComponent} from '@components/cards/post-card/post-card.component';
 import {MessageService} from '@services/message.service';
 import {DialogService} from '@services/dialog.service';
 import {DividerComponent} from '@components/shared/divider/divider.component';
 import {FeedService} from '@services/feed.service';
+import {GroupedPost} from '@models/grouped-post';
+import {PostCardGrandParentPipe} from '@shared/pipes/post-card-grandparent.pipe';
+import {PostCardParentPipe} from '@shared/pipes/post-card-parent.pipe';
 
 @Component({
   selector: 'author-feed',
···
     ScrollDirective,
     PostCardComponent,
     DividerComponent,
+    PostCardGrandParentPipe,
+    PostCardParentPipe,
   ],
   templateUrl: './author-feed.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
···
   feed = viewChild<ElementRef>('feed');
   did = input.required<string>();
 
-  posts: SignalizedFeedViewPost[];
+  posts: GroupedPost[];
   cursor: string;
   loading = true;
   reloadReady = false;
···
     this.loading = true;
     from(agent.getAuthorFeed({
       actor: this.did(),
-      limit: 15
+      limit: 50
     })).subscribe({
       next: response => {
         this.cursor = response.data.cursor;
-        this.posts = response.data.feed.map(fvp => this.feedService.parseFeedViewPost(fvp));
+        this.posts = this.feedService.groupFeedViewPosts(response.data.feed);
         this.cdRef.markForCheck();
         setTimeout(() => {
           this.loading = false;
···
     from(agent.getAuthorFeed({
       actor: this.did(),
       cursor: this.cursor,
-      limit: 15
+      limit: 50
     })).subscribe({
       next: response => {
         this.cursor = response.data.cursor;
-        const newPosts = response.data.feed.map(fvp => this.feedService.parseFeedViewPost(fvp));
+        const newPosts = this.feedService.groupFeedViewPosts(response.data.feed);
         this.posts = [...this.posts, ...newPosts];
         this.cdRef.markForCheck();
         setTimeout(() => {
···
           })).subscribe({
             next: response => {
               const post = response.data.feed[0];
-              const lastPost = this.posts[0];
+              const lastPost = this.posts[0].thread[this.posts[0].thread.length-1];
               let isNewPost = false;
 
               if (post) {

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

···
         />
       }
 
-      <divider
-      />
+      <divider/>
     }
 <!--  } @else {-->
 <!--    <div-->
···
 <!--    </div>-->
   }
 </div>
-
-<ng-template
-  #onePost
-  let-thread="thread"
->
-  <post-card
-    [post]="thread[0].post()"
-    [reply]="thread[0].reply"
-    [reason]="thread[0].reason"
-    (postChange)="thread[0].post.set($event)"
-    (click)="dialogService.openThread(thread[0].post().uri)"
-    (onEmbedRecord)="dialogService.openRecord($event)"
-    class="cursor-pointer hover:bg-primary/2 w-full px-3 pt-3 pb-1"
-  />
-</ng-template>
-
-<ng-template
-  #twoPosts
-  let-thread="thread"
->
-</ng-template>

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

···
       this.initData();
     }
   }
-
-  log(obj: any) {
-    console.log(obj)
-  }
 }

src/app/shared/pipes/post-card-parent.pipe.ts

···
   transform(group: GroupedPost, index: number): boolean {
     if (group.thread.length < 2) return false;
     if (index == group.thread.length-1) return false;
-    if (group.thread.length > 2 &&
-      index == 0 &&
-      group.thread[0].post().uri == (group.thread[1].post().record as any)?.reply?.parent?.uri
-    ) return false;
 
     return true;
   }