Add dark mode persistence and book name formatting for professional display

frontend/src/components/BibleReader.tsx

@@ -6,9 +6,10 @@ interface BibleReaderProps {
   book: string;
   chapter: string;
   onBack: () => void;
+  formatBookName: (bookName: string) => string;
 }
 
-const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack }) => {
+const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, formatBookName }) => {
   const [content, setContent] = useState<string>('');
   const [loading, setLoading] = useState(true);
   const [fontSize, setFontSize] = useState<'small' | 'medium' | 'large'>('medium');
@@ -136,7 +137,7 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack }) => {
       {/* Chapter Title */}
       <div className="text-center mb-8">
         <h1 className="book-title">
-          {book} {chapter}
+          {formatBookName(book)} {chapter}
         </h1>
       </div>
 

frontend/src/components/BookSelector.tsx

@@ -4,9 +4,10 @@ import { BookOpen } from 'lucide-react';
 interface BookSelectorProps {
   books: string[];
   onBookSelect: (book: string) => void;
+  formatBookName: (bookName: string) => string;
 }
 
-const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect }) => {
+const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName }) => {
   // Group books by testament
   const oldTestament = books.slice(0, 39); // First 39 books
   const newTestament = books.slice(39); // Remaining books
@@ -25,7 +26,7 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect }) => {
           >
             <BookOpen className="mx-auto h-8 w-8 text-blue-600 dark:text-blue-400 mb-2 group-hover:scale-110 transition-transform" />
             <span className="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400">
-              {book}
+              {formatBookName(book)}
             </span>
           </button>
         ))}

frontend/src/components/ChapterSelector.tsx

@@ -6,9 +6,10 @@ interface ChapterSelectorProps {
   book: string;
   onChapterSelect: (chapter: string) => void;
   onBack: () => void;
+  formatBookName: (bookName: string) => string;
 }
 
-const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack }) => {
+const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName }) => {
   const [chapters, setChapters] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -69,7 +70,7 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
       {/* Book Title */}
       <div className="text-center mb-8">
         <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
-          {book}
+          {formatBookName(book)}
         </h1>
         <p className="text-lg text-gray-600 dark:text-gray-400">
           Select a chapter to read