Add product AI fill, Enter-to-filter, and URL-persisted product filters.

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

apps/business/src/pages/MyProductsPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { Plus, RotateCcw, Search, Sparkles } from 'lucide-react'
 import { ProductCard } from '../components/ProductCard'
 import { AddProductByAiModal } from '../components/AddProductByAiModal'
@@ -22,9 +22,19 @@ import filterStyles from '../components/ListFiltersPanel.module.css'
 import styles from './MyProductsPage.module.css'
 import aiStyles from '../styles/ai.module.css'
 
+function readListQuery(searchParams: URLSearchParams) {
+  const name = searchParams.get('q')?.trim() ?? ''
+  const pageRaw = Number(searchParams.get('page'))
+  const page = Number.isFinite(pageRaw) && pageRaw >= 1 ? Math.floor(pageRaw) : 1
+  return { name, page }
+}
+
 export function MyProductsPage() {
   const t = useT()
   const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { name: appliedName, page: currentPage } = readListQuery(searchParams)
+
   const [products, setProducts] = useState<Product[]>([])
   const [totalProducts, setTotalProducts] = useState(0)
   const [isLoading, setIsLoading] = useState(true)
@@ -32,7 +42,6 @@ export function MyProductsPage() {
   const [error, setError] = useState('')
   const [variantCounts, setVariantCounts] = useState<Record<string, number>>({})
   const [commentCounts, setCommentCounts] = useState<Record<string, number>>({})
-  const [currentPage, setCurrentPage] = useState(1)
   const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null)
   const [variantsTarget, setVariantsTarget] = useState<{
     id: string
@@ -46,17 +55,27 @@ export function MyProductsPage() {
     categoryId: string
   } | null>(null)
   const [aiModalOpen, setAiModalOpen] = useState(false)
-  const [draftName, setDraftName] = useState('')
-  const [appliedName, setAppliedName] = useState('')
+  const [draftName, setDraftName] = useState(appliedName)
 
   const totalPages = Math.max(1, Math.ceil(totalProducts / PRODUCTS_PER_PAGE))
 
+  useEffect(() => {
+    setDraftName(appliedName)
+  }, [appliedName])
+
   useEffect(() => {
     const controller = new AbortController()
     void loadProducts(currentPage, controller.signal)
     return () => controller.abort()
   }, [currentPage, appliedName])
 
+  function writeListQuery(name: string, page: number) {
+    const next = new URLSearchParams()
+    if (name) next.set('q', name)
+    if (page > 1) next.set('page', String(page))
+    setSearchParams(next, { replace: true })
+  }
+
   async function loadProducts(page: number, signal?: AbortSignal) {
     setIsLoading(true)
     setError('')
@@ -136,7 +155,7 @@ export function MyProductsPage() {
       const nextTotalPages = Math.max(1, Math.ceil(nextTotal / PRODUCTS_PER_PAGE))
       const nextPage = currentPage > nextTotalPages ? nextTotalPages : currentPage
       setDeleteTarget(null)
-      setCurrentPage(nextPage)
+      writeListQuery(appliedName, nextPage)
       await loadProducts(nextPage)
     } catch (err) {
       if (err instanceof ApiError) {
@@ -150,19 +169,17 @@ export function MyProductsPage() {
   }
 
   function handlePageChange(page: number) {
-    setCurrentPage(page)
+    writeListQuery(appliedName, page)
     window.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
   function applyFilters() {
-    setAppliedName(draftName.trim())
-    setCurrentPage(1)
+    writeListQuery(draftName.trim(), 1)
   }
 
   function clearFilters() {
     setDraftName('')
-    setAppliedName('')
-    setCurrentPage(1)
+    writeListQuery('', 1)
   }
 
   function handleCommentCountChange(count: number) {
@@ -193,7 +210,7 @@ export function MyProductsPage() {
 
       <div className={filterStyles.filtersPanel}>
         <div className={filterStyles.filtersTitle}>{t('products.list.filters')}</div>
-        <div className={filterStyles.filtersGrid}>
+        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
           <div className={filterStyles.filtersInputs}>
             <div className={`${filterStyles.field} ${filterStyles.fieldCol4}`}>
               <input
@@ -208,9 +225,8 @@ export function MyProductsPage() {
           </div>
           <div className={filterStyles.filterActions}>
             <button
-              type="button"
+              type="submit"
               className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
-              onClick={applyFilters}
               disabled={isLoading}
               aria-label={t('products.list.search')}
               title={t('products.list.search')}
@@ -228,7 +244,7 @@ export function MyProductsPage() {
               <RotateCcw size={18} />
             </button>
           </div>
-        </div>
+        </form>
       </div>
 
       {error && (