feat: Mobile-optimized band selector with sheet drawer

- Desktop: Existing dropdown menu
- Mobile: Bottom sheet with large touch targets (h-14)
- Uses responsive classes (hidden md:block / md:hidden)

frontend/components/layout/band-selector.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useRouter } from "next/navigation"
-import { ChevronDown } from "lucide-react"
+import { ChevronDown, Music } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
     DropdownMenu,
@@ -9,18 +9,33 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from "@/components/ui/sheet"
 import { useVertical, VERTICALS, VerticalSlug } from "@/contexts/vertical-context"
+import { useState } from "react"
 
 export function BandSelector() {
     const { current, setCurrent } = useVertical()
     const router = useRouter()
+    const [sheetOpen, setSheetOpen] = useState(false)
 
     const handleSelect = (slug: VerticalSlug) => {
         setCurrent(slug)
         router.push(`/${slug}`)
+        setSheetOpen(false)
     }
 
+    // Desktop: Dropdown menu
+    // Mobile: Sheet drawer
     return (
+        <>
+            {/* Desktop Dropdown (hidden on mobile) */}
+            <div className="hidden md:block">
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <Button
@@ -43,5 +58,44 @@ export function BandSelector() {
                         ))}
                     </DropdownMenuContent>
                 </DropdownMenu>
+            </div>
+
+            {/* Mobile Sheet (hidden on desktop) */}
+            <div className="md:hidden">
+                <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+                    <SheetTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="lg"
+                            className="flex items-center gap-2 font-bold text-lg px-3"
+                        >
+                            <span>{current.name}</span>
+                            <ChevronDown className="h-4 w-4 opacity-50" />
+                        </Button>
+                    </SheetTrigger>
+                    <SheetContent side="bottom" className="h-[60vh]">
+                        <SheetHeader>
+                            <SheetTitle className="flex items-center gap-2">
+                                <Music className="h-5 w-5" />
+                                Switch Band
+                            </SheetTitle>
+                        </SheetHeader>
+                        <div className="grid gap-2 py-4">
+                            {VERTICALS.map((vertical) => (
+                                <Button
+                                    key={vertical.slug}
+                                    variant={vertical.slug === current.slug ? "default" : "outline"}
+                                    size="lg"
+                                    className="w-full justify-start text-lg h-14"
+                                    onClick={() => handleSelect(vertical.slug)}
+                                >
+                                    {vertical.name}
+                                </Button>
+                            ))}
+                        </div>
+                    </SheetContent>
+                </Sheet>
+            </div>
+        </>
     )
 }