feat: Introduce reader settings and dark mode support

Adds a new `ReaderSettings` type to manage user preferences such as dark mode, font size, line height, font family, and auto-scroll behavior.

Implements dark mode styling for various UI components including the `VoiceSelector` and `QueueItem`, enhancing visual consistency.

Enhances the `ReaderView` component to respect the `autoScroll` setting and introduces basic text styling options based on the new settings.

App.tsx

@@ -1,9 +1,9 @@
 
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { Plus, Play, Pause, SkipForward, SkipBack, Volume2, Gauge, Layout } from 'lucide-react';
-import { Article, PlaybackStatus, PlayerState, VoiceName, AudioSegment } from './types';
-import { AVAILABLE_VOICES, MIN_SPEED, MAX_SPEED, SPEED_STEP } from './constants';
+import { Plus, Play, Pause, SkipForward, SkipBack, Volume2, Gauge, Settings, Moon, Sun, Type, Keyboard } from 'lucide-react';
+import { Article, PlaybackStatus, PlayerState, VoiceName, AudioSegment, ReaderSettings } from './types';
+import { MIN_SPEED, MAX_SPEED, SPEED_STEP } from './constants';
 import { extractArticleContent, generateSpeechFromText } from './services/geminiService';
 import { base64ToUint8Array, createWavBlob } from './services/audioUtils';
 import { segmentText } from './services/textUtils';
