x

apps/admin/src/components/products/ProductOptionUxModal.tsx

@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from 'react'
+import { 
+  X, 
+  Sparkles, 
+  LayoutGrid, 
+  ListFilter, 
+  Maximize2, 
+  Check, 
+  Loader2, 
+  SlidersHorizontal,
+  Info
+} from 'lucide-react'
+import { API_BASE, type Product } from '@homaroma/types'
+
+export type OptionDisplayType = 'auto' | 'pills' | 'dropdown' | 'modal'
+
+interface OptionConfig {
+  name: any
+  values: any[]
+  displayType?: OptionDisplayType
+}
+
+interface Props {
+  isOpen: boolean
+  product: Product | null
+  onClose: () => void
+  onSaveSuccess: (updatedProduct: Product) => void
+}
+
+function getOptionLabel(nameObj: any): string {
+  if (!nameObj) return 'Option'
+  if (typeof nameObj === 'string') return nameObj
+  return nameObj.th || nameObj.en || Object.values(nameObj)[0] || 'Option'
+}
+
+function getValueLabel(valObj: any): string {
+  if (!valObj) return ''
+  if (typeof valObj === 'string') return valObj
+  return valObj.th || valObj.en || Object.values(valObj)[0] || ''
+}
+
+const DISPLAY_OPTIONS: Array<{
+  type: OptionDisplayType
+  title: string
+  subtitle: string
+  icon: React.ComponentType<{ className?: string }>
+  badgeText: string
+  badgeColor: string
+}> = [
+  {
+    type: 'auto',
+    title: 'Auto (Smart Adaptive)',
+    subtitle: 'ระบบเลือกให้อัตโนมัติ: มี Swatch จะแสดงกล่องสี, ≤ 8 ตัวเลือกแสดงปุ่มกด, > 8 ตัวเลือกสลับเป็น Dropdown',
+    icon: Sparkles,
+    badgeText: 'แนะนำ',
+    badgeColor: 'bg-cyan-glow/15 text-cyan-glow border-cyan-glow/30'
+  },
+  {
+    type: 'pills',
+    title: '1. แบบเดิม (Pills / Swatches)',
+    subtitle: 'ปุ่มกดเรียงกันแบบ Flex-wrap ทุกตัวเลือก เหมาะกับตัวเลือกน้อย (2–8 ตัวเลือก เช่น Size S/M/L/XL)',
+    icon: LayoutGrid,
+    badgeText: 'ปุ่มกด',
+    badgeColor: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30'
+  },
+  {
+    type: 'dropdown',
+    title: '2. Searchable Dropdown',
+    subtitle: 'กล่อง Dropdown กะทัดรัด เมื่อคลิกจะกางเมนูพร้อมช่องค้นหา เหมาะกับตัวเลือกปานกลาง (10–30 ตัวเลือก)',
+    icon: ListFilter,
+    badgeText: 'Dropdown',
+    badgeColor: 'bg-amber-500/15 text-amber-400 border-amber-500/30'
+  },
+  {
+    type: 'modal',
+    title: '3. Modal Dialog / Bottom Sheet',
+    subtitle: 'ปุ่มกดเปิดหน้าต่าง Pop-up กลางจอ (Desktop) หรือ Bottom Sheet (Mobile) ค้นหาเต็มตา เหมาะกับตัวเลือกเยอะมาก (30–100+ ตัวเลือก)',
+    icon: Maximize2,
+    badgeText: 'Modal ค้นหา',
+    badgeColor: 'bg-purple-500/15 text-purple-400 border-purple-500/30'
+  }
+]
+
+export default function ProductOptionUxModal({ isOpen, product, onClose, onSaveSuccess }: Props) {
+  const [optionsConfig, setOptionsConfig] = useState<OptionConfig[]>([])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!product) {
+      setOptionsConfig([])
+      return
+    }
+    const rawOptions = (product.options as any[]) || []
+    setOptionsConfig(
+      rawOptions.map(opt => ({
+        name: opt.name,
+        values: opt.values || [],
+        displayType: (opt.displayType as OptionDisplayType) || 'auto'
+      }))
+    )
+    setError(null)
+  }, [product, isOpen])
+
+  if (!isOpen || !product) return null
+
+  const handleTypeChange = (optIndex: number, type: OptionDisplayType) => {
+    setOptionsConfig(prev => {
+      const next = [...prev]
+      next[optIndex] = { ...next[optIndex], displayType: type }
+      return next
+    })
+  }
+
+  const handleSave = async () => {
+    try {
+      setSaving(true)
+      setError(null)
+
+      const payloadOptions = optionsConfig.map(opt => ({
+        name: opt.name,
+        values: opt.values,
+        displayType: opt.displayType
+      }))
+
+      const res = await fetch(`${API_BASE}/products/${product.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          options: payloadOptions
+        })
+      })
+
+      if (!res.ok) {
+        const errJson = await res.json().catch(() => ({}))
+        throw new Error(errJson.message || `บันทึกไม่สำเร็จ (Status ${res.status})`)
+      }
+
+      const data = await res.json()
+      const updatedProduct = data.product || { ...product, options: payloadOptions }
+      onSaveSuccess(updatedProduct)
+      onClose()
+    } catch (err: any) {
+      setError(err.message || 'เกิดข้อผิดพลาดในการบันทึก')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const rawName = product.name
+  const resolvedName = typeof rawName === 'string' ? rawName : (rawName?.th || rawName?.en || Object.values(rawName || {})[0] || '')
+  const productName = resolvedName || (product.brand?.name ? `${product.brand.name} Product` : `Product #${product.id}`)
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-fade-in">
+      <div 
+        className="w-full max-w-2xl bg-night-900 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6 max-h-[90vh] overflow-y-auto custom-scrollbar"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between gap-4 pb-4 border-b border-white/10">
+          <div className="flex items-center gap-3">
+            <div className="p-3 rounded-2xl bg-cyan-glow/10 border border-cyan-glow/20 text-cyan-glow">
+              <SlidersHorizontal className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="text-lg font-bold text-white flex items-center gap-2">
+                ตั้งค่ารูปแบบการเลือก Option (UX/UI Selector)
+              </h2>
+              <p className="text-xs text-slate-400 mt-0.5 line-clamp-1">
+                {productName}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-white/5 transition-all cursor-pointer"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Options List */}
+        {optionsConfig.length === 0 ? (
+          <div className="py-12 text-center space-y-3">
+            <div className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mx-auto text-slate-500">
+              <Info className="w-6 h-6" />
+            </div>
+            <p className="text-sm font-semibold text-slate-300">สินค้านี้ไม่มีตัวเลือก (Options / Variants)</p>
+            <p className="text-xs text-slate-500 max-w-sm mx-auto">
+              สินค้านี้เป็นสินค้าเดี่ยวที่ไม่มีตัวเลือกขนาด สี หรือรุ่น จึงไม่ต้องตั้งค่า Option UX/UI
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {optionsConfig.map((opt, optIdx) => {
+              const optLabel = getOptionLabel(opt.name)
+              const count = opt.values.length
+              const currentType = opt.displayType || 'auto'
+
+              return (
+                <div key={optIdx} className="p-5 rounded-2xl bg-night-950 border border-white/10 space-y-4">
+                  {/* Option Header */}
+                  <div className="flex items-center justify-between flex-wrap gap-2">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs uppercase font-mono tracking-wider px-2 py-0.5 rounded-md bg-white/5 text-slate-400 border border-white/10">
+                        Option {optIdx + 1}
+                      </span>
+                      <h3 className="text-sm font-bold text-white">
+                        {optLabel}
+                      </h3>
+                      <span className="text-xs text-cyan-glow font-semibold px-2 py-0.5 rounded-full bg-cyan-glow/10 border border-cyan-glow/20">
+                        {count} ตัวเลือก
+                      </span>
+                    </div>
+
+                    {/* Quick values preview */}
+                    <div className="text-[11px] text-slate-400 max-w-xs truncate">
+                      ตัวอย่าง: {opt.values.slice(0, 3).map(getValueLabel).join(', ')}{count > 3 ? ` ... (+${count - 3})` : ''}
+                    </div>
+                  </div>
+
+                  {/* Selector Style Cards */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
+                    {DISPLAY_OPTIONS.map((style) => {
+                      const Icon = style.icon
+                      const isSelected = currentType === style.type
+
+                      return (
+                        <button
+                          key={style.type}
+                          type="button"
+                          onClick={() => handleTypeChange(optIdx, style.type)}
+                          className={`relative text-left p-3.5 rounded-2xl border transition-all cursor-pointer flex flex-col justify-between gap-2.5 ${
+                            isSelected
+                              ? 'border-cyan-glow bg-cyan-glow/10 ring-1 ring-cyan-glow/30 shadow-lg shadow-cyan-glow/10'
+                              : 'border-white/10 bg-white/[0.02] hover:bg-white/[0.05] hover:border-white/20'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <div className={`p-1.5 rounded-lg border ${
+                                isSelected ? 'bg-cyan-glow/20 text-cyan-glow border-cyan-glow/30' : 'bg-white/5 text-slate-400 border-white/10'
+                              }`}>
+                                <Icon className="w-4 h-4" />
+                              </div>
+                              <span className={`text-xs font-bold ${isSelected ? 'text-white' : 'text-slate-300'}`}>
+                                {style.title}
+                              </span>
+                            </div>
+
+                            <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${style.badgeColor}`}>
+                              {style.badgeText}
+                            </span>
+                          </div>
+
+                          <p className="text-[11px] leading-relaxed text-slate-400 line-clamp-3">
+                            {style.subtitle}
+                          </p>
+
+                          <div className="flex items-center justify-between pt-1 border-t border-white/5">
+                            <span className="text-[10px] text-slate-500 font-medium">
+                              {isSelected ? 'กำลังเลือกรูปแบบนี้' : 'คลิกเพื่อเลือก'}
+                            </span>
+                            {isSelected && (
+                              <div className="w-4 h-4 rounded-full bg-cyan-glow text-night-950 flex items-center justify-center">
+                                <Check className="w-3 h-3 stroke-[3]" />
+                              </div>
+                            )}
+                          </div>
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Error Feedback */}
+        {error && (
+          <div className="p-3 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs flex items-center gap-2">
+            <X className="w-4 h-4 shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="flex items-center justify-between gap-3 pt-4 border-t border-white/10">
+          <p className="text-xs text-slate-500 hidden sm:block">
+            * การตั้งค่านี้จะมีผลกับหน้า Storefront ของสินค้านี้ทันที
+          </p>
+          <div className="flex items-center gap-3 w-full sm:w-auto justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={saving}
+              className="px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white text-xs font-semibold cursor-pointer transition-all"
+            >
+              ยกเลิก
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving || optionsConfig.length === 0}
+              className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gradient-to-r from-cyan-glow to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-night-950 font-bold text-xs shadow-lg shadow-cyan-glow/20 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-all"
+            >
+              {saving ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <span>กำลังบันทึก...</span>
+                </>
+              ) : (
+                <>
+                  <Check className="w-4 h-4" />
+                  <span>บันทึกการตั้งค่า</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/admin/src/pages/ProductsPage.tsx

@@ -16,12 +16,14 @@ import {
   FileJson,
   Download,
   CheckCircle2,
-  Sparkles
+  Sparkles,
+  SlidersHorizontal
 } from 'lucide-react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { API_BASE, getCategoryImage, formatPrice, type Category, type Product } from '@homaroma/types'
 import ProductJsonGuideModal from '../components/ProductJsonGuideModal'
+import ProductOptionUxModal from '../components/products/ProductOptionUxModal'
 
 
 interface PaginationMeta {
@@ -58,6 +60,10 @@ export default function ProductsPage() {
   const [isGuideModalOpen, setIsGuideModalOpen] = useState(false)
   const [importJsonText, setImportJsonText] = useState('')
   const [importLoading, setImportLoading] = useState(false)
+
+  // Option UX/UI Selector Modal State
+  const [optionUxProduct, setOptionUxProduct] = useState<Product | null>(null)
+  const [isOptionUxModalOpen, setIsOptionUxModalOpen] = useState(false)
   const [importError, setImportError] = useState<string | null>(null)
   const [importSuccessMessage, setImportSuccessMessage] = useState<string | null>(null)
 
@@ -649,6 +655,16 @@ export default function ProductsPage() {
                          >
                            <LayoutTemplate className="w-4 h-4" />
                          </button>
+                         <button 
+                           onClick={() => {
+                             setOptionUxProduct(product)
+                             setIsOptionUxModalOpen(true)
+                           }}
+                           title={t('products.optionUxSelector', 'Option UX/UI Selector (ตั้งค่ารูปแบบการเลือก Option)')}
+                           className="p-2 rounded-lg hover:bg-cyan-glow/10 text-slate-500 hover:text-cyan-glow transition-all cursor-pointer"
+                         >
+                           <SlidersHorizontal className="w-4 h-4" />
+                         </button>
                          <button 
                            onClick={() => navigate(`/products/${product.id}/edit`)}
                            title={t('products.editProduct', 'Edit Product')}
@@ -1053,6 +1069,19 @@ export default function ProductsPage() {
         onOpenImport={() => setIsImportModalOpen(true)}
       />
 
+      {/* Product Option UX/UI Selector Modal */}
+      <ProductOptionUxModal
+        isOpen={isOptionUxModalOpen}
+        product={optionUxProduct}
+        onClose={() => {
+          setIsOptionUxModalOpen(false)
+          setOptionUxProduct(null)
+        }}
+        onSaveSuccess={(updatedProduct) => {
+          setProducts(prev => prev.map(p => p.id === updatedProduct.id ? { ...p, options: updatedProduct.options } : p))
+        }}
+      />
+
     </div>
   )
 }

apps/website/src/app/[lang]/products/[slug]/page.tsx

@@ -181,12 +181,11 @@ function ProductMainSection({
         </nav>
       )}
 
-      <section className="grid gap-10 md:grid-cols-2 md:items-stretch md:gap-16">
+      <section className="grid gap-10 md:grid-cols-2 md:items-start md:gap-16">
         <ProductGallery
           images={galleryImages}
           productName={productName}
           categoryName={categoryName}
-          stretchDesktop
         />
 
         <AddToCartSection product={product} showBrandMeta={showBrandMeta} />

apps/website/src/components/AddToCartSection.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useRef, useEffect } from 'react'
 import Image from 'next/image'
 import Link from './LocalizedLink'
 import { getCategoryImage, formatPrice, type Product } from '@homaroma/types'
@@ -17,7 +17,11 @@ import {
   Truck, 
   ShieldCheck, 
   RotateCcw, 
-  MessageCircle 
+  MessageCircle,
+  Search,
+  ChevronDown,
+  Check,
+  X
 } from 'lucide-react'
 
 function getBaseString(val: any): string {
@@ -219,6 +223,461 @@ const UI_TRANSLATIONS: Record<string, {
   },
 }
 
+function SearchableOptionSelect({
+  optionName,
+  values,
+  selectedValue,
+  onSelect,
+  isOptionAvailable,
+  lang,
+  optionsMeta,
+}: {
+  optionName: string
+  values: any[]
+  selectedValue: string
+  onSelect: (val: string) => void
+  isOptionAvailable: (val: string) => boolean
+  lang: string
+  optionsMeta: any[] | null | undefined
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen])
+
+  const selectedDisplayVal = useMemo(() => {
+    if (!selectedValue) return ''
+    return resolveOptionValue(selectedValue, optionsMeta, lang)
+  }, [selectedValue, optionsMeta, lang])
+
+  const isCurrentAvailable = useMemo(() => {
+    if (!selectedValue) return false
+    return isOptionAvailable(selectedValue)
+  }, [selectedValue, isOptionAvailable])
+
+  const filteredValues = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase()
+    return values
+      .map(val => {
+        const baseVal = getBaseString(val)
+        const displayVal = resolveLocalized(val, lang)
+        const available = isOptionAvailable(baseVal)
+        return { baseVal, displayVal, available }
+      })
+      .filter(item => {
+        if (!q) return true
+        return (
+          item.displayVal.toLowerCase().includes(q) ||
+          item.baseVal.toLowerCase().includes(q)
+        );
+      });
+  }, [values, searchQuery, lang, isOptionAvailable])
+
+  const placeholderText = useMemo(() => {
+    switch (lang.slice(0, 2)) {
+      case 'th': return `ค้นหา หรือเลือกรุ่น (${values.length} รายการ)...`
+      case 'ja': return `オプションを検索または選択 (${values.length}件)...`
+      case 'zh': return `搜索或选择规格 (${values.length} 项)...`
+      default: return `Search or select option (${values.length} items)...`
+    }
+  }, [lang, values.length])
+
+  const emptyText = useMemo(() => {
+    switch (lang.slice(0, 2)) {
+      case 'th': return 'ไม่พบตัวเลือกที่ตรงกับคำค้นหา'
+      case 'ja': return '該当するオプションが見つかりません'
+      case 'zh': return '未找到匹配的规格'
+      default: return 'No matching options found'
+    }
+  }, [lang])
+
+  return (
+    <div ref={containerRef} className="relative w-full space-y-2">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(prev => !prev)}
+        className={`w-full flex items-center justify-between gap-3 px-4 py-3 rounded-2xl border transition-all text-left shadow-sm ${
+          isOpen
+            ? 'border-brand-primary bg-surface-card ring-2 ring-brand-primary/20'
+            : 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-text-main'
+        }`}
+      >
+        <div className="flex items-center gap-2.5 min-w-0 flex-1">
+          <span className="text-xs uppercase font-bold tracking-wider text-muted-text shrink-0">
+            {optionName}:
+          </span>
+          <span className={`text-xs md:text-sm font-bold truncate ${selectedDisplayVal ? 'text-text-main' : 'text-muted-text/60 italic'}`}>
+            {selectedDisplayVal || placeholderText}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {selectedValue && (
+            isCurrentAvailable ? (
+              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-brand-success/10 text-brand-success border border-brand-success/20">
+                <span className="w-1.5 h-1.5 rounded-full bg-brand-success" />
+                พร้อมส่ง
+              </span>
+            ) : (
+              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20">
+                หมด
+              </span>
+            )
+          )}
+          <span className="text-[11px] font-bold px-2 py-0.5 rounded-md bg-surface-page border border-line-primary/10 text-muted-text">
+            {values.length} รุ่น
+          </span>
+          <ChevronDown className={`w-4 h-4 text-muted-text transition-transform duration-200 ${isOpen ? 'rotate-180 text-brand-primary' : ''}`} />
+        </div>
+      </button>
+
+      {/* Floating Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute z-40 left-0 right-0 mt-1.5 bg-surface-card border border-line-primary/30 rounded-2xl shadow-2xl p-3 space-y-2.5 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-150">
+          {/* Search Box */}
+          <div className="relative">
+            <Search className="w-4 h-4 text-muted-text absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder={placeholderText}
+              className="w-full pl-9 pr-8 py-2 bg-surface-page border border-line-primary/20 rounded-xl text-xs text-text-main placeholder:text-muted-text/50 focus:outline-none focus:border-brand-primary focus:ring-1 focus:ring-brand-primary transition"
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-text hover:text-text-main p-1 rounded-md"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+
+          {/* Counter info */}
+          <div className="flex items-center justify-between text-[11px] text-muted-text px-1">
+            <span>
+              {searchQuery ? `พบ ${filteredValues.length} จาก ${values.length} รายการ` : `ตัวเลือกทั้งหมด ${values.length} รายการ`}
+            </span>
+            <span className="text-[10px] text-muted-text/60">คลิกเพื่อเลือก</span>
+          </div>
+
+          {/* Options Scroll List */}
+          <div className="max-h-64 overflow-y-auto space-y-1 pr-1 custom-scrollbar">
+            {filteredValues.length > 0 ? (
+              filteredValues.map(({ baseVal, displayVal, available }) => {
+                const isSelected = selectedValue === baseVal;
+                return (
+                  <button
+                    key={baseVal}
+                    type="button"
+                    disabled={!available}
+                    onClick={() => {
+                      onSelect(baseVal)
+                      setIsOpen(false)
+                      setSearchQuery('')
+                    }}
+                    className={`w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl text-left text-xs transition-all ${
+                      isSelected
+                        ? 'border border-brand-primary/30 bg-brand-primary/15 font-bold text-brand-primary shadow-xs'
+                        : available
+                        ? 'font-medium text-text-main hover:bg-surface-page hover:text-brand-primary'
+                        : 'cursor-not-allowed bg-surface-page/30 opacity-35 text-muted-text'
+                    }`}
+                  >
+                    <div className="flex items-center gap-2 min-w-0 pr-2">
+                      <span className={`w-2 h-2 rounded-full shrink-0 ${isSelected ? 'bg-brand-primary ring-2 ring-brand-primary/30' : available ? 'bg-line-primary/40' : 'bg-transparent'}`} />
+                      <span className="truncate">{displayVal}</span>
+                    </div>
+
+                    <div className="flex items-center gap-2 shrink-0">
+                      {!available && (
+                        <span className="text-[10px] font-semibold text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded">
+                          หมด
+                        </span>
+                      )}
+                      {isSelected && (
+                        <Check className="w-4 h-4 text-brand-primary shrink-0" />
+                      )}
+                    </div>
+                  </button>
+                );
+              })
+            ) : (
+              <div className="py-8 text-center text-xs text-muted-text space-y-1">
+                <p className="font-semibold">{emptyText}</p>
+                <p className="text-[11px] text-muted-text/60">ลองพิมพ์คำค้นหาอื่น เช่น ชื่อรุ่นรถ ยี่ห้อ หรือขนาด</p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function OptionModalSelect({
+  optionName,
+  values,
+  selectedValue,
+  onSelect,
+  isOptionAvailable,
+  lang,
+  optionsMeta,
+}: {
+  optionName: string
+  values: any[]
+  selectedValue: string
+  onSelect: (val: string) => void
+  isOptionAvailable: (val: string) => boolean
+  lang: string
+  optionsMeta: any[] | null | undefined
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+      window.addEventListener('keydown', handleKeyDown)
+      setTimeout(() => inputRef.current?.focus(), 80)
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen])
+
+  const selectedDisplayVal = useMemo(() => {
+    if (!selectedValue) return ''
+    return resolveOptionValue(selectedValue, optionsMeta, lang)
+  }, [selectedValue, optionsMeta, lang])
+
+  const isCurrentAvailable = useMemo(() => {
+    if (!selectedValue) return false
+    return isOptionAvailable(selectedValue)
+  }, [selectedValue, isOptionAvailable])
+
+  const filteredValues = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase()
+    return values
+      .map(val => {
+        const baseVal = getBaseString(val)
+        const displayVal = resolveLocalized(val, lang)
+        const available = isOptionAvailable(baseVal)
+        return { baseVal, displayVal, available }
+      })
+      .filter(item => {
+        if (!q) return true
+        return (
+          item.displayVal.toLowerCase().includes(q) ||
+          item.baseVal.toLowerCase().includes(q)
+        )
+      })
+  }, [values, searchQuery, lang, isOptionAvailable])
+
+  const placeholderText = useMemo(() => {
+    switch (lang.slice(0, 2)) {
+      case 'th': return `ค้นหาตัวเลือก หรือชื่อรุ่น (${values.length} รายการ)...`
+      case 'ja': return `オプションまたはモデルを検索 (${values.length}件)...`
+      case 'zh': return `搜索规格或型号 (${values.length} 项)...`
+      default: return `Search options or model (${values.length} items)...`
+    }
+  }, [lang, values.length])
+
+  return (
+    <div className="w-full space-y-2">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        className="w-full flex items-center justify-between gap-3 px-4 py-3.5 rounded-2xl border border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-text-main shadow-xs transition-all group"
+      >
+        <div className="flex items-center gap-2.5 min-w-0 flex-1">
+          <span className="text-xs uppercase font-bold tracking-wider text-muted-text shrink-0">
+            {optionName}:
+          </span>
+          <span className={`text-xs md:text-sm font-bold truncate ${selectedDisplayVal ? 'text-text-main' : 'text-muted-text/60 italic'}`}>
+            {selectedDisplayVal || 'คลิกเพื่อเลือก'}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 shrink-0">
+          {selectedValue && (
+            isCurrentAvailable ? (
+              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-brand-success/10 text-brand-success border border-brand-success/20">
+                <span className="w-1.5 h-1.5 rounded-full bg-brand-success" />
+                พร้อมส่ง
+              </span>
+            ) : (
+              <span className="hidden sm:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20">
+                หมด
+              </span>
+            )
+          )}
+          <span className="text-[11px] font-bold px-2 py-0.5 rounded-md bg-surface-page border border-line-primary/10 text-muted-text">
+            {values.length} รุ่น
+          </span>
+          <span className="text-xs font-semibold text-brand-primary group-hover:translate-x-0.5 transition-transform flex items-center gap-1">
+            เลือก <ChevronDown className="w-4 h-4 -rotate-90" />
+          </span>
+        </div>
+      </button>
+
+      {/* Modal Dialog (Desktop) / Bottom Sheet (Mobile) */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/70 backdrop-blur-md animate-in fade-in duration-200"
+          onClick={() => setIsOpen(false)}
+        >
+          <div 
+            className="w-full sm:max-w-2xl bg-surface-card border border-line-primary/30 rounded-t-3xl sm:rounded-3xl shadow-2xl p-4 sm:p-6 space-y-4 max-h-[85vh] flex flex-col animate-in slide-in-from-bottom sm:zoom-in-95 duration-200"
+            onClick={e => e.stopPropagation()}
+          >
+            {/* Mobile Sheet Handle */}
+            <div className="w-12 h-1.5 bg-line-primary/30 rounded-full mx-auto sm:hidden" />
+
+            {/* Modal Header */}
+            <div className="flex items-center justify-between gap-3 pb-3 border-b border-line-primary/15">
+              <div>
+                <h3 className="text-base font-bold text-text-main">
+                  {optionName}
+                </h3>
+                <p className="text-xs text-muted-text">
+                  ตัวเลือกทั้งหมด {values.length} รายการ (คลิกที่ตัวเลือกเพื่อเลือกทันที)
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => setIsOpen(false)}
+                className="p-2 rounded-xl text-muted-text hover:text-text-main hover:bg-surface-page transition-all"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Search Input */}
+            <div className="relative shrink-0">
+              <Search className="w-4 h-4 text-muted-text absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={placeholderText}
+                className="w-full pl-10 pr-9 py-2.5 bg-surface-page border border-line-primary/20 rounded-xl text-xs md:text-sm text-text-main placeholder:text-muted-text/50 focus:outline-none focus:border-brand-primary focus:ring-1 focus:ring-brand-primary transition"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-text hover:text-text-main p-1 rounded-md"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+
+            {/* Counter info */}
+            <div className="flex items-center justify-between text-xs text-muted-text px-1 shrink-0">
+              <span>
+                {searchQuery ? `พบ ${filteredValues.length} จาก ${values.length} รายการ` : `รายการทั้งหมด ${values.length} ตัวเลือก`}
+              </span>
+              <span className="text-[11px] text-muted-text/70">กด ESC เพื่อปิด</span>
+            </div>
+
+            {/* Grid of Options (2 cols on desktop, 1 col on mobile) */}
+            <div className="overflow-y-auto space-y-1.5 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-2 pr-1 custom-scrollbar flex-1 min-h-0">
+              {filteredValues.length > 0 ? (
+                filteredValues.map(({ baseVal, displayVal, available }) => {
+                  const isSelected = selectedValue === baseVal;
+                  return (
+                    <button
+                      key={baseVal}
+                      type="button"
+                      disabled={!available}
+                      onClick={() => {
+                        onSelect(baseVal)
+                        setIsOpen(false)
+                        setSearchQuery('')
+                      }}
+                      className={`w-full flex items-center justify-between p-3 rounded-xl text-left text-xs transition-all ${
+                        isSelected
+                          ? 'border border-brand-primary/40 bg-brand-primary/15 font-bold text-brand-primary shadow-xs'
+                          : available
+                          ? 'border border-line-primary/10 bg-surface-page/50 font-medium text-text-main hover:bg-surface-page hover:border-brand-primary/40 hover:text-brand-primary'
+                          : 'cursor-not-allowed bg-surface-page/20 opacity-35 text-muted-text border border-line-primary/5'
+                      }`}
+                    >
+                      <div className="flex items-center gap-2.5 min-w-0 pr-2">
+                        <span className={`w-2 h-2 rounded-full shrink-0 ${isSelected ? 'bg-brand-primary ring-2 ring-brand-primary/30' : available ? 'bg-line-primary/40' : 'bg-transparent'}`} />
+                        <span className="truncate">{displayVal}</span>
+                      </div>
+
+                      <div className="flex items-center gap-2 shrink-0">
+                        {!available && (
+                          <span className="text-[10px] font-semibold text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded">
+                            หมด
+                          </span>
+                        )}
+                        {isSelected && (
+                          <Check className="w-4 h-4 text-brand-primary shrink-0" />
+                        )}
+                      </div>
+                    </button>
+                  );
+                })
+              ) : (
+                <div className="sm:col-span-2 py-12 text-center text-xs text-muted-text space-y-1">
+                  <p className="font-semibold text-text-main">ไม่พบตัวเลือกที่ตรงกับคำค้นหา</p>
+                  <p className="text-[11px] text-muted-text/60">ลองพิมพ์คำค้นหาอื่น เช่น ชื่อรุ่นรถ ยี่ห้อ หรือขนาด</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+
 export default function AddToCartSection({
   product,
   showBrandMeta = true,
@@ -424,79 +883,108 @@ export default function AddToCartSection({
                 return Boolean(sw.imageUrl || sw.colorCode);
               });
 
+              const displayType = ((option as any).displayType || 'auto') as string;
+              const isLargeList = option.values.length > 8 && !hasAnySwatch;
+              const shouldRenderModal = displayType === 'modal';
+              const shouldRenderDropdown = displayType === 'dropdown' || (displayType === 'auto' && isLargeList);
+
               return (
                 <div key={optNameBase} className="space-y-3">
-                  <p className="text-xs font-bold uppercase tracking-widest text-muted-text">
+                  {shouldRenderModal ? (
-                    {t.selectPrefix(optNameDisplay)}
+                    <OptionModalSelect
-                  </p>
+                      optionName={t.selectPrefix(optNameDisplay)}
+                      values={option.values}
+                      selectedValue={selectedOptions[optIndex] || ''}
+                      onSelect={(val) => handleOptionChange(optIndex, val)}
+                      isOptionAvailable={(val) => isOptionAvailable(optIndex, val)}
+                      lang={lang}
+                      optionsMeta={product.options}
+                    />
+                  ) : shouldRenderDropdown ? (
+                    <SearchableOptionSelect
+                      optionName={t.selectPrefix(optNameDisplay)}
+                      values={option.values}
+                      selectedValue={selectedOptions[optIndex] || ''}
+                      onSelect={(val) => handleOptionChange(optIndex, val)}
+                      isOptionAvailable={(val) => isOptionAvailable(optIndex, val)}
+                      lang={lang}
+                      optionsMeta={product.options}
+                    />
+                  ) : (
+                    <>
+                      <p className="text-xs font-bold uppercase tracking-widest text-muted-text">
+                        {t.selectPrefix(optNameDisplay)}
+                      </p>
 
-                  <div className="flex flex-wrap gap-3">
+                      <div className="flex flex-wrap gap-3">
-                    {option.values.map(val => {
+                        {option.values.map(val => {
-                      const baseVal = getBaseString(val);
+                          const baseVal = getBaseString(val);
-                      const displayVal = resolveLocalized(val, lang);
+                          const displayVal = resolveLocalized(val, lang);
-                      const isSelected = selectedOptions[optIndex] === baseVal;
+                          const isSelected = selectedOptions[optIndex] === baseVal;
-                      const isAvailable = isOptionAvailable(optIndex, baseVal);
+                          const isAvailable = isOptionAvailable(optIndex, baseVal);
-                      const swatch = getOptionSwatch(optIndex, baseVal);
+                          const swatch = getOptionSwatch(optIndex, baseVal);
 
-                      if (hasAnySwatch) {
+                          if (hasAnySwatch) {
-                        return (
+                            return (
-                          <button
+                              <button
-                            key={baseVal}
+                                key={baseVal}
-                            disabled={!isAvailable}
+                                disabled={!isAvailable}
-                            onClick={() => handleOptionChange(optIndex, baseVal)}
+                                onClick={() => handleOptionChange(optIndex, baseVal)}
-                            className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${
+                                className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${
-                              isSelected
+                                  isSelected
-                                ? 'border-brand-primary bg-brand-primary/10 ring-2 ring-brand-primary/30'
+                                    ? 'border-brand-primary bg-brand-primary/10 ring-2 ring-brand-primary/30'
-                                : isAvailable
+                                    : isAvailable
-                                ? 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-muted-text'
+                                    ? 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-muted-text'
-                                : 'border-line-primary/10 bg-surface-card/40 opacity-40 cursor-not-allowed'
+                                    : 'border-line-primary/10 bg-surface-card/40 opacity-40 cursor-not-allowed'
-                            }`}
+                                }`}
-                          >
+                              >
-                            <div className="relative w-14 h-14 md:w-16 md:h-16 rounded-lg overflow-hidden bg-surface-page border border-line-primary/10 flex items-center justify-center">
+                                <div className="relative w-14 h-14 md:w-16 md:h-16 rounded-lg overflow-hidden bg-surface-page border border-line-primary/10 flex items-center justify-center">
-                              {swatch.imageUrl ? (
+                                  {swatch.imageUrl ? (
-                                <Image
+                                    <Image
-                                  src={swatch.imageUrl}
+                                      src={swatch.imageUrl}
-                                  alt={displayVal}
+                                      alt={displayVal}
-                                  fill
+                                      fill
-                                  sizes="64px"
+                                      sizes="64px"
-                                  className="object-cover transition-transform group-hover:scale-105"
+                                      className="object-cover transition-transform group-hover:scale-105"
-                                />
+                                    />
-                              ) : swatch.colorCode ? (
+                                  ) : swatch.colorCode ? (
-                                <div
+                                    <div
-                                  className="w-full h-full rounded-md shadow-inner transition-transform group-hover:scale-105"
+                                      className="w-full h-full rounded-md shadow-inner transition-transform group-hover:scale-105"
-                                  style={{ backgroundColor: swatch.colorCode }}
+                                      style={{ backgroundColor: swatch.colorCode }}
-                                />
+                                    />
-                              ) : (
+                                  ) : (
-                                <span className="text-xs font-semibold text-text-main">{displayVal}</span>
+                                    <span className="text-xs font-semibold text-text-main">{displayVal}</span>
-                              )}
+                                  )}
-                            </div>
+                                </div>
-                            <span className={`text-[11px] font-medium tracking-wide ${
+                                <span className={`text-[11px] font-medium tracking-wide ${
-                              isSelected ? 'text-brand-primary font-bold' : 'text-muted-text group-hover:text-text-main'
+                                  isSelected ? 'text-brand-primary font-bold' : 'text-muted-text group-hover:text-text-main'
-                            }`}>
+                                }`}>
+                                  {displayVal}
+                                </span>
+                              </button>
+                            );
+                          }
+
+                          return (
+                            <button
+                              key={baseVal}
+                              disabled={!isAvailable}
+                              onClick={() => handleOptionChange(optIndex, baseVal)}
+                              className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${
+                                isSelected
+                                  ? 'border-brand-primary bg-brand-primary/15 text-brand-primary ring-1 ring-brand-primary/30 shadow-card'
+                                  : isAvailable
+                                  ? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary/50 hover:text-text-main'
+                                  : 'border-line-primary/10 bg-surface-card/40 text-muted-text/30 cursor-not-allowed'
+                              }`}
+                            >
                               {displayVal}
-                            </span>
+                            </button>
-                          </button>
+                          );
-                        );
+                        })}
-                      }
+                      </div>
-
+                    </>
-                      return (
+                  )}
-                        <button
-                          key={baseVal}
-                          disabled={!isAvailable}
-                          onClick={() => handleOptionChange(optIndex, baseVal)}
-                          className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${
-                            isSelected
-                              ? 'border-brand-primary bg-brand-primary/15 text-brand-primary ring-1 ring-brand-primary/30 shadow-card'
-                              : isAvailable
-                              ? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary/50 hover:text-text-main'
-                              : 'border-line-primary/10 bg-surface-card/40 text-muted-text/30 cursor-not-allowed'
-                          }`}
-                        >
-                          {displayVal}
-                        </button>
-                      );
-                    })}
-                  </div>
                 </div>
               );
             })}

apps/website/src/components/ProductGallery.tsx

@@ -24,7 +24,7 @@ function ResponsiveProductImage({ image, alt, className, fetchPriority, sizes }:
     src: image.url,
     alt,
     width: 1200,
-    height: 1600,
+    height: 1200,
     sizes,
     fetchPriority,
   }).props
@@ -82,9 +82,7 @@ export default function ProductGallery({ productName, categoryName, images, stre
   const frameClass = stretchDesktop
     ? 'relative aspect-square w-full overflow-hidden rounded-3xl bg-surface-card shadow-card md:aspect-auto md:h-full md:min-h-0'
     : 'relative aspect-square w-full overflow-hidden rounded-3xl bg-surface-card shadow-card'
-  const mainImageClass = stretchDesktop
+  const mainImageClass = 'h-full w-full object-contain p-4 md:p-6'
-    ? 'h-full w-full object-cover md:object-contain'
-    : 'h-full w-full object-cover'
 
   if (imageCount === 1) {
     return (
@@ -101,7 +99,7 @@ export default function ProductGallery({ productName, categoryName, images, stre
 
   return (
     <div className={`flex w-full flex-col-reverse gap-4 md:flex-row ${stretchDesktop ? 'md:h-full md:min-h-0 md:items-stretch' : 'items-start'}`}>
-      <div className={`hide-scrollbar flex w-full flex-none snap-x snap-mandatory flex-row gap-2 overflow-x-auto pb-2 md:w-20 md:snap-y md:flex-col md:gap-3 md:overflow-y-auto md:pb-0 md:pr-2 lg:w-24 ${stretchDesktop ? 'md:h-full md:min-h-0' : ''}`}>
+      <div className={`hide-scrollbar flex w-full flex-none snap-x snap-mandatory flex-row gap-2 overflow-x-auto pb-2 md:w-20 md:snap-y md:flex-col md:gap-3 md:overflow-y-auto md:pb-0 md:pr-2 lg:w-24 ${stretchDesktop ? 'md:h-full md:min-h-0' : 'md:max-h-[500px]'}`}>
         {sortedImages.map((image, idx) => (
           <button
             key={image.id || `${image.url}-${idx}`}