From 31f74b9953339418a92591e2c73e104afd2eb372 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 15:54:26 +0000
Subject: [PATCH] Add a dedicated page to display all FOLX STADL videos

Create a new route and page component for "FOLX STADL" that displays a grid of related 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/DVZN4Rp
---
 client/src/App.tsx                      |  2 +
 client/src/components/netflix-grid.tsx  |  8 ---
 client/src/components/search-header.tsx |  3 +
 client/src/pages/FolxStadlPage.tsx      | 90 +++++++++++++++++++++++++
 4 files changed, 95 insertions(+), 8 deletions(-)
 create mode 100644 client/src/pages/FolxStadlPage.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 237eb40..3ad8d7c 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -5,6 +5,7 @@ import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import Home from "@/pages/home";
 import VideoPage from "@/pages/VideoPage";
+import FolxStadlPage from "@/pages/FolxStadlPage";
 import NotFound from "@/pages/not-found";
 
 function Router() {
@@ -12,6 +13,7 @@ function Router() {
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/video/:id" component={VideoPage} />
+      <Route path="/folx-stadl" component={FolxStadlPage} />
       <Route component={NotFound} />
     </Switch>
   );
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index e4e27df..e7a4006 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -50,14 +50,6 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
         title: "Meist Angesehen",
         videos: sortedByViews.slice(0, 10)
       },
-      {
-        title: "FOLX STADL",
-        videos: videos.filter(video => 
-          video.title.includes("FOLX STADL S4") || 
-          video.title.includes("FOLXSTADL_S04") ||
-          video.title.includes("FOLX STADL S4 -")
-        ).slice(0, 15)
-      },
       {
         title: "GDL VIDEO",
         videos: (() => {
diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 3399965..5966a5e 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -68,6 +68,9 @@ export default function SearchHeader({
               <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
                 Home
               </a>
+              <a href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-folx-stadl">
+                FOLX STADL
+              </a>
             </nav>
             
             <div className="relative">
diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
new file mode 100644
index 0000000..e309646
--- /dev/null
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -0,0 +1,90 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'wouter';
+import { ArrowLeft } from 'lucide-react';
+import VideoCard from '@/components/video-card';
+import VideoModal from '@/components/video-modal';
+import { useState } from 'react';
+import type { Video } from '@shared/schema';
+
+export default function FolxStadlPage() {
+  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const { data: videos = [], isLoading } = useQuery<Video[]>({
+    queryKey: ['/api/videos']
+  });
+
+  // Filter only FOLX STADL videos
+  const folxStadlVideos = videos.filter(video => 
+    video.title.includes("FOLX STADL S4") || 
+    video.title.includes("FOLXSTADL_S04") ||
+    video.title.includes("FOLX STADL S4 -")
+  );
+
+  const handleVideoClick = (video: Video) => {
+    setSelectedVideo(video);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedVideo(null);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
+        <div className="text-white text-xl">Loading...</div>
+      </div>
+    );
+  }
+
+  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">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center gap-4">
+            <Link href="/">
+              <button className="flex items-center gap-2 text-bunny-light hover:text-white transition-colors">
+                <ArrowLeft className="w-5 h-5" />
+                <span>Back</span>
+              </button>
+            </Link>
+            <h1 className="text-3xl font-bold text-white uppercase tracking-wide">FOLX STADL</h1>
+          </div>
+        </div>
+      </div>
+
+      {/* Video Grid */}
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+          {folxStadlVideos.map((video) => (
+            <div key={video.id} className="group">
+              <VideoCard
+                video={video}
+                onClick={handleVideoClick}
+                className="w-full hover:scale-105 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
+              />
+            </div>
+          ))}
+        </div>
+
+        {folxStadlVideos.length === 0 && (
+          <div className="text-center py-16">
+            <p className="text-bunny-muted text-lg">No FOLX STADL videos found</p>
+          </div>
+        )}
+      </div>
+
+      {/* Video Modal */}
+      {selectedVideo && (
+        <VideoModal
+          video={selectedVideo}
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file