From 18b3c572f12f8d5aff86e3adc4fd95d15165a229 Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 11:34:40 +0200
Subject: [PATCH] Simplify likes display: plain text in meta row, no bar

Bar depends on reliable dislike data which YouTube doesn't expose.
Show likes inline as "X.XM likes" alongside views and date instead.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Watch.jsx | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/frontend/src/pages/Watch.jsx b/frontend/src/pages/Watch.jsx
index fdbf8c3..05e958e 100644
--- a/frontend/src/pages/Watch.jsx
+++ b/frontend/src/pages/Watch.jsx
@@ -894,6 +894,7 @@ export default function Watch() {
             <div className="flex items-center gap-2 text-sm text-zinc-500 flex-wrap">
               {date && <span>{date}</span>}
               {video?.view_count > 0 && <><span>·</span><span>{formatViews(video.view_count)}</span></>}
+              {video?.like_count > 0 && <><span>·</span><span>{formatViews(video.like_count).replace(" views", "")} likes</span></>}
               {video?.category && <><span>·</span><span>{video.category}</span></>}
               {video?.duration_seconds && (
                 <><span>·</span>
@@ -911,25 +912,6 @@ export default function Watch() {
               )}
             </div>
 
-            {/* Like/dislike bar */}
-            {video?.like_count > 0 && (
-              <div className="flex flex-col gap-1 w-full">
-                <div className="flex justify-between text-xs text-zinc-500">
-                  <span>{formatViews(video.like_count).replace(" views", "")} likes</span>
-                  {video?.dislike_count > 0 && <span>{formatViews(video.dislike_count).replace(" views", "")} dislikes</span>}
-                </div>
-                <div className="h-1 w-full bg-zinc-800 rounded-full overflow-hidden">
-                  <div
-                    className="h-full bg-blue-500 rounded-full"
-                    style={{
-                      width: video?.dislike_count > 0
-                        ? `${(video.like_count / (video.like_count + video.dislike_count)) * 100}%`
-                        : "100%",
-                    }}
-                  />
-                </div>
-              </div>
-            )}
 
             {/* Actions */}
             <div className="flex items-center gap-2 flex-wrap">