renato97/worst-scan-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): sync translated manga galleries, clean titles, synopsis integration, original source links, anthology badges, and mobile-first reader UI

Browse Source
This commit is contained in:
Renato
2026-07-24 01:59:40 +02:00
parent 269762557e
commit 72e503d7bc
22 changed files with 824 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/sidebar.tsx
+55 -26
View File
@@ -21,44 +21,73 @@ export function Sidebar() {
router.push("/login")
}
return (
<aside className="fixed left-0 top-0 z-30 flex h-screen w-56 flex-col border-r border-[var(--border)] bg-[var(--background)]">
<div className="flex items-center gap-2.5 border-b border-[var(--border)] px-5 py-4">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent-subtle)]">
<Image className="h-4 w-4 text-[var(--accent)]" />
</div>
<span className="text-sm font-bold tracking-tight">worst-scan</span>
</div>
// Do not render sidebar / bottom bar if inside reader page
if (pathname.includes("/read")) {
return null
}
<nav className="flex flex-1 flex-col gap-0.5 p-3">
return (
<>
{/* Desktop Sidebar */}
<aside className="hidden md:flex fixed left-0 top-0 z-30 h-screen w-56 flex-col border-r border-[var(--border)] bg-[var(--background)]">
<div className="flex items-center gap-2.5 border-b border-[var(--border)] px-5 py-4">
<Link href="/" className="flex items-center gap-2.5">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent-subtle)]">
<Image className="h-4 w-4 text-[var(--accent)]" />
</div>
<span className="text-sm font-bold tracking-tight">worst-scan</span>
</Link>
</div>
<nav className="flex flex-1 flex-col gap-0.5 p-3">
{links.map(({ href, label, icon: Icon }) => {
const isActive = pathname.startsWith(href)
return (
<Link
key={href}
href={href}
className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all ${
isActive
? "bg-[var(--surface)] font-medium text-[var(--foreground)]"
: "text-[var(--muted)] hover:bg-[var(--surface)] hover:text-[var(--foreground)]"
}`}
>
<Icon className={`h-4 w-4 ${isActive ? "text-[var(--accent)]" : ""}`} />
{label}
</Link>
)
})}
</nav>
<div className="border-t border-[var(--border)] p-3">
<button
onClick={handleLogout}
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--muted)] transition-all hover:bg-[var(--surface)] hover:text-[var(--foreground)]"
>
<LogOut className="h-4 w-4" />
Salir
</button>
</div>
</aside>
{/* Mobile Bottom Navigation Bar */}
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 flex h-14 items-center justify-around border-t border-[var(--border)] bg-[var(--background)]/90 backdrop-blur-lg px-2">
{links.map(({ href, label, icon: Icon }) => {
const isActive = pathname.startsWith(href)
return (
<Link
key={href}
href={href}
className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all ${
isActive
? "bg-[var(--surface)] font-medium text-[var(--foreground)]"
: "text-[var(--muted)] hover:bg-[var(--surface)] hover:text-[var(--foreground)]"
className={`flex flex-col items-center justify-center gap-1 py-1 px-3 text-[10px] font-medium transition-all ${
isActive ? "text-[var(--accent)]" : "text-[var(--muted)] hover:text-[var(--foreground)]"
}`}
>
<Icon className={`h-4 w-4 ${isActive ? "text-[var(--accent)]" : ""}`} />
{label}
<Icon className="h-5 w-5" />
<span>{label}</span>
</Link>
)
})}
</nav>
<div className="border-t border-[var(--border)] p-3">
<button
onClick={handleLogout}
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--muted)] transition-all hover:bg-[var(--surface)] hover:text-[var(--foreground)]"
>
<LogOut className="h-4 w-4" />
Salir
</button>
</div>
</aside>
</>
)
}