Add dark mode persistence and book name formatting for professional display

frontend/src/App.tsx

@@ -14,7 +14,11 @@ function App() {
   const [selectedBook, setSelectedBook] = useState<string>('');
   const [selectedChapter, setSelectedChapter] = useState<string>('');
   const [loading, setLoading] = useState(true);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useState(() => {
+    // Load dark mode preference from localStorage
+    const saved = localStorage.getItem('darkMode');
+    return saved ? JSON.parse(saved) : false;
+  });
   const [error, setError] = useState<string>('');
 
   // Debug logging
@@ -26,13 +30,21 @@ function App() {
   }, []);
 
   useEffect(() => {
+    // Apply dark mode and save preference
     if (darkMode) {
       document.documentElement.classList.add('dark');
     } else {
       document.documentElement.classList.remove('dark');
     }
+    localStorage.setItem('darkMode', JSON.stringify(darkMode));
   }, [darkMode]);
 
+  // Helper function to format book names for display
+  const formatBookName = (bookName: string): string => {
+    // Remove leading numbers and underscores, replace underscores with spaces
+    return bookName.replace(/^\d+_/, '').replace(/_/g, ' ');
+  };
+
   const loadBooks = async () => {
     try {
       console.log('Loading books from API...');
@@ -101,7 +113,7 @@ function App() {
                   </button>
                   <ChevronRight className="h-4 w-4" />
                   <span className="font-medium text-gray-900 dark:text-gray-100">
-                    {selectedBook}
+                    {formatBookName(selectedBook)}
                   </span>
                   {selectedChapter && (
                     <>
@@ -140,18 +152,20 @@ function App() {
       {/* Main Content */}
       <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {!selectedBook ? (
-          <BookSelector books={books} onBookSelect={handleBookSelect} />
+          <BookSelector books={books} onBookSelect={handleBookSelect} formatBookName={formatBookName} />
         ) : !selectedChapter ? (
           <ChapterSelector
             book={selectedBook}
             onChapterSelect={handleChapterSelect}
             onBack={handleBackToBooks}
+            formatBookName={formatBookName}
           />
         ) : (
           <BibleReader
             book={selectedBook}
             chapter={selectedChapter}
             onBack={handleBackToChapters}
+            formatBookName={formatBookName}
           />
         )}
       </main>

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