@@ -15,8 +15,8 @@ export default function App() {
   // -- State --
   const [inputUrl, setInputUrl] = useState('');
   const [queue, setQueue] = useState<Article[]>([]);
-  // Selected article for viewing text (separate from playing)
   const [viewId, setViewId] = useState<string | null>(null);
+  const [showSettings, setShowSettings] = useState(false);
   
   const [playerState, setPlayerState] = useState<PlayerState>({
     isPlaying: false,
@@ -25,9 +25,16 @@ export default function App() {
     selectedVoice: VoiceName.Puck,
   });
 
+  const [settings, setSettings] = useState<ReaderSettings>({
+    isDarkMode: false,
+    fontSize: 'lg',
+    lineHeight: 'relaxed',
+    fontFamily: 'serif',
+    autoScroll: true
+  });
+
   // -- Refs --
   const audioRef = useRef<HTMLAudioElement>(new Audio());
-  // Track active processing to prevent duplicate fetch calls
   const processingRef = useRef<Set<string>>(new Set());
 
   // -- Helpers --
@@ -49,20 +56,15 @@ export default function App() {
   const updateSegment = (articleId: string, segmentId: string, updates: Partial<AudioSegment>) => {
     setQueue(prev => prev.map(article => {
       if (article.id !== articleId) return article;
-      
       const newSegments = article.segments.map(seg => 
         seg.id === segmentId ? { ...seg, ...updates } : seg
       );
-      
       return { ...article, segments: newSegments };
     }));
   };
 
   // -- Audio Generation Pipeline --
 
-  /**
-   * Fetches audio for a specific segment.
-   */
   const processSegmentAudio = useCallback(async (articleId: string, segmentId: string, text: string, voice: VoiceName) => {
     const uniqueKey = `${articleId}-${segmentId}`;
     if (processingRef.current.has(uniqueKey)) return;
@@ -75,7 +77,6 @@ export default function App() {
       const pcmData = base64ToUint8Array(base64Audio);
       const wavBlob = createWavBlob(pcmData);
       const audioUrl = URL.createObjectURL(wavBlob);
-      
       updateSegment(articleId, segmentId, { audioUrl, isLoading: false });
     } catch (error) {
       console.error("Segment generation failed", error);
@@ -85,18 +86,12 @@ export default function App() {
     }
   }, []);
 
-  /**
-   * Manages the buffer. ensure current segment + next N are ready.
-   * We buffer 5 segments ahead because the first few are very small (fast),
-   * so we need to be fetching the larger later ones while the small ones play.
-   */
   const manageBuffer = useCallback(async (article: Article) => {
     const currentIndex = article.currentSegmentIndex;
     const segmentsToBuffer = article.segments.slice(currentIndex, currentIndex + 5);
 
     for (const seg of segmentsToBuffer) {
       if (!seg.audioUrl && !seg.isLoading && !seg.hasError) {
-        // No await here - fire in background
         processSegmentAudio(article.id, seg.id, seg.text, playerState.selectedVoice);
       }
     }
@@ -124,13 +119,10 @@ export default function App() {
 
     try {
       const { title, text } = await extractArticleContent(newArticle.url);
-      
-      // 1. Split text into segments (Progressive: Small -> Large)
       const segments = segmentText(text);
       
-      // Add title as the very first segment (Super fast interaction)
       if (title) {
-        const titleSegment = segmentText(title)[0]; // Re-use segment logic for title
+        const titleSegment = segmentText(title)[0];
         if (titleSegment) segments.unshift(titleSegment);
       }
       
@@ -141,17 +133,13 @@ export default function App() {
         status: PlaybackStatus.LOADING_AUDIO
       });
 
-      // 2. Trigger audio for the first batch immediately
       if (segments.length > 0) {
         const initialLoadCount = Math.min(segments.length, 5);
-        
         for(let i = 0; i < initialLoadCount; i++) {
             processSegmentAudio(id, segments[i].id, segments[i].text, playerState.selectedVoice);
         }
-        
         updateArticle(id, { status: PlaybackStatus.READY });
         
-        // Auto-play logic
         setQueue(prev => {
             const current = prev.find(a => a.id === id);
             if (current && !playerState.isPlaying) {
@@ -187,23 +175,71 @@ export default function App() {
     }
   }, [playerState.currentArticleId]);
 
+  const skipSegment = useCallback((direction: 'next' | 'prev') => {
+    setQueue(prevQueue => {
+      const currentId = playerState.currentArticleId;
+      if (!currentId) return prevQueue;
+      
+      const article = prevQueue.find(a => a.id === currentId);
+      if (!article) return prevQueue;
+
+      let newIndex = direction === 'next' 
+        ? article.currentSegmentIndex + 1 
+        : article.currentSegmentIndex - 1;
+      
+      // Boundary checks
+      if (newIndex < 0) newIndex = 0;
+      if (newIndex >= article.segments.length) {
+         // If skipping past end, just stop for now (or go to next article logic)
+         newIndex = article.segments.length - 1; 
+      }
+
+      return prevQueue.map(a => a.id === currentId ? { ...a, currentSegmentIndex: newIndex } : a);
+    });
+  }, [playerState.currentArticleId]);
+
+  // -- Keyboard Shortcuts --
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ignore shortcuts if typing in input
+      if (document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement) {
+        return;
+      }
+
+      switch (e.code) {
+        case 'Space':
+          e.preventDefault();
+          if (playerState.isPlaying) pausePlayback();
+          else if (playerState.currentArticleId) playArticle(playerState.currentArticleId);
+          else if (queue.length > 0) playArticle(queue[0].id);
+          break;
+        case 'ArrowRight':
+          skipSegment('next');
+          break;
+        case 'ArrowLeft':
+          skipSegment('prev');
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [playerState.isPlaying, playerState.currentArticleId, queue, playArticle, pausePlayback, skipSegment]);
+
   // -- Effects --
 
-  // 1. Audio Player Loop
   useEffect(() => {
     const article = queue.find(a => a.id === playerState.currentArticleId);
     if (!article || !playerState.isPlaying) return;
 
     const currentSegment = article.segments[article.currentSegmentIndex];
     
-    // If finished all segments
     if (!currentSegment) {
       updateArticle(article.id, { status: PlaybackStatus.COMPLETED });
       setPlayerState(prev => ({ ...prev, isPlaying: false }));
       return;
     }
 
-    // Check if audio is ready
     if (currentSegment.audioUrl) {
         const audioEl = audioRef.current;
         const currentSrc = audioEl.getAttribute('data-current-src');
@@ -217,36 +253,27 @@ export default function App() {
             audioEl.play().catch(e => console.warn("Resume failed", e));
         }
     } else {
-        // If current segment is missing, ensure it's loading
         if (!currentSegment.isLoading && !currentSegment.hasError) {
             processSegmentAudio(article.id, currentSegment.id, currentSegment.text, playerState.selectedVoice);
         }
     }
-
-    // Always try to buffer ahead
     manageBuffer(article);
 
   }, [queue, playerState.currentArticleId, playerState.isPlaying, playerState.playbackRate, playerState.selectedVoice, manageBuffer, processSegmentAudio]);
 
-
-  // 2. Handle 'Ended' event to advance segment
   useEffect(() => {
     const audio = audioRef.current;
-    
     const handleEnded = () => {
       const currentId = playerState.currentArticleId;
-      
       setQueue(prevQueue => {
         const article = prevQueue.find(a => a.id === currentId);
         if (!article) return prevQueue;
 
         const nextIndex = article.currentSegmentIndex + 1;
         
-        // If we have a next segment, advance index
         if (nextIndex < article.segments.length) {
            return prevQueue.map(a => a.id === currentId ? { ...a, currentSegmentIndex: nextIndex } : a);
         } else {
-           // Article finished
            const artIndex = prevQueue.findIndex(a => a.id === currentId);
            if (artIndex !== -1 && artIndex < prevQueue.length - 1) {
              setTimeout(() => playArticle(prevQueue[artIndex + 1].id), 100); 
@@ -258,12 +285,10 @@ export default function App() {
         }
       });
     };
-
     audio.addEventListener('ended', handleEnded);
     return () => audio.removeEventListener('ended', handleEnded);
   }, [playerState.currentArticleId, playArticle]); 
 
-  // 3. Handle Speed Change
   const handleSpeedChange = (newSpeed: number) => {
     const speed = Math.max(MIN_SPEED, Math.min(MAX_SPEED, newSpeed));
     setPlayerState(prev => ({ ...prev, playbackRate: speed }));
@@ -272,30 +297,117 @@ export default function App() {
     }
   };
 
-
   // -- Render --
   
   const currentArticle = getCurrentArticle();
   const viewingArticle = getViewingArticle();
 
   return (
-    <div className="min-h-screen flex flex-col bg-slate-50 pb-32">
+    <div className={`${settings.isDarkMode ? 'dark' : ''} transition-colors duration-300`}>
+      <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 pb-32 transition-colors duration-300">
+        
         {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-6 py-4 sticky top-0 z-20 shadow-sm">
+        <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 px-6 py-4 sticky top-0 z-20 shadow-sm transition-colors duration-300">
           <div className="max-w-7xl mx-auto flex items-center justify-between">
             <div className="flex items-center gap-2">
-            <div className="bg-blue-600 text-white p-2 rounded-lg">
+              <div className="bg-blue-600 text-white p-2 rounded-lg shadow-md">
                 <Volume2 className="w-6 h-6" />
               </div>
-            <h1 className="text-xl font-bold text-slate-900 tracking-tight hidden sm:block">NewsCaster AI</h1>
+              <h1 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight hidden sm:block">NewsCaster AI</h1>
             </div>
             
+            <div className="flex items-center gap-4">
               <VoiceSelector 
                 selectedVoice={playerState.selectedVoice}
                 onVoiceChange={(v) => setPlayerState(prev => ({ ...prev, selectedVoice: v }))}
                 disabled={playerState.isPlaying} 
               />
+              <button 
+                onClick={() => setShowSettings(!showSettings)}
+                className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
+              >
+                <Settings className="w-5 h-5" />
+              </button>
             </div>
+          </div>
+
+          {/* Settings Menu */}
+          {showSettings && (
+            <div className="absolute right-4 top-16 bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-800 p-6 w-80 z-50 animate-in fade-in slide-in-from-top-4">
+              <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
+                <Settings className="w-4 h-4" /> Reader Preferences
+              </h3>
+              
+              <div className="space-y-6">
+                {/* Theme */}
+                <div className="flex items-center justify-between">
+                  <span className="text-slate-700 dark:text-slate-300 text-sm font-medium">Theme</span>
+                  <div className="flex bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
+                    <button 
+                      onClick={() => setSettings(s => ({...s, isDarkMode: false}))}
+                      className={`p-2 rounded-md transition-all ${!settings.isDarkMode ? 'bg-white shadow text-blue-600' : 'text-slate-400'}`}
+                    >
+                      <Sun className="w-4 h-4" />
+                    </button>
+                    <button 
+                      onClick={() => setSettings(s => ({...s, isDarkMode: true}))}
+                      className={`p-2 rounded-md transition-all ${settings.isDarkMode ? 'bg-slate-700 shadow text-blue-400' : 'text-slate-400'}`}
+                    >
+                      <Moon className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Font Size */}
+                <div className="space-y-2">
+                   <div className="flex justify-between text-sm">
+                      <span className="text-slate-700 dark:text-slate-300 font-medium">Text Size</span>
+                   </div>
+                   <input 
+                      type="range" min="0" max="4" step="1"
+                      value={['sm','base','lg','xl','2xl'].indexOf(settings.fontSize)}
+                      onChange={(e) => {
+                        const sizes = ['sm','base','lg','xl','2xl'] as const;
+                        setSettings(s => ({...s, fontSize: sizes[parseInt(e.target.value)]}));
+                      }}
+                      className="w-full h-2 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
+                   />
+                   <div className="flex justify-between text-xs text-slate-400">
+                     <span>Aa</span>
+                     <span>Aa</span>
+                   </div>
+                </div>
+
+                {/* Font Family */}
+                <div className="space-y-2">
+                  <span className="text-slate-700 dark:text-slate-300 text-sm font-medium block">Font Family</span>
+                  <div className="grid grid-cols-3 gap-2">
+                    {['serif', 'sans', 'mono'].map((font) => (
+                      <button
+                        key={font}
+                        onClick={() => setSettings(s => ({...s, fontFamily: font as any}))}
+                        className={`px-3 py-2 text-sm border rounded-lg transition-all capitalize ${
+                          settings.fontFamily === font 
+                          ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' 
+                          : 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400'
+                        }`}
+                      >
+                        {font}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                
+                {/* Shortcuts Hint */}
+                <div className="pt-4 border-t border-slate-100 dark:border-slate-800">
+                   <p className="text-xs text-slate-400 flex items-center gap-2">
+                     <Keyboard className="w-3 h-3" />
+                     Shortcuts: Space (Play), Arrows (Skip)
+                   </p>
+                </div>
+              </div>
+            </div>
+          )}
         </header>
 
         {/* Main Content */}
@@ -304,11 +416,11 @@ export default function App() {
           {/* Left Column: Controls & Queue */}
           <div className="lg:col-span-5 space-y-6">
               {/* Input */}
-            <div className="bg-white p-1 rounded-2xl shadow-sm border border-slate-200 flex gap-2 items-center pl-4">
+              <div className="bg-white dark:bg-slate-900 p-1 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 flex gap-2 items-center pl-4 transition-colors duration-300">
               <input 
                   type="url" 
                   placeholder="Paste article URL here..."
-                className="flex-grow py-3 outline-none text-slate-700 bg-transparent placeholder:text-slate-400 min-w-0"
+                  className="flex-grow py-3 outline-none text-slate-700 dark:text-slate-200 bg-transparent placeholder:text-slate-400 min-w-0"
                   value={inputUrl}
                   onChange={(e) => setInputUrl(e.target.value)}
                   onKeyDown={(e) => e.key === 'Enter' && handleAddUrl()}
@@ -316,7 +428,7 @@ export default function App() {
               <button 
                   onClick={handleAddUrl}
                   disabled={!inputUrl.trim()}
-                className="bg-slate-900 hover:bg-slate-800 disabled:bg-slate-300 text-white px-4 sm:px-6 py-3 rounded-xl font-medium transition-all flex items-center gap-2 flex-shrink-0"
+                  className="bg-slate-900 hover:bg-slate-800 dark:bg-blue-600 dark:hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 sm:px-6 py-3 rounded-xl font-medium transition-all flex items-center gap-2 flex-shrink-0 shadow-lg"
               >
                   <Plus className="w-4 h-4" />
                   <span className="hidden sm:inline">Queue</span>
@@ -326,13 +438,13 @@ export default function App() {
               {/* Queue List */}
               <div className="space-y-4">
               <div className="flex items-center justify-between px-1">
-                <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Up Next</h2>
-                <span className="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded-full">{queue.length} articles</span>
+                  <h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Up Next</h2>
+                  <span className="text-xs bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 px-2 py-1 rounded-full">{queue.length} articles</span>
               </div>
               
               <div className="space-y-3">
                   {queue.length === 0 ? (
-                <div className="text-center py-12 border-2 border-dashed border-slate-200 rounded-2xl text-slate-400 bg-white">
+                  <div className="text-center py-12 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl text-slate-400 dark:text-slate-600 bg-white dark:bg-slate-900/50">
                       <p>No articles queued.</p>
                   </div>
                   ) : (
@@ -362,15 +474,23 @@ export default function App() {
 
           {/* Right Column: Reader View */}
           <div className="lg:col-span-7 h-full hidden lg:block">
-            <ReaderView article={viewingArticle} />
+              <ReaderView 
+                article={viewingArticle} 
+                settings={settings} 
+                onToggleAutoScroll={() => setSettings(s => ({...s, autoScroll: !s.autoScroll}))}
+              />
           </div>
           
           <div className="lg:hidden block">
                {viewingArticle && (
                    <div className="mt-8">
-                     <h3 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-2">Article Reader</h3>
+                       <h3 className="text-sm font-semibold text-slate-500 mb-2">Article Reader</h3>
                        <div className="h-[500px]">
-                        <ReaderView article={viewingArticle} />
+                          <ReaderView 
+                            article={viewingArticle} 
+                            settings={settings}
+                            onToggleAutoScroll={() => setSettings(s => ({...s, autoScroll: !s.autoScroll}))}
+                          />
                        </div>
                    </div>
                )}
@@ -378,40 +498,40 @@ export default function App() {
         </main>
 
         {/* Player Bar */}
-      <div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg border-t border-slate-200 p-4 pb-6 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] z-30">
+        <div className="fixed bottom-0 left-0 right-0 bg-white/90 dark:bg-slate-900/90 backdrop-blur-lg border-t border-slate-200 dark:border-slate-800 p-4 pb-6 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] z-30 transition-colors duration-300">
           <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center gap-4 sm:gap-8">
             
             <div className="flex-grow w-full sm:w-auto min-w-0 text-center sm:text-left">
               {currentArticle ? (
                 <div>
-                <h4 className="font-bold text-slate-900 truncate">{currentArticle.title}</h4>
-                {/* Progress Bar for current segment */}
-                <div className="w-full h-1 bg-slate-200 rounded-full mt-2 overflow-hidden">
+                  <h4 className="font-bold text-slate-900 dark:text-white truncate">{currentArticle.title}</h4>
+                  {/* Progress Bar */}
+                  <div className="w-full h-1 bg-slate-200 dark:bg-slate-700 rounded-full mt-2 overflow-hidden">
                       <div 
                           className="h-full bg-blue-500 transition-all duration-300"
                           style={{ width: `${((currentArticle.currentSegmentIndex + 1) / Math.max(1, currentArticle.segments.length)) * 100}%`}}
                       />
                   </div>
-                <p className="text-xs text-slate-500 truncate mt-1">
+                  <p className="text-xs text-slate-500 dark:text-slate-400 truncate mt-1">
                       Playing segment {currentArticle.currentSegmentIndex + 1} of {currentArticle.segments.length}
                   </p>
                 </div>
               ) : (
-              <div className="text-slate-400 text-sm font-medium">Ready to play</div>
+                <div className="text-slate-400 dark:text-slate-500 text-sm font-medium">Ready to play</div>
               )}
             </div>
 
             <div className="flex items-center gap-6">
               <div className="hidden sm:flex items-center gap-2 group relative">
                  <Gauge className="w-4 h-4 text-slate-400" />
-               <div className="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
+                 <div className="flex items-center gap-2 bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
                    <button 
-                    className="w-6 h-6 flex items-center justify-center hover:bg-white rounded text-xs font-bold text-slate-600 transition-colors"
+                      className="w-6 h-6 flex items-center justify-center hover:bg-white dark:hover:bg-slate-700 rounded text-xs font-bold text-slate-600 dark:text-slate-300 transition-colors"
                       onClick={() => handleSpeedChange(playerState.playbackRate - SPEED_STEP)}
                    >-</button>
-                 <span className="text-xs font-mono w-8 text-center font-bold text-blue-600">{playerState.playbackRate.toFixed(1)}x</span>
+                   <span className="text-xs font-mono w-8 text-center font-bold text-blue-600 dark:text-blue-400">{playerState.playbackRate.toFixed(1)}x</span>
                    <button 
-                    className="w-6 h-6 flex items-center justify-center hover:bg-white rounded text-xs font-bold text-slate-600 transition-colors"
+                      className="w-6 h-6 flex items-center justify-center hover:bg-white dark:hover:bg-slate-700 rounded text-xs font-bold text-slate-600 dark:text-slate-300 transition-colors"
                       onClick={() => handleSpeedChange(playerState.playbackRate + SPEED_STEP)}
                    >+</button>
                  </div>
@@ -419,23 +539,14 @@ export default function App() {
 
               <div className="flex items-center gap-4">
                 <button 
-                className="p-2 text-slate-400 hover:text-slate-600 transition-colors"
-                onClick={() => {
-                   if (currentArticle && currentArticle.currentSegmentIndex > 0) {
-                       // Go back one segment
-                       setQueue(prev => prev.map(a => a.id === currentArticle.id ? { ...a, currentSegmentIndex: a.currentSegmentIndex - 1 } : a));
-                   } else {
-                       // Prev article
-                       const idx = queue.findIndex(a => a.id === playerState.currentArticleId);
-                       if (idx > 0) playArticle(queue[idx - 1].id);
-                   }
-                }}
+                  className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
+                  onClick={() => skipSegment('prev')}
                 >
                   <SkipBack className="w-5 h-5" />
                 </button>
 
                 <button 
-                className="w-12 h-12 rounded-full bg-slate-900 hover:bg-slate-800 text-white flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-105 transition-all active:scale-95"
+                  className="w-12 h-12 rounded-full bg-slate-900 hover:bg-slate-800 dark:bg-blue-600 dark:hover:bg-blue-500 text-white flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-105 transition-all active:scale-95"
                   onClick={() => {
                     if (playerState.isPlaying) pausePlayback();
                     else if (playerState.currentArticleId) playArticle(playerState.currentArticleId);
@@ -447,17 +558,8 @@ export default function App() {
                 </button>
 
                 <button 
-                className="p-2 text-slate-400 hover:text-slate-600 transition-colors"
-                onClick={() => {
-                   if (currentArticle && currentArticle.currentSegmentIndex < currentArticle.segments.length - 1) {
-                       // Next segment
-                       setQueue(prev => prev.map(a => a.id === currentArticle.id ? { ...a, currentSegmentIndex: a.currentSegmentIndex + 1 } : a));
-                   } else {
-                       // Next article
-                       const idx = queue.findIndex(a => a.id === playerState.currentArticleId);
-                       if (idx !== -1 && idx < queue.length - 1) playArticle(queue[idx + 1].id);
-                   }
-                }}
+                  className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
+                  onClick={() => skipSegment('next')}
                 >
                   <SkipForward className="w-5 h-5" />
                 </button>
@@ -466,5 +568,6 @@ export default function App() {
           </div>
         </div>
       </div>
+    </div>
   );
 }

components/QueueItem.tsx

@@ -1,6 +1,7 @@
+
 import React from 'react';
 import { Article, PlaybackStatus } from '../types';
-import { Play, Pause, Loader2, AlertCircle, FileText, Headphones } from 'lucide-react';
+import { Play, Pause, Loader2, AlertCircle, FileText } from 'lucide-react';
 
 interface QueueItemProps {
   article: Article;
@@ -35,7 +36,7 @@ export const QueueItem: React.FC<QueueItemProps> = ({
             <div className="w-1 bg-blue-500 animate-[bounce_0.8s_infinite] h-3"></div>
         </div>;
       default:
-        return <FileText className="w-5 h-5 text-slate-400" />;
+        return <FileText className="w-5 h-5 text-slate-400 dark:text-slate-500" />;
     }
   };
 
@@ -45,8 +46,8 @@ export const QueueItem: React.FC<QueueItemProps> = ({
     <div className={`
       relative group flex items-center p-4 rounded-xl border transition-all duration-200
       ${isActive 
-        ? 'bg-blue-50 border-blue-200 shadow-sm' 
-        : 'bg-white border-slate-100 hover:border-slate-300'
+        ? 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 shadow-sm' 
+        : 'bg-white border-slate-100 hover:border-slate-300 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-slate-600'
       }
     `}>
       <div className="flex-shrink-0 mr-4 w-8 flex justify-center">
@@ -54,10 +55,10 @@ export const QueueItem: React.FC<QueueItemProps> = ({
       </div>
 
       <div className="flex-grow min-w-0">
-        <h3 className={`font-medium truncate ${isActive ? 'text-blue-900' : 'text-slate-900'}`}>
+        <h3 className={`font-medium truncate ${isActive ? 'text-blue-900 dark:text-blue-300' : 'text-slate-900 dark:text-slate-200'}`}>
           {article.title || article.url}
         </h3>
-        <p className="text-xs text-slate-500 truncate mt-0.5">
+        <p className="text-xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
           {article.url}
         </p>
         {article.errorMessage && (
@@ -69,14 +70,14 @@ export const QueueItem: React.FC<QueueItemProps> = ({
         {isReady && (
           <button
             onClick={isActive && isPlaying ? onPause : onPlay}
-            className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 text-slate-700 hover:text-blue-700 transition-colors"
+            className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 dark:bg-slate-700 dark:hover:bg-blue-900/50 text-slate-700 dark:text-slate-200 hover:text-blue-700 dark:hover:text-blue-400 transition-colors"
           >
             {isActive && isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
           </button>
         )}
         <button 
           onClick={onRemove}
-          className="text-xs text-slate-400 hover:text-red-500 underline px-2"
+          className="text-xs text-slate-400 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-400 underline px-2"
         >
           Remove
         </button>

components/ReaderView.tsx

@@ -1,28 +1,65 @@
 
 import React, { useEffect, useRef } from 'react';
-import { Article } from '../types';
-import { FileText } from 'lucide-react';
+import { Article, ReaderSettings } from '../types';
+import { FileText, MousePointerClick } from 'lucide-react';
 
 interface ReaderViewProps {
   article?: Article | null;
+  settings?: ReaderSettings;
+  onToggleAutoScroll?: () => void;
 }
 
-export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
+export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onToggleAutoScroll }) => {
   const scrollRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to active segment
   useEffect(() => {
-    if (!article || article.status !== 'PLAYING') return;
+    if (!article || article.status !== 'PLAYING' || settings?.autoScroll === false) return;
     
     const activeEl = document.getElementById(`segment-${article.currentSegmentIndex}`);
     if (activeEl && scrollRef.current) {
       activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
-  }, [article?.currentSegmentIndex, article?.status]);
+  }, [article?.currentSegmentIndex, article?.status, settings?.autoScroll]);
+
+  // Default settings fallback
+  const s = settings || {
+    isDarkMode: false,
+    fontSize: 'lg',
+    lineHeight: 'relaxed',
+    fontFamily: 'serif',
+    autoScroll: true
+  };
+
+  const getFontClass = () => {
+    switch(s.fontFamily) {
+      case 'sans': return 'font-sans';
+      case 'mono': return 'font-mono';
+      default: return 'font-serif';
+    }
+  };
+
+  const getSizeClass = () => {
+    switch(s.fontSize) {
+      case 'sm': return 'text-sm';
+      case 'base': return 'text-base';
+      case 'xl': return 'text-xl';
+      case '2xl': return 'text-2xl';
+      default: return 'text-lg';
+    }
+  };
+
+  const getLeadingClass = () => {
+    switch(s.lineHeight) {
+      case 'normal': return 'leading-normal';
+      case 'loose': return 'leading-loose';
+      default: return 'leading-relaxed';
+    }
+  };
 
   if (!article) {
     return (
-      <div className="h-full flex flex-col items-center justify-center text-slate-400 p-12 border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50/50">
+      <div className="h-full flex flex-col items-center justify-center text-slate-400 dark:text-slate-600 p-12 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl bg-slate-50/50 dark:bg-slate-900/50 transition-colors duration-300">
         <FileText className="w-12 h-12 mb-4 opacity-50" />
         <p className="text-lg font-medium">Select an article to read along</p>
         <p className="text-sm">The text will appear here while you listen.</p>
@@ -31,22 +68,40 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
   }
 
   return (
-    <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col">
-      <div className="p-6 border-b border-slate-100 bg-white sticky top-0 z-10">
-        <h2 className="text-2xl font-bold text-slate-900 leading-tight">
+    <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col transition-colors duration-300">
+      <div className="p-6 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-10 flex justify-between items-start">
+        <div className="flex-1 pr-4">
+            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 leading-tight">
             {article.title}
             </h2>
             <a 
             href={article.url} 
             target="_blank" 
             rel="noopener noreferrer"
-          className="text-sm text-blue-600 hover:underline mt-2 inline-block"
+            className="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-2 inline-block"
             >
             {new URL(article.url).hostname}
             </a>
         </div>
         
-      <div ref={scrollRef} className="flex-grow overflow-y-auto p-6 sm:p-8 space-y-6 custom-scrollbar bg-white">
+        {/* Auto Scroll Toggle */}
+        <button 
+           onClick={onToggleAutoScroll}
+           title={s.autoScroll ? "Disable auto-scroll" : "Enable auto-scroll"}
+           className={`p-2 rounded-lg transition-all ${
+             s.autoScroll 
+             ? 'text-blue-600 bg-blue-50 dark:bg-blue-900/30 dark:text-blue-400' 
+             : 'text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800'
+           }`}
+        >
+            <MousePointerClick className="w-5 h-5" />
+        </button>
+      </div>
+      
+      <div 
+        ref={scrollRef} 
+        className={`flex-grow overflow-y-auto p-6 sm:p-8 space-y-6 custom-scrollbar bg-white dark:bg-slate-900 transition-colors duration-300 ${getFontClass()} ${getSizeClass()}`}
+      >
         {article.segments.length > 0 ? (
           article.segments.map((segment, idx) => {
             const isActive = article.currentSegmentIndex === idx;
@@ -54,10 +109,10 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
               <div 
                 key={segment.id} 
                 id={`segment-${idx}`}
-                className={`text-lg leading-relaxed font-serif transition-colors duration-300 whitespace-pre-wrap ${
+                className={`transition-all duration-300 whitespace-pre-wrap ${getLeadingClass()} ${
                   isActive 
-                    ? 'text-slate-900 bg-blue-50 p-4 rounded-lg -mx-4 border-l-4 border-blue-500' 
-                    : 'text-slate-700'
+                    ? 'text-slate-900 dark:text-white bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg -mx-4 border-l-4 border-blue-500 shadow-sm' 
+                    : 'text-slate-700 dark:text-slate-300'
                 }`}
               >
                 {segment.text}
@@ -69,12 +124,12 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
           <div className="space-y-4 animate-pulse">
              {[1,2,3,4].map(i => (
                  <div key={i} className="space-y-2">
-                    <div className="h-4 bg-slate-100 rounded w-full"></div>
-                    <div className="h-4 bg-slate-100 rounded w-full"></div>
-                    <div className="h-4 bg-slate-100 rounded w-3/4"></div>
+                    <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-full"></div>
+                    <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-full"></div>
+                    <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded w-3/4"></div>
                  </div>
              ))}
-            <p className="text-slate-400 italic mt-4">Extracting article content...</p>
+            <p className="text-slate-400 dark:text-slate-600 italic mt-4">Extracting article content...</p>
           </div>
         )}
       </div>

components/VoiceSelector.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { VoiceName } from '../types';
 import { AVAILABLE_VOICES } from '../constants';
@@ -12,12 +13,12 @@ interface VoiceSelectorProps {
 export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onVoiceChange, disabled }) => {
   return (
     <div className="flex items-center space-x-2">
-      <Mic className="w-4 h-4 text-slate-500" />
+      <Mic className="w-4 h-4 text-slate-500 dark:text-slate-400" />
       <select
         value={selectedVoice}
         onChange={(e) => onVoiceChange(e.target.value as VoiceName)}
         disabled={disabled}
-        className="bg-white border border-slate-300 text-slate-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300"
       >
         {AVAILABLE_VOICES.map((v) => (
           <option key={v.name} value={v.name}>

types.ts

@@ -45,3 +45,11 @@ export interface PlayerState {
   currentArticleId: string | null;
   selectedVoice: VoiceName;
 }
+
+export interface ReaderSettings {
+  isDarkMode: boolean;
+  fontSize: 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+  lineHeight: 'normal' | 'relaxed' | 'loose';
+  fontFamily: 'sans' | 'serif' | 'mono';
+  autoScroll: boolean;
+}