From fe81271ab3537531ff70bdbefc85b99e3f1b474d Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sun, 28 Dec 2025 16:41:25 -0800
Subject: [PATCH] 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 | 100 ++++++++++++++-----
 1 file changed, 77 insertions(+), 23 deletions(-)

diff --git a/frontend/components/layout/band-selector.tsx b/frontend/components/layout/band-selector.tsx
index 36b8d2a..b2a5ed5 100644
--- a/frontend/components/layout/band-selector.tsx
+++ b/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,39 +9,93 @@ 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 (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button
-                    variant="ghost"
-                    className="flex items-center gap-2 font-bold text-lg"
-                >
-                    <span>{current.name}</span>
-                    <ChevronDown className="h-4 w-4 opacity-50" />
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-56">
-                {VERTICALS.map((vertical) => (
-                    <DropdownMenuItem
-                        key={vertical.slug}
-                        onClick={() => handleSelect(vertical.slug)}
-                        className={`cursor-pointer ${vertical.slug === current.slug ? "font-bold" : ""}`}
-                    >
-                        {vertical.name}
-                    </DropdownMenuItem>
-                ))}
-            </DropdownMenuContent>
-        </DropdownMenu>
+        <>
+            {/* Desktop Dropdown (hidden on mobile) */}
+            <div className="hidden md:block">
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            className="flex items-center gap-2 font-bold text-lg"
+                        >
+                            <span>{current.name}</span>
+                            <ChevronDown className="h-4 w-4 opacity-50" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-56">
+                        {VERTICALS.map((vertical) => (
+                            <DropdownMenuItem
+                                key={vertical.slug}
+                                onClick={() => handleSelect(vertical.slug)}
+                                className={`cursor-pointer ${vertical.slug === current.slug ? "font-bold" : ""}`}
+                            >
+                                {vertical.name}
+                            </DropdownMenuItem>
+                        ))}
+                    </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>
+        </>
     )
 }