adding movies & web search tool

2026-03-26 20:35:22 -03:00
parent 6fdfc3797a
commit 1437092a42
25 changed files with 450 additions and 135 deletions
@@ -103,3 +103,145 @@
  gap: 10px;
  padding-top: 4px;
 }
+
+/* ── Type selection step ─────────────────────────────────── */
+
+.modal-type-select {
+  padding: 16px 20px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.modal-type-hint {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.modal-type-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.type-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 4rem 2rem;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  text-align: center;
+}
+
+.type-card:hover {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+}
+
+.type-card-icon {
+  font-size: 32px;
+  line-height: 1;
+}
+
+.type-card-label {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.type-card-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* ── Modal header back button ────────────────────────────── */
+
+.modal-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.modal-back {
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: var(--text-muted);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 4px 0 0;
+}
+
+.modal-back:hover {
+  color: var(--text);
+}
+
+/* ── Web search toggle ───────────────────────────────────── */
+
+.form-group-toggle {
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--border);
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  gap: 16px;
+}
+
+.toggle-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.toggle-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.toggle-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.toggle-switch {
+  flex-shrink: 0;
+  width: 40px;
+  height: 22px;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.toggle-switch.on {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+
+.toggle-switch.on .toggle-knob {
+  transform: translateX(18px);
+}
@@ -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>
  );
@@ -5,7 +5,7 @@ import type { CuratorOutput, CuratorCategory } from '../types/index.js';
 interface RecommendationCardProps {
  show: CuratorOutput;
  existingFeedback?: { stars: number; feedback: string };
-  onFeedback: (tv_show_name: string, stars: number, feedback: string) => Promise<void>;
+  onFeedback: (item_name: string, stars: number, feedback: string) => Promise<void>;
 }

 const CATEGORY_COLORS: Record<CuratorCategory, string> = {
@@ -121,4 +121,25 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  flex: 1;
+}
+
+.sidebar-type-badge {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.sidebar-type-tv_show {
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
+}
+
+.sidebar-type-movie {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fbbf24;
 }
@@ -53,6 +53,9 @@ export function Sidebar({ list, selectedId, onSelect, onNewClick }: SidebarProps
              {statusIcon(item.status)}
            </span>
            <span class="sidebar-item-title">{item.title}</span>
+            <span class={`sidebar-type-badge sidebar-type-${item.media_type}`}>
+              {item.media_type === 'movie' ? 'Film' : 'TV'}
+            </span>
          </li>
        ))}
      </ul>