Add search functionality to recommended videos sidebar

Integrate a search input and filtering logic into the VideoPage component to allow users to search within the recommended videos section.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/qHixa60

client/src/pages/VideoPage.tsx

@@ -31,7 +31,8 @@ const formatDate = (date: Date | string): string => {
   });
 };
 import { Button } from "@/components/ui/button";
-import { Share2, X, Edit3 } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Share2, X, Edit3, Search } from "lucide-react";
 import { apiRequest } from "@/lib/queryClient";
 import {
   FacebookShareButton,
@@ -52,6 +53,7 @@ export default function VideoPage() {
   const [, params] = useRoute("/video/:id");
   const videoId = params?.id;
   const [showShareMenu, setShowShareMenu] = useState(false);
+  const [sidebarSearchQuery, setSidebarSearchQuery] = useState("");
 
   // Fetch current video
   const { data: currentVideo, isLoading: videoLoading } = useQuery<Video>({
@@ -67,7 +69,15 @@ export default function VideoPage() {
     enabled: !!videoId,
   });
 
-  const recommendedVideos = recommendedResponse?.videos?.filter(v => v.id !== videoId) || [];
+  // Filter recommended videos based on search and exclude current video
+  const filteredRecommendedVideos = (recommendedResponse?.videos || [])
+    .filter(v => v.id !== videoId)
+    .filter(video => {
+      if (!sidebarSearchQuery || sidebarSearchQuery.length < 2) return true;
+      const searchLower = sidebarSearchQuery.toLowerCase();
+      return video.title.toLowerCase().includes(searchLower) ||
+             video.description?.toLowerCase().includes(searchLower);
+    });
   
 
 
@@ -329,10 +339,32 @@ export default function VideoPage() {
 
           {/* Recommended videos sidebar */}
           <div className="lg:w-96">
-            <h2 className="text-lg font-semibold text-bunny-light mb-4">Recommended Videos</h2>
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold text-bunny-light">Recommended Videos</h2>
+            </div>
+            
+            {/* Search input for recommended videos */}
+            <div className="relative mb-4">
+              <Input
+                type="search"
+                placeholder="Search videos..."
+                value={sidebarSearchQuery}
+                onChange={(e) => setSidebarSearchQuery(e.target.value)}
+                className="bg-bunny-gray/50 border-bunny-gray/70 text-white placeholder-gray-400 pr-10 focus:border-bunny-blue transition-colors"
+                data-testid="input-sidebar-search"
+              />
+              <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+            </div>
             
             <div className="space-y-3">
-              {recommendedVideos.slice(0, 10).map((video) => (
+              {filteredRecommendedVideos.length === 0 && sidebarSearchQuery.length >= 2 ? (
+                <div className="text-center py-8 text-bunny-muted">
+                  <Search className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                  <p>No videos found for "{sidebarSearchQuery}"</p>
+                  <p className="text-xs mt-1">Try different keywords</p>
+                </div>
+              ) : (
+                filteredRecommendedVideos.slice(0, 10).map((video) => (
                 <div
                   key={video.id}
                   onClick={() => window.location.href = `/video/${video.id}`}
@@ -378,7 +410,8 @@ export default function VideoPage() {
                     </div>
                   </div>
                 </div>
-              ))}
+                ))
+              )}
             </div>
           </div>
         </div>