feat(web): sync translated manga galleries, clean titles, synopsis integration, original source links, anthology badges, and mobile-first reader UI
This commit is contained in:
Renato
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,6 +4,11 @@ import { formatDate } from "@/lib/utils"
|
||||
import { TagBadge } from "@/components/tag-badge"
|
||||
|
||||
export function PostCard({ post, compact = false }: { post: Post; compact?: boolean }) {
|
||||
const isAnthology =
|
||||
post.tags?.some((t) =>
|
||||
["anthology", "compilation", "tankoubon"].some((k) => t.toLowerCase().includes(k))
|
||||
) || post.num_pages >= 100
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<Link
|
||||
@@ -24,6 +29,9 @@ export function PostCard({ post, compact = false }: { post: Post; compact?: bool
|
||||
<p className="text-xs text-[var(--muted)]">{post.artist}</p>
|
||||
)}
|
||||
<div className="flex flex-1 items-end gap-2">
|
||||
{isAnthology && (
|
||||
<span className="text-[9px] font-semibold text-[var(--accent)] uppercase">Tomo</span>
|
||||
)}
|
||||
{post.source && (
|
||||
<span className="text-[10px] uppercase text-[var(--muted)]">{post.source}</span>
|
||||
)}
|
||||
@@ -41,13 +49,18 @@ export function PostCard({ post, compact = false }: { post: Post; compact?: bool
|
||||
href={`/p/${post.slug}`}
|
||||
className="card card-hover group flex flex-col overflow-hidden p-0"
|
||||
>
|
||||
<div className="aspect-[3/4] overflow-hidden bg-[var(--surface)]">
|
||||
<div className="relative aspect-[3/4] overflow-hidden bg-[var(--surface)]">
|
||||
<img
|
||||
src={`/api/cover/${post.gid}`}
|
||||
alt={post.title}
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
|
||||
loading="lazy"
|
||||
/>
|
||||
{isAnthology && (
|
||||
<span className="absolute top-2 left-2 rounded bg-black/80 backdrop-blur-sm px-1.5 py-0.5 text-[9px] font-bold text-[var(--accent)] border border-[var(--accent)]/40 shadow">
|
||||
ANTOLOGÍA
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col gap-2 p-3">
|
||||
<h3 className="line-clamp-2 text-sm font-semibold leading-snug group-hover:text-[var(--accent)] transition-colors">
|
||||
|
||||
Reference in New Issue
Block a user