controller-v2/client/src/pages/VUPage.tsx

/* ============================================================
   VU PAGE — VU Meter Gallery
   Design: Reference luxsin_x8_VU表.png
   - Card-based VU meter style selector
   - Active = cyan check circle below card
   - Inactive = empty circle
   ============================================================ */
import { useDevice } from "@/contexts/DeviceContext";
import { cn } from "@/lib/utils";
import { Check, ChevronLeft } from "lucide-react";
import { useLocation } from "wouter";

interface VUStyle {
  index: number;
  name: string;
  preview: string;
}

const VU_STYLES: VUStyle[] = Array.from({ length: 16 }, (_, i) => ({
  index: i,
  name: `VU ${i + 1}`,
  preview: `/vu/vu${i + 1}.png`,
}));

export default function VUPage() {
  const [, setLocation] = useLocation();
  const { deviceState, updateSetting } = useDevice();
  const currentVU = deviceState?.vu ?? 0;

  return (
    <div className="min-h-screen bg-black">
      <div className="page-header">
        <button onClick={() => setLocation("/")} className="mr-4 text-white/60 active:text-white transition-colors">
          <ChevronLeft size={24} />
        </button>
        <h1 className="flex-1 text-center text-[17px] font-semibold text-white">VU 表库</h1>
        <div className="w-8" />
      </div>

      <div className="px-4 pb-32 pt-4 space-y-5">
        {VU_STYLES.map((style) => {
          const isActive = currentVU === style.index;
          return (
            <div key={style.index} className="space-y-3">
              {/* Card */}
              <div
                className={cn(
                  "ios-list-group p-3 cursor-pointer transition-all duration-200",
                  isActive && "border-[#00FFF6]/30"
                )}
                style={isActive ? { borderColor: "rgba(0,255,246,0.3)", boxShadow: "0 0 20px rgba(0,255,246,0.08)" } : {}}
                onClick={() => updateSetting({ vu: style.index })}
              >
                <img 
                  src={style.preview} 
                  alt={style.name}
                  className="w-full h-28 object-contain rounded-xl bg-black/20"
                />
              </div>

              {/* Selection indicator */}
              <div className="flex justify-center">
                <button
                  onClick={() => updateSetting({ vu: style.index })}
                  className={cn(
                    "w-7 h-7 rounded-full flex items-center justify-center transition-all duration-200",
                    isActive
                      ? "bg-[#00FFF6] text-black shadow-[0_0_12px_rgba(0,255,246,0.5)]"
                      : "border-2 border-white/20 text-transparent"
                  )}
                >
                  {isActive && <Check size={14} strokeWidth={3} />}
                </button>
              </div>

              {/* Style name */}
              <div className="text-center">
                <p className={cn("text-[15px] font-medium", isActive ? "text-[#00FFF6]" : "text-white/60")}>
                  {style.name}
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}