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.

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,18 +70,18 @@ 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>
       </div>
     </div>
   );
-};
+};

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">
-          {article.title}
-        </h2>
-        <a 
-          href={article.url} 
-          target="_blank" 
-          rel="noopener noreferrer"
-          className="text-sm text-blue-600 hover:underline mt-2 inline-block"
+    <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 dark:text-blue-400 hover:underline mt-2 inline-block"
+            >
+            {new URL(article.url).hostname}
+            </a>
+        </div>
+        
+        {/* 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'
+           }`}
         >
-          {new URL(article.url).hostname}
-        </a>
+            <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">
+      <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}>
@@ -27,4 +28,4 @@ export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onV
       </select>
     </div>
   );
-};
+};