meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Flatten transparent product images to white and allow cropper unzoom.

Browse Source 
PNG/WebP uploads no longer bake to black on JPEG; product croppers can zoom out with white padding, and SEO tools move into the product overflow menu.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-09-19 08:39:32 +03:30
co-authored by Cursor
parent b743c09e4d
commit 06e2442aaf
17 changed files with 470 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/components/AddProductByAiModal.module.css
+2 -4
View File
@@ -1,5 +1,6 @@
.modal {
width: min(560px, calc(100vw - 32px));
width: min(820px, calc(100vw - 32px));
max-width: 820px;
}
.headerBlock {
@@ -16,9 +17,6 @@
.prompt {
width: 100%;
min-height: 120px;
resize: vertical;
line-height: 1.55;
}
.promptHint {
apps/business/src/components/AddProductByAiModal.tsx
+4 -3
View File
@@ -172,7 +172,7 @@ export function AddProductByAiModal({
/>
</div>
<div className={modalStyles.field}>
<div className={`${modalStyles.field} ${aiStyles.aiPromptField}`}>
<label htmlFor="ai-product-prompt">{t('products.ai.prompt')}</label>
<textarea
id="ai-product-prompt"
@@ -180,11 +180,12 @@ export function AddProductByAiModal({
onChange={(e) => setPrompt(e.target.value)}
placeholder={t('products.ai.promptPlaceholder')}
dir={promptDir}
className={`${styles.prompt}${language === 'fa' ? ' faText' : ''}`}
className={`${aiStyles.aiPromptTextarea} ${styles.prompt}${language === 'fa' ? ' faText' : ''}`}
disabled={isSubmitting}
rows={5}
rows={14}
required
minLength={2}
lang={language === 'fa' ? 'fa' : 'en'}
/>
<p className={styles.promptHint}>{t('products.ai.promptHint')}</p>
</div>
apps/business/src/components/ImageCropper.tsx
+28 -4
View File
@@ -11,6 +11,11 @@ interface ImageCropperProps {
/** Crop aspect ratio. Defaults to square (1). */
aspect?: number
outputFormat?: 'jpeg' | 'png'
/** Fill color for JPEG and for crop areas outside the image. */
fillColor?: string
/** Minimum zoom. Values below 1 shrink the image inside the crop frame. */
minZoom?: number
maxZoom?: number
accept?: string
uploadLabel?: string
hint?: string
@@ -24,6 +29,9 @@ export function ImageCropper({
onChange,
aspect = 1,
outputFormat = 'jpeg',
fillColor,
minZoom = 1,
maxZoom = 3,
accept = 'image/*',
uploadLabel,
hint,
@@ -34,6 +42,8 @@ export function ImageCropper({
const resolvedUploadLabel = uploadLabel ?? t('products.form.thumbnailUpload')
const resolvedHint = hint ?? t('products.form.thumbnailHint')
const resolvedChangeLabel = changeLabel ?? t('products.form.thumbnailChange')
const resolvedFillColor = fillColor ?? (outputFormat === 'jpeg' ? '#ffffff' : undefined)
const cropSurfaceColor = resolvedFillColor ?? '#1e293b'
const [imageSrc, setImageSrc] = useState<string | null>(null)
const [crop, setCrop] = useState({ x: 0, y: 0 })
const [zoom, setZoom] = useState(1)
@@ -65,7 +75,12 @@ export function ImageCropper({
async function applyCrop() {
if (!imageSrc || !croppedArea) return
const cropped = await getCroppedImage(imageSrc, croppedArea, outputFormat)
const cropped = await getCroppedImage(
imageSrc,
croppedArea,
outputFormat,
resolvedFillColor,
)
onChange(cropped)
setImageSrc(null)
setZoom(1)
@@ -128,16 +143,25 @@ export function ImageCropper({
{imageSrc && (
<div className={styles.cropPanel}>
<div className={styles.cropArea} style={frameStyle}>
<div
className={styles.cropArea}
style={{ ...frameStyle, background: cropSurfaceColor }}
>
<Cropper
key={String(aspect)}
image={imageSrc}
crop={crop}
zoom={zoom}
minZoom={minZoom}
maxZoom={maxZoom}
aspect={aspect}
onCropChange={setCrop}
onZoomChange={setZoom}
onCropComplete={onCropComplete}
restrictPosition={minZoom >= 1}
style={{
containerStyle: { background: cropSurfaceColor },
}}
/>
</div>
<div className={styles.cropControls}>
@@ -145,8 +169,8 @@ export function ImageCropper({
{t('products.form.zoom')}
<input
type="range"
min={1}
max={3}
min={minZoom}
max={maxZoom}
step={0.05}
value={zoom}
onChange={(e) => setZoom(Number(e.target.value))}
apps/business/src/components/ProductCard.tsx
+39 -26
View File
@@ -8,6 +8,9 @@ import {
ClipboardList,
ImageOff,
ExternalLink,
Info,
MessageSquare,
Search,
type LucideIcon,
} from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
@@ -22,14 +25,15 @@ import { OpenOnWebsiteControl } from './OpenOnWebsiteControl'
import { ProductCardOverflowMenu } from './ProductCardOverflowMenu'
import styles from './ProductCard.module.css'
/** Max icon slots in the card footer, including the overflow trigger when needed. */
const MAX_VISIBLE_ACTIONS = 6
interface ProductCardProps {
product: Product
commentCount: number
variantCount: number
onEdit: (id: string) => void
onTranslate: (id: string) => void
onQuickInfo: (id: string) => void
onComments: (id: string) => void
onSeo: (id: string) => void
onTechnicalInfo: (id: string) => void
onRemove: (id: string) => void
onVariations: (id: string) => void
@@ -47,9 +51,13 @@ type CardAction = {
export function ProductCard({
product,
commentCount,
variantCount,
onEdit,
onTranslate,
onQuickInfo,
onComments,
onSeo,
onTechnicalInfo,
onRemove,
onVariations,
@@ -76,7 +84,7 @@ export function ProductCard({
setImageFailed(false)
}, [imageSrc])
const actions: CardAction[] = [
const primaryActions: CardAction[] = [
{
key: 'edit',
label: t('products.card.edit'),
@@ -116,6 +124,30 @@ export function ProductCard({
icon: ClipboardList,
onClick: () => onTechnicalInfo(product.id),
},
]
const menuActions = [
{
key: 'seo',
label: t('products.card.seo'),
icon: Search,
onClick: () => onSeo(product.id),
},
{
key: 'quickInfo',
label: t('products.card.quickInfo'),
icon: Info,
onClick: () => onQuickInfo(product.id),
},
{
key: 'comments',
label:
commentCount > 0
? `${t('products.card.comments')} (${commentCount})`
: t('products.card.comments'),
icon: MessageSquare,
onClick: () => onComments(product.id),
},
{
key: 'remove',
label: t('products.card.remove'),
@@ -125,20 +157,6 @@ export function ProductCard({
},
]
const needsOverflow = actions.length > MAX_VISIBLE_ACTIONS
const visibleActions = needsOverflow
? actions.slice(0, MAX_VISIBLE_ACTIONS - 1)
: actions
const overflowActions = needsOverflow
? actions.slice(MAX_VISIBLE_ACTIONS - 1).map(({ key, label, icon, onClick, danger }) => ({
key,
label,
icon,
onClick,
danger,
}))
: []
return (
<article className={styles.card}>
<Link to={`/products/detail/${product.id}`} className={styles.clickable}>
@@ -180,7 +198,7 @@ export function ProductCard({
</Link>
<div className={styles.controls}>
{visibleActions.map((action) => {
{primaryActions.map((action) => {
if (action.render) return <span key={action.key}>{action.render()}</span>
const Icon = action.icon
@@ -188,7 +206,7 @@ export function ProductCard({
<Tooltip key={action.key} label={action.label}>
<button
type="button"
className={`${styles.iconBtn}${action.danger ? ` ${styles.danger}` : ''}`}
className={styles.iconBtn}
onClick={action.onClick}
aria-label={
action.badge != null ? `${action.label} (${action.badge})` : action.label
@@ -202,12 +220,7 @@ export function ProductCard({
</Tooltip>
)
})}
{overflowActions.length > 0 ? (
<ProductCardOverflowMenu
productName={primaryName}
items={overflowActions}
/>
) : null}
<ProductCardOverflowMenu productName={primaryName} items={menuActions} />
</div>
</article>
)
apps/business/src/components/ProductSeoModal.module.css
+9
View File
@@ -0,0 +1,9 @@
.modal {
width: min(560px, calc(100vw - 32px));
}
.titleRow {
display: inline-flex;
align-items: center;
gap: 8px;
}
apps/business/src/components/ProductSeoModal.tsx
+170
View File
@@ -0,0 +1,170 @@
import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { Search, X } from 'lucide-react'
import { ApiError } from '../lib/api'
import { useT } from '../i18n/useT'
import { getProduct, updateProduct } from '../services/productService'
import { seoMetaPayload } from '../utils/seoMeta'
import { SeoMetaFields } from './SeoMetaFields'
import styles from './VariationsModal.module.css'
import seoStyles from './ProductSeoModal.module.css'
interface ProductSeoModalProps {
open: boolean
productId: string
productName: string
onClose: () => void
}
const ANIMATION_MS = 220
export function ProductSeoModal({
open,
productId,
productName,
onClose,
}: ProductSeoModalProps) {
const t = useT()
const [mounted, setMounted] = useState(open)
const [closing, setClosing] = useState(false)
const [seoMetaTitle, setSeoMetaTitle] = useState('')
const [seoMetaDescription, setSeoMetaDescription] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [isSaving, setIsSaving] = useState(false)
const [error, setError] = useState('')
useEffect(() => {
if (open) {
setMounted(true)
setClosing(false)
} else if (mounted) {
setClosing(true)
const timer = setTimeout(() => {
setMounted(false)
setClosing(false)
}, ANIMATION_MS)
return () => clearTimeout(timer)
}
}, [open, mounted])
useEffect(() => {
if (!open || !productId) return
const controller = new AbortController()
void loadData(controller.signal)
return () => controller.abort()
}, [open, productId])
async function loadData(signal?: AbortSignal) {
setIsLoading(true)
setError('')
try {
const product = await getProduct(productId, signal)
setSeoMetaTitle(product.seoMetaTitle ?? '')
setSeoMetaDescription(product.seoMetaDescription ?? '')
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') return
if (err instanceof ApiError) {
setError(err.message)
} else {
setError(t('products.seo.errorLoad'))
}
} finally {
setIsLoading(false)
}
}
async function handleSave() {
setIsSaving(true)
setError('')
try {
await updateProduct(productId, seoMetaPayload(seoMetaTitle, seoMetaDescription))
onClose()
} catch (err) {
if (err instanceof ApiError) {
setError(err.message)
} else {
setError(t('products.seo.errorSave'))
}
} finally {
setIsSaving(false)
}
}
if (!mounted) return null
return createPortal(
<div
className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
onClick={() => !isSaving && onClose()}
>
<div
className={`${styles.modal} ${seoStyles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
onClick={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
aria-labelledby="product-seo-title"
>
<div className={styles.header}>
<div>
<h3 id="product-seo-title" className={`${styles.title} ${seoStyles.titleRow}`}>
<Search size={18} aria-hidden="true" />
<span>{t('products.seo.title')}</span>
</h3>
{productName ? <p className={styles.subtitle}>{productName}</p> : null}
</div>
<button
type="button"
className={styles.closeBtn}
onClick={onClose}
disabled={isSaving}
aria-label={t('common.close')}
>
<X size={20} />
</button>
</div>
<div className={styles.body}>
{isLoading ? (
<p className={styles.emptyText}>{t('products.seo.loading')}</p>
) : (
<SeoMetaFields
seoMetaTitle={seoMetaTitle}
seoMetaDescription={seoMetaDescription}
onTitleChange={setSeoMetaTitle}
onDescriptionChange={setSeoMetaDescription}
disabled={isSaving}
hint={t('seo.meta.hint')}
titleLabel={t('seo.meta.title')}
descriptionLabel={t('seo.meta.description')}
titlePlaceholder={t('seo.meta.titlePlaceholder')}
descriptionPlaceholder={t('seo.meta.descriptionPlaceholder')}
/>
)}
{error ? <p className={styles.errorText}>{error}</p> : null}
<div className={styles.actions}>
<button
type="button"
className={styles.cancelBtn}
onClick={onClose}
disabled={isSaving}
>
{t('common.cancel')}
</button>
<button
type="button"
className={styles.submitBtn}
onClick={() => void handleSave()}
disabled={isLoading || isSaving}
>
{isSaving ? t('products.seo.saving') : t('products.seo.save')}
</button>
</div>
</div>
</div>
</div>,
document.body,
)
}
apps/business/src/components/SearchableSelect.module.css
+2 -2
View File
@@ -96,8 +96,8 @@
.dropdownInFlow {
position: static;
margin-top: 6px;
max-height: none;
overflow: visible;
max-height: min(280px, 40vh);
overflow-y: auto;
z-index: auto;
}