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

2
frontend/src/pages/Discovery.jsx
View File

@@ -176,7 +176,7 @@ function Tab({ active, onClick, children, count }) {
<button
onClick={onClick}
className={[
"px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px flex items-center gap-2",
"px-3 py-1.5 text-xs font-medium border-b-2 transition-colors -mb-px flex items-center gap-1.5",
active
? "border-accent text-zinc-100"
: "border-transparent text-zinc-500 hover:text-zinc-300",

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

@@ -780,13 +780,13 @@ export default function Following() {
</div>
{/* Tabs */}
<div className="flex items-center gap-1 border-b border-zinc-800">
{[["channels", "Channels"], ["feed", "Latest uploads"], ["groups", "Groups"]].map(([key, label]) => (
<div className="flex items-center gap-0.5 border-b border-zinc-800">
{[["channels", "Channels"], ["feed", "Feed"], ["groups", "Groups"]].map(([key, label]) => (
<button
key={key}
onClick={() => setTab(key)}
className={[
"px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px",
"px-3 py-1.5 text-xs font-medium border-b-2 transition-colors -mb-px",
tab === key
? "border-accent text-zinc-100"
: "border-transparent text-zinc-500 hover:text-zinc-300",
@@ -794,7 +794,7 @@ export default function Following() {
>
{label}
{key === "groups" && groups.length > 0 && (
<span className="ml-1.5 text-xs text-zinc-600">{groups.length}</span>
<span className="ml-1 text-[10px] text-zinc-600">{groups.length}</span>
)}
</button>
))}

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>
)}