adding movies & web search tool

packages/frontend/src/components/NewRecommendationModal.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'preact/hooks';
+import type { MediaType } from '../types/index.js';
 import './Modal.css';
 
 interface NewRecommendationModalProps {
@@ -9,17 +10,30 @@ interface NewRecommendationModalProps {
     disliked_shows: string;
     themes: string;
     brainstorm_count?: number;
+    media_type: MediaType;
+    use_web_search?: boolean;
   }) => Promise<void>;
 }
 
 export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationModalProps) {
+  const [step, setStep] = useState<'type' | 'form'>('type');
+  const [mediaType, setMediaType] = useState<MediaType>('tv_show');
   const [mainPrompt, setMainPrompt] = useState('');
   const [likedShows, setLikedShows] = useState('');
   const [dislikedShows, setDislikedShows] = useState('');
   const [themes, setThemes] = useState('');
   const [brainstormCount, setBrainstormCount] = useState(100);
+  const [useWebSearch, setUseWebSearch] = useState(false);
   const [loading, setLoading] = useState(false);
 
+  const mediaLabel = mediaType === 'movie' ? 'Movie' : 'TV Show';
+  const mediaPluralLabel = mediaType === 'movie' ? 'movies' : 'shows';
+
+  const handleSelectType = (type: MediaType) => {
+    setMediaType(type);
+    setStep('form');
+  };
+
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
     if (!mainPrompt.trim()) return;
@@ -31,6 +45,8 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
         disliked_shows: dislikedShows.trim(),
         themes: themes.trim(),
         brainstorm_count: brainstormCount,
+        media_type: mediaType,
+        use_web_search: useWebSearch,
       });
       onClose();
     } finally {
@@ -47,84 +63,125 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
   return (
     <div class="modal-backdrop" onClick={handleBackdropClick}>
       <div class="modal">
-        <div class="modal-header">
-          <h2>New Recommendation</h2>
-          <button class="modal-close" onClick={onClose} aria-label="Close">×</button>
-        </div>
+        {step === 'type' ? (
+          <>
+            <div class="modal-header">
+              <h2>New Recommendation</h2>
+              <button class="modal-close" onClick={onClose} aria-label="Close">×</button>
+            </div>
+            <div class="modal-type-select">
+              <p class="modal-type-hint">What would you like recommendations for?</p>
+              <div class="modal-type-cards">
+                <button class="type-card" onClick={() => handleSelectType('tv_show')}>
+                  <span class="type-card-icon">📺</span>
+                  <span class="type-card-label">TV Shows</span>
+                  <span class="type-card-desc">Series &amp; episodic content</span>
+                </button>
+                <button class="type-card" onClick={() => handleSelectType('movie')}>
+                  <span class="type-card-icon">🎬</span>
+                  <span class="type-card-label">Movies</span>
+                  <span class="type-card-desc">Feature films &amp; cinema</span>
+                </button>
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            <div class="modal-header">
+              <div class="modal-header-left">
+                <button class="modal-back" onClick={() => setStep('type')} aria-label="Back">←</button>
+                <h2>New {mediaLabel} Recommendation</h2>
+              </div>
+              <button class="modal-close" onClick={onClose} aria-label="Close">×</button>
+            </div>
 
-        <form class="modal-form" onSubmit={handleSubmit}>
-          <div class="form-group">
-            <label for="main-prompt">What are you looking for?</label>
-            <textarea
-              id="main-prompt"
-              class="form-textarea"
-              placeholder="Describe what you want to watch. Be as specific as you like — mood, themes, setting, what you've enjoyed before..."
-              value={mainPrompt}
-              onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
-              rows={5}
-              required
-            />
-          </div>
+            <form class="modal-form" onSubmit={handleSubmit}>
+              <div class="form-group">
+                <label for="main-prompt">What are you looking for?</label>
+                <textarea
+                  id="main-prompt"
+                  class="form-textarea"
+                  placeholder={`Describe what you want to watch. Be as specific as you like — mood, themes, setting, what you've enjoyed before...`}
+                  value={mainPrompt}
+                  onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
+                  rows={5}
+                  required
+                />
+              </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="liked-shows">{mediaLabel}s you liked</label>
+                <input
+                  id="liked-shows"
+                  type="text"
+                  class="form-input"
+                  placeholder={mediaType === 'movie' ? 'e.g. Inception, The Godfather' : '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">{mediaLabel}s you disliked</label>
+                <input
+                  id="disliked-shows"
+                  type="text"
+                  class="form-input"
+                  placeholder={mediaType === 'movie' ? 'e.g. Transformers' : 'e.g. Game of Thrones'}
+                  value={dislikedShows}
+                  onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
+                />
+              </div>
 
-          <div class="form-group">
-            <label for="themes">Themes and requirements</label>
-            <input
-              id="themes"
-              type="text"
-              class="form-input"
-              placeholder="e.g. dramatic setting, historical, sci-fi, etc."
-              value={themes}
-              onInput={(e) => setThemes((e.target as HTMLInputElement).value)}
-            />
-          </div>
+              <div class="form-group">
+                <label for="themes">Themes and requirements</label>
+                <input
+                  id="themes"
+                  type="text"
+                  class="form-input"
+                  placeholder="e.g. dramatic setting, historical, sci-fi, etc."
+                  value={themes}
+                  onInput={(e) => setThemes((e.target as HTMLInputElement).value)}
+                />
+              </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="form-group">
+                <label for="brainstorm-count">{mediaLabel}s 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
-            </button>
-            <button type="submit" class="btn-primary" disabled={loading || !mainPrompt.trim()}>
-              {loading ? 'Starting…' : 'Get Recommendations'}
-            </button>
-          </div>
-        </form>
+              <div class="form-group-toggle">
+                <label class="toggle-label" for="web-search">
+                  <div class="toggle-text">
+                    <span class="toggle-title">Web Search</span>
+                    <span class="toggle-desc">Use real-time web search for more accurate and up-to-date {mediaPluralLabel}</span>
+                  </div>
+                  <div class={`toggle-switch${useWebSearch ? ' on' : ''}`} onClick={() => setUseWebSearch((v) => !v)}>
+                    <div class="toggle-knob" />
+                  </div>
+                </label>
+              </div>
+
+              <div class="modal-actions">
+                <button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
+                  Cancel
+                </button>
+                <button type="submit" class="btn-primary" disabled={loading || !mainPrompt.trim()}>
+                  {loading ? 'Starting…' : 'Get Recommendations'}
+                </button>
+              </div>
+            </form>
+          </>
+        )}
       </div>
     </div>
   );