Improve website settings and special-item pick UX.

Tighten sitemap/settings controls, debounce product search to 10 results, keep catalog-only specials visible after add, and use frosted glass on link/category modals.

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

apps/business/src/components/PickStoreSpecialItemsModal.tsx

@@ -1,14 +1,15 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, 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 { listAllProducts } from '../services/productService'
-import { listAllStoreItems } from '../services/storeItemService'
+import { listProducts } from '../services/productService'
+import { listStoreItems } from '../services/storeItemService'
 import type { SpecialProductsSource } from '../services/settingsService'
 import { groupStoreItemsByProduct } from '../utils/storeProductGroups'
 import {
+  SEARCH_RESULT_LIMIT,
   StoreItemMultiSearchSelect,
   type StoreItemSearchOption,
 } from './StoreItemMultiSearchSelect'
@@ -22,11 +23,12 @@ interface PickStoreSpecialItemsModalProps {
   existingIds: string[]
   source: SpecialProductsSource
   onClose: () => void
-  onConfirm: (ids: string[]) => void
+  onConfirm: (ids: string[]) => void | Promise<void>
   isSubmitting?: boolean
 }
 
 const ANIMATION_MS = 220
+const STORE_ITEM_SEARCH_PAGE_SIZE = 30
 
 export function PickStoreSpecialItemsModal({
   open,
@@ -44,10 +46,10 @@ export function PickStoreSpecialItemsModal({
   const [mounted, setMounted] = useState(open)
   const [closing, setClosing] = useState(false)
   const [options, setOptions] = useState<StoreItemSearchOption[]>([])
-  const [isLoading, setIsLoading] = useState(false)
+  const [isSearching, setIsSearching] = useState(false)
   const [error, setError] = useState('')
   const [selectedIds, setSelectedIds] = useState<string[]>([])
-  const [selectOpen, setSelectOpen] = useState(false)
+  const searchControllerRef = useRef<AbortController | null>(null)
 
   const existingSet = useMemo(() => new Set(existingIds), [existingIds])
 
@@ -56,7 +58,9 @@ export function PickStoreSpecialItemsModal({
       setMounted(true)
       setClosing(false)
       setSelectedIds([])
+      setOptions([])
       setError('')
+      setIsSearching(false)
     } else if (mounted) {
       setClosing(true)
       const timer = setTimeout(() => {
@@ -68,12 +72,10 @@ export function PickStoreSpecialItemsModal({
   }, [open, mounted])
 
   useEffect(() => {
-    if (!open) return
-
-    const controller = new AbortController()
-    void loadOptions(controller.signal)
-    return () => controller.abort()
-  }, [open, existingIds, source])
+    return () => {
+      searchControllerRef.current?.abort()
+    }
+  }, [])
 
   useEffect(() => {
     if (!mounted || closing) return
@@ -84,69 +86,47 @@ export function PickStoreSpecialItemsModal({
     return () => document.removeEventListener('keydown', onKey)
   }, [mounted, closing, onClose])
 
-  async function loadOptions(signal?: AbortSignal) {
-    setIsLoading(true)
-    setError('')
+  const handleSearch = useCallback(
+    async (query: string) => {
+      searchControllerRef.current?.abort()
 
-    try {
-      const nextOptions = fromProducts
-        ? await loadProductOptions(signal)
-        : await loadStoreItemOptions(signal)
-
-      setOptions(nextOptions.filter((option) => !existingSet.has(option.id)))
-    } catch (err) {
-      if (err instanceof DOMException && err.name === 'AbortError') return
-      if (err instanceof ApiError) {
-        setError(err.message)
-      } else {
-        setError(
-          fromProducts
-            ? t('website.specialItems.pickErrorLoadProducts')
-            : t('website.specialItems.pickErrorLoad'),
-        )
+      if (!query) {
+        setOptions([])
+        setIsSearching(false)
+        setError('')
+        return
       }
-    } finally {
-      setIsLoading(false)
-    }
-  }
 
-  async function loadStoreItemOptions(signal?: AbortSignal) {
-    const items = await listAllStoreItems(signal)
-    const listings = groupStoreItemsByProduct(items)
-    return listings
-      .map((listing): StoreItemSearchOption | null => {
-        const storeItemId = listing.representative.storeItemId ?? listing.representative.id
-        const firstPricedVariant = listing.variants.find((v) => v.price !== null) ?? null
-        const price = firstPricedVariant?.price ?? null
-        const hasPrice = listing.variants.some((v) => v.price !== null)
-        const hasInStock = listing.variants.some(
-          (v) => v.stockQuantity === null || v.stockQuantity > 0,
-        )
+      const controller = new AbortController()
+      searchControllerRef.current = controller
+      setIsSearching(true)
+      setError('')
 
-        if (!hasPrice && !hasInStock) return null
+      try {
+        const nextOptions = fromProducts
+          ? await loadProductOptions(query, controller.signal)
+          : await loadStoreItemOptions(query, controller.signal)
 
-        return {
-          id: storeItemId,
-          title: listing.productTitle,
-          nameFa: listing.productNameFa,
-          image: listing.productImage,
-          price,
+        if (controller.signal.aborted) return
+        setOptions(nextOptions.filter((option) => !existingSet.has(option.id)))
+      } catch (err) {
+        if (err instanceof DOMException && err.name === 'AbortError') return
+        if (controller.signal.aborted) return
+        if (err instanceof ApiError) {
+          setError(err.message)
+        } else {
+          setError(
+            fromProducts
+              ? t('website.specialItems.pickErrorLoadProducts')
+              : t('website.specialItems.pickErrorLoad'),
+          )
         }
-      })
-      .filter((option): option is StoreItemSearchOption => option !== null)
-  }
-
-  async function loadProductOptions(signal?: AbortSignal) {
-    const products = await listAllProducts(signal)
-    return products.map(
-      (product): StoreItemSearchOption => ({
-        id: product.id,
-        title: product.title,
-        nameFa: product.nameFa,
-        image: product.thumbnailUrl || product.thumbnail || product.image || null,
-      }),
-    )
-  }
+      } finally {
+        if (!controller.signal.aborted) setIsSearching(false)
+      }
+    },
+    [existingSet, fromProducts, t],
+  )
 
   function toggleSelection(id: string) {
     setSelectedIds((prev) =>
@@ -154,9 +134,22 @@ export function PickStoreSpecialItemsModal({
     )
   }
 
-  function handleConfirm() {
-    if (selectedIds.length === 0) return
-    onConfirm(selectedIds)
+  async function handleConfirm() {
+    if (selectedIds.length === 0 || isSubmitting) return
+    setError('')
+    try {
+      await onConfirm(selectedIds)
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message)
+      } else if (err instanceof Error && err.message) {
+        setError(err.message)
+      } else {
+        setError(
+          t('website.specialItems.errorAdd'),
+        )
+      }
+    }
   }
 
   function confirmLabel() {
@@ -172,7 +165,7 @@ export function PickStoreSpecialItemsModal({
       className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
       onClick={(e) => {
         if (e.target !== e.currentTarget) return
-        if (selectOpen) return
+        if (selectedIds.length > 0) return
         onClose()
       }}
       role="presentation"
@@ -184,6 +177,8 @@ export function PickStoreSpecialItemsModal({
         aria-labelledby="pick-special-items-title"
         lang={isFa ? 'fa' : 'en'}
         dir={isFa ? 'rtl' : 'ltr'}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
       >
         <div className={modalStyles.header}>
           <div>
@@ -209,32 +204,19 @@ export function PickStoreSpecialItemsModal({
         <div className={modalStyles.body}>
           {error && <p className={styles.error}>{error}</p>}
 
-          {isLoading ? (
-            <p className={styles.empty}>
-              {fromProducts
-                ? t('website.specialItems.pickLoadingProducts')
-                : t('website.specialItems.pickLoading')}
-            </p>
-          ) : options.length === 0 ? (
-            <p className={styles.empty}>
-              {fromProducts
-                ? t('website.specialItems.pickEmptyProducts')
-                : t('website.specialItems.pickEmpty')}
-            </p>
-          ) : (
-            <StoreItemMultiSearchSelect
-              options={options}
-              selectedIds={selectedIds}
-              onToggle={toggleSelection}
-              placeholder={
-                fromProducts
-                  ? t('website.specialItems.pickSearchProducts')
-                  : t('website.specialItems.pickSearch')
-              }
-              disabled={isSubmitting}
-              onOpenChange={setSelectOpen}
-            />
-          )}
+          <StoreItemMultiSearchSelect
+            options={options}
+            selectedIds={selectedIds}
+            onToggle={toggleSelection}
+            onQueryChange={(query) => void handleSearch(query)}
+            isSearching={isSearching}
+            placeholder={
+              fromProducts
+                ? t('website.specialItems.pickSearchProducts')
+                : t('website.specialItems.pickSearch')
+            }
+            disabled={isSubmitting}
+          />
 
           <div className={styles.footer}>
             <button type="button" className={styles.cancelBtn} onClick={onClose} disabled={isSubmitting}>
@@ -243,7 +225,7 @@ export function PickStoreSpecialItemsModal({
             <button
               type="button"
               className={styles.confirmBtn}
-              onClick={handleConfirm}
+              onClick={() => void handleConfirm()}
               disabled={isSubmitting || selectedIds.length === 0}
             >
               {confirmLabel()}
@@ -255,3 +237,42 @@ export function PickStoreSpecialItemsModal({
     document.body,
   )
 }
+
+async function loadProductOptions(name: string, signal?: AbortSignal) {
+  const data = await listProducts(1, SEARCH_RESULT_LIMIT, signal, { name })
+  return data.items.map(
+    (product): StoreItemSearchOption => ({
+      id: product.id,
+      title: product.nameEn,
+      nameFa: product.nameFa,
+      image: product.thumbnail || product.image || null,
+    }),
+  )
+}
+
+async function loadStoreItemOptions(name: string, signal?: AbortSignal) {
+  const data = await listStoreItems(1, STORE_ITEM_SEARCH_PAGE_SIZE, signal, { name })
+  const listings = groupStoreItemsByProduct(data.items)
+  return listings
+    .map((listing): StoreItemSearchOption | null => {
+      const storeItemId = listing.representative.storeItemId ?? listing.representative.id
+      const firstPricedVariant = listing.variants.find((v) => v.price !== null) ?? null
+      const price = firstPricedVariant?.price ?? null
+      const hasPrice = listing.variants.some((v) => v.price !== null)
+      const hasInStock = listing.variants.some(
+        (v) => v.stockQuantity === null || v.stockQuantity > 0,
+      )
+
+      if (!hasPrice && !hasInStock) return null
+
+      return {
+        id: storeItemId,
+        title: listing.productTitle,
+        nameFa: listing.productNameFa,
+        image: listing.productImage,
+        price,
+      }
+    })
+    .filter((option): option is StoreItemSearchOption => option !== null)
+    .slice(0, SEARCH_RESULT_LIMIT)
+}