feat(audiobook): improve styling for character and chapter sections in ProjectCard component

This commit is contained in:
2026-03-10 18:19:15 +08:00
parent a770bb4f6e
commit 6ae95bfe53

View File

@@ -602,11 +602,11 @@ function ProjectCard({ project, onRefresh }: { project: AudiobookProject; onRefr
)}
{expanded && (
<div className="space-y-4 pt-2 border-t">
<div className="space-y-3 pt-2 border-t">
{detail && detail.characters.length > 0 && (
<div>
<div className="rounded-lg border border-blue-500/20 bg-blue-500/5 px-3 py-2">
<button
className="flex items-center gap-1 text-xs font-medium text-muted-foreground mb-2 hover:text-foreground transition-colors w-full text-left"
className="flex items-center gap-1 text-xs font-medium text-blue-400/80 mb-2 hover:text-blue-300 transition-colors w-full text-left"
onClick={() => setCharsCollapsed(v => !v)}
>
{charsCollapsed ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}
@@ -677,10 +677,10 @@ function ProjectCard({ project, onRefresh }: { project: AudiobookProject; onRefr
)}
{detail && detail.chapters.length > 0 && ['ready', 'generating', 'done'].includes(status) && (
<div>
<div className="rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-3 py-2">
<div className="flex items-center justify-between mb-2">
<button
className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors text-left"
className="flex items-center gap-1 text-xs font-medium text-emerald-400/80 hover:text-emerald-300 transition-colors text-left"
onClick={() => setChaptersCollapsed(v => !v)}
>
{chaptersCollapsed ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}