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 <button
onClick={onClick} onClick={onClick}
className={[ 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 active
? "border-accent text-zinc-100" ? "border-accent text-zinc-100"
: "border-transparent text-zinc-500 hover:text-zinc-300", : "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> </div>
{/* Tabs */} {/* Tabs */}
<div className="flex items-center gap-1 border-b border-zinc-800"> <div className="flex items-center gap-0.5 border-b border-zinc-800">
{[["channels", "Channels"], ["feed", "Latest uploads"], ["groups", "Groups"]].map(([key, label]) => ( {[["channels", "Channels"], ["feed", "Feed"], ["groups", "Groups"]].map(([key, label]) => (
<button <button
key={key} key={key}
onClick={() => setTab(key)} onClick={() => setTab(key)}
className={[ 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 tab === key
? "border-accent text-zinc-100" ? "border-accent text-zinc-100"
: "border-transparent text-zinc-500 hover:text-zinc-300", : "border-transparent text-zinc-500 hover:text-zinc-300",
@@ -794,7 +794,7 @@ export default function Following() {
> >
{label} {label}
{key === "groups" && groups.length > 0 && ( {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> </button>
))} ))}

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

@@ -129,7 +129,7 @@ export default function Home() {
onClick={handleHideWatchedToggle} onClick={handleHideWatchedToggle}
title={hideWatched ? "Showing unwatched only" : "Showing all videos"} title={hideWatched ? "Showing unwatched only" : "Showing all videos"}
className={[ 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 hideWatched
? "bg-accent/10 text-accent border-accent/30" ? "bg-accent/10 text-accent border-accent/30"
: "text-zinc-500 border-zinc-800 hover:text-zinc-300 hover:border-zinc-700", : "text-zinc-500 border-zinc-800 hover:text-zinc-300 hover:border-zinc-700",
@@ -144,14 +144,14 @@ export default function Home() {
</svg> </svg>
{hideWatched ? "Unwatched" : "All"} {hideWatched ? "Unwatched" : "All"}
</button> </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 => ( {FEED_MODES.map(m => (
<button <button
key={m.value} key={m.value}
onClick={() => handleModeChange(m.value)} onClick={() => handleModeChange(m.value)}
title={m.hint} title={m.hint}
className={[ 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 mode === m.value
? "bg-zinc-700 text-zinc-100" ? "bg-zinc-700 text-zinc-100"
: "text-zinc-500 hover:text-zinc-300", : "text-zinc-500 hover:text-zinc-300",
@@ -159,7 +159,7 @@ export default function Home() {
> >
{m.label} {m.label}
{m.value === "inbox" && inboxCount > 0 && ( {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} {inboxCount > 99 ? "99+" : inboxCount}
</span> </span>
)} )}