From e1bac9fd3edaef5e42b0f4425f92205148892d80 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Thu, 19 Feb 2026 19:11:51 -0800
Subject: [PATCH] feat: integrate CommentDisplayComponent into all remaining
 media components

Completed the integration of the shared CommentDisplayComponent across all media list views.

Updated Components:
- books-list.component.ts
- music-list.component.ts
- art-gallery.component.ts
- shows-list.component.ts
- manga-list.component.ts

All components now:
- Use the centralized CommentDisplayComponent for consistent UI
- Support comment reporting via the Report button
- Display pending review messages for reported comments
- Handle comment editing through the shared component

This completes the frontend integration for comment reporting across all media types!
---
 .../components/art/art-gallery.component.ts   | 75 ++++++-------------
 .../components/books/books-list.component.ts  | 71 ++++++------------
 .../components/manga/manga-list.component.ts  | 75 ++++++-------------
 .../components/music/music-list.component.ts  | 75 ++++++-------------
 .../components/shows/shows-list.component.ts  | 75 ++++++-------------
 5 files changed, 120 insertions(+), 251 deletions(-)

diff --git a/apps/frontend/src/app/components/art/art-gallery.component.ts b/apps/frontend/src/app/components/art/art-gallery.component.ts
index 3ce88d0..fbaefe0 100644
--- a/apps/frontend/src/app/components/art/art-gallery.component.ts
+++ b/apps/frontend/src/app/components/art/art-gallery.component.ts
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
 import { SuggestionService } from '../../services/suggestion.service';
 import { PaginationComponent } from '../shared/pagination.component';
 import { LikeButtonComponent } from '../shared/like-button.component';
+import { CommentDisplayComponent } from '../comment-display/comment-display.component';
 import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
 
 @Component({
   selector: 'app-art-gallery',
   standalone: true,
-  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
+  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
   template: `
     <div class="container">
       <div class="header-section">
@@ -468,56 +469,11 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
                         }
                       }
 
-                      @if (commentsLoading()[art.id]) {
-                        <div class="comments-loading">Loading comments...</div>
-                      } @else {
-                        @for (comment of comments()[art.id] || []; track comment.id) {
-                          <div class="comment">
-                            <div class="comment-header">
-                              @if (comment.user.avatar) {
-                                <img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
-                              }
-                              <span class="comment-author">{{ comment.user.username }}</span>
-                              @if (comment.user.inDiscord) {
-                                <span class="discord-badge">Discord</span>
-                              }
-                              @if (comment.user.isVip) {
-                                <span class="vip-badge">VIP</span>
-                              }
-                              @if (comment.user.isMod) {
-                                <span class="mod-badge">Mod</span>
-                              }
-                              @if (comment.user.isStaff) {
-                                <span class="staff-badge">Staff</span>
-                              }
-                              <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
-                              @if (canEditComment(comment)) {
-                                <button (click)="startEditComment(art.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
-                              }
-                              @if (canDeleteComment(comment)) {
-                                <button (click)="deleteComment(art.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
-                              }
-                            </div>
-                            @if (editingCommentId() === comment.id) {
-                              <div class="comment-edit-form">
-                                <textarea
-                                  [(ngModel)]="editCommentContent"
-                                  name="editComment"
-                                  rows="3"
-                                ></textarea>
-                                <div class="comment-edit-actions">
-                                  <button (click)="saveCommentEdit(art.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
-                                  <button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
-                                </div>
-                              </div>
-                            } @else {
-                              <div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
-                            }
-                          </div>
-                        } @empty {
-                          <div class="no-comments">No comments yet. Be the first to comment!</div>
-                        }
-                      }
+                      <app-comment-display
+                        [comments]="getCommentsSignal(art.id)"
+                        (onEdit)="handleCommentEdit(art.id, $event)"
+                        (onDelete)="deleteComment(art.id, $event)"
+                      />
                     </div>
                   }
                 </div>
@@ -1615,4 +1571,21 @@ export class ArtGalleryComponent implements OnInit {
   toggleFilters() {
     this.showFilters.update(v => !v);
   }
+
+  handleCommentEdit(artId: string, event: { commentId: string; content: string }) {
+    this.commentsService.updateCommentOnArt(artId, event.commentId, event.content).subscribe({
+      next: (updatedComment) => {
+        this.comments.set({
+          ...this.comments(),
+          [artId]: (this.comments()[artId] || []).map(c =>
+            c.id === event.commentId ? updatedComment : c
+          )
+        });
+      }
+    });
+  }
+
+  getCommentsSignal(artId: string) {
+    return signal(this.comments()[artId] || []);
+  }
 }
diff --git a/apps/frontend/src/app/components/books/books-list.component.ts b/apps/frontend/src/app/components/books/books-list.component.ts
index 3bfaa06..0af45ac 100644
--- a/apps/frontend/src/app/components/books/books-list.component.ts
+++ b/apps/frontend/src/app/components/books/books-list.component.ts
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
 import { SuggestionService } from '../../services/suggestion.service';
 import { PaginationComponent } from '../shared/pagination.component';
 import { LikeButtonComponent } from '../shared/like-button.component';
+import { CommentDisplayComponent } from '../comment-display/comment-display.component';
 import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
 
 @Component({
   selector: 'app-books-list',
   standalone: true,
-  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
+  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
   template: `
     <div class="container">
       <div class="header-section">
@@ -655,52 +656,11 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
                       @if (commentsLoading()[book.id]) {
                         <div class="comments-loading">Loading comments...</div>
                       } @else {
-                        @for (comment of comments()[book.id] || []; track comment.id) {
-                          <div class="comment">
-                            <div class="comment-header">
-                              @if (comment.user.avatar) {
-                                <img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
-                              }
-                              <span class="comment-author">{{ comment.user.username }}</span>
-                              @if (comment.user.inDiscord) {
-                                <span class="discord-badge">Discord</span>
-                              }
-                              @if (comment.user.isVip) {
-                                <span class="vip-badge">VIP</span>
-                              }
-                              @if (comment.user.isMod) {
-                                <span class="mod-badge">Mod</span>
-                              }
-                              @if (comment.user.isStaff) {
-                                <span class="staff-badge">Staff</span>
-                              }
-                              <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
-                              @if (canEditComment(comment)) {
-                                <button (click)="startEditComment(book.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
-                              }
-                              @if (canDeleteComment(comment)) {
-                                <button (click)="deleteComment(book.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
-                              }
-                            </div>
-                            @if (editingCommentId() === comment.id) {
-                              <div class="comment-edit-form">
-                                <textarea
-                                  [(ngModel)]="editCommentContent"
-                                  name="editComment"
-                                  rows="3"
-                                ></textarea>
-                                <div class="comment-edit-actions">
-                                  <button (click)="saveCommentEdit(book.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
-                                  <button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
-                                </div>
-                              </div>
-                            } @else {
-                              <div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
-                            }
-                          </div>
-                        } @empty {
-                          <div class="no-comments">No comments yet. Be the first to comment!</div>
-                        }
+                        <app-comment-display
+                          [comments]="getCommentsSignal(book.id)"
+                          (onEdit)="handleCommentEdit(book.id, $event)"
+                          (onDelete)="deleteComment(book.id, $event)"
+                        />
                       }
                     </div>
                   }
@@ -1982,4 +1942,21 @@ export class BooksListComponent implements OnInit {
       alert('Failed to submit suggestion. Please try again.');
     }
   }
