Add sorting and client-side caching for instant switching

- 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>

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Article, Folder } from "@/lib/types";
 import { useReaderSettings, useTTSSettings } from "@/hooks/useSettings";
 import { useTTS } from "@/hooks/useTTS";
@@ -17,12 +17,19 @@ import {
   Search,
   FolderIcon,
   Settings,
-  BarChart3,
   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[]>([]);
@@ -36,6 +43,11 @@ 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 [sortBy, setSortBy] = useState<SortType>("newest");
+  const [showSortMenu, setShowSortMenu] = useState(false);
 
   const [readerSettings, setReaderSettings] = useReaderSettings();
   const [ttsSettings, setTTSSettings] = useTTSSettings();
@@ -57,8 +69,37 @@ export default function Home() {
     }
   }, [readerSettings]);
 
-  // Fetch articles
+  // Sort articles client-side
-  const fetchArticles = useCallback(async () => {
+  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) {
@@ -67,14 +108,16 @@ export default function Home() {
       const response = await fetch(url);
       if (response.ok) {
         const data = await response.json();
-        setArticles(data);
+        // 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]);
+  }, [filter, selectedFolderId, sortBy, sortArticles]);
 
   // Fetch folders
   const fetchFolders = useCallback(async () => {
@@ -112,6 +155,15 @@ export default function Home() {
     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()) {
@@ -147,7 +199,8 @@ export default function Home() {
       throw new Error(data.error || "Failed to add article");
     }
 
-    await fetchArticles();
+    articleCache.clear();
+    await fetchArticles(true);
     fetchStats();
   };
 
@@ -176,7 +229,8 @@ export default function Home() {
       body: JSON.stringify({ isArchived }),
     });
 
-    await fetchArticles();
+    articleCache.clear();
+    await fetchArticles(true);
     fetchStats();
 
     if (selectedArticle?.id === id) {
@@ -187,13 +241,87 @@ export default function Home() {
   // Delete article
   const handleDelete = async (id: string) => {
     await fetch(`/api/articles/${id}`, { method: "DELETE" });
-    await fetchArticles();
+    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 (
@@ -268,7 +396,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,6 +463,46 @@ export default function Home() {
 
       {/* 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)}
@@ -373,7 +541,63 @@ export default function Home() {
             <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} />
 
@@ -387,7 +611,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,16 +57,33 @@ export function ArticleList({
 
   return (
     <div className="divide-y divide-[var(--border)]">
-      {articles.map((article) => (
+      {articles.map((article) => {
+        const isSelected = selectedIds.has(article.id);
+        return (
           <div
             key={article.id}
             className={`p-4 cursor-pointer transition-colors hover:bg-[var(--surface)] ${
               selectedId === article.id ? "bg-[var(--surface)]" : ""
-          }`}
+            } ${isSelected ? "bg-[var(--accent)]/10" : ""}`}
-          onClick={() => onSelect(article)}
+            onClick={() => {
+              if (isSelectMode && onToggleSelect) {
+                onToggleSelect(article.id);
+              } else {
+                onSelect(article);
+              }
+            }}
           >
             <div className="flex gap-4">
-            {article.leadImage && (
+              {isSelectMode && (
+                <div className="flex-shrink-0 flex items-start pt-1">
+                  {isSelected ? (
+                    <CheckSquare className="w-5 h-5 text-[var(--accent)]" />
+                  ) : (
+                    <Square className="w-5 h-5 text-[var(--muted)]" />
+                  )}
+                </div>
+              )}
+              {article.leadImage && !isSelectMode && (
                 <img
                   src={article.leadImage}
                   alt=""
@@ -73,7 +96,7 @@ export function ArticleList({
                   {article.siteName}
                   {article.author && ` · ${article.author}`}
                 </p>
-              {article.excerpt && (
+                {!isSelectMode && article.excerpt && (
                   <p className="text-sm text-[var(--muted)] line-clamp-2">
                     {article.excerpt}
                   </p>
@@ -90,7 +113,7 @@ export function ArticleList({
                 </div>
               </div>
             </div>
-          <div className="flex items-center gap-2 mt-3">
+            {!isSelectMode && <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>
   );
 }