From 8d319bca14ea96ac02fbcac4713d9eb22cfcfce0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 20:44:08 +0000
Subject: [PATCH] Add search bar to video streaming pages

Replace custom header components with a reusable SearchHeader component on the FolxStadlPage and VideoPage, integrating search functionality.

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/izllXJt
---
 client/src/pages/FolxStadlPage.tsx | 68 +++---------------------------
 client/src/pages/VideoPage.tsx     | 48 +++------------------
 2 files changed, 12 insertions(+), 104 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index ff00236..c24146f 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -6,6 +6,7 @@ import BunnyVideoModal from '@/components/bunny-video-modal';
 import { Button } from '@/components/ui/button';
 import { useState } from 'react';
 import type { Video } from '@shared/schema';
+import SearchHeader from '@/components/search-header';
 
 export default function FolxStadlPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@@ -52,68 +53,11 @@ export default function FolxStadlPage() {
 
   return (
     <div className="min-h-screen bg-bunny-dark text-white">
-      {/* Header */}
-      <div className="border-b border-white/10 bg-black/20 backdrop-blur-sm sticky top-0 z-40">
-        <div className="max-w-7xl mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            {/* Left side - Logo */}
-            <div className="flex items-center space-x-4">
-              <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
-                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
-                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
-                </div>
-                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
-              </Link>
-            </div>
-
-            {/* Right side - Navigation */}
-            <div className="flex items-center gap-4">
-              {/* Desktop navigation */}
-              <div className="hidden md:flex items-center space-x-6">
-                <nav className="flex space-x-6">
-                  <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
-                    Home
-                  </Link>
-                  <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
-                    FOLX STADL
-                  </Link>
-                </nav>
-              </div>
-
-              {/* Mobile menu button */}
-              <div className="md:hidden">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                  className="text-white hover:bg-white/10"
-                  data-testid="button-mobile-menu-folx"
-                >
-                  {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {/* Mobile menu dropdown */}
-          {isMobileMenuOpen && (
-            <div className="md:hidden mt-4 pt-4 border-t border-white/10">
-              <nav className="flex flex-col space-y-3">
-                <Link 
-                  href="/" 
-                  className="text-bunny-light hover:text-white transition-colors py-2"
-                  onClick={() => setIsMobileMenuOpen(false)}
-                >
-                  Home
-                </Link>
-                <div className="text-bunny-muted py-2 border-t border-white/5">
-                  FOLX STADL
-                </div>
-              </nav>
-            </div>
-          )}
-        </div>
-      </div>
+      <SearchHeader
+        onSearch={() => {}}
+        onViewChange={() => {}}
+        currentView="grid"
+      />
 
       {/* Main Content */}
       <div className="max-w-7xl mx-auto px-4 py-8">
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 5350f60..5d7e98e 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -32,6 +32,7 @@ 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 { apiRequest } from "@/lib/queryClient";
 import {
   FacebookShareButton,
@@ -198,48 +199,11 @@ export default function VideoPage() {
 
   return (
     <div className="min-h-screen bunny-dark static-triangles">
-      {/* Header with triangle design */}
-      <div className="border-b border-white/10 bg-black/20 backdrop-blur-sm sticky top-0 z-[60] relative overflow-hidden">
-        {/* Triangle decorations in header - same as home page */}
-        <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
-        <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>
-        <div className="absolute top-1 right-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-cyan-400/10 rotate-45"></div>
-        
-        <div className="triangle-decoration-2 opacity-30" style={{top: '10px', right: '15%'}}></div>
-        <div className="triangle-decoration-3 opacity-20" style={{top: '30px', left: '70%'}}></div>
-        
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <div className="flex items-center justify-between py-4">
-            <div className="flex items-center space-x-4">
-              <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
-                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
-                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
-                </div>
-                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
-              </a>
-            </div>
-            
-            <div className="hidden md:flex items-center space-x-6">
-              <nav className="flex space-x-6">
-                <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
-                  Home
-                </a>
-              </nav>
-            </div>
-
-            {/* Mobile Search Button */}
-            <Button 
-              variant="ghost" 
-              className="md:hidden text-bunny-light" 
-              onClick={() => window.history.back()}
-              data-testid="button-mobile-back-video"
-            >
-              <Search className="text-xl" />
-            </Button>
-          </div>
-        </div>
-
-      </div>
+      <SearchHeader
+        onSearch={() => {}}
+        onViewChange={() => {}}
+        currentView="grid"
+      />
 
       <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">
         {/* Background logo decorations */}