+
+  handleCommentEdit(bookId: string, event: { commentId: string; content: string }) {
+    this.commentsService.updateCommentOnBook(bookId, event.commentId, event.content).subscribe({
+      next: (updatedComment) => {
+        this.comments.set({
+          ...this.comments(),
+          [bookId]: (this.comments()[bookId] || []).map(c =>
+            c.id === event.commentId ? updatedComment : c
+          )
+        });
+      }
+    });
+  }
+
+  getCommentsSignal(bookId: string) {
+    return signal(this.comments()[bookId] || []);
+  }
 }
\ No newline at end of file
diff --git a/apps/frontend/src/app/components/manga/manga-list.component.ts b/apps/frontend/src/app/components/manga/manga-list.component.ts
index 4030f30..58c9ecf 100644
--- a/apps/frontend/src/app/components/manga/manga-list.component.ts
+++ b/apps/frontend/src/app/components/manga/manga-list.component.ts
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
 import { SuggestionService } from '../../services/suggestion.service';
 import { PaginationComponent } from '../shared/pagination.component';
 import { LikeButtonComponent } from '../shared/like-button.component';
+import { CommentDisplayComponent } from '../comment-display/comment-display.component';
 import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
 
 @Component({
   selector: 'app-manga-list',
   standalone: true,
-  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
+  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
   template: `
     <div class="container">
       <div class="header-section">
@@ -610,56 +611,11 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
                         }
                       }
 
-                      @if (commentsLoading()[manga.id]) {
-                        <div class="comments-loading">Loading comments...</div>
-                      } @else {
-                        @for (comment of comments()[manga.id] || []; track comment.id) {
-                          <div class="comment">
-                            <div class="comment-header">
-                              @if (comment.user.avatar) {
-                                <img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
-                              }
-                              <span class="comment-author">{{ comment.user.username }}</span>
-                              @if (comment.user.inDiscord) {
-                                <span class="discord-badge">Discord</span>
-                              }
-                              @if (comment.user.isVip) {
-                                <span class="vip-badge">VIP</span>
-                              }
-                              @if (comment.user.isMod) {
-                                <span class="mod-badge">Mod</span>
-                              }
-                              @if (comment.user.isStaff) {
-                                <span class="staff-badge">Staff</span>
-                              }
-                              <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
-                              @if (canEditComment(comment)) {
-                                <button (click)="startEditComment(manga.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
-                              }
-                              @if (canDeleteComment(comment)) {
-                                <button (click)="deleteComment(manga.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
-                              }
-                            </div>
-                            @if (editingCommentId() === comment.id) {
-                              <div class="comment-edit-form">
-                                <textarea
-                                  [(ngModel)]="editCommentContent"
-                                  name="editComment"
-                                  rows="3"
-                                ></textarea>
-                                <div class="comment-edit-actions">
-                                  <button (click)="saveCommentEdit(manga.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
-                                  <button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
-                                </div>
-                              </div>
-                            } @else {
-                              <div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
-                            }
-                          </div>
-                        } @empty {
-                          <div class="no-comments">No comments yet. Be the first to comment!</div>
-                        }
-                      }
+                      <app-comment-display
+                        [comments]="getCommentsSignal(manga.id)"
+                        (onEdit)="handleCommentEdit(manga.id, $event)"
+                        (onDelete)="deleteComment(manga.id, $event)"
+                      />
                     </div>
                   }
                 </div>
@@ -1780,4 +1736,21 @@ export class MangaListComponent implements OnInit {
       alert('Failed to submit suggestion. Please try again.');
     }
   }
+
+  handleCommentEdit(mangaId: string, event: { commentId: string; content: string }) {
+    this.commentsService.updateCommentOnManga(mangaId, event.commentId, event.content).subscribe({
+      next: (updatedComment) => {
+        this.comments.set({
+          ...this.comments(),
+          [mangaId]: (this.comments()[mangaId] || []).map(c =>
+            c.id === event.commentId ? updatedComment : c
+          )
+        });
+      }
+    });
+  }
+
+  getCommentsSignal(mangaId: string) {
+    return signal(this.comments()[mangaId] || []);
+  }
 }
diff --git a/apps/frontend/src/app/components/music/music-list.component.ts b/apps/frontend/src/app/components/music/music-list.component.ts
index a5ceeeb..1c91be4 100644
--- a/apps/frontend/src/app/components/music/music-list.component.ts
+++ b/apps/frontend/src/app/components/music/music-list.component.ts
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
 import { SuggestionService } from '../../services/suggestion.service';
 import { PaginationComponent } from '../shared/pagination.component';
 import { LikeButtonComponent } from '../shared/like-button.component';
+import { CommentDisplayComponent } from '../comment-display/comment-display.component';
 import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
 
 @Component({
   selector: 'app-music-list',
   standalone: true,
-  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
+  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
   template: `
     <div class="container">
       <div class="header-section">
@@ -686,56 +687,11 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
                         }
                       }
 
