feat: add suggestion feature

apps/frontend/src/app/components/manga/manga-list.component.ts

@@ -11,7 +11,8 @@ import { MangaService } from '../../services/manga.service';
 import { AuthService } from '../../services/auth.service';
 import { CommentsService } from '../../services/comments.service';
 import { SanitizeService } from '../../services/sanitize.service';
-import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@library/shared-types';
+import { SuggestionService } from '../../services/suggestion.service';
+import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity } from '@library/shared-types';
 
 @Component({
   selector: 'app-manga-list',
@@ -25,6 +26,10 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li
           <button (click)="toggleAddForm()" class="btn btn-primary">
             {{ showAddForm() ? 'Cancel' : 'Add Manga' }}
           </button>
+        } @else if (authService.isAuthenticated() && !authService.user()?.isBanned) {
+          <button (click)="toggleSuggestForm()" class="btn btn-primary">
+            {{ showSuggestForm() ? 'Cancel' : 'Suggest a Manga' }}
+          </button>
         }
       </div>
 
@@ -200,6 +205,72 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li
         </form>
       }
 
+      @if (showSuggestForm() && !authService.isAdmin() && authService.isAuthenticated()) {
+        <form (ngSubmit)="submitSuggestion()" class="add-form suggest-form">
+          <h3>Suggest a Manga</h3>
+          <p class="suggest-note">Your suggestion will be reviewed by Naomi. If accepted, it will be added to the reading list!</p>
+          <div class="form-group">
+            <label for="suggest-title">Title</label>
+            <input
+              type="text"
+              id="suggest-title"
+              [(ngModel)]="suggestedManga.title"
+              name="title"
+              required
+              placeholder="Enter manga title"
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-author">Author/Artist</label>
+            <input
+              type="text"
+              id="suggest-author"
+              [(ngModel)]="suggestedManga.author"
+              name="author"
+              required
+              placeholder="Enter author or artist name"
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-notes">Notes (why should Naomi read this?)</label>
+            <textarea
+              id="suggest-notes"
+              [(ngModel)]="suggestedManga.notes"
+              name="notes"
+              rows="3"
+              placeholder="Tell Naomi why this manga is worth reading..."
+            ></textarea>
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-coverImage">Cover Art (max 500KB)</label>
+            <input
+              type="file"
+              id="suggest-coverImage"
+              name="coverImage"
+              accept="image/*"
+              (change)="onImageSelected($event, 'suggest')"
+            >
+            @if (suggestMangaImagePreview()) {
+              <div class="image-preview">
+                <img [src]="suggestMangaImagePreview()" alt="Cover preview">
+                <button type="button" (click)="clearImage('suggest')" class="btn btn-danger btn-sm">Remove</button>
+              </div>
+            }
+            @if (imageError()) {
+              <span class="error-text">{{ imageError() }}</span>
+            }
+          </div>
+
+          <div class="form-actions">
+            <button type="submit" class="btn btn-primary">Submit Suggestion</button>
+            <button type="button" (click)="toggleSuggestForm()" class="btn btn-secondary">Cancel</button>
+          </div>
+        </form>
+      }
+
       <div class="filters">
         <button
           (click)="setFilter('all')"
@@ -385,6 +456,18 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment } from '@li
       margin-bottom: 2rem;
     }
 
+    .suggest-form {
+      border: 2px solid #00b894;
+      background: #f5fffc;
+    }
+
+    .suggest-note {
+      color: #666;
+      font-size: 0.9rem;
+      margin-bottom: 1rem;
+      font-style: italic;
+    }
+
     .form-group {
       margin-bottom: 1rem;
     }
@@ -725,6 +808,7 @@ export class MangaListComponent implements OnInit {
   authService = inject(AuthService);
   commentsService = inject(CommentsService);
   sanitizeService = inject(SanitizeService);
+  suggestionService = inject(SuggestionService);
 
   mangaList = signal<Manga[]>([]);
   loading = signal(true);
@@ -741,9 +825,19 @@ export class MangaListComponent implements OnInit {
 
   newMangaImagePreview = signal<string | null>(null);
   editMangaImagePreview = signal<string | null>(null);
+  suggestMangaImagePreview = signal<string | null>(null);
   imageError = signal<string | null>(null);
   private readonly MAX_IMAGE_SIZE = 500 * 1024;
 
+  // Suggestion state
+  showSuggestForm = signal(false);
+  suggestedManga: { title: string; author: string; notes?: string; coverImage?: string } = {
+    title: '',
+    author: '',
+    notes: '',
+    coverImage: undefined
+  };
+
   MangaStatus = MangaStatus;
 
   readingCount = computed(() => this.mangaList().filter(m => m.status === MangaStatus.reading).length);
@@ -875,7 +969,7 @@ export class MangaListComponent implements OnInit {
     });
   }
 
-  onImageSelected(event: Event, target: 'new' | 'edit') {
+  onImageSelected(event: Event, target: 'new' | 'edit' | 'suggest') {
     const input = event.target as HTMLInputElement;
     const file = input.files?.[0];
 
@@ -901,21 +995,27 @@ export class MangaListComponent implements OnInit {
       if (target === 'new') {
         this.newMangaImagePreview.set(base64);
         this.newManga.coverImage = base64;
-      } else {
+      } else if (target === 'edit') {
         this.editMangaImagePreview.set(base64);
         this.editManga.coverImage = base64;
+      } else {
+        this.suggestMangaImagePreview.set(base64);
+        this.suggestedManga.coverImage = base64;
       }
     };
     reader.readAsDataURL(file);
   }
 
-  clearImage(target: 'new' | 'edit') {
+  clearImage(target: 'new' | 'edit' | 'suggest') {
     if (target === 'new') {
       this.newMangaImagePreview.set(null);
       this.newManga.coverImage = undefined;
-    } else {
+    } else if (target === 'edit') {
       this.editMangaImagePreview.set(null);
       this.editManga.coverImage = undefined;
+    } else {
+      this.suggestMangaImagePreview.set(null);
+      this.suggestedManga.coverImage = undefined;
     }
     this.imageError.set(null);
   }
@@ -1033,4 +1133,41 @@ export class MangaListComponent implements OnInit {
       }
     });
   }
+
+  // Suggestion methods
+  toggleSuggestForm() {
+    this.showSuggestForm.update(v => !v);
+    if (!this.showSuggestForm()) {
+      this.resetSuggestForm();
+    }
+  }
+
+  resetSuggestForm() {
+    this.suggestedManga = {
+      title: '',
+      author: '',
+      notes: '',
+      coverImage: undefined
+    };
+    this.suggestMangaImagePreview.set(null);
+    this.imageError.set(null);
+  }
+
+  async submitSuggestion() {
+    if (!this.suggestedManga.title || !this.suggestedManga.author) return;
+
+    try {
+      await this.suggestionService.createSuggestion({
+        entityType: SuggestionEntity.MANGA,
+        title: this.suggestedManga.title,
+        author: this.suggestedManga.author,
+        notes: this.suggestedManga.notes,
+        coverImage: this.suggestedManga.coverImage
+      });
+      alert('Thank you for your suggestion! It will be reviewed soon.');
+      this.toggleSuggestForm();
+    } catch {
+      alert('Failed to submit suggestion. Please try again.');
+    }
+  }
 }