Rediseno home: hero destacado, chips de genero, masonry + scroll infinito, busqueda publica /buscar, footer comunidad, status/queue protegidos

2026-08-04 13:21:13 +08:00
parent ff3ec34674
commit 7f939b76a4
10 changed files with 430 additions and 46 deletions
@@ -0,0 +1,66 @@
+import Link from "next/link"
+import { searchPosts } from "@/lib/db"
+import { PostCard } from "@/components/post-card"
+import { EmptyState } from "@/components/empty-state"
+import { Search, ArrowLeft } from "lucide-react"
+
+export const dynamic = "force-dynamic"
+
+export default async function PublicSearchPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string }>
+}) {
+  const { q } = await searchParams
+  const query = (q || "").trim()
+  const results = query ? searchPosts(query, true) : []
+
+  return (
+    <div>
+      <Link
+        href="/"
+        className="mb-4 sm:mb-6 inline-flex items-center gap-1.5 text-xs text-[var(--muted)] hover:text-[var(--foreground)] transition-colors"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" />
+        Volver
+      </Link>
+
+      <h1 className="text-xl sm:text-2xl font-bold tracking-tight mb-1">Buscar</h1>
+      <p className="text-xs sm:text-sm text-[var(--muted)] mb-5">
+        Buscar publicaciones por título, artista o tags
+      </p>
+
+      <form action="/buscar" method="get" className="mb-6">
+        <div className="flex gap-2">
+          <input
+            type="search"
+            name="q"
+            defaultValue={query}
+            placeholder="Título, artista, tag..."
+            className="input flex-1"
+            autoFocus
+          />
+          <button type="submit" className="btn-primary">
+            <Search className="h-4 w-4" />
+            Buscar
+          </button>
+        </div>
+      </form>
+
+      {!query ? (
+        <p className="text-xs text-[var(--muted)]">Escribí algo para buscar publicaciones.</p>
+      ) : results.length === 0 ? (
+        <EmptyState message={`No se encontraron resultados para "${query}"`} />
+      ) : (
+        <>
+          <p className="mb-4 text-xs text-[var(--muted)]">{results.length} resultado(s)</p>
+          <div className="grid grid-cols-2 gap-3 sm:gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
+            {results.map((post) => (
+              <PostCard key={post.id} post={post} />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
@@ -1,8 +1,8 @@
 import Link from "next/link"
-import { Image } from "lucide-react"
+import { Image, Search } from "lucide-react"
+import { SITE_NAME, SITE_TAGLINE, SITE_LINKS } from "@/lib/site"

-// Header del sitio público: sin links al panel admin (que queda escondido).
-// Solo navegación pública (logo -> home).
+// Header del sitio público: búsqueda pública (SQLite) + logo.
 export default function PublicLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
@@ -12,16 +12,62 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
            <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>
+            <span className="text-sm font-bold tracking-tight">{SITE_NAME}</span>
          </Link>
-          <nav className="flex items-center gap-2 sm:gap-4"></nav>
+          <nav className="flex items-center gap-2 sm:gap-4">
+            <Link
+              href="/buscar"
+              className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-[var(--muted)] hover:bg-[var(--surface)] hover:text-[var(--foreground)] transition-colors"
+            >
+              <Search className="h-4 w-4" />
+              <span className="hidden sm:inline">Buscar</span>
+            </Link>
+          </nav>
        </div>
      </header>

      <main className="mx-auto max-w-5xl px-3 py-4 sm:px-4 sm:py-8">{children}</main>

      <footer className="border-t border-[var(--border)] py-6 text-center text-xs text-[var(--muted)] mb-12 sm:mb-0">
-        worst-scan &middot; traducción automática de manga
+        <div className="mx-auto max-w-5xl px-3 flex flex-col items-center gap-3">
+          <p>
+            {SITE_NAME} &middot; {SITE_TAGLINE}
+          </p>
+          <div className="flex items-center gap-4">
+            {SITE_LINKS.twitter && (
+              <>
+                <a
+                  href={SITE_LINKS.twitter}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
+                >
+                  X / Twitter
+                </a>
+                <span className="text-[var(--border)]">|</span>
+              </>
+            )}
+            <a
+              href={SITE_LINKS.discord}
+              target={SITE_LINKS.discord.startsWith("http") ? "_blank" : undefined}
+              rel="noopener noreferrer"
+              className="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
+              title={SITE_LINKS.discord === "#" ? "Discord (próximamente)" : "Discord"}
+            >
+              Discord
+            </a>
+            <span className="text-[var(--border)]">|</span>
+            <a
+              href={SITE_LINKS.patreon}
+              target={SITE_LINKS.patreon.startsWith("http") ? "_blank" : undefined}
+              rel="noopener noreferrer"
+              className="text-[var(--muted)] hover:text-[var(--accent)] transition-colors"
+              title={SITE_LINKS.patreon === "#" ? "Patreon (próximamente)" : "Patreon"}
+            >
+              Patreon
+            </a>
+          </div>
+        </div>
      </footer>
    </>
  )
@@ -1,14 +1,28 @@
-import { getAllPosts } from "@/lib/db"
-import { PostCard } from "@/components/post-card"
+import Link from "next/link"
+import { getPostsPage, getAllPosts } from "@/lib/db"
+import { InfinitePostGrid } from "@/components/infinite-grid"
+import { TagBadge } from "@/components/tag-badge"
 import { EmptyState } from "@/components/empty-state"
-import { BookOpen } from "lucide-react"
+import { BookOpen, Sparkles, ArrowRight } from "lucide-react"

 export const dynamic = "force-dynamic"

-export default function PublicHomePage() {
-  const posts = getAllPosts(true)
+export default async function PublicHomePage() {
+  const { items, total } = getPostsPage(1, 12, true)
+  const latest = getAllPosts(true)[0] // publicación destacada del hero

-  if (posts.length === 0) {
+  // Tags más frecuentes para los chips de exploración rápida.
+  const tagCounts = new Map<string, number>()
+  for (const p of getAllPosts(true)) {
+    for (const t of p.tags || []) {
+      const clean = t.toLowerCase().replace(/^artist:|^parody:/, "").trim()
+      if (!clean || clean.includes(" ")) continue
+      tagCounts.set(clean, (tagCounts.get(clean) || 0) + 1)
+    }
+  }
+  const popularTags = [...tagCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 10).map(([t]) => t)
+
+  if (total === 0) {
    return (
      <div className="py-20">
        <EmptyState message="Todavía no hay publicaciones" icon={<BookOpen className="mb-3 h-10 w-10 text-[var(--muted)]" />} />
@@ -20,19 +34,80 @@ export default function PublicHomePage() {
  }

  return (
-    <div>
-      <div className="mb-6 sm:mb-8">
-        <h1 className="text-xl sm:text-2xl font-bold tracking-tight">Publicaciones</h1>
-        <p className="mt-1 text-xs sm:text-sm text-[var(--muted)]">
-          Traducciones automáticas generadas por worst-scan
-        </p>
-      </div>
+    <div className="space-y-8 sm:space-y-10">
+      {/* ===== HERO: publicación destacada (hook visual inmediato) ===== */}
+      {latest && (
+        <section className="rounded-3xl overflow-hidden border border-[var(--border)] bg-gradient-to-br from-[var(--surface)] via-[var(--surface)] to-[#1a1a20]">
+          <Link href={`/p/${latest.slug}`} className="group grid gap-0 md:grid-cols-2">
+            <div className="relative aspect-[4/3] md:aspect-auto md:h-full overflow-hidden">
+              <img
+                src={`/api/cover/${latest.gid}`}
+                alt={latest.title}
+                className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.05]"
+              />
+              <div className="absolute top-3 left-3 inline-flex items-center gap-1.5 rounded-full bg-black/80 backdrop-blur-sm px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--accent)] border border-[var(--accent)]/40">
+                <Sparkles className="h-3 w-3" />
+                Último lanzamiento
+              </div>
+            </div>
+            <div className="flex flex-col justify-center gap-4 p-5 sm:p-8">
+              <div className="flex items-center gap-2">
+                <span className="rounded-full bg-[var(--accent)]/10 px-2 py-0.5 text-[10px] font-semibold text-[var(--accent)] border border-[var(--accent)]/30">
+                  Destacado
+                </span>
+                {latest.num_pages > 0 && (
+                  <span className="text-xs text-[var(--muted)]">{latest.num_pages} páginas</span>
+                )}
+              </div>
+              <h1 className="text-2xl sm:text-4xl font-bold tracking-tight leading-tight line-clamp-3">
+                {latest.title}
+              </h1>
+              {latest.artist && (
+                <p className="text-sm text-[var(--muted)]">por {latest.artist}</p>
+              )}
+              {latest.summary && latest.summary.length > 40 && (
+                <p className="hidden sm:block text-sm text-[var(--muted)] leading-relaxed line-clamp-3">
+                  {latest.summary}
+                </p>
+              )}
+              <div className="flex flex-wrap items-center gap-3 pt-2">
+                <span className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-6 py-2.5 text-sm font-semibold text-white transition-all group-hover:bg-[var(--accent-hover)] group-hover:scale-[1.02]">
+                  <BookOpen className="h-4 w-4" />
+                  Leer
+                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                </span>
+              </div>
+            </div>
+          </Link>
+        </section>
+      )}

-      <div className="grid grid-cols-2 gap-3 sm:gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
-        {posts.map((post) => (
-          <PostCard key={post.id} post={post} />
-        ))}
-      </div>
+      {/* ===== Chips de tags populares (navegación por interés) ===== */}
+      {popularTags.length > 0 && (
+        <section>
+          <h2 className="mb-3 text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">
+            Explorar por género
+          </h2>
+          <div className="flex flex-wrap gap-2">
+            {popularTags.map((tag) => (
+              <TagBadge key={tag} tag={tag} href={`/tag/${encodeURIComponent(tag)}`} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* ===== Feed central: masonry + scroll infinito ===== */}
+      <section>
+        <div className="mb-4 flex items-end justify-between">
+          <div>
+            <h2 className="text-xl sm:text-2xl font-bold tracking-tight">Todas las publicaciones</h2>
+            <p className="mt-1 text-xs sm:text-sm text-[var(--muted)]">
+              {total} traducciones · deslizá para descubrir más
+            </p>
+          </div>
+        </div>
+        <InfinitePostGrid initialPosts={items} />
+      </section>
    </div>
  )
-}
+}
@@ -1,9 +1,20 @@
 import { NextRequest } from "next/server"
-import { getAllPosts, createPost, getPostByGid } from "@/lib/db"
+import { getAllPosts, getPostsPage, createPost, getPostByGid } from "@/lib/db"
 import { slugify } from "@/lib/slug"

 export async function GET(req: NextRequest) {
  const publishedOnly = req.nextUrl.searchParams.get("published") === "1"
+  const page = Math.max(1, parseInt(req.nextUrl.searchParams.get("page") || "1", 10) || 1)
+  const perPage = Math.min(60, Math.max(1, parseInt(req.nextUrl.searchParams.get("per_page") || "12", 10) || 12))
+
+  if (req.nextUrl.searchParams.has("page") || req.nextUrl.searchParams.has("per_page")) {
+    const { items, total } = getPostsPage(page, perPage, publishedOnly)
+    return Response.json({
+      data: items,
+      meta: { total, page, per_page: perPage, has_more: page * perPage < total },
+    })
+  }
+
  const posts = getAllPosts(publishedOnly)
  return Response.json({ data: posts })
 }
@@ -164,3 +164,25 @@ body {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
 }
+
+/* Entrada suave de cards del feed (fade + slide up), con stagger vía delay */
+@utility animate-fade-up {
+  animation: fade-up 0.45s ease-out both;
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-fade-up {
+    animation: none;
+  }
+}