mirror of
https://github.com/Tony0410/readlater.git
synced 2026-05-24 22:01:41 +08:00
464f93a6aa
- Add sort dropdown: Newest/Oldest/Title A-Z/Z-A - Client-side cache with 30s TTL for instant section switching - Re-sorting uses cached data for immediate response - Cache clears on data modifications (add/archive/delete) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
638 lines
22 KiB
TypeScript
638 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, useRef } from "react";
|
|
import { Article, Folder } from "@/lib/types";
|
|
import { useReaderSettings, useTTSSettings } from "@/hooks/useSettings";
|
|
import { useTTS } from "@/hooks/useTTS";
|
|
import { ArticleList } from "@/components/ArticleList";
|
|
import { Reader } from "@/components/Reader";
|
|
import { SettingsPanel } from "@/components/SettingsPanel";
|
|
import { TTSControls } from "@/components/TTSControls";
|
|
import { AddArticle } from "@/components/AddArticle";
|
|
import {
|
|
BookOpen,
|
|
Star,
|
|
Archive,
|
|
Menu,
|
|
Search,
|
|
FolderIcon,
|
|
Settings,
|
|
X,
|
|
CheckSquare,
|
|
ArchiveRestore,
|
|
ArrowUpDown,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
type FilterType = "all" | "favorites" | "archived" | "folder" | "search";
|
|
type SortType = "newest" | "oldest" | "title-asc" | "title-desc";
|
|
|
|
// Simple client-side cache for instant section switching
|
|
const articleCache = new Map<string, { data: Article[]; timestamp: number }>();
|
|
const CACHE_TTL = 30000; // 30 seconds
|
|
|
|
export default function Home() {
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [folders, setFolders] = useState<Folder[]>([]);
|
|
const [selectedArticle, setSelectedArticle] = useState<Article | null>(null);
|
|
const [filter, setFilter] = useState<FilterType>("all");
|
|
const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [stats, setStats] = useState<{ streak: number; todayCount: number } | null>(null);
|
|
const [isSelectMode, setIsSelectMode] = useState(false);
|
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
|
const [isBulkUpdating, setIsBulkUpdating] = useState(false);
|
|
const [sortBy, setSortBy] = useState<SortType>("newest");
|
|
const [showSortMenu, setShowSortMenu] = useState(false);
|
|
|
|
const [readerSettings, setReaderSettings] = useReaderSettings();
|
|
const [ttsSettings, setTTSSettings] = useTTSSettings();
|
|
|
|
const tts = useTTS({
|
|
settings: ttsSettings,
|
|
text: selectedArticle?.textContent || "",
|
|
});
|
|
|
|
// Apply theme (with auto-scheduling)
|
|
useEffect(() => {
|
|
if (readerSettings.autoTheme) {
|
|
const hour = new Date().getHours();
|
|
const isDaytime = hour >= 6 && hour < 18;
|
|
const theme = isDaytime ? readerSettings.dayTheme : readerSettings.nightTheme;
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
} else {
|
|
document.documentElement.setAttribute("data-theme", readerSettings.theme);
|
|
}
|
|
}, [readerSettings]);
|
|
|
|
// Sort articles client-side
|
|
const sortArticles = useCallback((articles: Article[], sort: SortType): Article[] => {
|
|
const sorted = [...articles];
|
|
switch (sort) {
|
|
case "newest":
|
|
return sorted.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
|
case "oldest":
|
|
return sorted.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
|
|
case "title-asc":
|
|
return sorted.sort((a, b) => a.title.localeCompare(b.title));
|
|
case "title-desc":
|
|
return sorted.sort((a, b) => b.title.localeCompare(a.title));
|
|
default:
|
|
return sorted;
|
|
}
|
|
}, []);
|
|
|
|
// Fetch articles with caching
|
|
const fetchArticles = useCallback(async (skipCache = false) => {
|
|
const cacheKey = filter === "folder" ? `folder-${selectedFolderId}` : filter;
|
|
|
|
// Check cache first for instant display
|
|
if (!skipCache) {
|
|
const cached = articleCache.get(cacheKey);
|
|
if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
|
|
setArticles(sortArticles(cached.data, sortBy));
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
let url = `/api/articles?filter=${filter}`;
|
|
if (filter === "folder" && selectedFolderId) {
|
|
url = `/api/articles?folderId=${selectedFolderId}`;
|
|
}
|
|
const response = await fetch(url);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
// Cache the raw data
|
|
articleCache.set(cacheKey, { data, timestamp: Date.now() });
|
|
setArticles(sortArticles(data, sortBy));
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch articles:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [filter, selectedFolderId, sortBy, sortArticles]);
|
|
|
|
// Fetch folders
|
|
const fetchFolders = useCallback(async () => {
|
|
try {
|
|
const response = await fetch("/api/folders");
|
|
if (response.ok) {
|
|
setFolders(await response.json());
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch folders:", error);
|
|
}
|
|
}, []);
|
|
|
|
// Fetch stats
|
|
const fetchStats = useCallback(async () => {
|
|
try {
|
|
const response = await fetch("/api/stats?days=7");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const today = new Date().toISOString().split("T")[0];
|
|
const todayStats = data.daily.find((d: { date: string }) => d.date === today);
|
|
setStats({
|
|
streak: data.streak,
|
|
todayCount: todayStats?.articlesRead || 0,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch stats:", error);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchArticles();
|
|
fetchFolders();
|
|
fetchStats();
|
|
}, [fetchArticles, fetchFolders, fetchStats]);
|
|
|
|
// Re-sort when sort changes (use cached data for instant response)
|
|
useEffect(() => {
|
|
const cacheKey = filter === "folder" ? `folder-${selectedFolderId}` : filter;
|
|
const cached = articleCache.get(cacheKey);
|
|
if (cached) {
|
|
setArticles(sortArticles(cached.data, sortBy));
|
|
}
|
|
}, [sortBy, filter, selectedFolderId, sortArticles]);
|
|
|
|
// Search
|
|
const handleSearch = async () => {
|
|
if (!searchQuery.trim()) {
|
|
setFilter("all");
|
|
return;
|
|
}
|
|
|
|
setIsSearching(true);
|
|
try {
|
|
const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setArticles(data);
|
|
setFilter("search");
|
|
}
|
|
} catch (error) {
|
|
console.error("Search failed:", error);
|
|
} finally {
|
|
setIsSearching(false);
|
|
}
|
|
};
|
|
|
|
// Add article
|
|
const handleAddArticle = async (url: string) => {
|
|
const response = await fetch("/api/articles", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ url }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || "Failed to add article");
|
|
}
|
|
|
|
articleCache.clear();
|
|
await fetchArticles(true);
|
|
fetchStats();
|
|
};
|
|
|
|
// Toggle favorite
|
|
const handleToggleFavorite = async (id: string, isFavorite: boolean) => {
|
|
await fetch(`/api/articles/${id}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ isFavorite }),
|
|
});
|
|
|
|
setArticles((prev) =>
|
|
prev.map((a) => (a.id === id ? { ...a, isFavorite } : a))
|
|
);
|
|
|
|
if (selectedArticle?.id === id) {
|
|
setSelectedArticle((prev) => (prev ? { ...prev, isFavorite } : null));
|
|
}
|
|
};
|
|
|
|
// Toggle archive
|
|
const handleToggleArchive = async (id: string, isArchived: boolean) => {
|
|
await fetch(`/api/articles/${id}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ isArchived }),
|
|
});
|
|
|
|
articleCache.clear();
|
|
await fetchArticles(true);
|
|
fetchStats();
|
|
|
|
if (selectedArticle?.id === id) {
|
|
setSelectedArticle(null);
|
|
}
|
|
};
|
|
|
|
// Delete article
|
|
const handleDelete = async (id: string) => {
|
|
await fetch(`/api/articles/${id}`, { method: "DELETE" });
|
|
articleCache.clear();
|
|
await fetchArticles(true);
|
|
|
|
if (selectedArticle?.id === id) {
|
|
setSelectedArticle(null);
|
|
}
|
|
};
|
|
|
|
// Fetch full article (with content) when opening for reading
|
|
const handleSelectArticle = async (article: Article) => {
|
|
// If article already has content, use it directly
|
|
if (article.content && article.textContent) {
|
|
setSelectedArticle(article);
|
|
return;
|
|
}
|
|
// Otherwise fetch full article
|
|
try {
|
|
const response = await fetch(`/api/articles/${article.id}`);
|
|
if (response.ok) {
|
|
const fullArticle = await response.json();
|
|
setSelectedArticle(fullArticle);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch article:", error);
|
|
}
|
|
};
|
|
|
|
// Toggle article selection
|
|
const handleToggleSelect = (id: string) => {
|
|
setSelectedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) {
|
|
next.delete(id);
|
|
} else {
|
|
next.add(id);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
// Select all visible articles
|
|
const handleSelectAll = () => {
|
|
if (selectedIds.size === articles.length) {
|
|
setSelectedIds(new Set());
|
|
} else {
|
|
setSelectedIds(new Set(articles.map((a) => a.id)));
|
|
}
|
|
};
|
|
|
|
// Bulk archive/unarchive
|
|
const handleBulkArchive = async (archive: boolean) => {
|
|
if (selectedIds.size === 0) return;
|
|
setIsBulkUpdating(true);
|
|
try {
|
|
await fetch("/api/articles", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
ids: Array.from(selectedIds),
|
|
updates: { isArchived: archive },
|
|
}),
|
|
});
|
|
// Clear cache to force refresh
|
|
articleCache.clear();
|
|
await fetchArticles(true);
|
|
setSelectedIds(new Set());
|
|
setIsSelectMode(false);
|
|
fetchStats();
|
|
} catch (error) {
|
|
console.error("Bulk update failed:", error);
|
|
} finally {
|
|
setIsBulkUpdating(false);
|
|
}
|
|
};
|
|
|
|
// Exit select mode
|
|
const exitSelectMode = () => {
|
|
setIsSelectMode(false);
|
|
setSelectedIds(new Set());
|
|
};
|
|
|
|
// Reading view
|
|
if (selectedArticle) {
|
|
return (
|
|
<>
|
|
<Reader
|
|
article={selectedArticle}
|
|
settings={readerSettings}
|
|
onBack={() => {
|
|
tts.stop();
|
|
setSelectedArticle(null);
|
|
}}
|
|
onToggleFavorite={() =>
|
|
handleToggleFavorite(selectedArticle.id, !selectedArticle.isFavorite)
|
|
}
|
|
onToggleArchive={() => {
|
|
handleToggleArchive(selectedArticle.id, !selectedArticle.isArchived);
|
|
}}
|
|
onDelete={() => {
|
|
handleDelete(selectedArticle.id);
|
|
}}
|
|
onOpenSettings={() => setIsSettingsOpen(true)}
|
|
>
|
|
<TTSControls
|
|
isPlaying={tts.isPlaying}
|
|
isPaused={tts.isPaused}
|
|
isLoading={tts.isLoading}
|
|
currentTime={tts.currentTime}
|
|
duration={tts.duration}
|
|
progress={tts.progress}
|
|
onPlay={tts.play}
|
|
onPause={tts.pause}
|
|
onResume={tts.resume}
|
|
onStop={tts.stop}
|
|
onSeek={tts.seek}
|
|
/>
|
|
</Reader>
|
|
<SettingsPanel
|
|
isOpen={isSettingsOpen}
|
|
onClose={() => setIsSettingsOpen(false)}
|
|
readerSettings={readerSettings}
|
|
onReaderSettingsChange={setReaderSettings}
|
|
ttsSettings={ttsSettings}
|
|
onTTSSettingsChange={setTTSSettings}
|
|
availableVoices={tts.voices}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// List view
|
|
return (
|
|
<div className="min-h-screen flex">
|
|
{/* Sidebar */}
|
|
<aside
|
|
className={`${
|
|
isSidebarOpen ? "w-64" : "w-0"
|
|
} flex-shrink-0 border-r border-[var(--border)] transition-all duration-200 overflow-hidden`}
|
|
>
|
|
<div className="w-64 h-full flex flex-col">
|
|
<div className="p-4 border-b border-[var(--border)]">
|
|
<h1 className="text-xl font-bold flex items-center gap-2">
|
|
<BookOpen className="w-6 h-6" />
|
|
ReadLater
|
|
</h1>
|
|
{stats && stats.streak > 0 && (
|
|
<p className="text-xs text-[var(--muted)] mt-1">
|
|
🔥 {stats.streak} day streak
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<nav className="flex-1 p-2 overflow-y-auto">
|
|
{/* Main filters */}
|
|
{[
|
|
{ value: "all", label: "To Read", icon: BookOpen },
|
|
{ value: "favorites", label: "Favorites", icon: Star },
|
|
{ value: "archived", label: "Archived", icon: Archive },
|
|
].map(({ value, label, icon: Icon }) => (
|
|
<button
|
|
key={value}
|
|
onClick={() => {
|
|
setFilter(value as FilterType);
|
|
setSelectedFolderId(null);
|
|
setSearchQuery("");
|
|
}}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
|
filter === value && !selectedFolderId
|
|
? "bg-[var(--accent)] text-white"
|
|
: "text-[var(--foreground)] hover:bg-[var(--surface)]"
|
|
}`}
|
|
>
|
|
<Icon className="w-5 h-5" />
|
|
{label}
|
|
</button>
|
|
))}
|
|
|
|
{/* Folders */}
|
|
{folders.length > 0 && (
|
|
<div className="mt-4 pt-4 border-t border-[var(--border)]">
|
|
<p className="px-4 py-2 text-xs text-[var(--muted)] uppercase tracking-wide">
|
|
Folders
|
|
</p>
|
|
{folders.map((folder) => (
|
|
<button
|
|
key={folder.id}
|
|
onClick={() => {
|
|
setFilter("folder");
|
|
setSelectedFolderId(folder.id);
|
|
setSearchQuery("");
|
|
}}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
|
selectedFolderId === folder.id
|
|
? "bg-[var(--accent)] text-white"
|
|
: "text-[var(--foreground)] hover:bg-[var(--surface)]"
|
|
}`}
|
|
>
|
|
<FolderIcon
|
|
className="w-5 h-5"
|
|
style={{ color: selectedFolderId === folder.id ? "white" : folder.color }}
|
|
/>
|
|
{folder.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</nav>
|
|
|
|
<div className="p-2 border-t border-[var(--border)]">
|
|
<Link
|
|
href="/settings"
|
|
className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors"
|
|
>
|
|
<Settings className="w-5 h-5" />
|
|
Settings
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main content */}
|
|
<main className="flex-1 flex flex-col min-w-0">
|
|
{/* Select mode bar */}
|
|
{isSelectMode ? (
|
|
<header className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)] bg-[var(--accent)]/10">
|
|
<button
|
|
onClick={exitSelectMode}
|
|
className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<span className="font-medium">
|
|
{selectedIds.size} selected
|
|
</span>
|
|
<button
|
|
onClick={handleSelectAll}
|
|
className="text-sm text-[var(--accent)] hover:underline"
|
|
>
|
|
{selectedIds.size === articles.length ? "Deselect all" : "Select all"}
|
|
</button>
|
|
<div className="flex-1" />
|
|
{filter === "archived" ? (
|
|
<button
|
|
onClick={() => handleBulkArchive(false)}
|
|
disabled={selectedIds.size === 0 || isBulkUpdating}
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--accent)] text-white hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
<ArchiveRestore className="w-4 h-4" />
|
|
{isBulkUpdating ? "Moving..." : "Unarchive"}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => handleBulkArchive(true)}
|
|
disabled={selectedIds.size === 0 || isBulkUpdating}
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--accent)] text-white hover:opacity-90 transition-opacity disabled:opacity-50"
|
|
>
|
|
<Archive className="w-4 h-4" />
|
|
{isBulkUpdating ? "Archiving..." : "Archive"}
|
|
</button>
|
|
)}
|
|
</header>
|
|
) : (
|
|
<header className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)]">
|
|
<button
|
|
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
|
className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
</button>
|
|
|
|
{/* Search */}
|
|
<div className="flex-1 flex items-center gap-2 max-w-md">
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted)]" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
|
|
placeholder="Search articles..."
|
|
className="w-full pl-10 pr-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--background)] text-sm"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
onClick={() => {
|
|
setSearchQuery("");
|
|
setFilter("all");
|
|
fetchArticles();
|
|
}}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2"
|
|
>
|
|
<X className="w-4 h-4 text-[var(--muted)]" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<span className="text-[var(--muted)] text-sm">
|
|
{articles.length} articles
|
|
</span>
|
|
|
|
{/* Sort dropdown */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setShowSortMenu(!showSortMenu)}
|
|
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors"
|
|
>
|
|
<ArrowUpDown className="w-4 h-4" />
|
|
<span className="hidden sm:inline">
|
|
{sortBy === "newest" && "Newest"}
|
|
{sortBy === "oldest" && "Oldest"}
|
|
{sortBy === "title-asc" && "A-Z"}
|
|
{sortBy === "title-desc" && "Z-A"}
|
|
</span>
|
|
</button>
|
|
{showSortMenu && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-10"
|
|
onClick={() => setShowSortMenu(false)}
|
|
/>
|
|
<div className="absolute right-0 top-full mt-1 bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-lg z-20 py-1 min-w-[140px]">
|
|
{[
|
|
{ value: "newest", label: "Newest first" },
|
|
{ value: "oldest", label: "Oldest first" },
|
|
{ value: "title-asc", label: "Title A-Z" },
|
|
{ value: "title-desc", label: "Title Z-A" },
|
|
].map((option) => (
|
|
<button
|
|
key={option.value}
|
|
onClick={() => {
|
|
setSortBy(option.value as SortType);
|
|
setShowSortMenu(false);
|
|
}}
|
|
className={`w-full px-4 py-2 text-left text-sm hover:bg-[var(--surface)] transition-colors ${
|
|
sortBy === option.value ? "text-[var(--accent)] font-medium" : ""
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{articles.length > 0 && (
|
|
<button
|
|
onClick={() => setIsSelectMode(true)}
|
|
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors"
|
|
>
|
|
<CheckSquare className="w-4 h-4" />
|
|
Select
|
|
</button>
|
|
)}
|
|
</header>
|
|
)}
|
|
|
|
<AddArticle onAdd={handleAddArticle} />
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{isLoading || isSearching ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-pulse text-[var(--muted)]">
|
|
{isSearching ? "Searching..." : "Loading..."}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<ArticleList
|
|
articles={articles}
|
|
isSelectMode={isSelectMode}
|
|
selectedIds={selectedIds}
|
|
onSelect={handleSelectArticle}
|
|
onToggleSelect={handleToggleSelect}
|
|
onToggleFavorite={handleToggleFavorite}
|
|
onToggleArchive={handleToggleArchive}
|
|
onDelete={handleDelete}
|
|
/>
|
|
)}
|
|
</div>
|
|
</main>
|
|
|
|
<SettingsPanel
|
|
isOpen={isSettingsOpen}
|
|
onClose={() => setIsSettingsOpen(false)}
|
|
readerSettings={readerSettings}
|
|
onReaderSettingsChange={setReaderSettings}
|
|
ttsSettings={ttsSettings}
|
|
onTTSSettingsChange={setTTSSettings}
|
|
availableVoices={tts.voices}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|