From 6324c13ae5e28d1c6d2d0fa09b5ac1c120719871 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 16:17:23 -0400
Subject: [PATCH] Complete search bar implementation across all pages - search
 now above breadcrumbs everywhere

- **Universal Search Bars**: Added search input to BookSelector, ChapterSelector, and BibleReader
- **Position Above Breadcrumbs**: Search bars now appear above breadcrumbs on all pages
- **Reduced Padding**: Changed from mb-8 to mb-4 for tighter spacing between search and breadcrumbs
- **Consistent Placeholder**: Same 'Search for verses, words, or phrases...' across all components
- **Mobile Responsive**: Search bars adapt to screen width with max-w-md constraint
- **Clickable Interface**: OnClick handlers properly set to trigger search modal

Search functionality now universally available just above breadcrumbs on every page!
---
 frontend/src/components/BibleReader.tsx     | 16 +++++++++++-
 frontend/src/components/BookSelector.tsx    | 28 ++++++++++-----------
 frontend/src/components/ChapterSelector.tsx | 14 +++++++++++
 3 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/BibleReader.tsx b/frontend/src/components/BibleReader.tsx
index 0afd95f0..36f3062d 100644
--- a/frontend/src/components/BibleReader.tsx
+++ b/frontend/src/components/BibleReader.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ArrowLeft, BookOpen, ChevronLeft, ChevronRight, Star } from 'lucide-react';
+import { ArrowLeft, BookOpen, ChevronLeft, ChevronRight, Star, Search } from 'lucide-react';
 import { getChapter, getBook } from '../services/api';
 
 interface BibleReaderProps {
@@ -302,6 +302,20 @@ const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack, format
 
   return (
     <div>
+      {/* Search Bar */}
+      <div className="flex justify-center mb-4">
+        <div className="w-full max-w-md relative">
+          <input
+            type="text"
+            placeholder="Search for verses, words, or phrases..."
+            className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            onClick={() => window.location.href = '/?show-search=true'}
+            readOnly
+          />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+        </div>
+      </div>
+
       {/* Breadcrumb Navigation */}
       <div className="flex items-center justify-center space-x-1 mb-8">
         <button
diff --git a/frontend/src/components/BookSelector.tsx b/frontend/src/components/BookSelector.tsx
index 774fc8db..827be833 100644
--- a/frontend/src/components/BookSelector.tsx
+++ b/frontend/src/components/BookSelector.tsx
@@ -166,6 +166,20 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
 
   return (
     <div className="space-y-12">
+      {/* Search Bar */}
+      <div className="flex justify-center mb-4">
+        <div className="w-full max-w-md relative">
+          <input
+            type="text"
+            placeholder="Search for verses, words, or phrases..."
+            className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            onClick={onSearchClick}
+            readOnly
+          />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+        </div>
+      </div>
+
       {/* Breadcrumb */}
       {version && (
         <div className="flex items-center justify-center space-x-1 text-sm text-gray-600 dark:text-gray-400">
@@ -179,20 +193,6 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
         </div>
       )}
 
-      {/* Search Bar */}
-      <div className="flex justify-center mb-8">
-        <div className="w-full max-w-md relative">
-          <input
-            type="text"
-            placeholder="Search for verses, words, or phrases..."
-            className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            onClick={onSearchClick}
-            readOnly
-          />
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
-        </div>
-      </div>
-
       <div className="text-center">
         <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
           {version.toUpperCase()} Bible
diff --git a/frontend/src/components/ChapterSelector.tsx b/frontend/src/components/ChapterSelector.tsx
index 9876c072..1386996f 100644
--- a/frontend/src/components/ChapterSelector.tsx
+++ b/frontend/src/components/ChapterSelector.tsx
@@ -145,6 +145,20 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
 
   return (
     <div>
+      {/* Search Bar */}
+      <div className="flex justify-center mb-4">
+        <div className="w-full max-w-md relative">
+          <input
+            type="text"
+            placeholder="Search for verses, words, or phrases..."
+            className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            onClick={onSearchClick}
+            readOnly
+          />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+        </div>
+      </div>
+
       {/* Breadcrumb Navigation */}
       <div className="flex items-center justify-center space-x-1 mb-8">
         <button