Leon Serfaty
114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { Mic2, Plus } from "lucide-react";
|
|
import type { Prisma, EpisodeStatus } from "@prisma/client";
|
|
import { requireAuth } from "@/lib/auth/guards";
|
|
import { prisma } from "@/lib/db";
|
|
import { PageHeader } from "@/components/app/page-header";
|
|
import { EpisodeCard } from "@/components/app/episode-card";
|
|
import { SearchInput, FilterSelect } from "@/components/admin/ui/table-controls";
|
|
import { Button } from "@/components/ui/button";
|
|
import { EmptyState } from "@/components/ui/empty-state";
|
|
|
|
export const metadata: Metadata = { title: "Episodes" };
|
|
|
|
const STATUS_OPTIONS = [
|
|
{ value: "DRAFT", label: "Draft" },
|
|
{ value: "QUEUED", label: "Queued" },
|
|
{ value: "SCRIPTING", label: "Writing script" },
|
|
{ value: "SYNTHESIZING", label: "Recording audio" },
|
|
{ value: "STITCHING", label: "Mixing audio" },
|
|
{ value: "ART", label: "Designing art" },
|
|
{ value: "SAVING", label: "Finalizing" },
|
|
{ value: "READY", label: "Ready" },
|
|
{ value: "FAILED", label: "Failed" },
|
|
];
|
|
|
|
const VALID_STATUSES = new Set(STATUS_OPTIONS.map((o) => o.value));
|
|
|
|
export default async function EpisodesPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<{ q?: string; status?: string }>;
|
|
}) {
|
|
const session = await requireAuth();
|
|
const { q, status } = await searchParams;
|
|
const query = q?.trim();
|
|
const statusFilter = status && VALID_STATUSES.has(status) ? status : undefined;
|
|
|
|
const where: Prisma.EpisodeWhereInput = {
|
|
userId: session.user.id,
|
|
...(query ? { title: { contains: query, mode: "insensitive" } } : {}),
|
|
...(statusFilter ? { status: statusFilter as EpisodeStatus } : {}),
|
|
};
|
|
|
|
const episodes = await prisma.episode.findMany({
|
|
where,
|
|
orderBy: { createdAt: "desc" },
|
|
include: { coverArt: { select: { storageKey: true } } },
|
|
});
|
|
|
|
const filtering = Boolean(query || statusFilter);
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="Episodes"
|
|
description="Your AI-produced podcast library."
|
|
action={
|
|
<Button asChild>
|
|
<Link href="/episodes/new">
|
|
<Plus className="h-4 w-4" /> New episode
|
|
</Link>
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<SearchInput placeholder="Search episodes…" />
|
|
<FilterSelect param="status" placeholder="Status" options={STATUS_OPTIONS} allLabel="All statuses" />
|
|
</div>
|
|
|
|
{episodes.length === 0 ? (
|
|
filtering ? (
|
|
<EmptyState
|
|
icon={Mic2}
|
|
title="No matching episodes"
|
|
description="Try a different search term or status filter."
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
icon={Mic2}
|
|
title="No episodes yet"
|
|
description="Create your first AI-produced episode."
|
|
action={
|
|
<Button asChild>
|
|
<Link href="/episodes/new">
|
|
<Plus className="h-4 w-4" /> New episode
|
|
</Link>
|
|
</Button>
|
|
}
|
|
/>
|
|
)
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
|
|
{episodes.map((ep) => (
|
|
<EpisodeCard
|
|
key={ep.id}
|
|
episode={{
|
|
id: ep.id,
|
|
title: ep.title,
|
|
status: ep.status,
|
|
format: ep.format,
|
|
language: ep.language,
|
|
createdAt: ep.createdAt,
|
|
coverArtKey: ep.coverArt?.storageKey,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|