Add custom color picker, move website link to store items, and fix sidebar logo aspect.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-19 15:28:14 +03:30
parent 592540cc7e
commit 00f2e0f729
27 changed files with 663 additions and 227 deletions
@@ -3,10 +3,10 @@ import { createPortal } from 'react-dom'
 import { Plus, Search, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { useT } from '../i18n/useT'
-import type { BusinessMessageKey } from '../i18n/messages'
-import { COLOR_PRESETS } from '../data/colorPresets'
+import { COLOR_PRESETS, getColorHex, normalizeColorName } from '../data/colorPresets'
 import type { Variation, VariationType } from '../types/variation'
-import { SIZE_OPTIONS, normalizeColorNames } from '../types/variation'
+import { SIZE_OPTIONS } from '../types/variation'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import { Tooltip } from './Tooltip'
 import styles from './VariationsModal.module.css'

@@ -18,15 +18,42 @@ interface AddVariationModalProps {
  initial?: Variation | null
 }

+interface SelectedColor {
+  label: string
+  hex: string
+}
+
 const ANIMATION_MS = 220
+const DEFAULT_CUSTOM_HEX = '#64748B'

 function seedCustomValues(values: string[]) {
  const trimmed = values.map((value) => value.trim()).filter(Boolean)
  return trimmed.length ? trimmed : ['']
 }

-function colorLabelKey(name: string): BusinessMessageKey {
-  return `categories.variations.color.${name}` as BusinessMessageKey
+function normalizeHex(value: string): string {
+  const trimmed = value.trim()
+  if (/^#[0-9a-fA-F]{6}$/.test(trimmed)) return trimmed.toUpperCase()
+  if (/^[0-9a-fA-F]{6}$/.test(trimmed)) return `#${trimmed.toUpperCase()}`
+  return DEFAULT_CUSTOM_HEX
+}
+
+function colorsFromInitial(initial: Variation): SelectedColor[] {
+  return initial.values
+    .map((raw, index) => {
+      const label = raw.trim()
+      if (!label) return null
+      const canonical = normalizeColorName(label)
+      const provided = initial.colorHexes?.[index]
+      const hex =
+        (provided && /^#[0-9a-fA-F]{6}$/.test(provided.trim())
+          ? provided.trim().toUpperCase()
+          : null) ??
+        getColorHex(canonical) ??
+        DEFAULT_CUSTOM_HEX
+      return { label: canonical, hex }
+    })
+    .filter((item): item is SelectedColor => item !== null)
 }

 export function AddVariationModal({ open, onClose, onSubmit, initial = null }: AddVariationModalProps) {
@@ -38,10 +65,13 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
  const [closing, setClosing] = useState(false)
  const [type, setType] = useState<VariationType>('color')
  const [customName, setCustomName] = useState('')
-  const [selectedColors, setSelectedColors] = useState<string[]>([])
+  const [selectedColors, setSelectedColors] = useState<SelectedColor[]>([])
  const [selectedSizes, setSelectedSizes] = useState<string[]>([])
  const [customValues, setCustomValues] = useState<string[]>([''])
  const [colorQuery, setColorQuery] = useState('')
+  const [customColorName, setCustomColorName] = useState('')
+  const [customColorHex, setCustomColorHex] = useState(DEFAULT_CUSTOM_HEX)
+  const [customColorError, setCustomColorError] = useState('')
  const valueInputRefs = useRef<(HTMLInputElement | null)[]>([])
  const pendingFocusIndex = useRef<number | null>(null)

@@ -56,12 +86,13 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
      setMounted(true)
      setClosing(false)
      setColorQuery('')
+      setCustomColorName('')
+      setCustomColorHex(DEFAULT_CUSTOM_HEX)
+      setCustomColorError('')
      if (initial) {
        setType(initial.type)
        setCustomName(initial.type === 'custom' ? initial.name : '')
-        setSelectedColors(
-          initial.type === 'color' ? normalizeColorNames(initial.values) : [],
-        )
+        setSelectedColors(initial.type === 'color' ? colorsFromInitial(initial) : [])
        setSelectedSizes(initial.type === 'size' ? [...initial.values] : [])
        setCustomValues(
          initial.type === 'custom' ? seedCustomValues(initial.values) : [''],
@@ -92,26 +123,67 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
    return () => document.removeEventListener('keydown', onKey)
  }, [mounted, closing, onClose])

+  const selectedColorLabels = useMemo(
+    () => new Set(selectedColors.map((color) => color.label.toLowerCase())),
+    [selectedColors],
+  )
+
  const filteredColors = useMemo(() => {
    const q = colorQuery.trim().toLowerCase()
    if (!q) return COLOR_PRESETS
    return COLOR_PRESETS.filter((color) => {
      const en = color.name.toLowerCase()
-      const fa = t(colorLabelKey(color.name)).toLowerCase()
+      const fa = localizeVariationOptionLabel(color.name, t).toLowerCase()
      return en.includes(q) || fa.includes(q)
    })
  }, [colorQuery, t])

  if (!mounted) return null

-  function toggleOption(value: string, selected: string[], setSelected: (v: string[]) => void) {
-    setSelected(
-      selected.includes(value)
-        ? selected.filter((item) => item !== value)
-        : [...selected, value],
+  function togglePresetColor(name: string, hex: string) {
+    setSelectedColors((prev) => {
+      const exists = prev.some((item) => item.label === name)
+      if (exists) return prev.filter((item) => item.label !== name)
+      return [...prev, { label: name, hex }]
+    })
+    setCustomColorError('')
+  }
+
+  function removeSelectedColor(label: string) {
+    setSelectedColors((prev) => prev.filter((item) => item.label !== label))
+  }
+
+  function toggleSize(value: string) {
+    setSelectedSizes((prev) =>
+      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value],
    )
  }

+  function addCustomColor() {
+    const label = customColorName.trim()
+    if (!label) {
+      setCustomColorError(t('categories.variations.customColorNameRequired'))
+      return
+    }
+
+    const hex = normalizeHex(customColorHex)
+    const key = label.toLowerCase()
+    const canonical = normalizeColorName(label)
+    const alreadySelected =
+      selectedColorLabels.has(key) ||
+      selectedColorLabels.has(canonical.toLowerCase())
+
+    if (alreadySelected) {
+      setCustomColorError(t('categories.variations.customColorExists'))
+      return
+    }
+
+    setSelectedColors((prev) => [...prev, { label, hex }])
+    setCustomColorName('')
+    setCustomColorHex(DEFAULT_CUSTOM_HEX)
+    setCustomColorError('')
+  }
+
  function updateCustomValue(index: number, value: string) {
    setCustomValues((prev) => prev.map((v, i) => (i === index ? value : v)))
  }
@@ -142,7 +214,12 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
    e.preventDefault()

    if (type === 'color') {
-      onSubmit({ name: t('categories.variations.type.color'), type: 'color', values: selectedColors })
+      onSubmit({
+        name: t('categories.variations.type.color'),
+        type: 'color',
+        values: selectedColors.map((color) => color.label),
+        colorHexes: selectedColors.map((color) => color.hex),
+      })
    } else if (type === 'size') {
      onSubmit({ name: t('categories.variations.type.size'), type: 'size', values: selectedSizes })
    } else {
@@ -224,27 +301,22 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
              </div>
              {selectedColors.length > 0 ? (
                <div className={styles.selectedColors}>
-                  {selectedColors.map((color) => {
-                    const preset = COLOR_PRESETS.find((item) => item.name === color)
-                    return (
-                      <button
-                        key={color}
-                        type="button"
-                        className={`${styles.chip} ${styles.chipSelected}`}
-                        onClick={() =>
-                          toggleOption(color, selectedColors, setSelectedColors)
-                        }
-                      >
-                        <span
-                          className={styles.colorSwatch}
-                          style={{ backgroundColor: preset?.hex ?? '#94a3b8' }}
-                          aria-hidden="true"
-                        />
-                        {t(colorLabelKey(color))}
-                        <X size={12} aria-hidden="true" />
-                      </button>
-                    )
-                  })}
+                  {selectedColors.map((color) => (
+                    <button
+                      key={color.label}
+                      type="button"
+                      className={`${styles.chip} ${styles.chipSelected}`}
+                      onClick={() => removeSelectedColor(color.label)}
+                    >
+                      <span
+                        className={styles.colorSwatch}
+                        style={{ backgroundColor: color.hex }}
+                        aria-hidden="true"
+                      />
+                      {localizeVariationOptionLabel(color.label, t)}
+                      <X size={12} aria-hidden="true" />
+                    </button>
+                  ))}
                </div>
              ) : null}
              <div className={styles.chipGrid}>
@@ -256,22 +328,67 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
                      key={color.name}
                      type="button"
                      className={`${styles.chip} ${
-                        selectedColors.includes(color.name) ? styles.chipSelected : ''
+                        selectedColorLabels.has(color.name.toLowerCase())
+                          ? styles.chipSelected
+                          : ''
                      }`}
-                      onClick={() =>
-                        toggleOption(color.name, selectedColors, setSelectedColors)
-                      }
+                      onClick={() => togglePresetColor(color.name, color.hex)}
                    >
                      <span
                        className={styles.colorSwatch}
                        style={{ backgroundColor: color.hex }}
                        aria-hidden="true"
                      />
-                      {t(colorLabelKey(color.name))}
+                      {localizeVariationOptionLabel(color.name, t)}
                    </button>
                  ))
                )}
              </div>
+
+              <div className={styles.customColorBlock}>
+                <span className={styles.customColorTitle}>
+                  {t('categories.variations.addCustomColor')}
+                </span>
+                <div className={styles.customColorRow}>
+                  <input
+                    type="text"
+                    className={styles.customColorNameInput}
+                    value={customColorName}
+                    onChange={(e) => {
+                      setCustomColorName(e.target.value)
+                      if (customColorError) setCustomColorError('')
+                    }}
+                    placeholder={t('categories.variations.customColorNamePlaceholder')}
+                    aria-label={t('categories.variations.customColorName')}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        addCustomColor()
+                      }
+                    }}
+                  />
+                  <label className={styles.customColorPickerLabel}>
+                    <span className={styles.srOnly}>{t('categories.variations.customColorHex')}</span>
+                    <input
+                      type="color"
+                      className={styles.customColorPicker}
+                      value={customColorHex}
+                      onChange={(e) => setCustomColorHex(normalizeHex(e.target.value))}
+                    />
+                  </label>
+                  <button
+                    type="button"
+                    className={styles.addValueBtn}
+                    onClick={addCustomColor}
+                  >
+                    <Plus size={14} />
+                    {t('categories.variations.addCustomColorBtn')}
+                  </button>
+                </div>
+                {customColorError ? (
+                  <p className={styles.customColorError}>{customColorError}</p>
+                ) : null}
+              </div>
            </div>
          )}