-                      @if (commentsLoading()[music.id]) {
-                        <div class="comments-loading">Loading comments...</div>
-                      } @else {
-                        @for (comment of comments()[music.id] || []; track comment.id) {
-                          <div class="comment">
-                            <div class="comment-header">
-                              @if (comment.user.avatar) {
-                                <img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
-                              }
-                              <span class="comment-author">{{ comment.user.username }}</span>
-                              @if (comment.user.inDiscord) {
-                                <span class="discord-badge">Discord</span>
-                              }
-                              @if (comment.user.isVip) {
-                                <span class="vip-badge">VIP</span>
-                              }
-                              @if (comment.user.isMod) {
-                                <span class="mod-badge">Mod</span>
-                              }
-                              @if (comment.user.isStaff) {
-                                <span class="staff-badge">Staff</span>
-                              }
-                              <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
-                              @if (canEditComment(comment)) {
-                                <button (click)="startEditComment(music.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
-                              }
-                              @if (canDeleteComment(comment)) {
-                                <button (click)="deleteComment(music.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
-                              }
-                            </div>
-                            @if (editingCommentId() === comment.id) {
-                              <div class="comment-edit-form">
-                                <textarea
-                                  [(ngModel)]="editCommentContent"
-                                  name="editComment"
-                                  rows="3"
-                                ></textarea>
-                                <div class="comment-edit-actions">
-                                  <button (click)="saveCommentEdit(music.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
-                                  <button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
-                                </div>
-                              </div>
-                            } @else {
-                              <div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
-                            }
-                          </div>
-                        } @empty {
-                          <div class="no-comments">No comments yet. Be the first to comment!</div>
-                        }
-                      }
+                      <app-comment-display
+                        [comments]="getCommentsSignal(music.id)"
+                        (onEdit)="handleCommentEdit(music.id, $event)"
+                        (onDelete)="deleteComment(music.id, $event)"
+                      />
                     </div>
                   }
                 </div>
