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">
+          <Button 
-            <Menu className="text-xl" />
+            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>
   );

client/src/pages/VideoPage.tsx

@@ -31,7 +31,7 @@ const formatDate = (date: Date | string): string => {
   });
 };
 import { Button } from "@/components/ui/button";
-import { Share2, X, Edit3 } from "lucide-react";
+import { Share2, X, Edit3, Menu } from "lucide-react";
 import { apiRequest } from "@/lib/queryClient";
 import {
   FacebookShareButton,
@@ -52,6 +52,7 @@ export default function VideoPage() {
   const [, params] = useRoute("/video/:id");
   const videoId = params?.id;
   const [showShareMenu, setShowShareMenu] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   // Fetch current video
   const { data: currentVideo, isLoading: videoLoading } = useQuery<Video>({
@@ -157,8 +158,47 @@ export default function VideoPage() {
                 ← Back
               </Button>
             </div>
+
+            {/* Mobile Menu Button */}
+            <Button 
+              variant="ghost" 
+              className="md:hidden text-bunny-light" 
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              data-testid="button-mobile-menu-video"
+            >
+              {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 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-video"
+                >
+                  Home
+                </a>
+                <button 
+                  onClick={() => {
+                    window.history.back();
+                    setIsMobileMenuOpen(false);
+                  }}
+                  className="text-left text-bunny-light hover:text-bunny-blue transition-colors py-2 border-b border-white/10"
+                  data-testid="button-mobile-back"
+                >
+                  ← Back to Previous Page
+                </button>
+              </nav>
+            </div>
+          </div>
+        )}
       </div>
 
       <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">
@@ -311,8 +351,30 @@ export default function VideoPage() {
                 <span>{formatViews(currentVideo.views)} views</span>
                 <span>{formatDuration(currentVideo.duration)}</span>
                 <span>{formatDate(currentVideo.createdAt)}</span>
+                {currentVideo.category && (
+                  <span className="bg-bunny-blue/20 text-bunny-blue px-2 py-1 rounded-full">
+                    {currentVideo.category}
+                  </span>
+                )}
               </div>
 
+              {/* Tags Section */}
+              {currentVideo.tags && currentVideo.tags.length > 0 && (
+                <div className="mb-4">
+                  <h3 className="text-sm font-medium text-bunny-light mb-2">Tags</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {currentVideo.tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="bg-bunny-gray/50 text-bunny-light px-2 py-1 rounded text-xs hover:bg-bunny-gray transition-colors"
+                      >
+                        #{tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
 
 
               {currentVideo.description ? (

server/bunny.ts

@@ -95,6 +95,31 @@ export class BunnyService {
       }
     }
 
+    // Extract category from bunnyVideo.category or metaTags
+    let category = bunnyVideo.category || "";
+    if (!category && bunnyVideo.metaTags && bunnyVideo.metaTags.length > 0) {
+      const categoryTag = bunnyVideo.metaTags.find((tag: any) => 
+        tag.property?.toLowerCase().includes('category') ||
+        tag.property?.toLowerCase().includes('genre')
+      );
+      if (categoryTag) {
+        category = categoryTag.value;
+      }
+    }
+
+    // Extract tags from metaTags
+    const tags: string[] = [];
+    if (bunnyVideo.metaTags && bunnyVideo.metaTags.length > 0) {
+      bunnyVideo.metaTags.forEach((tag: any) => {
+        if (tag.property?.toLowerCase().includes('tag') || 
+            tag.property?.toLowerCase().includes('keyword')) {
+          // Split comma-separated tags and clean them up
+          const tagValues = tag.value.split(',').map((t: string) => t.trim()).filter(Boolean);
+          tags.push(...tagValues);
+        }
+      });
+    }
+
     return {
       id: bunnyVideo.guid,
       title: bunnyVideo.title || 'Untitled Video',
@@ -106,8 +131,8 @@ export class BunnyService {
       videoUrlIframe: iframeUrl, // iframe fallback
       duration: Math.floor(bunnyVideo.length || 0),
       views: bunnyVideo.views || 0,
-      category: "",
+      category: category,
-      tags: [],
+      tags: tags,
       isPublic: true,
       uploadStatus: "completed",
       originalFileName: null,