From d6035e6f1f11fffaa0d90c03db3c34fd2b27e29a Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 16:53:01 +0200
Subject: [PATCH] Trim description clutter: strip URLs in cards, tighter
 preview in Watch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- VideoCard list variant: strip URLs/affiliate links before rendering,
  collapse to 1 line (was 2 lines of raw text including https:// spam)
- DescriptionBox collapsed preview: 2 lines / 200 chars before "Show more"
  (was 4 lines — too much affiliate crap before you can dismiss it)
- Full description still shown when expanded in Watch view

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/VideoCard.jsx | 17 +++++++++++++----
 frontend/src/pages/Watch.jsx          |  4 ++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/VideoCard.jsx b/frontend/src/components/VideoCard.jsx
index d01a0a1..792c202 100644
--- a/frontend/src/components/VideoCard.jsx
+++ b/frontend/src/components/VideoCard.jsx
@@ -4,6 +4,15 @@ import { useNavigate } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createDownload, toggleQueue, toggleLike, dismissDiscovery, getSettings } from "../api";
 
+function snippetText(desc) {
+  if (!desc) return "";
+  return desc
+    .replace(/https?:\/\/\S+/g, "")   // strip URLs
+    .replace(/\n+/g, " ")              // flatten newlines
+    .replace(/\s{2,}/g, " ")           // collapse whitespace
+    .trim();
+}
+
 function formatDuration(secs) {
   if (!secs) return null;
   const h = Math.floor(secs / 3600);
@@ -302,10 +311,10 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
             )}
           </div>
 
-          {/* Description — desktop only, 2 lines max */}
-          {video.description && (
-            <p className="hidden sm:block text-[11px] leading-relaxed text-zinc-500 line-clamp-2">
-              {video.description.replace(/\n+/g, " ")}
+          {/* Description snippet — desktop only, URLs stripped */}
+          {video.description && snippetText(video.description) && (
+            <p className="hidden sm:block text-[11px] leading-relaxed text-zinc-500 line-clamp-1">
+              {snippetText(video.description)}
             </p>
           )}
 
diff --git a/frontend/src/pages/Watch.jsx b/frontend/src/pages/Watch.jsx
index efdb36c..e27c0b9 100644
--- a/frontend/src/pages/Watch.jsx
+++ b/frontend/src/pages/Watch.jsx
@@ -66,8 +66,8 @@ function linkify(text) {
 function DescriptionBox({ text }) {
   const [expanded, setExpanded] = useState(false);
   const lines = text.split("\n");
-  const hasMore = lines.length > 4 || text.length > 300;
-  const displayed = expanded ? text : lines.slice(0, 4).join("\n") + (hasMore ? "…" : "");
+  const hasMore = lines.length > 2 || text.length > 200;
+  const displayed = expanded ? text : lines.slice(0, 2).join("\n") + (hasMore ? "…" : "");
 
   return (
     <div