Add a new section for "Die Geschichte des Liedes" videos

Integrates a new route and page for "Die Geschichte des Liedes" videos, including filtering, pagination, and navigation links on the homepage and within the app's routing.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn

client/src/App.tsx

@@ -6,6 +6,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import Home from "@/pages/home";
 import VideoPage from "@/pages/VideoPage";
 import FolxStadlPage from "@/pages/FolxStadlPage";
+import GeschichteLiedPage from "@/pages/GeschichteLiedPage";
 import NotFound from "@/pages/not-found";
 
 function Router() {
@@ -14,6 +15,7 @@ function Router() {
       <Route path="/" component={Home} />
       <Route path="/video/:id" component={VideoPage} />
       <Route path="/folx-stadl" component={FolxStadlPage} />
+      <Route path="/geschichte-lied" component={GeschichteLiedPage} />
       <Route component={NotFound} />
     </Switch>
   );

client/src/pages/GeschichteLiedPage.tsx

@@ -0,0 +1,248 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link, useLocation } from 'wouter';
+import { ArrowLeft, ChevronLeft, ChevronRight, Menu, X } from 'lucide-react';
+import VideoCard from '@/components/video-card';
+import BunnyVideoModal from '@/components/bunny-video-modal';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import type { Video } from '@shared/schema';
+import { Input } from '@/components/ui/input';
+import { Search } from 'lucide-react';
+
+export default function GeschichteLiedPage() {
+  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+  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 [, setLocation] = useLocation();
+  const itemsPerPage = 10;
+
+  const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
+    queryKey: ['/api/videos?limit=200'],
+    select: (response) => response || { videos: [], total: 0 }
+  });
+
+  const videos = data?.videos || [];
+
+  // Filter all Die Geschichte des Liedes videos
+  const geschichteVideos = videos.filter(video => 
+    video.title.includes("Die Geschichte des Liedes") || 
+    video.title.includes("Geschichte des Liedes") ||
+    video.title.includes("GESCHICHTE DES LIEDES")
+  );
+
+  // Pagination logic
+  const totalPages = Math.ceil(geschichteVideos.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentVideos = geschichteVideos.slice(startIndex, endIndex);
+
+  const handleVideoClick = (video: Video) => {
+    // Navigate to individual video page instead of modal
+    setLocation(`/video/${video.id}`);
+  };
+
+  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">Wird geladen...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-bunny-dark text-white has-fixed-header">
+      {/* Header */}
+      <div className="header-sticky bg-transparent overflow-hidden">
+        <div className="container py-6">
+          <div className="flex items-center justify-between">
+            {/* Left side - Logo */}
+            <div className="flex items-center space-x-6 flex-1">
+              <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
+                <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
+                  <div className="w-0 h-0 border-l-[13px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
+                </div>
+                <h1 className="text-3xl font-bold text-white tracking-wide">go4.video</h1>
+              </Link>
+            </div>
+
+            {/* Right side - Navigation + Search */}
+            <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="relative text-bunny-light hover:text-bunny-blue transition-colors group">
+                    Home
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
+                  </Link>
+                  <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
+                    FOLX STADL
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
+                  </Link>
+                  <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
+                    DIE GESCHICHTE DES LIEDES
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
+                  </Link>
+                </nav>
+                
+                <div className="relative">
+                  <Input
+                    type="search"
+                    placeholder="Search..."
+                    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-48"
+                  />
+                  <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 */}
+              <button
+                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                className="md:hidden p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
+                data-testid="button-mobile-menu"
+              >
+                {isMobileMenuOpen ? (
+                  <X className="w-6 h-6 text-white" />
+                ) : (
+                  <Menu className="w-6 h-6 text-white" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile menu dropdown */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
+            <div className="px-4 py-3">
+              <nav className="flex space-x-6 mb-3">
+                <Link 
+                  href="/" 
+                  className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  Home
+                </Link>
+                <Link 
+                  href="/folx-stadl" 
+                  className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  FOLX STADL
+                </Link>
+                <Link 
+                  href="/geschichte-lied" 
+                  className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  DIE GESCHICHTE DES LIEDES
+                </Link>
+              </nav>
+              
+              <div className="relative mt-3">
+                <Input
+                  type="search"
+                  placeholder="Search..."
+                  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-full"
+                />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Main Content */}
+      <div className="container mx-auto px-4 pt-8 pb-16">
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center space-x-4">
+            <Link href="/" className="text-gray-400 hover:text-white transition-colors">
+              <ArrowLeft className="w-6 h-6" />
+            </Link>
+            <div>
+              <h1 className="text-4xl font-bold gradient-text mb-2">Die Geschichte des Liedes</h1>
+              <p className="text-gray-400 text-lg">
+                {geschichteVideos.length} Folgen gefunden
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {geschichteVideos.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="text-gray-400 text-xl mb-4">
+              Keine Videos in der Sammlung "Die Geschichte des Liedes" gefunden
+            </div>
+            <p className="text-gray-500">
+              Überprüfen Sie später, ob neue Inhalte hinzugefügt wurden.
+            </p>
+          </div>
+        ) : (
+          <>
+            {/* Video Grid */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
+              {currentVideos.map((video) => (
+                <VideoCard
+                  key={video.id}
+                  video={video}
+                  onClick={() => handleVideoClick(video)}
+                />
+              ))}
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center space-x-4">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                  disabled={currentPage === 1}
+                  className="bg-white/10 border-white/20 text-white hover:bg-white/20"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                  Zurück
+                </Button>
+                
+                <span className="text-sm text-gray-400">
+                  Seite {currentPage} von {totalPages}
+                </span>
+                
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+                  disabled={currentPage === totalPages}
+                  className="bg-white/10 border-white/20 text-white hover:bg-white/20"
+                >
+                  Weiter
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Video Modal */}
+      {selectedVideo && (
+        <BunnyVideoModal
+          video={selectedVideo}
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+        />
+      )}
+    </div>
+  );
+}

client/src/pages/home.tsx

@@ -89,6 +89,10 @@ export default function Home() {
                     FOLX STADL
                     <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
                   </Link>
+                  <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group text-sm">
+                    DIE GESCHICHTE DES LIEDES
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 via-blue-500 to-purple-600 transition-all duration-300 group-hover:w-full"></span>
+                  </Link>
                 </nav>
                 
                 <div className="relative">
@@ -123,7 +127,7 @@ export default function Home() {
         {isMobileMenuOpen && (
           <div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
             <div className="px-4 py-3">
-              <nav className="flex space-x-6 mb-3">
+              <nav className="flex flex-col space-y-3 mb-4">
                 <Link 
                   href="/" 
                   className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
@@ -138,6 +142,13 @@ export default function Home() {
                 >
                   FOLX STADL
                 </Link>
+                <Link 
+                  href="/geschichte-lied" 
+                  className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  DIE GESCHICHTE DES LIEDES
+                </Link>
               </nav>
               
               <div className="relative">