@@ -2014,4 +1970,21 @@ export class MusicListComponent implements OnInit {
       alert('Failed to submit suggestion. Please try again.');
     }
   }
+
+  handleCommentEdit(musicId: string, event: { commentId: string; content: string }) {
+    this.commentsService.updateCommentOnMusic(musicId, event.commentId, event.content).subscribe({
+      next: (updatedComment) => {
+        this.comments.set({
+          ...this.comments(),
+          [musicId]: (this.comments()[musicId] || []).map(c =>
+            c.id === event.commentId ? updatedComment : c
+          )
+        });
+      }
+    });
+  }
+
+  getCommentsSignal(musicId: string) {
+    return signal(this.comments()[musicId] || []);
+  }
 }
\ No newline at end of file
diff --git a/apps/frontend/src/app/components/shows/shows-list.component.ts b/apps/frontend/src/app/components/shows/shows-list.component.ts
index 1f6268e..ce41b07 100644
--- a/apps/frontend/src/app/components/shows/shows-list.component.ts
+++ b/apps/frontend/src/app/components/shows/shows-list.component.ts
@@ -14,12 +14,13 @@ import { SanitizeService } from '../../services/sanitize.service';
 import { SuggestionService } from '../../services/suggestion.service';
 import { PaginationComponent } from '../shared/pagination.component';
 import { LikeButtonComponent } from '../shared/like-button.component';
+import { CommentDisplayComponent } from '../comment-display/comment-display.component';
 import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
 
 @Component({
   selector: 'app-shows-list',
   standalone: true,
-  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent],
+  imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
   template: `
     <div class="container">
       <div class="header-section">
@@ -604,56 +605,11 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
                         }
                       }
 
-                      @if (commentsLoading()[show.id]) {
-                        <div class="comments-loading">Loading comments...</div>
-                      } @else {
-                        @for (comment of comments()[show.id] || []; track comment.id) {
-                          <div class="comment">
-                            <div class="comment-header">
-                              @if (comment.user.avatar) {
-                                <img [src]="comment.user.avatar" [alt]="comment.user.username" class="comment-avatar">
-                              }
-                              <span class="comment-author">{{ comment.user.username }}</span>
-                              @if (comment.user.inDiscord) {
-                                <span class="discord-badge">Discord</span>
-                              }
-                              @if (comment.user.isVip) {
-                                <span class="vip-badge">VIP</span>
-                              }
-                              @if (comment.user.isMod) {
-                                <span class="mod-badge">Mod</span>
-                              }
-                              @if (comment.user.isStaff) {
-                                <span class="staff-badge">Staff</span>
-                              }
-                              <span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
-                              @if (canEditComment(comment)) {
-                                <button (click)="startEditComment(show.id, comment)" class="btn btn-secondary btn-xs">Edit</button>
-                              }
-                              @if (canDeleteComment(comment)) {
-                                <button (click)="deleteComment(show.id, comment.id)" class="btn btn-danger btn-xs">Delete</button>
-                              }
-                            </div>
-                            @if (editingCommentId() === comment.id) {
-                              <div class="comment-edit-form">
-                                <textarea
-                                  [(ngModel)]="editCommentContent"
-                                  name="editComment"
-                                  rows="3"
-                                ></textarea>
-                                <div class="comment-edit-actions">
-                                  <button (click)="saveCommentEdit(show.id, comment.id)" class="btn btn-primary btn-xs">Save</button>
-                                  <button (click)="cancelCommentEdit()" class="btn btn-secondary btn-xs">Cancel</button>
-                                </div>
-                              </div>
-                            } @else {
-                              <div class="comment-content" [innerHTML]="sanitizeService.sanitizeHtml(comment.content)"></div>
-                            }
-                          </div>
-                        } @empty {
-                          <div class="no-comments">No comments yet. Be the first to comment!</div>
-                        }
-                      }
+                      <app-comment-display
+                        [comments]="getCommentsSignal(show.id)"
+                        (onEdit)="handleCommentEdit(show.id, $event)"
+                        (onDelete)="deleteComment(show.id, $event)"
+                      />
                     </div>
                   }
                 </div>
@@ -1783,4 +1739,21 @@ export class ShowsListComponent implements OnInit {
       alert('Failed to submit suggestion. Please try again.');
     }
   }
+
+  handleCommentEdit(showId: string, event: { commentId: string; content: string }) {
+    this.commentsService.updateCommentOnShow(showId, event.commentId, event.content).subscribe({
+      next: (updatedComment) => {
+        this.comments.set({
+          ...this.comments(),
+          [showId]: (this.comments()[showId] || []).map(c =>
+            c.id === event.commentId ? updatedComment : c
+          )
+        });
+      }
+    });
+  }
+
+  getCommentsSignal(showId: string) {
+    return signal(this.comments()[showId] || []);
+  }
 }