From ed55478599992c6a26e889dc5792dcee3dca5ddc Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 17:01:50 +0200
Subject: [PATCH] Minimal UX pass: cut action clutter, more breathing room
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- VideoCard: actions now hover-only everywhere (was always-visible on mobile)
- Watch: remove Good/Bad rating chips — Like covers positive signal,
  dismiss/skip covers negative. Fewer buttons, same data.
- Watch: PiP and Theater are now icon-only (no label)
- Watch: increase content gap to gap-4/gap-5 for more breathing room

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

diff --git a/frontend/src/components/VideoCard.jsx b/frontend/src/components/VideoCard.jsx
index 792c202..497a18c 100644
--- a/frontend/src/components/VideoCard.jsx
+++ b/frontend/src/components/VideoCard.jsx
@@ -318,8 +318,8 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
             </p>
           )}
 
-          {/* Actions — always visible on mobile, fade on desktop */}
-          <div className="mt-auto pt-1 sm:opacity-0 sm:pointer-events-none sm:group-hover:opacity-100 sm:group-hover:pointer-events-auto sm:transition-opacity sm:duration-150">
+          {/* Actions — hover only everywhere */}
+          <div className="mt-auto pt-1 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity duration-150">
             {actions}
           </div>
         </div>
diff --git a/frontend/src/pages/Watch.jsx b/frontend/src/pages/Watch.jsx
index e27c0b9..3538c18 100644
--- a/frontend/src/pages/Watch.jsx
+++ b/frontend/src/pages/Watch.jsx
@@ -4,7 +4,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   getVideoByYtId, updateProgress, createDownload, getDownload, deleteDownload,
   followChannelByUrl, toggleQueue, toggleLike, getChannelVideos, getChannel,
-  getSettings, updateSettings, getRelatedVideos, getDownloads, rateVideo,
+  getSettings, updateSettings, getRelatedVideos, getDownloads,
   getBookmarks, createBookmark, updateBookmark, deleteBookmark, importChapters, clearChapters,
   getCollections, addToCollection, getQueue,
   getVideoComments, refreshVideoComments,
@@ -561,7 +561,6 @@ export default function Watch() {
   const [currentTime, setCurrentTime] = useState(0);
   const [queued, setQueued] = useState(null);
   const [liked, setLiked] = useState(null);
-  const [rating, setRating] = useState(null);
   const [selectedQuality, setSelectedQuality] = useState(null);
   const [speed, setSpeed] = useState(1);
   const [autoplay, setAutoplay] = useState(false);
@@ -773,11 +772,6 @@ export default function Watch() {
     onSuccess: (res) => { setLiked(res.data.liked); qc.invalidateQueries({ queryKey: ["liked-videos"] }); },
   });
 
-  const rateMut = useMutation({
-    mutationFn: (r) => rateVideo(video.id, r),
-    onSuccess: (res) => setRating(res.data.rating),
-  });
-
   const handlePiP = useCallback(async () => {
     if (!videoRef.current) return;
     try {
@@ -793,7 +787,6 @@ export default function Watch() {
   const startAt = video?.watch_progress_seconds ?? 0;
   const isQueued = queued ?? video?.queued ?? false;
   const isLiked = liked ?? video?.liked ?? false;
-  const currentRating = rating ?? video?.rating ?? null;
   const dlComplete = dlStatus?.status === "complete" || video?.is_downloaded;
   const isFollowed = followMut.isSuccess || video?.channel_followed;
   const subs = formatSubs(channel?.subscriber_count);
@@ -844,7 +837,7 @@ export default function Watch() {
       <div className={theater ? "flex flex-col gap-6" : "flex flex-col xl:flex-row gap-6"}>
 
         {/* ── Left: video + info ───────────────────────────────────────────── */}
-        <div className={theater ? "w-full flex flex-col gap-3 sm:gap-4" : "flex-1 min-w-0 flex flex-col gap-3 sm:gap-4"}>
+        <div className={theater ? "w-full flex flex-col gap-4 sm:gap-5" : "flex-1 min-w-0 flex flex-col gap-4 sm:gap-5"}>
 
           {/* Player */}
           <div className={theater ? "w-full aspect-video bg-black overflow-hidden shadow-2xl" : "w-full aspect-video bg-black rounded-2xl overflow-hidden shadow-2xl"}>
@@ -981,32 +974,6 @@ export default function Watch() {
                 </Chip>
               )}
 
-              {video?.id && (
-                <>
-                  <Chip
-                    active={currentRating === 1}
-                    onClick={() => rateMut.mutate(currentRating === 1 ? 0 : 1)}
-                    disabled={rateMut.isPending}
-                  >
-                    <svg className="w-4 h-4" fill={currentRating === 1 ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z"/>
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3"/>
-                    </svg>
-                    Good
-                  </Chip>
-                  <Chip
-                    active={currentRating === -1}
-                    onClick={() => rateMut.mutate(currentRating === -1 ? 0 : -1)}
-                    disabled={rateMut.isPending}
-                  >
-                    <svg className="w-4 h-4" fill={currentRating === -1 ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z"/>
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17"/>
-                    </svg>
-                    Not for me
-                  </Chip>
-                </>
-              )}
 
               {video?.id && (
                 <Chip active={isQueued} onClick={() => queueMut.mutate()} disabled={queueMut.isPending}>
@@ -1018,16 +985,15 @@ export default function Watch() {
               )}
 
               {fileReady && document.pictureInPictureEnabled && (
-                <Chip onClick={handlePiP}>
+                <Chip onClick={handlePiP} title="Picture in picture">
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <rect x="2" y="4" width="20" height="16" rx="2" strokeWidth="2"/>
                     <rect x="12" y="12" width="8" height="6" rx="1.5" strokeWidth="2"/>
                   </svg>
-                  Mini
                 </Chip>
               )}
 
-              <Chip active={theater} onClick={() => setTheater(t => !t)}>
+              <Chip active={theater} onClick={() => setTheater(t => !t)} title={theater ? "Exit theater" : "Theater mode"}>
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   {theater ? (
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 9L4 4m0 5V4h5M15 9l5-5m0 5V4h-5M9 15l-5 5m0-5v5h5M15 15l5 5m0-5v5h-5" />
@@ -1035,7 +1001,6 @@ export default function Watch() {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V5a1 1 0 011-1h3M4 16v3a1 1 0 001 1h3m10-4v3a1 1 0 01-1 1h-3M20 8V5a1 1 0 00-1-1h-3" />
                   )}
                 </svg>
-                Theater
               </Chip>
             </div>
           </div>