Initial commit: ReadLater v1.0

- Save articles via URL or bookmarklet
- Clean dark reader with customizable fonts/sizing
- Text-to-speech with browser + Kokoro support
- Speed control up to 3x
- Favorites and archive
- SQLite database with Drizzle ORM
- Docker deployment ready

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

src/app/api/articles/[id]/route.ts

@@ -0,0 +1,112 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db, schema } from "@/lib/db";
+import { eq } from "drizzle-orm";
+
+interface RouteParams {
+  params: Promise<{ id: string }>;
+}
+
+// GET /api/articles/[id] - Get single article
+export async function GET(request: NextRequest, { params }: RouteParams) {
+  try {
+    const { id } = await params;
+
+    const article = await db
+      .select()
+      .from(schema.articles)
+      .where(eq(schema.articles.id, id))
+      .limit(1);
+
+    if (article.length === 0) {
+      return NextResponse.json({ error: "Article not found" }, { status: 404 });
+    }
+
+    return NextResponse.json(article[0]);
+  } catch (error) {
+    console.error("Error fetching article:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch article" },
+      { status: 500 }
+    );
+  }
+}
+
+// PATCH /api/articles/[id] - Update article
+export async function PATCH(request: NextRequest, { params }: RouteParams) {
+  try {
+    const { id } = await params;
+    const body = await request.json();
+
+    // Only allow updating specific fields
+    const allowedFields = [
+      "isFavorite",
+      "isArchived",
+      "readingProgress",
+      "tags",
+      "readAt",
+    ];
+    const updates: Record<string, unknown> = { updatedAt: new Date() };
+
+    for (const field of allowedFields) {
+      if (field in body) {
+        if (field === "tags" && Array.isArray(body[field])) {
+          updates[field] = JSON.stringify(body[field]);
+        } else if (field === "readAt" && body[field]) {
+          updates[field] = new Date(body[field]);
+        } else {
+          updates[field] = body[field];
+        }
+      }
+    }
+
+    await db
+      .update(schema.articles)
+      .set(updates)
+      .where(eq(schema.articles.id, id));
+
+    const article = await db
+      .select()
+      .from(schema.articles)
+      .where(eq(schema.articles.id, id))
+      .limit(1);
+
+    if (article.length === 0) {
+      return NextResponse.json({ error: "Article not found" }, { status: 404 });
+    }
+
+    return NextResponse.json(article[0]);
+  } catch (error) {
+    console.error("Error updating article:", error);
+    return NextResponse.json(
+      { error: "Failed to update article" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE /api/articles/[id] - Delete article
+export async function DELETE(request: NextRequest, { params }: RouteParams) {
+  try {
+    const { id } = await params;
+
+    const existing = await db
+      .select()
+      .from(schema.articles)
+      .where(eq(schema.articles.id, id))
+      .limit(1);
+
+    if (existing.length === 0) {
+      return NextResponse.json({ error: "Article not found" }, { status: 404 });
+    }
+
+    await db.delete(schema.articles).where(eq(schema.articles.id, id));
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Error deleting article:", error);
+    return NextResponse.json(
+      { error: "Failed to delete article" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/articles/route.ts

@@ -0,0 +1,93 @@
+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";
+
+// GET /api/articles - List all articles
+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);
+
+    if (filter === "favorites") {
+      query = query.where(eq(schema.articles.isFavorite, true)) as typeof query;
+    } else if (filter === "archived") {
+      query = query.where(eq(schema.articles.isArchived, true)) as typeof query;
+    } else {
+      // Default: show non-archived
+      query = query.where(eq(schema.articles.isArchived, false)) as typeof query;
+    }
+
+    const articles = await query.orderBy(desc(schema.articles.createdAt));
+
+    return NextResponse.json(articles);
+  } catch (error) {
+    console.error("Error fetching articles:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch articles" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST /api/articles - Save a new article
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { url } = body;
+
+    if (!url) {
+      return NextResponse.json({ error: "URL is required" }, { status: 400 });
+    }
+
+    // Check if article already exists
+    const existing = await db
+      .select()
+      .from(schema.articles)
+      .where(eq(schema.articles.url, url))
+      .limit(1);
+
+    if (existing.length > 0) {
+      return NextResponse.json(
+        { error: "Article already saved", article: existing[0] },
+        { status: 409 }
+      );
+    }
+
+    // Extract article content
+    const extracted = await extractArticle(url);
+
+    const id = uuidv4();
+    const newArticle: schema.NewArticle = {
+      id,
+      url,
+      title: extracted.title,
+      author: extracted.author,
+      siteName: extracted.siteName,
+      excerpt: extracted.excerpt,
+      content: extracted.content,
+      textContent: extracted.textContent,
+      leadImage: extracted.leadImage,
+      wordCount: extracted.wordCount,
+    };
+
+    await db.insert(schema.articles).values(newArticle);
+
+    const article = await db
+      .select()
+      .from(schema.articles)
+      .where(eq(schema.articles.id, id))
+      .limit(1);
+
+    return NextResponse.json(article[0], { status: 201 });
+  } catch (error) {
+    console.error("Error saving article:", error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to save article" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/save/route.ts

@@ -0,0 +1,140 @@
+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 { eq } from "drizzle-orm";
+
+// GET /api/save?url=... - Save article and return HTML response for bookmarklet
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const url = searchParams.get("url");
+
+  const htmlResponse = (status: "success" | "error" | "exists", message: string) => {
+    const bgColor = status === "success" ? "#22c55e" : status === "exists" ? "#eab308" : "#ef4444";
+    const html = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ReadLater</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #000;
+      color: #fff;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .container {
+      text-align: center;
+      max-width: 300px;
+    }
+    .icon {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: ${bgColor};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 20px;
+    }
+    .icon svg {
+      width: 30px;
+      height: 30px;
+      fill: white;
+    }
+    h1 {
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+    p {
+      color: #888;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .close {
+      margin-top: 20px;
+      padding: 10px 20px;
+      background: #333;
+      border: none;
+      border-radius: 8px;
+      color: #fff;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .close:hover {
+      background: #444;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="icon">
+      ${status === "success" ? '<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>' : status === "exists" ? '<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>' : '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'}
+    </div>
+    <h1>${status === "success" ? "Saved!" : status === "exists" ? "Already Saved" : "Error"}</h1>
+    <p>${message}</p>
+    <button class="close" onclick="window.close()">Close</button>
+  </div>
+  <script>
+    setTimeout(() => window.close(), 3000);
+  </script>
+</body>
+</html>`;
+    return new NextResponse(html, {
+      headers: { "Content-Type": "text/html" },
+    });
+  };
+
+  if (!url) {
+    return htmlResponse("error", "No URL provided");
+  }
+
+  try {
+    const decodedUrl = decodeURIComponent(url);
+
+    // Check if article already exists
+    const existing = await db
+      .select()
+      .from(schema.articles)
+      .where(eq(schema.articles.url, decodedUrl))
+      .limit(1);
+
+    if (existing.length > 0) {
+      return htmlResponse("exists", `"${existing[0].title}" is already in your reading list`);
+    }
+
+    // Extract article content
+    const extracted = await extractArticle(decodedUrl);
+
+    const id = uuidv4();
+    const newArticle: schema.NewArticle = {
+      id,
+      url: decodedUrl,
+      title: extracted.title,
+      author: extracted.author,
+      siteName: extracted.siteName,
+      excerpt: extracted.excerpt,
+      content: extracted.content,
+      textContent: extracted.textContent,
+      leadImage: extracted.leadImage,
+      wordCount: extracted.wordCount,
+    };
+
+    await db.insert(schema.articles).values(newArticle);
+
+    return htmlResponse("success", `"${extracted.title}" has been added to your reading list`);
+  } catch (error) {
+    console.error("Error saving article:", error);
+    return htmlResponse(
+      "error",
+      error instanceof Error ? error.message : "Failed to save article"
+    );
+  }
+}

src/app/bookmarklet/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { BookOpen, Copy, Check } from "lucide-react";
+import Link from "next/link";
+
+export default function BookmarkletPage() {
+  const [baseUrl, setBaseUrl] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    setBaseUrl(window.location.origin);
+  }, []);
+
+  const bookmarkletCode = `javascript:(function(){var url=encodeURIComponent(window.location.href);window.open('${baseUrl}/api/save?url='+url,'_blank','width=400,height=300');})();`;
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(bookmarkletCode);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)] p-8">
+      <div className="max-w-2xl mx-auto">
+        <Link
+          href="/"
+          className="flex items-center gap-2 text-[var(--accent)] hover:underline mb-8"
+        >
+          <BookOpen className="w-5 h-5" />
+          Back to ReadLater
+        </Link>
+
+        <h1 className="text-3xl font-bold mb-6">Bookmarklet</h1>
+
+        <div className="bg-[var(--surface)] rounded-lg p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">Quick Save Bookmarklet</h2>
+          <p className="text-[var(--muted)] mb-6">
+            Drag this button to your bookmarks bar, or right-click and &quot;Add to Bookmarks&quot;.
+            Then click it on any page to save the article to ReadLater.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 items-start">
+            <a
+              href={bookmarkletCode}
+              onClick={(e) => e.preventDefault()}
+              className="inline-flex items-center gap-2 px-6 py-3 bg-[var(--accent)] text-white rounded-lg font-medium cursor-move"
+              title="Drag to bookmarks bar"
+            >
+              <BookOpen className="w-5 h-5" />
+              Save to ReadLater
+            </a>
+
+            <button
+              onClick={handleCopy}
+              className="inline-flex items-center gap-2 px-4 py-3 border border-[var(--border)] rounded-lg hover:bg-[var(--surface)] transition-colors"
+            >
+              {copied ? (
+                <>
+                  <Check className="w-5 h-5 text-green-500" />
+                  Copied!
+                </>
+              ) : (
+                <>
+                  <Copy className="w-5 h-5" />
+                  Copy code
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-[var(--surface)] rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-4">Manual Installation</h2>
+          <p className="text-[var(--muted)] mb-4">
+            If dragging doesn&apos;t work, create a new bookmark and paste this as the URL:
+          </p>
+          <pre className="bg-[var(--background)] p-4 rounded-lg overflow-x-auto text-sm">
+            <code className="text-[var(--muted)]">{bookmarkletCode}</code>
+          </pre>
+        </div>
+
+        <div className="mt-8 text-[var(--muted)] text-sm">
+          <h3 className="font-semibold mb-2">How it works:</h3>
+          <ol className="list-decimal list-inside space-y-1">
+            <li>Click the bookmarklet on any article page</li>
+            <li>A popup will confirm the article was saved</li>
+            <li>The article appears in your ReadLater list</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/globals.css

@@ -0,0 +1,156 @@
+@import "tailwindcss";
+
+:root {
+  --background: #000000;
+  --foreground: #ffffff;
+  --muted: #888888;
+  --border: #333333;
+  --accent: #3b82f6;
+  --surface: #111111;
+}
+
+[data-theme="light"] {
+  --background: #ffffff;
+  --foreground: #1a1a1a;
+  --muted: #666666;
+  --border: #e5e5e5;
+  --accent: #2563eb;
+  --surface: #f5f5f5;
+}
+
+[data-theme="sepia"] {
+  --background: #f4ecd8;
+  --foreground: #5c4b37;
+  --muted: #8b7355;
+  --border: #d4c4a8;
+  --accent: #8b5a2b;
+  --surface: #ebe3d0;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-accent: var(--accent);
+  --color-surface: var(--surface);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+/* Reader fonts */
+.font-serif {
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+.font-sans {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.font-mono {
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+}
+
+.font-system {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Reader content styles */
+.reader-content {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.reader-content p {
+  margin-bottom: 1.5em;
+}
+
+.reader-content h1,
+.reader-content h2,
+.reader-content h3,
+.reader-content h4 {
+  margin-top: 1.5em;
+  margin-bottom: 0.75em;
+  font-weight: 600;
+}
+
+.reader-content a {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+.reader-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 1em 0;
+}
+
+.reader-content blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1em;
+  margin-left: 0;
+  font-style: italic;
+  color: var(--muted);
+}
+
+.reader-content pre {
+  background: var(--surface);
+  padding: 1em;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+}
+
+.reader-content code {
+  background: var(--surface);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  font-size: 0.9em;
+}
+
+.reader-content pre code {
+  background: none;
+  padding: 0;
+}
+
+.reader-content ul,
+.reader-content ol {
+  margin-left: 1.5em;
+  margin-bottom: 1em;
+}
+
+.reader-content li {
+  margin-bottom: 0.5em;
+}
+
+/* TTS highlight */
+.tts-highlight {
+  background-color: var(--accent);
+  color: white;
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--muted);
+}

src/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "ReadLater - Save and Read Articles",
+  description: "Self-hosted read-it-later app with text-to-speech",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" data-theme="dark">
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Article } 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 } from "lucide-react";
+
+type FilterType = "all" | "favorites" | "archived";
+
+export default function Home() {
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [selectedArticle, setSelectedArticle] = useState<Article | null>(null);
+  const [filter, setFilter] = useState<FilterType>("all");
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [readerSettings, setReaderSettings] = useReaderSettings();
+  const [ttsSettings, setTTSSettings] = useTTSSettings();
+
+  const tts = useTTS({
+    settings: ttsSettings,
+    text: selectedArticle?.textContent || "",
+  });
+
+  // Apply theme
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", readerSettings.theme);
+  }, [readerSettings.theme]);
+
+  // Fetch articles
+  const fetchArticles = useCallback(async () => {
+    try {
+      const response = await fetch(`/api/articles?filter=${filter}`);
+      if (response.ok) {
+        const data = await response.json();
+        setArticles(data);
+      }
+    } catch (error) {
+      console.error("Failed to fetch articles:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [filter]);
+
+  useEffect(() => {
+    fetchArticles();
+  }, [fetchArticles]);
+
+  // 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");
+    }
+
+    await fetchArticles();
+  };
+
+  // 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 }),
+    });
+
+    await fetchArticles();
+
+    if (selectedArticle?.id === id) {
+      setSelectedArticle(null);
+    }
+  };
+
+  // Delete article
+  const handleDelete = async (id: string) => {
+    await fetch(`/api/articles/${id}`, { method: "DELETE" });
+    await fetchArticles();
+
+    if (selectedArticle?.id === id) {
+      setSelectedArticle(null);
+    }
+  };
+
+  // Reading view
+  if (selectedArticle) {
+    return (
+      <>
+        <Reader
+          article={selectedArticle}
+          settings={readerSettings}
+          onBack={() => {
+            tts.stop();
+            setSelectedArticle(null);
+          }}
+          onToggleFavorite={() =>
+            handleToggleFavorite(selectedArticle.id, !selectedArticle.isFavorite)
+          }
+          onOpenSettings={() => setIsSettingsOpen(true)}
+        >
+          <TTSControls
+            isPlaying={tts.isPlaying}
+            isPaused={tts.isPaused}
+            isLoading={tts.isLoading}
+            onPlay={tts.play}
+            onPause={tts.pause}
+            onResume={tts.resume}
+            onStop={tts.stop}
+          />
+        </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>
+          </div>
+          <nav className="flex-1 p-2">
+            {[
+              { value: "all", label: "All Articles", 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)}
+                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+                  filter === value
+                    ? "bg-[var(--accent)] text-white"
+                    : "text-[var(--foreground)] hover:bg-[var(--surface)]"
+                }`}
+              >
+                <Icon className="w-5 h-5" />
+                {label}
+              </button>
+            ))}
+          </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"
+            >
+              Settings
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      {/* 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 lg:hidden"
+          >
+            <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>
+        </header>
+
+        <AddArticle onAdd={handleAddArticle} />
+
+        <div className="flex-1 overflow-y-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="animate-pulse text-[var(--muted)]">Loading...</div>
+            </div>
+          ) : (
+            <ArticleList
+              articles={articles}
+              onSelect={setSelectedArticle}
+              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>
+  );
+}