Add shareable search links and watched movie indicators

Share: "Copy Link" button generates a URL with ?s={history_id} that
loads the saved search results without auth. Recipients see the same
movie picks.

Watched: When viewing history results or shared searches, cards for
movies the logged-in user has since watched are dimmed with a green
"Watched" badge. Uses a new POST /api/library/watch-check endpoint.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/routers/library.py

@@ -33,6 +33,28 @@ async def library_stats(request: Request):
         await db.close()
 
 
+@router.post("/watch-check")
+async def watch_check(request: Request):
+    """Given a list of jellyfin_ids, return which ones the current user has watched."""
+    user = await get_current_user(request)
+    body = await request.json()
+    ids = body.get("jellyfin_ids", [])
+    if not ids:
+        return {"watched": []}
+
+    db = await get_db()
+    try:
+        placeholders = ",".join("?" for _ in ids)
+        cursor = await db.execute(
+            f"SELECT jellyfin_id FROM watch_state WHERE user_id = ? AND is_played = 1 AND jellyfin_id IN ({placeholders})",
+            [user["id"]] + ids,
+        )
+        rows = await cursor.fetchall()
+        return {"watched": [row["jellyfin_id"] for row in rows]}
+    finally:
+        await db.close()
+
+
 @router.post("/sync")
 async def trigger_sync(request: Request):
     await get_current_user(request)

app/routers/mood.py

@@ -175,6 +175,29 @@ async def get_search_history(request: Request):
         await db.close()
 
 
+@router.get("/history/shared/{entry_id}")
+async def get_shared_history(entry_id: int):
+    """Public endpoint — returns a history entry by ID (no auth required)."""
+    db = await get_db()
+    try:
+        cursor = await db.execute(
+            "SELECT id, mood, results, meta, created_at FROM search_history WHERE id = ?",
+            (entry_id,),
+        )
+        row = await cursor.fetchone()
+        if not row:
+            raise HTTPException(status_code=404, detail="Search not found")
+        return {
+            "id": row["id"],
+            "mood": row["mood"],
+            "results": json.loads(row["results"]),
+            "meta": json.loads(row["meta"]) if row["meta"] else {},
+            "created_at": row["created_at"],
+        }
+    finally:
+        await db.close()
+
+
 @router.delete("/history/{entry_id}")
 async def delete_history_entry(entry_id: int, request: Request):
     user = await get_current_user(request)

app/static/app.js

@@ -217,6 +217,7 @@ function renderResults(data, append = false) {
     data.recommendations.forEach(movie => {
         const card = document.createElement('div');
         card.className = 'movie-card bg-dark-200 rounded-xl overflow-hidden border border-gray-800';
+        card.dataset.jellyfinId = movie.jellyfin_id;
         card.innerHTML = `
             <div class="aspect-[2/3] bg-dark-300 relative">
                 <img src="${movie.poster_url}" alt="${movie.title}"
@@ -315,11 +316,13 @@ async function loadHistory() {
     } catch { /* ignore */ }
 }
 
-function showHistoryResults(entry) {
+async function showHistoryResults(entry) {
     document.getElementById('mood-input').value = entry.mood;
     const data = { recommendations: entry.results, meta: entry.meta };
     renderResults(data);
     window.scrollTo({ top: 0, behavior: 'smooth' });
+    // Check watch state and dim watched movies
+    await markWatchedCards(entry.results.map(r => r.jellyfin_id));
 }
 
 function toggleHistoryVisibility(show) {
@@ -334,6 +337,51 @@ function toggleHistoryVisibility(show) {
     }
 }
 
+// --- Watch Check ---
+
+async function markWatchedCards(jellyfinIds) {
+    if (!currentUser || !jellyfinIds.length) return;
+    try {
+        const res = await fetch(`${API}/api/library/watch-check`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ jellyfin_ids: jellyfinIds })
+        });
+        if (!res.ok) return;
+        const { watched } = await res.json();
+        if (!watched.length) return;
+        const watchedSet = new Set(watched);
+        document.querySelectorAll('.movie-card').forEach(card => {
+            if (watchedSet.has(card.dataset.jellyfinId)) {
+                card.classList.add('watched');
+            }
+        });
+    } catch { /* ignore */ }
+}
+
+// --- Shared Search ---
+
+async function loadSharedSearch() {
+    const params = new URLSearchParams(window.location.search);
+    const sharedId = params.get('s');
+    if (!sharedId) return false;
+    try {
+        const res = await fetch(`${API}/api/history/shared/${sharedId}`);
+        if (!res.ok) return false;
+        const entry = await res.json();
+        document.getElementById('mood-input').value = entry.mood;
+        const data = { recommendations: entry.results, meta: entry.meta };
+        renderResults(data);
+        // If logged in, check watch state
+        if (currentUser) {
+            await markWatchedCards(entry.results.map(r => r.jellyfin_id));
+        }
+        return true;
+    } catch {
+        return false;
+    }
+}
+
 // --- Library Stats ---
 
 async function loadStats() {
@@ -418,6 +466,20 @@ document.getElementById('reroll-btn').addEventListener('click', () => {
     findMovies(shownMovieIds);
 });
 
+// Share / Copy Link
+document.getElementById('share-btn').addEventListener('click', () => {
+    if (!currentHistoryId) return;
+    const url = `${window.location.origin}${window.location.pathname}?s=${currentHistoryId}`;
+    navigator.clipboard.writeText(url).then(() => {
+        const btn = document.getElementById('share-btn');
+        btn.textContent = 'Copied!';
+        setTimeout(() => { btn.textContent = 'Copy Link'; }, 2000);
+    }).catch(() => {
+        // Fallback for insecure contexts
+        prompt('Copy this link:', `${window.location.origin}${window.location.pathname}?s=${currentHistoryId}`);
+    });
+});
+
 // Reset
 document.getElementById('reset-btn').addEventListener('click', () => {
     // Clear mood input and state
@@ -445,3 +507,4 @@ document.getElementById('reset-btn').addEventListener('click', () => {
 
 // --- Init ---
 checkAuth();
+loadSharedSearch();

app/static/index.html

@@ -109,10 +109,13 @@
             <div id="results" class="hidden">
                 <div id="results-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>
                 <div id="results-meta" class="mt-6 text-center text-gray-500 text-sm"></div>
-                <div class="mt-4 text-center">
+                <div class="mt-4 flex items-center justify-center gap-3">
                     <button id="reroll-btn" class="px-6 py-2 border border-indigo-600/50 text-indigo-400 hover:bg-indigo-600/20 rounded-lg font-semibold transition-colors text-sm">
                         Show Me More
                     </button>
+                    <button id="share-btn" class="px-4 py-2 border border-gray-700 text-gray-500 hover:text-gray-300 hover:border-gray-500 rounded-lg transition-colors text-sm">
+                        Copy Link
+                    </button>
                 </div>
             </div>
 

app/static/styles.css

@@ -50,3 +50,23 @@
     border-color: #22c55e;
     color: #86efac;
 }
+
+.movie-card.watched {
+    opacity: 0.45;
+}
+.movie-card.watched::after {
+    content: 'Watched';
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: rgba(34, 197, 94, 0.8);
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    z-index: 10;
+}
+.movie-card.watched {
+    position: relative;
+}