From 69519c988e3d2b771adc035fbd7c918268b2990a Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 28 Sep 2025 16:22:37 -0400
Subject: [PATCH] Complete search bar rollout and spacing fixes across all
 pages

- **BookSelector search bar**: Consistent mb-4 spacing below breadcrumbs
- **VersionSelector search bar**: Added above 'Choose Your Translation' header
- **Universal search placement**: All pages have search functionality available at top
- **Responsive design maintained**: Max-width search inputs adapt to mobile screens
- **Homepage search integration**: Even before version selection, users can search
- **Build verification**: All components compile without errors

Search functionality now universally accessible from every page in the application!
---
 frontend/src/App.tsx                        |  5 ++++-
 frontend/src/components/BookSelector.tsx    |  2 +-
 frontend/src/components/VersionSelector.tsx | 19 +++++++++++++++++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 025571f8..68a9ee44 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -261,7 +261,10 @@ function App() {
     };
 
     return (
-      <VersionSelector onVersionSelect={handleVersionSelect} />
+      <VersionSelector
+        onVersionSelect={handleVersionSelect}
+        onSearchClick={() => setShowSearch(true)}
+      />
     );
   };
 
diff --git a/frontend/src/components/BookSelector.tsx b/frontend/src/components/BookSelector.tsx
index 827be833..0d9b198c 100644
--- a/frontend/src/components/BookSelector.tsx
+++ b/frontend/src/components/BookSelector.tsx
@@ -182,7 +182,7 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
 
       {/* Breadcrumb */}
       {version && (
-        <div className="flex items-center justify-center space-x-1 text-sm text-gray-600 dark:text-gray-400">
+        <div className="flex items-center justify-center space-x-1 mb-4 text-sm text-gray-600 dark:text-gray-400">
           <button
             onClick={() => window.location.href = `/version/${version}`}
             className="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
index 4e9688c7..0a77e377 100644
--- a/frontend/src/components/VersionSelector.tsx
+++ b/frontend/src/components/VersionSelector.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { Book, Users } from 'lucide-react';
+import { Book, Users, Search } from 'lucide-react';
 
 interface VersionSelectorProps {
   onVersionSelect: (version: 'esv' | 'nkjv') => void;
+  onSearchClick?: () => void;
 }
 
-const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect }) => {
+const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSearchClick }) => {
   return (
     <div>
       {/* Header */}
@@ -24,6 +25,20 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect }) =>
 
       {/* Version Selection */}
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        {/* 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 mb-12">
           <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
             Choose Your Translation