Add mobile menu and display video categories and tags

Integrates a mobile-friendly menu with search functionality and displays video categories and tags fetched from Bunny.net metadata, enhancing content discoverability and user experience on all devices.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/wsHCZ4W

client/src/components/search-header.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from "react";
-import { Search, Play, Menu, Grid3X3, List } from "lucide-react";
+import { Search, Play, Menu, Grid3X3, List, X } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -17,6 +17,7 @@ export default function SearchHeader({
   currentView
 }: SearchHeaderProps) {
   const [searchQuery, setSearchQuery] = useState("");
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   // Debounce function to delay search API calls
   const debounce = useCallback((func: Function, delay: number) => {
@@ -82,12 +83,88 @@ export default function SearchHeader({
             </div>
           </div>
           
-          <Button variant="ghost" className="md:hidden text-bunny-light" data-testid="button-mobile-menu">
-            <Menu className="text-xl" />
+          <Button 
+            variant="ghost" 
+            className="md:hidden text-bunny-light" 
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            data-testid="button-mobile-menu"
+          >
+            {isMobileMenuOpen ? <X className="text-xl" /> : <Menu className="text-xl" />}
           </Button>
         </div>
       </div>
 
+      {/* Mobile Menu */}
+      {isMobileMenuOpen && (
+        <div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-top-2 duration-200">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            {/* Mobile Search */}
+            <div className="relative mb-4">
+              <Input
+                type="search"
+                placeholder="Search videos..."
+                value={searchQuery}
+                onChange={(e) => handleSearchChange(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"
+                data-testid="input-mobile-search"
+              />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+            </div>
+            
+            {/* Mobile Navigation */}
+            <nav className="flex flex-col space-y-4">
+              <a 
+                href="/" 
+                className="text-bunny-light hover:text-bunny-blue transition-colors py-2 border-b border-white/10"
+                onClick={() => setIsMobileMenuOpen(false)}
+                data-testid="link-mobile-home"
+              >
+                Home
+              </a>
+              <div className="text-bunny-light py-2 border-b border-white/10">
+                <span className="text-sm text-bunny-muted mb-2 block">View Options</span>
+                <div className="flex bg-bunny-gray rounded-lg p-1 w-fit">
+                  <Button
+                    variant={currentView === "grid" ? "default" : "ghost"}
+                    size="sm"
+                    onClick={() => {
+                      onViewChange("grid");
+                      setIsMobileMenuOpen(false);
+                    }}
+                    className={`px-3 py-1 rounded text-sm ${
+                      currentView === "grid" 
+                        ? "bg-bunny-blue text-white" 
+                        : "text-bunny-muted hover:text-white"
+                    }`}
+                    data-testid="button-mobile-grid-view"
+                  >
+                    <Grid3X3 className="w-4 h-4 mr-1" />
+                    Grid
+                  </Button>
+                  <Button
+                    variant={currentView === "list" ? "default" : "ghost"}
+                    size="sm"
+                    onClick={() => {
+                      onViewChange("list");
+                      setIsMobileMenuOpen(false);
+                    }}
+                    className={`px-3 py-1 rounded text-sm ${
+                      currentView === "list" 
+                        ? "bg-bunny-blue text-white" 
+                        : "text-bunny-muted hover:text-white"
+                    }`}
+                    data-testid="button-mobile-list-view"
+                  >
+                    <List className="w-4 h-4 mr-1" />
+                    List
+                  </Button>
+                </div>
+              </div>
+            </nav>
+          </div>
+        </div>
+      )}
+
       {/* Filter Bar */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

client/src/components/video-card.tsx

@@ -104,7 +104,30 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
           <span data-testid={`text-date-${video.id}`}>
             {formatDate(video.createdAt)}
           </span>
+          {video.category && (
+            <span className="bg-bunny-blue/20 text-bunny-blue px-2 py-0.5 rounded-full text-xs">
+              {video.category}
+            </span>
+          )}
         </div>
+
+        {/* Tags display */}
+        {video.tags && video.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-2">
+            {video.tags.slice(0, 3).map((tag, index) => (
+              <span
+                key={index}
+                className="bg-bunny-gray/30 text-bunny-light px-1.5 py-0.5 rounded text-xs hover:bg-bunny-gray/50 transition-colors"
+                data-testid={`tag-${tag}-${video.id}`}
+              >
+                #{tag}
+              </span>
+            ))}
+            {video.tags.length > 3 && (
+              <span className="text-bunny-muted text-xs">+{video.tags.length - 3} more</span>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );