initial commit

packages/frontend/src/components/NewRecommendationModal.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'preact/hooks';
+
+interface NewRecommendationModalProps {
+  onClose: () => void;
+  onSubmit: (body: {
+    main_prompt: string;
+    liked_shows: string;
+    disliked_shows: string;
+    themes: string;
+  }) => Promise<void>;
+}
+
+export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationModalProps) {
+  const [mainPrompt, setMainPrompt] = useState('');
+  const [likedShows, setLikedShows] = useState('');
+  const [dislikedShows, setDislikedShows] = useState('');
+  const [themes, setThemes] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    if (!mainPrompt.trim()) return;
+    setLoading(true);
+    try {
+      await onSubmit({
+        main_prompt: mainPrompt.trim(),
+        liked_shows: likedShows.trim(),
+        disliked_shows: dislikedShows.trim(),
+        themes: themes.trim(),
+      });
+      onClose();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBackdropClick = (e: MouseEvent) => {
+    if ((e.target as HTMLElement).classList.contains('modal-backdrop')) {
+      onClose();
+    }
+  };
+
+  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>
+
+        <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-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="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>
+
+          <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="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>
+  );
+}