Complete UI improvements: breadcrumbs moved to content, chapter favorites segregated

- **Removed header breadcrumbs** that caused horizontal scrolling on mobile
- **Added content-aware breadcrumbs** to each page for better UX:
  - BookSelector: 'Books' (clickable back to version home)
  - ChapterSelector: 'Books > [Book Name]' (Books clickable, book name current)
- **Chapter favorites version-segregated** - fixed cross-version contamination
- **Homepage text updated** 'Both translations' → 'All translations'
- **Improved navigation flow** with clean breadcrumb system
- **Better mobile experience** no more scrolling required for nav

frontend/src/App.tsx

@@ -291,6 +291,7 @@ function App() {
         user={user}
         onFavoriteChange={handleFavoriteChange}
         version={versionId}
+        onBack={handleBack}
       />
     );
   };
@@ -421,38 +422,7 @@ function App() {
               </div>
             </div>
 
-            {/* Navigation Breadcrumb - Hidden on small screens */}
+
-            <div className="hidden md:flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
-              {currentBook && (
-                <>
-                  <button
-                    onClick={() => navigate(`/version/${selectedVersion}`)}
-                    className="hover:text-blue-600 dark:hover:text-blue-400"
-                  >
-                    Books
-                  </button>
-                  <ChevronRight className="h-4 w-4" />
-                  <span className="font-medium text-gray-900 dark:text-gray-100">
-                    {formatBookName(currentBook)}
-                  </span>
-                  {currentChapter && (
-                    <>
-                      <ChevronRight className="h-4 w-4" />
-                      <button
-                        onClick={() => navigate(`/version/${selectedVersion}/book/${currentBook}`)}
-                        className="hover:text-blue-600 dark:hover:text-blue-400"
-                      >
-                        Chapters
-                      </button>
-                      <ChevronRight className="h-4 w-4" />
-                      <span className="font-medium text-gray-900 dark:text-gray-100">
-                        Chapter {currentChapter}
-                      </span>
-                    </>
-                  )}
-                </>
-              )}
-            </div>
 
             {/* Mobile Navigation - Simplified */}
             <div className="flex md:hidden items-center space-x-1 text-xs text-gray-600 dark:text-gray-400">

frontend/src/components/BookSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { BookOpen, Star } from 'lucide-react';
+import { BookOpen, Star, ChevronLeft } from 'lucide-react';
 
 interface BookSelectorProps {
   books: string[];
@@ -8,9 +8,10 @@ interface BookSelectorProps {
   user?: any;
   onFavoriteChange?: () => void;
   version?: string;
+  onBack?: () => void;
 }
 
-const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange, version = 'esv' }) => {
+const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange, version = 'esv', onBack }) => {
   const [favorites, setFavorites] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState(false);
 
@@ -164,6 +165,19 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
 
   return (
     <div className="space-y-12">
+      {/* Breadcrumb */}
+      {onBack && (
+        <div className="flex items-center justify-center space-x-1 text-sm text-gray-600 dark:text-gray-400">
+          <button
+            onClick={onBack}
+            className="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+          >
+            <BookOpen className="h-4 w-4" />
+            <span>Books</span>
+          </button>
+        </div>
+      )}
+
       <div className="text-center">
         <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
           {version.toUpperCase()} Bible

frontend/src/components/ChapterSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ArrowLeft, FileText, Star } from 'lucide-react';
+import { ArrowLeft, FileText, Star, ChevronRight } from 'lucide-react';
 import { getBook } from '../services/api';
 
 interface ChapterSelectorProps {
@@ -144,15 +144,19 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
 
   return (
     <div>
-      {/* Header */}
+      {/* Breadcrumb Navigation */}
-      <div className="flex items-center mb-8">
+      <div className="flex items-center justify-center space-x-1 mb-8">
         <button
-          onClick={onBack}
+          onClick={() => window.location.href = '/'}
-          className="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+          className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
         >
-          <ArrowLeft className="h-5 w-5" />
+          <ArrowLeft className="h-4 w-4" />
-          <span>Back to Books</span>
+          <span>Books</span>
         </button>
+        <ChevronRight className="h-3 w-3 text-gray-400 dark:text-gray-500" />
+        <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+          {formatBookName(book)}
+        </span>
       </div>
 
       {/* Book Title */}