From b9a21c4ee77073effbc298769c99e5b40a58afe9 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 20:45:13 +0000
Subject: [PATCH] Add search and view mode functionality to video pages

Introduces state management for search queries and view modes (grid/list) on both FolxStadlPage and VideoPage, enhancing user interaction and navigation with updated SearchHeader props.

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 | 11 ++++++++---
 client/src/pages/VideoPage.tsx     | 11 ++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index c24146f..5b62bd4 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -13,6 +13,8 @@ export default function FolxStadlPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const itemsPerPage = 10;
 
   const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
@@ -54,9 +56,12 @@ export default function FolxStadlPage() {
   return (
     <div className="min-h-screen bg-bunny-dark text-white">
       <SearchHeader
-        onSearch={() => {}}
-        onViewChange={() => {}}
-        currentView="grid"
+        onSearch={(query) => {
+          setSearchQuery(query);
+          if (query) window.location.href = `/?search=${encodeURIComponent(query)}`;
+        }}
+        onViewChange={setViewMode}
+        currentView={viewMode}
       />
 
       {/* Main Content */}
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 5d7e98e..d98f907 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -53,6 +53,8 @@ export default function VideoPage() {
   const [, params] = useRoute("/video/:id");
   const videoId = params?.id;
   const [showShareMenu, setShowShareMenu] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   // Fetch current video
@@ -200,9 +202,12 @@ export default function VideoPage() {
   return (
     <div className="min-h-screen bunny-dark static-triangles">
       <SearchHeader
-        onSearch={() => {}}
-        onViewChange={() => {}}
-        currentView="grid"
+        onSearch={(query) => {
+          setSearchQuery(query);
+          if (query) window.location.href = `/?search=${encodeURIComponent(query)}`;
+        }}
+        onViewChange={setViewMode}
+        currentView={viewMode}
       />
 
       <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">