v2.0: Major feature update

New Features:
- API key authentication for external access
- Apple Shortcuts integration endpoint (/api/v1/add)
- Full-text search across all articles
- Folders for organizing articles
- Highlights and notes on articles
- Reading stats with streaks
- Reading goals (daily/weekly/monthly)
- Import from Pocket/Instapaper
- RSS feed output
- PWA support for mobile
- Auto theme scheduling (day/night)
- Settings page with all configuration

API Endpoints:
- /api/v1/add - Add articles via API key
- /api/keys - Manage API keys
- /api/search - Full-text search
- /api/folders - Folder management
- /api/highlights - Highlights/notes
- /api/stats - Reading statistics
- /api/goals - Reading goals
- /api/import - Pocket/Instapaper import
- /api/rss - RSS feed

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { Article } from "@/lib/types";
+import { Article, Folder } from "@/lib/types";
 import { useReaderSettings, useTTSSettings } from "@/hooks/useSettings";
 import { useTTS } from "@/hooks/useTTS";
 import { ArticleList } from "@/components/ArticleList";
@@ -9,17 +9,33 @@ 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 } from "lucide-react";
+import {
+  BookOpen,
+  Star,
+  Archive,
+  Menu,
+  Search,
+  FolderIcon,
+  Settings,
+  BarChart3,
+  X,
+} from "lucide-react";
+import Link from "next/link";
 
-type FilterType = "all" | "favorites" | "archived";
+type FilterType = "all" | "favorites" | "archived" | "folder" | "search";
 
 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 [readerSettings, setReaderSettings] = useReaderSettings();
   const [ttsSettings, setTTSSettings] = useTTSSettings();
@@ -29,15 +45,26 @@ export default function Home() {
     text: selectedArticle?.textContent || "",
   });
 
-  // Apply theme
+  // Apply theme (with auto-scheduling)
   useEffect(() => {
-    document.documentElement.setAttribute("data-theme", readerSettings.theme);
-  }, [readerSettings.theme]);
+    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]);
 
   // Fetch articles
   const fetchArticles = useCallback(async () => {
     try {
-      const response = await fetch(`/api/articles?filter=${filter}`);
+      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();
         setArticles(data);
@@ -47,11 +74,65 @@ export default function Home() {
     } finally {
       setIsLoading(false);
     }
-  }, [filter]);
+  }, [filter, selectedFolderId]);
+
+  // 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();
-  }, [fetchArticles]);
+    fetchFolders();
+    fetchStats();
+  }, [fetchArticles, fetchFolders, fetchStats]);
+
+  // 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) => {
@@ -67,6 +148,7 @@ export default function Home() {
     }
 
     await fetchArticles();
+    fetchStats();
   };
 
   // Toggle favorite
@@ -95,6 +177,7 @@ export default function Home() {
     });
 
     await fetchArticles();
+    fetchStats();
 
     if (selectedArticle?.id === id) {
       setSelectedArticle(null);
@@ -165,8 +248,15 @@ export default function Home() {
               <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">
+
+          <nav className="flex-1 p-2 overflow-y-auto">
+            {/* Main filters */}
             {[
               { value: "all", label: "All Articles", icon: BookOpen },
               { value: "favorites", label: "Favorites", icon: Star },
@@ -174,9 +264,13 @@ export default function Home() {
             ].map(({ value, label, icon: Icon }) => (
               <button
                 key={value}
-                onClick={() => setFilter(value as FilterType)}
+                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
+                  filter === value && !selectedFolderId
                     ? "bg-[var(--accent)] text-white"
                     : "text-[var(--foreground)] hover:bg-[var(--surface)]"
                 }`}
@@ -185,14 +279,46 @@ export default function Home() {
                 {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-4 border-t border-[var(--border)]">
-            <button
-              onClick={() => setIsSettingsOpen(true)}
-              className="w-full px-4 py-2 text-[var(--muted)] hover:text-[var(--foreground)] transition-colors text-left"
+
+          <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
-            </button>
+            </Link>
           </div>
         </div>
       </aside>
@@ -202,26 +328,51 @@ export default function Home() {
         <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 lg:hidden"
+            className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
           >
             <Menu className="w-5 h-5" />
           </button>
-          <h2 className="text-lg font-semibold">
-            {filter === "all"
-              ? "All Articles"
-              : filter === "favorites"
-              ? "Favorites"
-              : "Archived"}
-          </h2>
-          <span className="text-[var(--muted)]">({articles.length})</span>
+
+          {/* 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>
         </header>
 
         <AddArticle onAdd={handleAddArticle} />
 
         <div className="flex-1 overflow-y-auto">
-          {isLoading ? (
+          {isLoading || isSearching ? (
             <div className="flex items-center justify-center h-64">
-              <div className="animate-pulse text-[var(--muted)]">Loading...</div>
+              <div className="animate-pulse text-[var(--muted)]">
+                {isSearching ? "Searching..." : "Loading..."}
+              </div>
             </div>
           ) : (
             <ArticleList