feature: new changes!

packages/frontend/src/components/NewRecommendationModal.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'preact/hooks';
+import './Modal.css';
 
 interface NewRecommendationModalProps {
   onClose: () => void;
@@ -7,6 +8,7 @@ interface NewRecommendationModalProps {
     liked_shows: string;
     disliked_shows: string;
     themes: string;
+    brainstorm_count?: number;
   }) => Promise<void>;
 }
 
@@ -15,6 +17,7 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
   const [likedShows, setLikedShows] = useState('');
   const [dislikedShows, setDislikedShows] = useState('');
   const [themes, setThemes] = useState('');
+  const [brainstormCount, setBrainstormCount] = useState(100);
   const [loading, setLoading] = useState(false);
 
   const handleSubmit = async (e: Event) => {
@@ -27,6 +30,7 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
         liked_shows: likedShows.trim(),
         disliked_shows: dislikedShows.trim(),
         themes: themes.trim(),
+        brainstorm_count: brainstormCount,
       });
       onClose();
     } finally {
@@ -62,30 +66,28 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
             />
           </div>
 
-          <div class="form-row">
-            <div class="form-group">
-              <label for="liked-shows">Shows you liked</label>
-              <input
-                id="liked-shows"
-                type="text"
-                class="form-input"
-                placeholder="e.g. Breaking Bad, The Wire"
-                value={likedShows}
-                onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
-              />
-            </div>
+          <div class="form-group">
+            <label for="liked-shows">Shows you liked</label>
+            <input
+              id="liked-shows"
+              type="text"
+              class="form-input"
+              placeholder="e.g. Breaking Bad, The Wire"
+              value={likedShows}
+              onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
+            />
+          </div>
 
-            <div class="form-group">
-              <label for="disliked-shows">Shows you disliked</label>
-              <input
-                id="disliked-shows"
-                type="text"
-                class="form-input"
-                placeholder="e.g. Game of Thrones"
-                value={dislikedShows}
-                onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
-              />
-            </div>
+          <div class="form-group">
+            <label for="disliked-shows">Shows you disliked</label>
+            <input
+              id="disliked-shows"
+              type="text"
+              class="form-input"
+              placeholder="e.g. Game of Thrones"
+              value={dislikedShows}
+              onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
+            />
           </div>
 
           <div class="form-group">
@@ -100,6 +102,20 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
             />
           </div>
 
+          <div class="form-group">
+            <label for="brainstorm-count">Shows to brainstorm ({brainstormCount})</label>
+            <input
+              id="brainstorm-count"
+              type="range"
+              class="form-input"
+              min={50}
+              max={200}
+              step={10}
+              value={brainstormCount}
+              onInput={(e) => setBrainstormCount(Number((e.target as HTMLInputElement).value))}
+            />
+          </div>
+
           <div class="modal-actions">
             <button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
               Cancel