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>

src/app/api/articles/route.ts

@@ -2,15 +2,37 @@ import { NextRequest, NextResponse } from "next/server";
 import { db, schema } from "@/lib/db";
 import { extractArticle } from "@/lib/utils/extract";
 import { v4 as uuidv4 } from "uuid";
-import { desc, eq } from "drizzle-orm";
+import { desc, eq, inArray } from "drizzle-orm";
 
-// GET /api/articles - List all articles
+// GET /api/articles - List all articles (optimized - excludes content fields)
 export async function GET(request: NextRequest) {
   try {
     const searchParams = request.nextUrl.searchParams;
     const filter = searchParams.get("filter"); // all, favorites, archived
 
-    let query = db.select().from(schema.articles);
+    // Select only fields needed for list view (exclude large content/textContent)
+    const listFields = {
+      id: schema.articles.id,
+      url: schema.articles.url,
+      title: schema.articles.title,
+      author: schema.articles.author,
+      siteName: schema.articles.siteName,
+      excerpt: schema.articles.excerpt,
+      leadImage: schema.articles.leadImage,
+      wordCount: schema.articles.wordCount,
+      readingProgress: schema.articles.readingProgress,
+      readingTimeSeconds: schema.articles.readingTimeSeconds,
+      isFavorite: schema.articles.isFavorite,
+      isArchived: schema.articles.isArchived,
+      folderId: schema.articles.folderId,
+      tags: schema.articles.tags,
+      createdAt: schema.articles.createdAt,
+      updatedAt: schema.articles.updatedAt,
+      readAt: schema.articles.readAt,
+      finishedAt: schema.articles.finishedAt,
+    };
+
+    let query = db.select(listFields).from(schema.articles);
 
     if (filter === "favorites") {
       query = query.where(eq(schema.articles.isFavorite, true)) as typeof query;
@@ -33,6 +55,49 @@ export async function GET(request: NextRequest) {
   }
 }
 
+// PATCH /api/articles - Bulk update articles
+export async function PATCH(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { ids, updates } = body;
+
+    if (!ids || !Array.isArray(ids) || ids.length === 0) {
+      return NextResponse.json({ error: "Article IDs required" }, { status: 400 });
+    }
+
+    // Only allow certain fields to be bulk updated
+    const allowedUpdates: Partial<typeof schema.articles.$inferInsert> = {};
+    if (typeof updates.isArchived === "boolean") {
+      allowedUpdates.isArchived = updates.isArchived;
+    }
+    if (typeof updates.isFavorite === "boolean") {
+      allowedUpdates.isFavorite = updates.isFavorite;
+    }
+    if (updates.folderId !== undefined) {
+      allowedUpdates.folderId = updates.folderId;
+    }
+
+    if (Object.keys(allowedUpdates).length === 0) {
+      return NextResponse.json({ error: "No valid updates provided" }, { status: 400 });
+    }
+
+    allowedUpdates.updatedAt = new Date();
+
+    await db
+      .update(schema.articles)
+      .set(allowedUpdates)
+      .where(inArray(schema.articles.id, ids));
+
+    return NextResponse.json({ success: true, updated: ids.length });
+  } catch (error) {
+    console.error("Error bulk updating articles:", error);
+    return NextResponse.json(
+      { error: "Failed to update articles" },
+      { status: 500 }
+    );
+  }
+}
+
 // POST /api/articles - Save a new article
 export async function POST(request: NextRequest) {
   try {

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)]">
+        {/* Select mode bar */}
-          <button
+        {isSelectMode ? (
-            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+          <header className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)] bg-[var(--accent)]/10">
-            className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
+            <button
-          >
+              onClick={exitSelectMode}
-            <Menu className="w-5 h-5" />
+              className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
-          </button>
+            >
+              <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 */}
+            {/* Search */}
-          <div className="flex-1 flex items-center gap-2 max-w-md">
+            <div className="flex-1 flex items-center gap-2 max-w-md">
-            <div className="flex-1 relative">
+              <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted)]" />
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted)]" />
-              <input
+                <input
-                type="text"
+                  type="text"
-                value={searchQuery}
+                  value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                  onChange={(e) => setSearchQuery(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+                  onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-                placeholder="Search articles..."
+                  placeholder="Search articles..."
-                className="w-full pl-10 pr-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--background)] text-sm"
+                  className="w-full pl-10 pr-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--background)] text-sm"
-              />
+                />
-              {searchQuery && (
+                {searchQuery && (
-                <button
+                  <button
-                  onClick={() => {
+                    onClick={() => {
-                    setSearchQuery("");
+                      setSearchQuery("");
-                    setFilter("all");
+                      setFilter("all");
-                    fetchArticles();
+                      fetchArticles();
-                  }}
+                    }}
-                  className="absolute right-3 top-1/2 -translate-y-1/2"
+                    className="absolute right-3 top-1/2 -translate-y-1/2"
-                >
+                  >
-                  <X className="w-4 h-4 text-[var(--muted)]" />
+                    <X className="w-4 h-4 text-[var(--muted)]" />
-                </button>
+                  </button>
-              )}
+                )}
+              </div>
             </div>
-          </div>
 
-          <span className="text-[var(--muted)] text-sm">
+            <span className="text-[var(--muted)] text-sm">
-            {articles.length} articles
+              {articles.length} articles
-          </span>
+            </span>
-        </header>
+
+            {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}

src/components/ArticleList.tsx

@@ -1,13 +1,16 @@
 "use client";
 
 import { Article } from "@/lib/types";
-import { Star, Archive, Trash2, ExternalLink, Clock } from "lucide-react";
+import { Star, Archive, Trash2, ExternalLink, Clock, CheckSquare, Square } from "lucide-react";
 import { formatDistanceToNow } from "@/lib/utils/date";
 
 interface ArticleListProps {
   articles: Article[];
   selectedId?: string;
+  selectedIds?: Set<string>;
+  isSelectMode?: boolean;
   onSelect: (article: Article) => void;
+  onToggleSelect?: (id: string) => void;
   onToggleFavorite: (id: string, isFavorite: boolean) => void;
   onToggleArchive: (id: string, isArchived: boolean) => void;
   onDelete: (id: string) => void;
@@ -16,7 +19,10 @@ interface ArticleListProps {
 export function ArticleList({
   articles,
   selectedId,
+  selectedIds = new Set(),
+  isSelectMode = false,
   onSelect,
+  onToggleSelect,
   onToggleFavorite,
   onToggleArchive,
   onDelete,
@@ -51,46 +57,63 @@ export function ArticleList({
 
   return (
     <div className="divide-y divide-[var(--border)]">
-      {articles.map((article) => (
+      {articles.map((article) => {
-        <div
+        const isSelected = selectedIds.has(article.id);
-          key={article.id}
+        return (
-          className={`p-4 cursor-pointer transition-colors hover:bg-[var(--surface)] ${
+          <div
-            selectedId === article.id ? "bg-[var(--surface)]" : ""
+            key={article.id}
-          }`}
+            className={`p-4 cursor-pointer transition-colors hover:bg-[var(--surface)] ${
-          onClick={() => onSelect(article)}
+              selectedId === article.id ? "bg-[var(--surface)]" : ""
-        >
+            } ${isSelected ? "bg-[var(--accent)]/10" : ""}`}
-          <div className="flex gap-4">
+            onClick={() => {
-            {article.leadImage && (
+              if (isSelectMode && onToggleSelect) {
-              <img
+                onToggleSelect(article.id);
-                src={article.leadImage}
+              } else {
-                alt=""
+                onSelect(article);
-                className="w-20 h-20 object-cover rounded flex-shrink-0"
+              }
-              />
+            }}
-            )}
+          >
-            <div className="flex-1 min-w-0">
+            <div className="flex gap-4">
-              <h3 className="font-medium truncate mb-1">{article.title}</h3>
+              {isSelectMode && (
-              <p className="text-sm text-[var(--muted)] mb-2">
+                <div className="flex-shrink-0 flex items-start pt-1">
-                {article.siteName}
+                  {isSelected ? (
-                {article.author && ` · ${article.author}`}
+                    <CheckSquare className="w-5 h-5 text-[var(--accent)]" />
-              </p>
+                  ) : (
-              {article.excerpt && (
+                    <Square className="w-5 h-5 text-[var(--muted)]" />
-                <p className="text-sm text-[var(--muted)] line-clamp-2">
+                  )}
-                  {article.excerpt}
+                </div>
-                </p>
               )}
-              <div className="flex items-center gap-4 mt-2 text-xs text-[var(--muted)]">
+              {article.leadImage && !isSelectMode && (
-                <span className="flex items-center gap-1">
+                <img
-                  <Clock className="w-3 h-3" />
+                  src={article.leadImage}
-                  {Math.ceil(article.wordCount / 200)} min read
+                  alt=""
-                </span>
+                  className="w-20 h-20 object-cover rounded flex-shrink-0"
-                <span>{formatDistanceToNow(article.createdAt)}</span>
+                />
-                {article.readingProgress > 0 && article.readingProgress < 100 && (
+              )}
-                  <span>{article.readingProgress}% read</span>
+              <div className="flex-1 min-w-0">
+                <h3 className="font-medium truncate mb-1">{article.title}</h3>
+                <p className="text-sm text-[var(--muted)] mb-2">
+                  {article.siteName}
+                  {article.author && ` · ${article.author}`}
+                </p>
+                {!isSelectMode && article.excerpt && (
+                  <p className="text-sm text-[var(--muted)] line-clamp-2">
+                    {article.excerpt}
+                  </p>
                 )}
+                <div className="flex items-center gap-4 mt-2 text-xs text-[var(--muted)]">
+                  <span className="flex items-center gap-1">
+                    <Clock className="w-3 h-3" />
+                    {Math.ceil(article.wordCount / 200)} min read
+                  </span>
+                  <span>{formatDistanceToNow(article.createdAt)}</span>
+                  {article.readingProgress > 0 && article.readingProgress < 100 && (
+                    <span>{article.readingProgress}% read</span>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
+            {!isSelectMode && <div className="flex items-center gap-2 mt-3">
-          <div className="flex items-center gap-2 mt-3">
             <button
               onClick={(e) => {
                 e.stopPropagation();
@@ -141,9 +164,10 @@ export function ArticleList({
             >
               <Trash2 className="w-4 h-4" />
             </button>
+          </div>}
           </div>
-        </div>
+        );
-      ))}
+      })}
     </div>
   );
 }