feat: add suggestion feature

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

@@ -11,7 +11,8 @@ import { GamesService } from '../../services/games.service';
 import { AuthService } from '../../services/auth.service';
 import { CommentsService } from '../../services/comments.service';
 import { SanitizeService } from '../../services/sanitize.service';
-import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@library/shared-types';
+import { SuggestionService } from '../../services/suggestion.service';
+import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEntity } from '@library/shared-types';
 
 @Component({
   selector: 'app-games-list',
@@ -25,6 +26,10 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
           <button (click)="toggleAddForm()" class="btn btn-primary">
             {{ showAddForm() ? 'Cancel' : 'Add Game' }}
           </button>
+        } @else if (authService.isAuthenticated() && !authService.user()?.isBanned) {
+          <button (click)="toggleSuggestForm()" class="btn btn-primary">
+            {{ showSuggestForm() ? 'Cancel' : 'Suggest a Game' }}
+          </button>
         }
       </div>
 
@@ -198,6 +203,71 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
         </form>
       }
 
+      @if (showSuggestForm() && !authService.isAdmin() && authService.isAuthenticated()) {
+        <form (ngSubmit)="submitSuggestion()" class="add-form suggest-form">
+          <h3>Suggest a Game</h3>
+          <p class="suggest-note">Your suggestion will be reviewed by Naomi. If accepted, it will be added to the backlog!</p>
+          <div class="form-group">
+            <label for="suggest-title">Title</label>
+            <input
+              type="text"
+              id="suggest-title"
+              [(ngModel)]="suggestedGame.title"
+              name="title"
+              required
+              placeholder="Enter game title"
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-platform">Platform</label>
+            <input
+              type="text"
+              id="suggest-platform"
+              [(ngModel)]="suggestedGame.platform"
+              name="platform"
+              placeholder="PC, PS5, Xbox, Switch, etc."
+            >
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-notes">Notes (why should Naomi play this?)</label>
+            <textarea
+              id="suggest-notes"
+              [(ngModel)]="suggestedGame.notes"
+              name="notes"
+              rows="3"
+              placeholder="Tell Naomi why this game is worth playing..."
+            ></textarea>
+          </div>
+
+          <div class="form-group">
+            <label for="suggest-coverImage">Box Art (max 500KB)</label>
+            <input
+              type="file"
+              id="suggest-coverImage"
+              name="coverImage"
+              accept="image/*"
+              (change)="onImageSelected($event, 'suggest')"
+            >
+            @if (suggestGameImagePreview()) {
+              <div class="image-preview">
+                <img [src]="suggestGameImagePreview()" alt="Box art 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 +455,18 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment } from '@librar
       margin-bottom: 2rem;
     }
 
+    .suggest-form {
+      border: 2px solid #ff6b6b;
+      background: #fff9f9;
+    }
+
+    .suggest-note {
+      color: #666;
+      font-size: 0.9rem;
+      margin-bottom: 1rem;
+      font-style: italic;
+    }
+
     .form-group {
       margin-bottom: 1rem;
     }
@@ -723,6 +805,7 @@ export class GamesListComponent implements OnInit {
   authService = inject(AuthService);
   commentsService = inject(CommentsService);
   sanitizeService = inject(SanitizeService);
+  suggestionService = inject(SuggestionService);
 
   games = signal<Game[]>([]);
   loading = signal(true);
@@ -741,9 +824,19 @@ export class GamesListComponent implements OnInit {
   // Image upload state
   newGameImagePreview = signal<string | null>(null);
   editGameImagePreview = signal<string | null>(null);
+  suggestGameImagePreview = signal<string | null>(null);
   imageError = signal<string | null>(null);
   private readonly MAX_IMAGE_SIZE = 500 * 1024; // 500KB
 
+  // Suggestion state
+  showSuggestForm = signal(false);
+  suggestedGame: { title: string; platform?: string; notes?: string; coverImage?: string } = {
+    title: '',
+    platform: '',
+    notes: '',
+    coverImage: undefined
+  };
+
   // Expose GameStatus enum to template
   GameStatus = GameStatus;
 
@@ -878,7 +971,7 @@ export class GamesListComponent implements OnInit {
   }
 
   // Image handling methods
-  onImageSelected(event: Event, target: 'new' | 'edit') {
+  onImageSelected(event: Event, target: 'new' | 'edit' | 'suggest') {
     const input = event.target as HTMLInputElement;
     const file = input.files?.[0];
 
@@ -904,21 +997,27 @@ export class GamesListComponent implements OnInit {
       if (target === 'new') {
         this.newGameImagePreview.set(base64);
         this.newGame.coverImage = base64;
-      } else {
+      } else if (target === 'edit') {
         this.editGameImagePreview.set(base64);
         this.editGame.coverImage = base64;
+      } else {
+        this.suggestGameImagePreview.set(base64);
+        this.suggestedGame.coverImage = base64;
       }
     };
     reader.readAsDataURL(file);
   }
 
-  clearImage(target: 'new' | 'edit') {
+  clearImage(target: 'new' | 'edit' | 'suggest') {
     if (target === 'new') {
       this.newGameImagePreview.set(null);
       this.newGame.coverImage = undefined;
-    } else {
+    } else if (target === 'edit') {
       this.editGameImagePreview.set(null);
       this.editGame.coverImage = undefined;
+    } else {
+      this.suggestGameImagePreview.set(null);
+      this.suggestedGame.coverImage = undefined;
     }
     this.imageError.set(null);
   }
@@ -1037,4 +1136,41 @@ export class GamesListComponent implements OnInit {
       }
     });
   }
+
+  // Suggestion methods
+  toggleSuggestForm() {
+    this.showSuggestForm.update(v => !v);
+    if (!this.showSuggestForm()) {
+      this.resetSuggestForm();
+    }
+  }
+
+  resetSuggestForm() {
+    this.suggestedGame = {
+      title: '',
+      platform: '',
+      notes: '',
+      coverImage: undefined
+    };
+    this.suggestGameImagePreview.set(null);
+    this.imageError.set(null);
+  }
+
+  async submitSuggestion() {
+    if (!this.suggestedGame.title) return;
+
+    try {
+      await this.suggestionService.createSuggestion({
+        entityType: SuggestionEntity.GAME,
+        title: this.suggestedGame.title,
+        platform: this.suggestedGame.platform,
+        notes: this.suggestedGame.notes,
+        coverImage: this.suggestedGame.coverImage
+      });
+      alert('Thank you for your suggestion! It will be reviewed soon.');
+      this.toggleSuggestForm();
+    } catch {
+      alert('Failed to submit suggestion. Please try again.');
+    }
+  }
 }