feat: add suggestion feature

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

@@ -11,7 +11,8 @@ import { ShowsService } from '../../services/shows.service';
 import { AuthService } from '../../services/auth.service';
 import { CommentsService } from '../../services/comments.service';
 import { SanitizeService } from '../../services/sanitize.service';
-import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } from '@library/shared-types';
+import { SuggestionService } from '../../services/suggestion.service';
+import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, SuggestionEntity } from '@library/shared-types';
 
 @Component({
   selector: 'app-shows-list',
@@ -25,6 +26,10 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro
           <button (click)="toggleAddForm()" class="btn btn-primary">
             {{ showAddForm() ? 'Cancel' : 'Add Show' }}
           </button>
+        } @else if (authService.isAuthenticated() && !authService.user()?.isBanned) {
+          <button (click)="toggleSuggestForm()" class="btn btn-primary">
+            {{ showSuggestForm() ? 'Cancel' : 'Suggest a Show' }}
+          </button>
         }
       </div>
 
@@ -196,6 +201,70 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro
         </form>
       }
 
+      @if (showSuggestForm() && !authService.isAdmin() && authService.isAuthenticated()) {
+        <form (ngSubmit)="submitSuggestion()" class="add-form suggest-form">
+          <h3>Suggest a Show</h3>
+          <p class="suggest-note">Your suggestion will be reviewed by Naomi. If accepted, it will be added to the watch list!</p>
+          <div class="form-group">
+            <label for="suggest-title">Title</label>
+            <input
+              type="text"
+              id="suggest-title"
+              [(ngModel)]="suggestedShow.title"
+              name="title"
+              required
+              placeholder="Enter show title"
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-type">Type</label>
+            <select id="suggest-type" [(ngModel)]="suggestedShow.type" name="type" required>
+              <option [value]="ShowType.tvSeries">TV Series</option>
+              <option [value]="ShowType.anime">Anime</option>
+              <option [value]="ShowType.film">Film</option>
+              <option [value]="ShowType.documentary">Documentary</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-notes">Notes (why should Naomi watch this?)</label>
+            <textarea
+              id="suggest-notes"
+              [(ngModel)]="suggestedShow.notes"
+              name="notes"
+              rows="3"
+              placeholder="Tell Naomi why this show is worth watching..."
+            ></textarea>
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-coverImage">Poster/Cover Art (max 500KB)</label>
+            <input
+              type="file"
+              id="suggest-coverImage"
+              name="coverImage"
+              accept="image/*"
+              (change)="onImageSelected($event, 'suggest')"
+            >
+            @if (suggestShowImagePreview()) {
+              <div class="image-preview">
+                <img [src]="suggestShowImagePreview()" 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')"
@@ -381,6 +450,18 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment } fro
       margin-bottom: 2rem;
     }
 
+    .suggest-form {
+      border: 2px solid #e84393;
+      background: #fff5f9;
+    }
+
+    .suggest-note {
+      color: #666;
+      font-size: 0.9rem;
+      margin-bottom: 1rem;
+      font-style: italic;
+    }
+
     .form-group {
       margin-bottom: 1rem;
     }
@@ -720,6 +801,7 @@ export class ShowsListComponent implements OnInit {
   authService = inject(AuthService);
   commentsService = inject(CommentsService);
   sanitizeService = inject(SanitizeService);
+  suggestionService = inject(SuggestionService);
 
   shows = signal<Show[]>([]);
   loading = signal(true);
@@ -736,9 +818,19 @@ export class ShowsListComponent implements OnInit {
 
   newShowImagePreview = signal<string | null>(null);
   editShowImagePreview = signal<string | null>(null);
+  suggestShowImagePreview = signal<string | null>(null);
   imageError = signal<string | null>(null);
   private readonly MAX_IMAGE_SIZE = 500 * 1024;
 
+  // Suggestion state
+  showSuggestForm = signal(false);
+  suggestedShow: { title: string; type: ShowType; notes?: string; coverImage?: string } = {
+    title: '',
+    type: ShowType.tvSeries,
+    notes: '',
+    coverImage: undefined
+  };
+
   ShowStatus = ShowStatus;
   ShowType = ShowType;
 
@@ -880,7 +972,7 @@ export class ShowsListComponent 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];
 
@@ -906,21 +998,27 @@ export class ShowsListComponent implements OnInit {
       if (target === 'new') {
         this.newShowImagePreview.set(base64);
         this.newShow.coverImage = base64;
-      } else {
+      } else if (target === 'edit') {
         this.editShowImagePreview.set(base64);
         this.editShow.coverImage = base64;
+      } else {
+        this.suggestShowImagePreview.set(base64);
+        this.suggestedShow.coverImage = base64;
       }
     };
     reader.readAsDataURL(file);
   }
 
-  clearImage(target: 'new' | 'edit') {
+  clearImage(target: 'new' | 'edit' | 'suggest') {
     if (target === 'new') {
       this.newShowImagePreview.set(null);
       this.newShow.coverImage = undefined;
-    } else {
+    } else if (target === 'edit') {
       this.editShowImagePreview.set(null);
       this.editShow.coverImage = undefined;
+    } else {
+      this.suggestShowImagePreview.set(null);
+      this.suggestedShow.coverImage = undefined;
     }
     this.imageError.set(null);
   }
@@ -1038,4 +1136,41 @@ export class ShowsListComponent implements OnInit {
       }
     });
   }
+
+  // Suggestion methods
+  toggleSuggestForm() {
+    this.showSuggestForm.update(v => !v);
+    if (!this.showSuggestForm()) {
+      this.resetSuggestForm();
+    }
+  }
+
+  resetSuggestForm() {
+    this.suggestedShow = {
+      title: '',
+      type: ShowType.tvSeries,
+      notes: '',
+      coverImage: undefined
+    };
+    this.suggestShowImagePreview.set(null);
+    this.imageError.set(null);
+  }
+
+  async submitSuggestion() {
+    if (!this.suggestedShow.title) return;
+
+    try {
+      await this.suggestionService.createSuggestion({
+        entityType: SuggestionEntity.SHOW,
+        title: this.suggestedShow.title,
+        type: this.suggestedShow.type,
+        notes: this.suggestedShow.notes,
+        coverImage: this.suggestedShow.coverImage
+      });
+      alert('Thank you for your suggestion! It will be reviewed soon.');
+      this.toggleSuggestForm();
+    } catch {
+      alert('Failed to submit suggestion. Please try again.');
+    }
+  }
 }