From 66824ab3ed2531890c689c4881abc390c09fad8f Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 20:52:53 +0000
Subject: [PATCH] Add a search bar for videos to the main pages

Integrates a search input and icon into the header navigation of the Folx Stadl, Video, and Home pages, enabling users to search for videos.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/lK7HRF1
---
 client/src/pages/FolxStadlPage.tsx | 18 +++++++++++++++++-
 client/src/pages/VideoPage.tsx     | 18 +++++++++++++++++-
 client/src/pages/home.tsx          | 16 +++++++++++++++-
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 4fd4ad9..98c595f 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -7,6 +7,8 @@ import { Button } from '@/components/ui/button';
 import { useState } from 'react';
 import type { Video } from '@shared/schema';
 import SearchHeader from '@/components/search-header';
+import { Input } from '@/components/ui/input';
+import { Search } from 'lucide-react';
 
 export default function FolxStadlPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@@ -69,7 +71,7 @@ export default function FolxStadlPage() {
               </Link>
             </div>
 
-            {/* Right side - Navigation */}
+            {/* Right side - Navigation + Search */}
             <div className="flex items-center gap-4">
               {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
@@ -81,6 +83,20 @@ export default function FolxStadlPage() {
                     FOLX STADL
                   </Link>
                 </nav>
+                
+                <div className="relative">
+                  <Input
+                    type="search"
+                    placeholder="Search videos..."
+                    value={searchQuery}
+                    onChange={(e) => {
+                      setSearchQuery(e.target.value);
+                      if (e.target.value) window.location.href = `/?search=${encodeURIComponent(e.target.value)}`;
+                    }}
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
+                  />
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                </div>
               </div>
 
               {/* Mobile menu button */}
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 1d71ed1..eb6808f 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -33,6 +33,8 @@ const formatDate = (date: Date | string): string => {
 import { Button } from "@/components/ui/button";
 import { Share2, X, Edit3, Menu, Search, ChevronLeft, ChevronRight } from "lucide-react";
 import SearchHeader from "@/components/search-header";
+import { Input } from "@/components/ui/input";
+import { Link } from "wouter";
 import { apiRequest } from "@/lib/queryClient";
 import {
   FacebookShareButton,
@@ -215,7 +217,7 @@ export default function VideoPage() {
               </Link>
             </div>
 
-            {/* Right side - Navigation */}
+            {/* Right side - Navigation + Search */}
             <div className="flex items-center gap-4">
               {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
@@ -227,6 +229,20 @@ export default function VideoPage() {
                     FOLX STADL
                   </Link>
                 </nav>
+                
+                <div className="relative">
+                  <Input
+                    type="search"
+                    placeholder="Search videos..."
+                    value={searchQuery}
+                    onChange={(e) => {
+                      setSearchQuery(e.target.value);
+                      if (e.target.value) window.location.href = `/?search=${encodeURIComponent(e.target.value)}`;
+                    }}
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
+                  />
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                </div>
               </div>
             </div>
           </div>
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index c59c223..d62b4e2 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -3,6 +3,9 @@ import { useQuery } from "@tanstack/react-query";
 import { type Video } from "@shared/schema";
 import SearchHeader from "@/components/search-header";
 import VideoGrid from "@/components/video-grid";
+import { Link } from "wouter";
+import { Input } from "@/components/ui/input";
+import { Search } from "lucide-react";
 import NetflixGrid from "@/components/netflix-grid";
 import go4LogoPath from "@assets/go4_1756394900352.png";
 
@@ -86,7 +89,7 @@ export default function Home() {
               </Link>
             </div>
 
-            {/* Right side - Navigation */}
+            {/* Right side - Navigation + Search */}
             <div className="flex items-center gap-4">
               {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
@@ -98,6 +101,17 @@ export default function Home() {
                     FOLX STADL
                   </Link>
                 </nav>
+                
+                <div className="relative">
+                  <Input
+                    type="search"
+                    placeholder="Search videos..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
+                  />
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                </div>
               </div>
             </div>
           </div>