Add a Torob toggle in store settings and show parent category on product chips.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/CategoryTreeSelect.module.css

@@ -93,7 +93,8 @@
 .panelInFlow {
   position: static;
   margin-top: 6px;
-  max-height: min(42vh, 320px);
+  max-height: none;
+  overflow: visible;
   z-index: auto;
 }
 

apps/business/src/components/CategoryTreeSelect.tsx

@@ -15,6 +15,8 @@ interface CategoryTreeSelectProps {
   placeholder?: string
   disabled?: boolean
   id?: string
+  /** Overlay floats over content; inFlow expands the parent (use inside modals). */
+  dropdownVariant?: 'overlay' | 'inFlow'
 }
 
 function categoryLabel(category: Category, isFa: boolean) {
@@ -163,6 +165,7 @@ export function CategoryTreeSelect({
   placeholder,
   disabled = false,
   id,
+  dropdownVariant = 'overlay',
 }: CategoryTreeSelectProps) {
   const t = useT()
   const { locale } = useLocale()
@@ -269,7 +272,14 @@ export function CategoryTreeSelect({
       </div>
 
       {open && !disabled ? (
-        <div className={styles.panel}>
+        <div
+          className={[
+            styles.panel,
+            dropdownVariant === 'inFlow' ? styles.panelInFlow : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
           {!hasVisible ? (
             <p className={styles.noResults}>{t('categories.select.empty')}</p>
           ) : (

apps/business/src/components/GenerateWebsiteLinkModal.module.css

@@ -26,7 +26,8 @@
 .form {
   flex: 1 1 auto;
   min-height: 0;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .treeField {

apps/business/src/components/GenerateWebsiteLinkModal.tsx

@@ -274,6 +274,7 @@ export function GenerateWebsiteLinkModal({ open, onClose, onPick }: GenerateWebs
                   value={categoryId}
                   onChange={setCategoryId}
                   placeholder={t('website.linkGenerator.pickCategory')}
+                  dropdownVariant="inFlow"
                 />
               )}
             </div>

apps/business/src/components/ProductCard.module.css

@@ -144,10 +144,12 @@
 
 .categoryChip {
   display: inline-block;
+  max-width: 100%;
   padding: 3px 10px;
   font-family: var(--font-ui);
   font-size: 11px;
   font-weight: 500;
+  line-height: 1.35;
   color: var(--text-secondary);
   background: rgba(148, 163, 184, 0.15);
   border-radius: 50px;

apps/business/src/components/ProductCard.tsx

@@ -13,6 +13,7 @@ import { useLocale } from '@meshkee/dashboard-ui'
 import type { Product } from '../types/product'
 import { useT } from '../i18n/useT'
 import { Tooltip } from './Tooltip'
+import { formatProductCategoryChip } from '../services/productService'
 import styles from './ProductCard.module.css'
 
 interface ProductCardProps {
@@ -47,7 +48,7 @@ export function ProductCard({
       ? product.nameEn
       : ''
     : product.nameFa
-  const categoryLabel = isFa ? product.categoryFa || product.category : product.category
+  const categoryLabel = formatProductCategoryChip(product, isFa)
   const imageSrc = product.image?.trim() || ''
   const [imageFailed, setImageFailed] = useState(false)
   const showImage = Boolean(imageSrc) && !imageFailed