mirror of
https://github.com/Tony0410/readlater.git
synced 2026-05-25 14:21:40 +08:00
Add bulk select and archive, improve performance
- Add database indexes on isArchived, isFavorite, createdAt columns - Optimize article list API to exclude content/textContent fields - Add PATCH /api/articles endpoint for bulk updates - Implement multi-select mode with Select/Deselect all - Add bulk archive/unarchive buttons - Rename "All Articles" to "To Read" - Fetch full article content only when opening for reading Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Gemini Agent
207
src/app/page.tsx
207
src/app/page.tsx
@@ -17,8 +17,9 @@ import {
|
||||
Search,
|
||||
FolderIcon,
|
||||
Settings,
|
||||
BarChart3,
|
||||
X,
|
||||
CheckSquare,
|
||||
ArchiveRestore,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
@@ -36,6 +37,9 @@ export default function Home() {
|
||||
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 [readerSettings, setReaderSettings] = useReaderSettings();
|
||||
const [ttsSettings, setTTSSettings] = useTTSSettings();
|
||||
@@ -194,6 +198,77 @@ export default function Home() {
|
||||
}
|
||||
};
|
||||
|
||||
// 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 },
|
||||
}),
|
||||
});
|
||||
await fetchArticles();
|
||||
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 (
|
||||
@@ -268,7 +343,7 @@ export default function Home() {
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{/* Main filters */}
|
||||
{[
|
||||
{ value: "all", label: "All Articles", icon: BookOpen },
|
||||
{ value: "all", label: "To Read", icon: BookOpen },
|
||||
{ value: "favorites", label: "Favorites", icon: Star },
|
||||
{ value: "archived", label: "Archived", icon: Archive },
|
||||
].map(({ value, label, icon: Icon }) => (
|
||||
@@ -335,45 +410,96 @@ export default function Home() {
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 flex flex-col min-w-0">
|
||||
<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>
|
||||
{/* 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>
|
||||
)}
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
<span className="text-[var(--muted)] text-sm">
|
||||
{articles.length} articles
|
||||
</span>
|
||||
</header>
|
||||
<span className="text-[var(--muted)] text-sm">
|
||||
{articles.length} articles
|
||||
</span>
|
||||
|
||||
{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} />
|
||||
|
||||
@@ -387,7 +513,10 @@ export default function Home() {
|
||||
) : (
|
||||
<ArticleList
|
||||
articles={articles}
|
||||
onSelect={setSelectedArticle}
|
||||
isSelectMode={isSelectMode}
|
||||
selectedIds={selectedIds}
|
||||
onSelect={handleSelectArticle}
|
||||
onToggleSelect={handleToggleSelect}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
onToggleArchive={handleToggleArchive}
|
||||
onDelete={handleDelete}
|
||||
|
||||
Reference in New Issue
Block a user