@@ -284,7 +401,7 @@ export function AddVariationModal({ open, onClose, onSubmit, initial = null }: A
                    key={size}
                    type="button"
                    className={`${styles.chip} ${selectedSizes.includes(size) ? styles.chipSelected : ''}`}
-                    onClick={() => toggleOption(size, selectedSizes, setSelectedSizes)}
+                    onClick={() => toggleSize(size)}
                  >
                    {size}
                  </button>
@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
+import { useT } from '../i18n/useT'
 import type { ProductVariant } from '../types/productVariant'
 import { buildVariantLabel } from '../types/productVariant'
 import type { ProductVariantAttribute } from '../services/productVariantService'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import styles from './VariationsModal.module.css'

 interface CreateProductVariantModalProps {
@@ -27,6 +29,7 @@ export function CreateProductVariantModal({
  onClose,
  onSubmit,
 }: CreateProductVariantModalProps) {
+  const t = useT()
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [variationId, setVariationId] = useState('')
@@ -150,7 +153,7 @@ export function CreateProductVariantModal({
                >
                  {options.map((option) => (
                    <option key={option.id} value={option.id}>
-                      {option.label}
+                      {localizeVariationOptionLabel(option.label, t)}
                    </option>
                  ))}
                </select>
@@ -1,11 +1,11 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { PackagePlus, Plus, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { useToast } from '../context/ToastContext'
 import { useT } from '../i18n/useT'
 import { ApiError } from '../lib/api'
-import { listAllProducts } from '../services/productService'
+import { listAllProducts, listProducts } from '../services/productService'
 import {
  getProductVariationValues,
  type ProductVariationSelection,
@@ -22,11 +22,15 @@ import {
  getVariationOptions,
  type StoreItemDraftRow,
 } from '../utils/storeItemRows'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import {
  ConfirmBulkAddStoreItemsModal,
  type BulkAddResult,
 } from './ConfirmBulkAddStoreItemsModal'
-import { ProductSearchSelect } from './ProductSearchSelect'
+import {
+  ProductSearchSelect,
+  type ProductSearchOption,
+} from './ProductSearchSelect'
 import { Tooltip } from './Tooltip'
 import modalStyles from './VariationsModal.module.css'
 import rowStyles from './CreateStoreItemsModal.module.css'
@@ -40,6 +44,7 @@ interface CreateStoreItemsModalProps {
 }

 const ANIMATION_MS = 220
+const PRODUCT_SEARCH_PAGE_SIZE = 20

 export function CreateStoreItemsModal({
  open,
@@ -53,21 +58,29 @@ export function CreateStoreItemsModal({
  const { showToast } = useToast()
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
-  const [products, setProducts] = useState<{ id: string; title: string; nameFa: string }[]>([])
+  const [searchResults, setSearchResults] = useState<ProductSearchOption[]>([])
+  const [selectedProduct, setSelectedProduct] = useState<ProductSearchOption | null>(null)
  const [productId, setProductId] = useState('')
  const [isUsed, setIsUsed] = useState(false)
  const [variations, setVariations] = useState<ProductVariationSelection[]>([])
  const [rows, setRows] = useState<StoreItemDraftRow[]>([])
-  const [isLoadingProducts, setIsLoadingProducts] = useState(false)
+  const [isSearchingProducts, setIsSearchingProducts] = useState(false)
  const [isLoadingVariations, setIsLoadingVariations] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isBulkCreating, setIsBulkCreating] = useState(false)
  const [bulkConfirmOpen, setBulkConfirmOpen] = useState(false)
  const [bulkResult, setBulkResult] = useState<BulkAddResult | null>(null)
  const [error, setError] = useState('')
+  const searchControllerRef = useRef<AbortController | null>(null)

  const busy = isSubmitting || isBulkCreating

+  const productOptions = useMemo(() => {
+    if (!selectedProduct) return searchResults
+    if (searchResults.some((item) => item.id === selectedProduct.id)) return searchResults
+    return [selectedProduct, ...searchResults]
+  }, [searchResults, selectedProduct])
+
  const formVariations = useMemo(
    () => variations.filter((variation) => getVariationOptions(variation).length > 0),
    [variations],
@@ -120,6 +133,8 @@ export function CreateStoreItemsModal({
        setClosing(false)
        setProductId('')
        setIsUsed(false)
+        setSelectedProduct(null)
+        setSearchResults([])
        setVariations([])
        setRows([])
        setError('')
@@ -131,13 +146,54 @@ export function CreateStoreItemsModal({
  }, [open, mounted])

  useEffect(() => {
-    if (!open) return
-
-    const controller = new AbortController()
-    void loadProducts(controller.signal)
-    return () => controller.abort()
+    if (!open) {
+      searchControllerRef.current?.abort()
+      return
+    }
  }, [open])

+  const searchProducts = useCallback(
+    async (query: string) => {
+      searchControllerRef.current?.abort()
+
+      if (!query) {
+        setSearchResults([])
+        setIsSearchingProducts(false)
+        return
+      }
+
+      const controller = new AbortController()
+      searchControllerRef.current = controller
+      setIsSearchingProducts(true)
+
+      try {
+        const data = await listProducts(1, PRODUCT_SEARCH_PAGE_SIZE, controller.signal, {
+          name: query,
+        })
+        if (controller.signal.aborted) return
+        setSearchResults(
+          data.items.map((item) => ({
+            id: item.id,
+            title: item.title,
+            nameFa: item.nameFa,
+          })),
+        )
+      } catch (err) {
+        if (err instanceof DOMException && err.name === 'AbortError') return
+        if (controller.signal.aborted) return
+        setSearchResults([])
+        if (err instanceof ApiError) {
+          setError(err.message)
+        } else {
+          setError(t('storeItems.create.errorProducts'))
+        }
+      } finally {
+        if (!controller.signal.aborted) setIsSearchingProducts(false)
+      }
+    },
+    [t],
+  )
+
  useEffect(() => {
    if (!productId) {
      setVariations([])
@@ -150,31 +206,6 @@ export function CreateStoreItemsModal({
    return () => controller.abort()
  }, [productId])

-  async function loadProducts(signal?: AbortSignal) {
-    setIsLoadingProducts(true)
-    setError('')
-
-    try {
-      const items = await listAllProducts(signal)
-      setProducts(
-        items.map((item) => ({
-          id: item.id,
-          title: item.title,
-          nameFa: item.nameFa,
-        })),
-      )
-    } catch (err) {
-      if (err instanceof DOMException && err.name === 'AbortError') return
-      if (err instanceof ApiError) {
-        setError(err.message)
-      } else {
-        setError(t('storeItems.create.errorProducts'))
-      }
-    } finally {
-      setIsLoadingProducts(false)
-    }
-  }
-
  async function loadVariations(nextProductId: string, signal?: AbortSignal) {
    setIsLoadingVariations(true)
    setError('')
@@ -215,6 +246,15 @@ export function CreateStoreItemsModal({
      return
    }
    setProductId(nextProductId)
+    if (!nextProductId) {
+      setSelectedProduct(null)
+      return
+    }
+    const match =
+      productOptions.find((item) => item.id === nextProductId) ??
+      searchResults.find((item) => item.id === nextProductId) ??
+      null
+    setSelectedProduct(match)
  }

  function updateRow(rowId: string, patch: Partial<StoreItemDraftRow>) {
@@ -300,7 +340,7 @@ export function CreateStoreItemsModal({
  }

  function openBulkConfirm() {
-    if (busy || isLoadingProducts || products.length === 0) return
+    if (busy) return
    setBulkResult(null)
    setBulkConfirmOpen(true)
  }
@@ -318,7 +358,7 @@ export function CreateStoreItemsModal({
  }

  async function handleAddAllProducts() {
-    if (isBulkCreating || isLoadingProducts) return
+    if (isBulkCreating) return

    setIsBulkCreating(true)
    setError('')
@@ -330,14 +370,11 @@ export function CreateStoreItemsModal({
    const skip = new Set(existingProductIds)

    try {
-      const catalog =
-        products.length > 0
-          ? products
-          : (await listAllProducts()).map((item) => ({
-              id: item.id,
-              title: item.title,
-              nameFa: item.nameFa,
-            }))
+      const catalog = (await listAllProducts()).map((item) => ({
+        id: item.id,
+        title: item.title,
+        nameFa: item.nameFa,
+      }))

      for (const product of catalog) {
        if (skip.has(product.id)) {
@@ -415,11 +452,13 @@ export function CreateStoreItemsModal({
          <div className={modalStyles.field}>
            <ProductSearchSelect
              id="store-item-product"
-              options={products}
+              options={productOptions}
              value={productId}
              onChange={handleProductChange}
+              onQueryChange={(query) => void searchProducts(query)}
+              isSearching={isSearchingProducts}
              placeholder={t('storeItems.create.productPlaceholder')}
-              disabled={isLoadingProducts || busy}
+              disabled={busy}
              aria-label={t('storeItems.create.productPlaceholder')}
            />
          </div>
@@ -476,7 +515,7 @@ export function CreateStoreItemsModal({
                          <option value="">—</option>
                          {options.map((option) => (
                            <option key={option.id} value={option.id}>
-                              {option.label}
+                              {localizeVariationOptionLabel(option.label, t)}
                            </option>
                          ))}
                        </select>
@@ -551,7 +590,7 @@ export function CreateStoreItemsModal({
              type="button"
              className={rowStyles.footerBulkBtn}
              onClick={openBulkConfirm}
-              disabled={busy || isLoadingProducts || products.length === 0}
+              disabled={busy}
            >
              <PackagePlus size={16} />
              {t('storeItems.create.addAllProducts')}
@@ -19,6 +19,7 @@ import {
  getVariationOptions,
  type StoreItemDraftRow,
 } from '../utils/storeItemRows'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import { Tooltip } from './Tooltip'
 import modalStyles from './VariationsModal.module.css'
 import rowStyles from './CreateStoreItemsModal.module.css'
@@ -343,7 +344,7 @@ export function EditStoreItemsModal({
                          <option value="">—</option>
                          {options.map((option) => (
                            <option key={option.id} value={option.id}>
-                              {option.label}
+                              {localizeVariationOptionLabel(option.label, t)}
                            </option>
                          ))}
                        </select>
@@ -13,7 +13,7 @@
  font-size: var(--field-font-size);
  font-family: inherit;
  color: var(--text-primary);
-  text-align: left;
+  text-align: start;
  background: var(--surface);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: var(--radius-sm);
@@ -155,6 +155,10 @@
  border-radius: 50px;
  direction: rtl;
  unicode-bidi: plaintext;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
 }

 .bodyLtr {
@@ -1,4 +1,4 @@
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import {
  Pencil,
@@ -7,7 +7,6 @@ import {
  Layers,
  ClipboardList,
  ImageOff,
-  ExternalLink,
  Info,
  MessageSquare,
  Search,
@@ -20,8 +19,6 @@ import { Tooltip } from './Tooltip'
 import { useTenantBranding } from '../context/TenantBrandingContext'
 import { hasBusinessModule } from '../utils/businessModules'
 import { formatProductCategoryChip } from '../services/productService'
-import { buildWebsiteContentUrl } from '../utils/websiteLinks'
-import { OpenOnWebsiteControl } from './OpenOnWebsiteControl'
 import { ProductCardOverflowMenu } from './ProductCardOverflowMenu'
 import styles from './ProductCard.module.css'

@@ -46,7 +43,6 @@ type CardAction = {
  onClick: () => void
  danger?: boolean
  badge?: number
-  render?: () => ReactNode
 }

 export function ProductCard({
@@ -75,7 +71,6 @@ export function ProductCard({
      : ''
    : product.nameFa
  const categoryLabel = formatProductCategoryChip(product, isFa)
-  const websiteUrl = buildWebsiteContentUrl('product', product)
  const imageSrc = product.image?.trim() || ''
  const [imageFailed, setImageFailed] = useState(false)
  const showImage = Boolean(imageSrc) && !imageFailed
@@ -91,15 +86,6 @@ export function ProductCard({
      icon: Pencil,
      onClick: () => onEdit(product.id),
    },
-    {
-      key: 'website',
-      label: t('common.viewOnWebsite'),
-      icon: ExternalLink,
-      onClick: () => {
-        if (websiteUrl) window.open(websiteUrl, '_blank', 'noopener,noreferrer')
-      },
-      render: () => <OpenOnWebsiteControl href={websiteUrl} />,
-    },
    ...(showTranslationControls
      ? [
          {
@@ -192,15 +178,15 @@ export function ProductCard({
            </>
          )}
          {categoryLabel ? (
-            <span className={styles.categoryChip}>{categoryLabel}</span>
+            <span className={styles.categoryChip} title={categoryLabel}>
+              {categoryLabel}
+            </span>
          ) : null}
        </div>
      </Link>

      <div className={styles.controls}>
        {primaryActions.map((action) => {
-          if (action.render) return <span key={action.key}>{action.render()}</span>
-
          const Icon = action.icon
          return (
            <Tooltip key={action.key} label={action.label}>
@@ -1,9 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { ChevronDown, Search, X } from 'lucide-react'
+import { ChevronDown, Loader2, Search, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { useT } from '../i18n/useT'
 import styles from './SearchableSelect.module.css'

+export const PRODUCT_SEARCH_DEBOUNCE_MS = 350
+
 export interface ProductSearchOption {
  id: string
  title: string
@@ -18,6 +20,13 @@ interface ProductSearchSelectProps {
  disabled?: boolean
  id?: string
  minSearchLength?: number
+  isSearching?: boolean
+  /**
+   * When set, typing is debounced and the parent fetches results.
+   * Local filtering is skipped.
+   */
+  onQueryChange?: (query: string) => void
+  debounceMs?: number
  'aria-label'?: string
 }

@@ -36,6 +45,9 @@ export function ProductSearchSelect({
  disabled = false,
  id,
  minSearchLength = 3,
+  isSearching = false,
+  onQueryChange,
+  debounceMs = PRODUCT_SEARCH_DEBOUNCE_MS,
  'aria-label': ariaLabel,
 }: ProductSearchSelectProps) {
  const t = useT()
@@ -45,20 +57,35 @@ export function ProductSearchSelect({
  const [query, setQuery] = useState('')
  const containerRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)
+  const onQueryChangeRef = useRef(onQueryChange)
+  onQueryChangeRef.current = onQueryChange

  const selected = options.find((option) => option.id === value)
  const selectedLabel = selected ? formatProductLabel(selected, preferFa) : ''
+  const trimmedQuery = query.trim()
+  const canSearch = trimmedQuery.length >= minSearchLength
+
+  useEffect(() => {
+    const cb = onQueryChangeRef.current
+    if (!cb) return
+    if (!canSearch) {
+      cb('')
+      return
+    }
+    const timer = window.setTimeout(() => cb(trimmedQuery), debounceMs)
+    return () => window.clearTimeout(timer)
+  }, [canSearch, trimmedQuery, debounceMs])

  const filtered = useMemo(() => {
-    const trimmed = query.trim()
-    if (trimmed.length < minSearchLength) return []
-    const q = trimmed.toLowerCase()
+    if (!canSearch) return []
+    if (onQueryChange) return options
+    const q = trimmedQuery.toLowerCase()
    return options.filter(
      (option) =>
        option.title.toLowerCase().includes(q) ||
-        option.nameFa.includes(trimmed),
+        option.nameFa.includes(trimmedQuery),
    )
-  }, [options, query, minSearchLength])
+  }, [canSearch, onQueryChange, options, trimmedQuery])

  useEffect(() => {
    if (!open) return
@@ -76,13 +103,14 @@ export function ProductSearchSelect({
    onChange(id)
    setOpen(false)
    setQuery('')
+    onQueryChangeRef.current?.('')
  }

  function handleFocus() {
    if (!disabled) setOpen(true)
  }

-  const showDropdown = open && query.trim().length >= minSearchLength
+  const showDropdown = open && (canSearch || trimmedQuery.length > 0)

  return (
    <div className={styles.wrapper} ref={containerRef} dir={preferFa ? 'rtl' : 'ltr'}>
@@ -115,17 +143,19 @@ export function ProductSearchSelect({
            <X size={14} />
          </button>
        )}
-        <ChevronDown size={16} className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`} />
+        {isSearching && open ? (
+          <Loader2 size={16} className={`${styles.chevron} ${styles.spin}`} />
+        ) : (
+          <ChevronDown size={16} className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`} />
+        )}
      </div>

-      {showDropdown && (
+      {showDropdown && canSearch && (
        <ul className={`${styles.dropdown} ${styles.dropdownInFlow}`} role="listbox">
-          {filtered.length === 0 ? (
-            <li className={styles.noResults}>
-              {options.length === 0
-                ? t('storeItems.search.noProducts')
-                : t('storeItems.search.noMatch')}
-            </li>
+          {isSearching && filtered.length === 0 ? (
+            <li className={styles.noResults}>{t('storeItems.search.searching')}</li>
+          ) : filtered.length === 0 ? (
+            <li className={styles.noResults}>{t('storeItems.search.noMatch')}</li>
          ) : (
            filtered.map((option) => (
              <li key={option.id}>
@@ -172,7 +202,7 @@ export function ProductSearchSelect({
        </ul>
      )}

-      {open && query.trim().length > 0 && query.trim().length < minSearchLength && (
+      {open && trimmedQuery.length > 0 && trimmedQuery.length < minSearchLength && (
        <ul className={`${styles.dropdown} ${styles.dropdownInFlow}`}>
          <li className={styles.noResults}>
            {t('storeItems.search.minChars', { count: minSearchLength })}
@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import { ApiError } from '../lib/api'
 import {
  countSelectedOptions,
@@ -8,6 +10,7 @@ import {
  saveProductVariationValues,
  type ProductVariationSelection,
 } from '../services/productVariationService'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import { MultiSelectDropdown } from './MultiSelectDropdown'
 import styles from './VariationsModal.module.css'

@@ -30,6 +33,9 @@ export function ProductVariantsModal({
  onClose,
  onVariantsChange,
 }: ProductVariantsModalProps) {
+  const t = useT()
+  const { locale } = useLocale()
+  const isFa = locale === 'fa'
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [variations, setVariations] = useState<ProductVariationSelection[]>([])
@@ -72,7 +78,7 @@ export function ProductVariantsModal({
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
-        setError('Unable to load product variations.')
+        setError(t('products.variants.loadError'))
      }
    } finally {
      setIsLoading(false)
@@ -90,6 +96,12 @@ export function ProductVariantsModal({

  if (!mounted) return null

+  function variationLabel(variation: ProductVariationSelection) {
+    if (variation.type === 'color') return t('categories.variations.type.color')
+    if (variation.type === 'size') return t('categories.variations.type.size')
+    return variation.name
+  }
+
  function handleSelectionChange(variationId: string, optionIds: string[]) {
    setVariations((prev) =>
      prev.map((variation) =>
@@ -113,7 +125,7 @@ export function ProductVariantsModal({
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
-        setError('Unable to save product variations.')
+        setError(t('products.variants.saveError'))
      }
    } finally {
      setIsSaving(false)
@@ -131,54 +143,63 @@ export function ProductVariantsModal({
        role="dialog"
        aria-modal="true"
        aria-labelledby="product-variants-title"
+        lang={isFa ? 'fa' : 'en'}
+        dir={isFa ? 'rtl' : 'ltr'}
      >
        <div className={styles.header}>
          <div>
            <h3 id="product-variants-title" className={styles.title}>
-              Product Variations
+              {t('products.variants.title')}
            </h3>
            {productName && <p className={styles.subtitle}>{productName}</p>}
          </div>
-          <button className={styles.closeBtn} onClick={onClose} aria-label="Close">
+          <button
+            className={styles.closeBtn}
+            onClick={onClose}
+            aria-label={t('common.close')}
+          >
            <X size={20} />
          </button>
        </div>

        <div className={styles.body}>
          {!categoryId && (
-            <p className={styles.errorText}>
-              Assign a category to this product before managing variations.
-            </p>
+            <p className={styles.errorText}>{t('products.variants.needCategory')}</p>
          )}

          {error && <p className={styles.errorText}>{error}</p>}

          {isLoading ? (
-            <p className={styles.emptyText}>Loading variations...</p>
+            <p className={styles.emptyText}>{t('products.variants.loading')}</p>
          ) : variations.length === 0 ? (
            <p className={styles.emptyText}>
              {categoryId
-                ? 'This category has no variations. Add variations on the category first.'
-                : 'No variations available.'}
+                ? t('products.variants.emptyCategory')
+                : t('products.variants.empty')}
            </p>
          ) : (
            <div className={styles.variationFields}>
-              {variations.map((variation) => (
-                <div key={variation.id} className={styles.field}>
-                  <label htmlFor={`variation-${variation.id}`}>{variation.name}</label>
-                  <MultiSelectDropdown
-                    id={`variation-${variation.id}`}
-                    options={variation.options.map((option) => ({
-                      value: option.id,
-                      label: option.label,
-                    }))}
-                    value={variation.selectedOptionIds}
-                    onChange={(optionIds) => handleSelectionChange(variation.id, optionIds)}
-                    placeholder={`Select ${variation.name.toLowerCase()} values`}
-                    disabled={isSaving}
-                  />
-                </div>
-              ))}
+              {variations.map((variation) => {
+                const name = variationLabel(variation)
+                return (
+                  <div key={variation.id} className={styles.field}>
+                    <label htmlFor={`variation-${variation.id}`}>{name}</label>
+                    <MultiSelectDropdown
+                      id={`variation-${variation.id}`}
+                      options={variation.options.map((option) => ({
+                        value: option.id,
+                        label: localizeVariationOptionLabel(option.label, t),
+                      }))}
+                      value={variation.selectedOptionIds}
+                      onChange={(optionIds) =>
+                        handleSelectionChange(variation.id, optionIds)
+                      }
+                      placeholder={t('products.variants.selectValues', { name })}
+                      disabled={isSaving}
+                    />
+                  </div>
+                )
+              })}
            </div>
          )}

@@ -189,7 +210,7 @@ export function ProductVariantsModal({
              onClick={onClose}
              disabled={isSaving}
            >
-              Cancel
+              {t('common.cancel')}
            </button>
            <button
              type="button"
@@ -197,13 +218,12 @@ export function ProductVariantsModal({
              onClick={() => void handleSave()}
              disabled={!categoryId || isLoading || isSaving || variations.length === 0}
            >
-              {isSaving ? 'Saving…' : 'Save variations'}
+              {isSaving ? t('products.variants.saving') : t('products.variants.save')}
            </button>
          </div>
        </div>
      </div>
-    </div>
-  ,
-  document.body,
+    </div>,
+    document.body,
  )
 }
@@ -101,6 +101,16 @@
  z-index: auto;
 }

+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 0.8s linear infinite;
+}
+
@keyframes dropdownIn {
  from {
    opacity: 0;
@@ -25,22 +25,24 @@

 .brandLogo {
  display: block;
-  width: 40px;
-  height: 40px;
+  /* Same height as brandName + domain stack; width follows image aspect ratio */
+  height: calc(13px * 1.2 + 2px + 11px * 1.2);
+  width: auto;
+  max-width: 7.5rem;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
 }

 .brandLogoUploaded {
-  border-radius: 8px;
-  object-fit: cover;
-  background: var(--card-media-bg);
+  border-radius: 0;
+  object-fit: contain;
+  background: transparent;
 }

 .brandEditBtn {
-  width: 40px;
-  height: 40px;
+  width: calc(13px * 1.2 + 2px + 11px * 1.2);
+  height: calc(13px * 1.2 + 2px + 11px * 1.2);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -69,6 +71,7 @@
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
+  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -200,7 +200,8 @@
  justify-content: space-around;
 }

-.controlsLeft button {
+.controlsLeft button,
+.controlsLeft a {
  width: 32px;
  height: 32px;
  display: flex;
@@ -208,10 +209,12 @@
  justify-content: center;
  border-radius: 8px;
  color: var(--text-secondary);
+  text-decoration: none;
  transition: background 0.2s, color 0.2s;
 }

-.controlsLeft button:hover {
+.controlsLeft button:hover,
+.controlsLeft a:hover {
  background: rgba(var(--primary-rgb) / 0.1);
  color: var(--primary);
 }
@@ -6,6 +6,8 @@ import {
  formatVariantCount,
  type StoreProductListing,
 } from '../utils/storeProductGroups'
+import { buildWebsiteContentUrl } from '../utils/websiteLinks'
+import { OpenOnWebsiteControl } from './OpenOnWebsiteControl'
 import { StoreItemPrice } from './StoreItemPrice'
 import { Tooltip } from './Tooltip'
 import styles from './StoreItemCard.module.css'
@@ -83,6 +85,14 @@ export function StoreItemCard({
  const imageSrc = listing.productImage?.trim() || ''
  const [imageFailed, setImageFailed] = useState(false)
  const showImage = Boolean(imageSrc) && !imageFailed
+  const websiteUrl =
+    listing.variantCount > 0
+      ? buildWebsiteContentUrl('product', {
+          id: listing.productId,
+          nameFa: listing.productNameFa,
+          nameEn: listing.productTitle,
+        })
+      : ''

  useEffect(() => {
    setImageFailed(false)
@@ -167,6 +177,7 @@ export function StoreItemCard({
                  <Pencil size={16} />
                </button>
              </Tooltip>
+              <OpenOnWebsiteControl href={websiteUrl} />
              <Tooltip label={t('storeItems.card.discount')}>
                <button
                  type="button"
@@ -1,28 +1,30 @@
-.priceChip {
-  display: inline-block;
-  padding: 3px 10px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--primary);
-  background: rgba(var(--primary-rgb) / 0.12);
-  border-radius: 50px;
+.price,
+.contactPrice,
+.discountWrap {
+  display: block;
+  width: 100%;
+  text-align: left;
+  direction: ltr;
+}
+
+.price {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-primary);
 }

 .contactPrice {
-  display: inline-block;
-  padding: 3px 10px;
-  font-size: 11px;
+  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  color: var(--text-muted);
-  background: rgba(148, 163, 184, 0.14);
-  border-radius: 50px;
 }

 .discountWrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
+  align-items: flex-start;
 }

 .originalPrice {
@@ -36,12 +38,13 @@
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
+  justify-content: flex-start;
 }

 .salePrice {
  font-size: 12px;
  font-weight: 700;
-  color: #dc2626;
+  color: var(--text-primary);
 }

 .percent {
@@ -31,5 +31,5 @@ export function StoreItemPrice({ price, discountedPrice = null }: StoreItemPrice
    )
  }

-  return <span className={styles.priceChip}>{formatIrtPrice(price)}</span>
+  return <span className={styles.price}>{formatIrtPrice(price)}</span>
 }
@@ -18,6 +18,8 @@ export function buildTechnicalFormAiPrompt(categoryName: string) {

 همیشه در انتهای فرم یک فیلد «سایر ویژگی‌ها» از نوع multi_value در نظر گرفته می‌شود؛ خودت آن را نساز.

+اگر برای این دسته مناسب است، فیلدهای «ابعاد» و «وزن» را هم به‌صورت text اضافه کن (با واحد رایج در ایران در برچسب، مثلاً سانتی‌متر یا کیلوگرم). اگر برای دسته بی‌معناست، اضافه نکن.
+
 روی مشخصات و ویژگی‌هایی تمرکز کن که خریداران معمولاً هنگام مقایسه این نوع محصول بررسی می‌کنند.
 برچسب‌ها و گزینه‌ها را به فارسی بنویس.
 در صورت نیاز، لینک یک صفحه محصول نمونه را در ادامه اضافه کن (سیستم صفحه را باز می‌کند و فرم را بر اساس مشخصات واقعی آن می‌سازد).`
@@ -18,7 +18,7 @@

 .fieldMainRow {
  display: grid;
-  grid-template-columns: 6fr 3fr 2fr 32px;
+  grid-template-columns: 6fr 3fr 2fr auto;
  gap: 8px;
  align-items: center;
 }
@@ -61,6 +61,18 @@
  align-items: center;
 }

+.rowActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+}
+
+.rowActions button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
 .requiredCell {
  display: flex;
  align-items: center;
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Plus, Sparkles, Trash2, X } from 'lucide-react'
+import { ChevronDown, ChevronUp, Plus, Sparkles, Trash2, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import type { TechnicalFieldType, TechnicalFormFieldDraft } from '../types/technicalForm'
 import { useT } from '../i18n/useT'
@@ -112,6 +112,17 @@ export function TechnicalFormModal({
    onChange(fields.filter((field) => field.id !== fieldId))
  }

+  function moveField(fieldId: string, delta: -1 | 1) {
+    const index = fields.findIndex((field) => field.id === fieldId)
+    if (index < 0) return
+    const nextIndex = index + delta
+    if (nextIndex < 0 || nextIndex >= fields.length) return
+    const next = [...fields]
+    const [item] = next.splice(index, 1)
+    next.splice(nextIndex, 0, item)
+    onChange(next)
+  }
+
  function addField() {
    onChange([...fields, createEmptyField()])
  }
@@ -216,7 +227,7 @@ export function TechnicalFormModal({
          ) : (
            <>
              <div className={fieldStyles.fieldList}>
-                {fields.map((field) => (
+                {fields.map((field, index) => (
                  <div key={field.id} className={fieldStyles.fieldCard}>
                    <div className={fieldStyles.fieldMainRow}>
                      <input
@@ -265,7 +276,29 @@ export function TechnicalFormModal({
                        />
                        <span>{t('categories.technical.required')}</span>
                      </label>
-                      <div className={fieldStyles.removeCell}>
+                      <div className={fieldStyles.rowActions}>
+                        <Tooltip label={t('categories.technical.moveUp')}>
+                          <button
+                            type="button"
+                            className={styles.removeRowBtn}
+                            onClick={() => moveField(field.id, -1)}
+                            disabled={index === 0}
+                            aria-label={t('categories.technical.moveUp')}
+                          >
+                            <ChevronUp size={15} />
+                          </button>
+                        </Tooltip>
+                        <Tooltip label={t('categories.technical.moveDown')}>
+                          <button
+                            type="button"
+                            className={styles.removeRowBtn}
+                            onClick={() => moveField(field.id, 1)}
+                            disabled={index === fields.length - 1}
+                            aria-label={t('categories.technical.moveDown')}
+                          >
+                            <ChevronDown size={15} />
+                          </button>
+                        </Tooltip>
                        <Tooltip label={t('categories.technical.removeField')}>
                          <button
                            type="button"
@@ -280,34 +280,43 @@
 }

 .colorSearchWrap {
-  position: relative;
  display: flex;
  align-items: center;
-  margin-bottom: 10px;
-}
-
-.colorSearchIcon {
-  position: absolute;
-  inset-inline-start: 12px;
-  color: var(--text-muted);
-  pointer-events: none;
-}
-
-.colorSearchInput {
-  width: 100%;
+  gap: 8px;
  min-height: var(--field-height);
-  padding: var(--field-padding-y) 36px;
-  font-size: var(--field-font-size);
-  font-family: var(--font-ui);
-  color: var(--text-primary);
+  margin-bottom: 10px;
+  padding: 0 var(--field-padding-x);
  background-color: var(--surface);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: var(--radius-sm);
-  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
 }

+.colorSearchWrap:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
+}
+
+.colorSearchIcon {
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.colorSearchInput {
+  flex: 1;
+  min-width: 0;
+  min-height: calc(var(--field-height) - 2px);
+  padding: var(--field-padding-y) 0;
+  font-size: var(--field-font-size);
+  font-family: var(--font-ui);
+  color: var(--text-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
 .colorSearchInput::placeholder {
  font-family: var(--font-ui);
  opacity: 1;
@@ -315,13 +324,11 @@
 }

 .colorSearchInput:focus {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
+  outline: none;
 }

 .colorSearchClear {
-  position: absolute;
-  inset-inline-end: 8px;
+  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
@@ -358,6 +365,89 @@
  color: var(--text-muted);
 }

+.customColorBlock {
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px dashed rgba(148, 163, 184, 0.35);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.customColorTitle {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.customColorRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.customColorNameInput {
+  flex: 1;
+  min-width: 140px;
+  min-height: var(--field-height);
+  padding: var(--field-padding-y) var(--field-padding-x);
+  font-size: var(--field-font-size);
+  font-family: var(--font-ui);
+  color: var(--text-primary);
+  background: var(--surface);
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: var(--radius-sm);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.customColorNameInput:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
+}
+
+.customColorPickerLabel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  overflow: hidden;
+  cursor: pointer;
+  background: var(--surface);
+}
+
+.customColorPicker {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.customColorError {
+  margin: 0;
+  font-size: 12px;
+  color: #dc2626;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .customValues {
  display: flex;
  flex-direction: column;
@@ -500,6 +590,12 @@
  color: #ef4444;
 }

+.removeRowBtn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .preview {
  font-size: 13px;
  color: var(--text-primary);
@@ -3,10 +3,9 @@ import { createPortal } from 'react-dom'
 import { Pencil, Plus, X } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { useT } from '../i18n/useT'
-import type { BusinessMessageKey } from '../i18n/messages'
 import type { Variation, VariationType } from '../types/variation'
-import { COLOR_OPTIONS, normalizeColorName } from '../types/variation'
 import { createId } from '../utils/id'
+import { localizeVariationOptionLabel } from '../utils/localizeVariationOption'
 import { textLocaleAttrs } from '../utils/textLocale'
 import { AddVariationModal } from './AddVariationModal'
 import { Tooltip } from './Tooltip'
@@ -122,11 +121,7 @@ export function VariationsModal({
  }

  function localizeValue(value: string) {
-    const normalized = normalizeColorName(value)
-    if ((COLOR_OPTIONS as string[]).includes(normalized)) {
-      return t(`categories.variations.color.${normalized}` as BusinessMessageKey)
-    }
-    return value
+    return localizeVariationOptionLabel(value, t)
  }

  return createPortal(
@@ -662,6 +662,18 @@ const en = {
    'Edit the prefilled prompt if you want. Paste a product page URL and the system will open it and fill from that page.',
  'products.technical.ai.error': 'Unable to fill technical data with AI.',
  'products.technical.ai.filled': 'Technical fields filled with AI. Review and save.',
+  'products.variants.title': 'Product Variations',
+  'products.variants.loading': 'Loading variations…',
+  'products.variants.needCategory':
+    'Assign a category to this product before managing variations.',
+  'products.variants.emptyCategory':
+    'This category has no variations. Add variations on the category first.',
+  'products.variants.empty': 'No variations available.',
+  'products.variants.selectValues': 'Select {name} values',
+  'products.variants.loadError': 'Unable to load product variations.',
+  'products.variants.saveError': 'Unable to save product variations.',
+  'products.variants.save': 'Save variations',
+  'products.variants.saving': 'Saving…',
  'products.form.images': 'Product Images',
  'products.form.imagesAdd': 'Add images',
  'products.form.imagesHint': 'Upload multiple product images. Click + to add more.',
@@ -747,6 +759,13 @@ const en = {
  'categories.variations.selectColors': 'Select colors',
  'categories.variations.searchColors': 'Search colors…',
  'categories.variations.noColorMatch': 'No colors match your search.',
+  'categories.variations.addCustomColor': 'Add custom color',
+  'categories.variations.customColorName': 'Color name',
+  'categories.variations.customColorNamePlaceholder': 'e.g. Metallic White',
+  'categories.variations.customColorHex': 'Color',
+  'categories.variations.addCustomColorBtn': 'Add color',
+  'categories.variations.customColorNameRequired': 'Enter a color name.',
+  'categories.variations.customColorExists': 'This color is already selected.',
  'categories.variations.selectSizes': 'Select sizes',
  'categories.variations.name': 'Variation name',
  'categories.variations.namePlaceholder': 'e.g. Guarantee, Material',
@@ -819,6 +838,8 @@ const en = {
  'categories.technical.inputType': 'Input type',
  'categories.technical.required': 'Required',
  'categories.technical.removeField': 'Remove field',
+  'categories.technical.moveUp': 'Move up',
+  'categories.technical.moveDown': 'Move down',
  'categories.technical.options': 'Options',
  'categories.technical.optionN': 'Option {n}',
  'categories.technical.removeOption': 'Remove option',
@@ -981,6 +1002,7 @@ const en = {
  'storeItems.search.noProducts': 'No products available.',
  'storeItems.search.noMatch': 'No matching products.',
  'storeItems.search.minChars': 'Type at least {count} characters to search',
+  'storeItems.search.searching': 'Searching…',
  'storeItems.discount.title': 'Set Discounts',
  'storeItems.discount.variant': 'Variant',
  'storeItems.discount.regularPrice': 'Regular price',
@@ -3257,6 +3279,18 @@ const fa: Record<MessageKey, string> = {
    'در صورت نیاز پرامپت را ویرایش کنید. لینک صفحه محصول را اضافه کنید تا سیستم صفحه را باز کند و فیلدها را از آن پر کند.',
  'products.technical.ai.error': 'پر کردن اطلاعات فنی با هوش مصنوعی ممکن نشد.',
  'products.technical.ai.filled': 'فیلدهای فنی با هوش مصنوعی پر شد. بررسی کنید و ذخیره کنید.',
+  'products.variants.title': 'تنوع‌های محصول',
+  'products.variants.loading': 'در حال بارگذاری تنوع‌ها…',
+  'products.variants.needCategory':
+    'قبل از مدیریت تنوع‌ها، یک دسته‌بندی به این محصول اختصاص دهید.',
+  'products.variants.emptyCategory':
+    'این دسته‌بندی تنوعی ندارد. ابتدا روی دسته‌بندی تنوع اضافه کنید.',
+  'products.variants.empty': 'تنوعی موجود نیست.',
+  'products.variants.selectValues': 'انتخاب مقادیر {name}',
+  'products.variants.loadError': 'بارگذاری تنوع‌های محصول ممکن نشد.',
+  'products.variants.saveError': 'ذخیره تنوع‌های محصول ممکن نشد.',
+  'products.variants.save': 'ذخیره تنوع‌ها',
+  'products.variants.saving': 'در حال ذخیره…',
  'products.form.images': 'تصاویر محصول',
  'products.form.imagesAdd': 'افزودن تصاویر',
  'products.form.imagesHint': 'چند تصویر محصول آپلود کنید. برای افزودن بیشتر روی + کلیک کنید.',
@@ -3342,6 +3376,13 @@ const fa: Record<MessageKey, string> = {
  'categories.variations.selectColors': 'انتخاب رنگ‌ها',
  'categories.variations.searchColors': 'جستجوی رنگ…',
  'categories.variations.noColorMatch': 'رنگی با این جستجو پیدا نشد.',
+  'categories.variations.addCustomColor': 'افزودن رنگ دلخواه',
+  'categories.variations.customColorName': 'نام رنگ',
+  'categories.variations.customColorNamePlaceholder': 'مثلاً سفید متالیک',
+  'categories.variations.customColorHex': 'رنگ',
+  'categories.variations.addCustomColorBtn': 'افزودن رنگ',
+  'categories.variations.customColorNameRequired': 'نام رنگ را وارد کنید.',
+  'categories.variations.customColorExists': 'این رنگ از قبل انتخاب شده است.',
  'categories.variations.selectSizes': 'انتخاب سایزها',
  'categories.variations.name': 'نام تنوع',
  'categories.variations.namePlaceholder': 'مثلاً گارانتی، جنس',
@@ -3414,6 +3455,8 @@ const fa: Record<MessageKey, string> = {
  'categories.technical.inputType': 'نوع ورودی',
  'categories.technical.required': 'الزامی',
  'categories.technical.removeField': 'حذف فیلد',
+  'categories.technical.moveUp': 'جابه‌جایی به بالا',
+  'categories.technical.moveDown': 'جابه‌جایی به پایین',
  'categories.technical.options': 'گزینه‌ها',
  'categories.technical.optionN': 'گزینه {n}',
  'categories.technical.removeOption': 'حذف گزینه',
@@ -3576,6 +3619,7 @@ const fa: Record<MessageKey, string> = {
  'storeItems.search.noProducts': 'محصولی موجود نیست.',
  'storeItems.search.noMatch': 'محصولی یافت نشد.',
  'storeItems.search.minChars': 'حداقل {count} کاراکتر برای جستجو وارد کنید',
+  'storeItems.search.searching': 'در حال جستجو…',
  'storeItems.discount.title': 'تنظیم تخفیف',
  'storeItems.discount.variant': 'تنوع',
  'storeItems.discount.regularPrice': 'قیمت عادی',
@@ -370,7 +370,7 @@ function StoreItemsPageContent() {
        <div className={filterStyles.filtersTitle}>{t('storeItems.filters')}</div>
        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
          <div className={filterStyles.filtersInputs}>
-            <div className={`${filterStyles.field} ${filterStyles.fieldCol3}`}>
+            <div className={`${filterStyles.field} ${filterStyles.fieldCol4}`}>
              <input
                id="filter-store-name"
                value={draftName}
@@ -380,7 +380,7 @@ function StoreItemsPageContent() {
                disabled={isLoading}
              />
            </div>
-            <div className={`${filterStyles.field} ${filterStyles.fieldCol2} ${filterStyles.fieldHalfWidth}`}>
+            <div className={`${filterStyles.field} ${filterStyles.fieldCol2}`}>
              <input
                id="filter-store-min-price"
                inputMode="numeric"
@@ -391,7 +391,7 @@ function StoreItemsPageContent() {
                disabled={isLoading}
              />
            </div>
-            <div className={`${filterStyles.field} ${filterStyles.fieldCol2} ${filterStyles.fieldHalfWidth}`}>
+            <div className={`${filterStyles.field} ${filterStyles.fieldCol2}`}>
              <input
                id="filter-store-max-price"
                inputMode="numeric"
@@ -402,7 +402,7 @@ function StoreItemsPageContent() {
                disabled={isLoading}
              />
            </div>
-            <div className={`${filterStyles.switchField} ${filterStyles.fieldCol3}`}>
+            <div className={`${filterStyles.switchField} ${filterStyles.fieldCol2}`}>
              <div className={filterStyles.switchInline}>
                <ToggleSwitch
                  checked={draftOnlyDiscounted}
@@ -418,7 +418,7 @@ function StoreItemsPageContent() {
                </span>
              </div>
            </div>
-            <div className={`${filterStyles.switchField} ${filterStyles.fieldCol3}`}>
+            <div className={`${filterStyles.switchField} ${filterStyles.fieldCol2}`}>
              <div className={filterStyles.switchInline}>
                <ToggleSwitch
                  checked={draftOnlyUsed}
@@ -36,6 +36,10 @@ export function mapApiVariationToUi(item: CategoryVariationApi): Variation {
    name: item.name,
    type: item.type,
    values: item.values,
+    colorHexes:
+      item.type === 'color'
+        ? item.options.map((option) => option.colorHex)
+        : undefined,
  }
 }

@@ -77,6 +81,9 @@ export async function saveCategoryVariations(
          type: variation.type,
          name: variation.name,
          values: variation.values,
+          ...(variation.type === 'color' && variation.colorHexes
+            ? { colorHexes: variation.colorHexes }
+            : {}),
        })),
      },
    },
@@ -14,6 +14,8 @@ export interface Variation {
  name: string
  type: VariationType
  values: string[]
+  /** Parallel to `values` for color type; null means resolve from presets. */
+  colorHexes?: (string | null)[]
 }

 export const DEFAULT_VARIATIONS: Variation[] = [
@@ -0,0 +1,13 @@
+import type { BusinessMessageKey } from '../i18n/messages'
+import { COLOR_OPTIONS, normalizeColorName } from '../types/variation'
+
+type TranslateFn = (key: BusinessMessageKey) => string
+
+/** Localize preset color option labels (e.g. Black → مشکی when locale is FA). */
+export function localizeVariationOptionLabel(label: string, t: TranslateFn): string {
+  const normalized = normalizeColorName(label)
+  if ((COLOR_OPTIONS as string[]).includes(normalized)) {
+    return t(`categories.variations.color.${normalized}` as BusinessMessageKey)
+  }
+  return label
+}
@@ -38,8 +38,10 @@

 .brandLogo {
  display: block;
-  width: 40px;
-  height: 40px;
+  /* Same height as brandName + domain stack; width follows image aspect ratio */
+  height: calc(13px * 1.2 + 2px + 11px * 1.2);
+  width: auto;
+  max-width: 7.5rem;
  object-fit: contain;
  flex-shrink: 0;
  background: none;
@@ -51,8 +53,8 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: calc(13px * 1.2 + 2px + 11px * 1.2);
+  height: calc(13px * 1.2 + 2px + 11px * 1.2);
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.18);
@@ -268,7 +268,7 @@
  margin: 0;
  padding-inline-start: 16px;
  font-size: 12px;
-  line-height: 1.45;
+  line-height: 1.85;
  color: var(--text-secondary, #475569);
  text-align: justify;
 }