inputnoise/youclonedl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact all mode/tab switchers site-wide

Browse Source 
Home feed mode: px-3 py-1.5 text-sm → px-2 py-1 text-xs, tighter container
Hide-watched toggle: same reduction
Following tabs: px-4 py-2 text-sm → px-3 py-1.5 text-xs, "Latest uploads" → "Feed"
Discovery tabs: same reduction

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mattias Tall
2026-05-26 17:12:18 +02:00
parent ebd8ddee6e
commit f422d754b9
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/pages/Home.jsx
View File

@@ -129,7 +129,7 @@ export default function Home() {
onClick={handleHideWatchedToggle}
title={hideWatched ? "Showing unwatched only" : "Showing all videos"}
className={[
"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors border",
"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",
@@ -144,14 +144,14 @@ export default function Home() {
</svg>
{hideWatched ? "Unwatched" : "All"}
</button>
<div className="flex items-center gap-1 bg-zinc-900 rounded-xl p-1">
<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-3 py-1.5 rounded-lg text-sm font-medium transition-colors",
"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",
@@ -159,7 +159,7 @@ export default function Home() {
>
{m.label}
{m.value === "inbox" && inboxCount > 0 && (
<span className="absolute -top-1 -right-1 min-w-[16px] h-4 bg-accent text-black text-[10px] font-bold rounded-full flex items-center justify-center px-1 leading-none">
<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>
)}