Introduce end-to-end chapterized audiobook generation with persistent storage, resumable workflows, and MP3/M4B support. API: - add /api/audio/convert/chapter (GET/DELETE) for per-chapter ops - add /api/audio/convert/chapters (GET/DELETE) for listing/reset - enhance /api/audio/convert: - accept mp3|m4b, stream combined file, cache complete output - robust chapter indexing, docstore persistence, list concat - AbortSignal-aware ffmpeg/ffprobe, 499 on cancel UI/UX: - add AudiobookExportModal with progress, resume, regenerate, download - add ProgressCard, enhance ProgressPopup (click-to-focus, richer info) - add Header, ZoomControl; move TTSPlayer to sticky bottom bar - redesign EPUB/HTML/PDF pages for full-height layout and controls - add HomeContent; compact uploader variant; document list polish TTS/Contexts: - EPUB/PDF contexts now generate per-chapter to disk, return bookId - support chapter regeneration; progress/cancel propagation - pass provider/model/instructions; standardize MP3 TTS output - HTML context updates for model/instructions Styling: - globals: overlay-dim, scrollbar styles, prism gradient utilities - theme vars: secondary-accent, prism-gradient; tailwind color addition Misc: - fix PDF scale calc to use container height - EPUB theme reader area fills height - time estimation update cadence stab - audio util passes format to combine endpoint
29 lines
784 B
TypeScript
29 lines
784 B
TypeScript
"use client";
|
|
|
|
import { ReactNode } from "react";
|
|
|
|
export function Header({
|
|
left,
|
|
title,
|
|
right,
|
|
}: {
|
|
left?: ReactNode;
|
|
title?: ReactNode;
|
|
right?: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="sticky top-0 z-40 w-full border-b border-offbase bg-base" data-app-header>
|
|
<div className="px-2 sm:px-3 py-1 flex items-center justify-between gap-2 min-h-10">
|
|
<div className="flex items-center gap-2 min-w-0 flex-1">
|
|
{left}
|
|
{typeof title === 'string' ? (
|
|
<h1 className="text-xs sm:text-sm font-semibold truncate text-foreground tracking-tight">{title}</h1>
|
|
) : (
|
|
title
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2 min-w-0 justify-end">{right}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|