From 94f74215e2f782de0ac665610b924f91c751ee04 Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 17:21:02 +0200
Subject: [PATCH] Consistency sweep: fix switcher layout, gaps, buttons, empty
 states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Home: mode switcher moved to its own row (no longer crammed next to
  title on mobile), hide-watched simplified to text-only toggle
- Home/History/Discovery: pagination buttons text-sm → text-xs, page
  counter text-sm → text-xs
- Liked/Downloads/SearchResults: top-level gap-8 → gap-6
- Liked: refresh button px-4 py-2 text-sm → px-3 py-1.5 text-xs
- Empty states: standardize to text-zinc-500 text-sm across Queue,
  ContinueWatching, History, Following, Discovery, Liked
- Following: "Latest uploads" tab label → "Feed"
- Home: remove -mt-3 hacks from mode description rows

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ContinueWatching.jsx |  2 +-
 frontend/src/pages/Discovery.jsx        | 14 ++---
 frontend/src/pages/Downloads.jsx        |  2 +-
 frontend/src/pages/Following.jsx        |  2 +-
 frontend/src/pages/History.jsx          |  8 +--
 frontend/src/pages/Home.jsx             | 84 +++++++++++--------------
 frontend/src/pages/Liked.jsx            |  6 +-
 frontend/src/pages/Queue.jsx            |  2 +-
 frontend/src/pages/SearchResults.jsx    |  2 +-
 9 files changed, 57 insertions(+), 65 deletions(-)

diff --git a/frontend/src/pages/ContinueWatching.jsx b/frontend/src/pages/ContinueWatching.jsx
index 123b5fe..3b3472b 100644
--- a/frontend/src/pages/ContinueWatching.jsx
+++ b/frontend/src/pages/ContinueWatching.jsx
@@ -25,7 +25,7 @@ export default function ContinueWatchingPage() {
             </svg>
           </div>
           <div>
-            <p className="text-zinc-300 font-medium">Nothing in progress</p>
+            <p className="text-zinc-500 text-sm">Nothing in progress</p>
             <p className="text-zinc-500 text-sm mt-1">
               Videos you've started but not finished will appear here.
             </p>
diff --git a/frontend/src/pages/Discovery.jsx b/frontend/src/pages/Discovery.jsx
index 20b73af..d1ad2e6 100644
--- a/frontend/src/pages/Discovery.jsx
+++ b/frontend/src/pages/Discovery.jsx
@@ -284,7 +284,7 @@ export default function DiscoveryPage() {
             </svg>
           </div>
           <div>
-            <p className="text-zinc-300 font-medium">Nothing here yet</p>
+            <p className="text-zinc-500 text-sm">Nothing here yet</p>
             <p className="text-zinc-500 text-sm mt-1 max-w-xs">
               Follow a few channels first, then hit "Find more" to discover similar ones.
             </p>
@@ -308,15 +308,15 @@ export default function DiscoveryPage() {
             <button
               onClick={() => { setChannelPage(p => p - 1); scrollToTop(); }}
               disabled={channelPage === 0}
-              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
               ← Prev
             </button>
-            <span className="text-zinc-500 text-sm tabular-nums">Page {channelPage + 1}</span>
+            <span className="text-zinc-500 text-xs tabular-nums">Page {channelPage + 1}</span>
             <button
               onClick={() => { setChannelPage(p => p + 1); scrollToTop(); }}
               disabled={!hasNextChannelPage}
-              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
               Next →
             </button>
@@ -338,15 +338,15 @@ export default function DiscoveryPage() {
             <button
               onClick={() => { setVideoPage(p => p - 1); scrollToTop(); }}
               disabled={videoPage === 0}
-              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
               ← Prev
             </button>
-            <span className="text-zinc-500 text-sm tabular-nums">Page {videoPage + 1}</span>
+            <span className="text-zinc-500 text-xs tabular-nums">Page {videoPage + 1}</span>
             <button
               onClick={() => { setVideoPage(p => p + 1); scrollToTop(); }}
               disabled={!hasNextVideoPage}
-              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
               Next →
             </button>
diff --git a/frontend/src/pages/Downloads.jsx b/frontend/src/pages/Downloads.jsx
index 6b36b9c..0d39b36 100644
--- a/frontend/src/pages/Downloads.jsx
+++ b/frontend/src/pages/Downloads.jsx
@@ -95,7 +95,7 @@ export default function DownloadsPage() {
   const hasRemovable = history.length > 0 || trash.length > 0;
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-6">
       <div className="flex items-center justify-between">
         <h1 className="font-display font-bold text-2xl text-zinc-100">Downloads</h1>
         {hasRemovable && (
diff --git a/frontend/src/pages/Following.jsx b/frontend/src/pages/Following.jsx
index 544adc7..79287f8 100644
--- a/frontend/src/pages/Following.jsx
+++ b/frontend/src/pages/Following.jsx
@@ -709,7 +709,7 @@ export default function Following() {
           </svg>
         </div>
         <div>
-          <p className="text-zinc-300 font-medium">Not following anyone yet</p>
+          <p className="text-zinc-500 text-sm">Not following anyone yet</p>
           <p className="text-zinc-500 text-sm mt-1">
             Hit Follow on a channel while watching a video or searching.
           </p>
diff --git a/frontend/src/pages/History.jsx b/frontend/src/pages/History.jsx
index 30f3325..6544437 100644
--- a/frontend/src/pages/History.jsx
+++ b/frontend/src/pages/History.jsx
@@ -30,7 +30,7 @@ export default function History() {
         </div>
       ) : videos.length === 0 ? (
         <div className="flex flex-col items-center gap-3 py-20 text-center">
-          <p className="text-zinc-400 text-sm">No watch history yet. Start watching some videos!</p>
+          <p className="text-zinc-500 text-sm">No watch history yet. Start watching some videos!</p>
         </div>
       ) : (
         <>
@@ -43,15 +43,15 @@ export default function History() {
             <button
               onClick={() => { setPage(p => p - 1); scrollToTop(); }}
               disabled={page === 0}
-              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
               ← Prev
             </button>
-            <span className="text-zinc-500 text-sm tabular-nums">Page {page + 1}</span>
+            <span className="text-zinc-500 text-xs tabular-nums">Page {page + 1}</span>
             <button
               onClick={() => { setPage(p => p + 1); scrollToTop(); }}
               disabled={!hasNext}
-              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
               Next →
             </button>
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 286d49b..4ee6eb8 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -107,20 +107,21 @@ export default function Home() {
         </div>
       ) : hasFollowing ? (
         <section className="flex flex-col gap-6">
-          <div className="flex items-center justify-between flex-wrap gap-3">
-            <h2 className="font-display font-semibold text-xl text-zinc-200">Home</h2>
-            <div className="flex items-center gap-2">
+          {/* Title row + secondary controls */}
+          <div className="flex items-center justify-between gap-2">
+            <h2 className="font-display font-semibold text-base sm:text-xl text-zinc-200">Home</h2>
+            <div className="flex items-center gap-1.5">
               <button
                 onClick={toggleViewMode}
                 title={viewMode === "grid" ? "Switch to list view" : "Switch to grid view"}
-                className="flex items-center justify-center w-8 h-8 rounded-lg text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 transition-colors border border-zinc-800"
+                className="flex items-center justify-center w-7 h-7 rounded-md text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 transition-colors"
               >
                 {viewMode === "grid" ? (
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                   </svg>
                 ) : (
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
                   </svg>
                 )}
@@ -129,48 +130,39 @@ export default function Home() {
                 onClick={handleHideWatchedToggle}
                 title={hideWatched ? "Showing unwatched only" : "Showing all videos"}
                 className={[
-                  "flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors border",
-                  hideWatched
-                    ? "bg-accent/10 text-accent border-accent/30"
-                    : "text-zinc-500 border-zinc-800 hover:text-zinc-300 hover:border-zinc-700",
+                  "flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors",
+                  hideWatched ? "text-accent" : "text-zinc-600 hover:text-zinc-400",
                 ].join(" ")}
               >
-                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  {hideWatched ? (
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-                  ) : (
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                  )}
-                </svg>
                 {hideWatched ? "Unwatched" : "All"}
               </button>
-              <div className="flex items-center gap-0.5 bg-zinc-900 rounded-lg p-0.5">
-                {FEED_MODES.map(m => (
-                  <button
-                    key={m.value}
-                    onClick={() => handleModeChange(m.value)}
-                    title={m.hint}
-                    className={[
-                      "relative px-2 py-1 rounded-md text-xs font-medium transition-colors",
-                      mode === m.value
-                        ? "bg-zinc-700 text-zinc-100"
-                        : "text-zinc-500 hover:text-zinc-300",
-                    ].join(" ")}
-                  >
-                    {m.label}
-                    {m.value === "inbox" && inboxCount > 0 && (
-                      <span className="absolute -top-1 -right-1 min-w-[13px] h-3 bg-accent text-black text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
-                        {inboxCount > 99 ? "99+" : inboxCount}
-                      </span>
-                    )}
-                  </button>
-                ))}
-              </div>
             </div>
           </div>
 
+          {/* Mode switcher — own row, full width on mobile */}
+          <div className="flex items-center gap-0.5 bg-zinc-900 rounded-lg p-0.5 self-start">
+            {FEED_MODES.map(m => (
+              <button
+                key={m.value}
+                onClick={() => handleModeChange(m.value)}
+                title={m.hint}
+                className={[
+                  "relative px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
+                  mode === m.value ? "bg-zinc-700 text-zinc-100" : "text-zinc-500 hover:text-zinc-300",
+                ].join(" ")}
+              >
+                {m.label}
+                {m.value === "inbox" && inboxCount > 0 && (
+                  <span className="absolute -top-1 -right-1 min-w-[13px] h-3 bg-accent text-black text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
+                    {inboxCount > 99 ? "99+" : inboxCount}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+
           {/* Duration filter */}
-          <div className="flex items-center gap-1.5 -mt-3">
+          <div className="flex items-center gap-1.5">
             {[["short", "< 10 min"], ["medium", "10–30 min"], ["long", "30+ min"]].map(([val, label]) => (
               <button
                 key={val}
@@ -188,7 +180,7 @@ export default function Home() {
           </div>
 
           {mode === "inbox" && (
-            <div className="flex items-center justify-between -mt-3">
+            <div className="flex items-center justify-between">
               <p className="text-xs text-zinc-600">Unwatched videos from followed channels since your last visit.</p>
               <button
                 onClick={() => markSeenMut.mutate()}
@@ -200,10 +192,10 @@ export default function Home() {
             </div>
           )}
           {mode === "chronological" && (
-            <p className="text-xs text-zinc-600 -mt-3">All videos from channels you follow, newest first.</p>
+            <p className="text-xs text-zinc-600">All videos from channels you follow, newest first.</p>
           )}
           {mode === "random" && (
-            <div className="flex items-center justify-between -mt-3">
+            <div className="flex items-center justify-between">
               <p className="text-xs text-zinc-600">Random from your discovery pool — no weighting, no ranking.</p>
               <button
                 onClick={handleReshuffle}
@@ -238,15 +230,15 @@ export default function Home() {
             <button
               onClick={() => { setPage(p => p - 1); scrollToTop(); }}
               disabled={page === 0}
-              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
               ← Prev
             </button>
-            <span className="text-zinc-500 text-sm tabular-nums">Page {page + 1}</span>
+            <span className="text-zinc-500 text-xs tabular-nums">Page {page + 1}</span>
             <button
               onClick={() => { setPage(p => p + 1); scrollToTop(); }}
               disabled={!hasNextPage}
-              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
               Next →
             </button>
diff --git a/frontend/src/pages/Liked.jsx b/frontend/src/pages/Liked.jsx
index 8a01251..6553206 100644
--- a/frontend/src/pages/Liked.jsx
+++ b/frontend/src/pages/Liked.jsx
@@ -42,7 +42,7 @@ export default function LikedPage() {
   }
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-6">
       <div className="flex items-start justify-between gap-4 flex-wrap">
         <div>
           <h1 className="font-display font-bold text-2xl text-zinc-100">Liked videos</h1>
@@ -54,7 +54,7 @@ export default function LikedPage() {
         <button
           onClick={() => refreshMut.mutate()}
           disabled={refreshMut.isPending || refreshMut.isSuccess}
-          className="flex items-center gap-2 px-4 py-2 rounded-xl bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 transition-colors disabled:opacity-60"
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 text-zinc-300 text-xs font-medium hover:bg-zinc-700 transition-colors disabled:opacity-60"
         >
           {refreshMut.isPending ? (
             <>
@@ -82,7 +82,7 @@ export default function LikedPage() {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
               d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
           </svg>
-          <p className="text-zinc-400 font-medium">No liked videos yet</p>
+          <p className="text-zinc-500 text-sm">No liked videos yet</p>
           <p className="text-zinc-600 text-sm max-w-xs">
             Hit the heart on any video. Liked videos teach the discovery engine what you enjoy.
           </p>
diff --git a/frontend/src/pages/Queue.jsx b/frontend/src/pages/Queue.jsx
index c16b4f2..f57bff3 100644
--- a/frontend/src/pages/Queue.jsx
+++ b/frontend/src/pages/Queue.jsx
@@ -27,7 +27,7 @@ export default function QueuePage() {
             </svg>
           </div>
           <div>
-            <p className="text-zinc-300 font-medium">Queue is empty</p>
+            <p className="text-zinc-500 text-sm">Queue is empty</p>
             <p className="text-zinc-500 text-sm mt-1">
               Hit the queue icon on any video to save it for later.
             </p>
diff --git a/frontend/src/pages/SearchResults.jsx b/frontend/src/pages/SearchResults.jsx
index 1edee8c..843aefb 100644
--- a/frontend/src/pages/SearchResults.jsx
+++ b/frontend/src/pages/SearchResults.jsx
@@ -68,7 +68,7 @@ export default function SearchResults() {
   const channelsFirst = channels.length > 0 && (videos.length === 0 || source === "local");
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3 flex-wrap">
         <h1 className="font-display font-semibold text-xl text-zinc-100">
           Results for <span className="text-accent">"{q}"</span>