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/pages/StoreSpecialsPage.tsx

@@ -262,7 +262,7 @@ export function StoreSpecialsPage() {
     const existingIds = pickItemsTarget.items.map((item) =>
       fromProducts ? item.productId : item.id,
     )
-    const nextIds = [...existingIds, ...ids]
+    const nextIds = [...new Set([...existingIds, ...ids])]
 
     setIsSaving(true)
     setError('')
@@ -276,11 +276,10 @@ export function StoreSpecialsPage() {
       setPickItemsTarget(null)
       showToast(t('website.specialItems.toastAdded'), 'success')
     } catch (err) {
-      if (err instanceof ApiError) {
-        setError(err.message)
-      } else {
-        setError(t('website.specialItems.errorAdd'))
-      }
+      const message =
+        err instanceof ApiError ? err.message : t('website.specialItems.errorAdd')
+      setError(message)
+      throw err instanceof Error ? err : new Error(message)
     } finally {
       setIsSaving(false)
     }

apps/business/src/pages/WebsiteSettingsPage.module.css

@@ -1,64 +1,117 @@
 .sourceRow {
-  align-items: flex-start;
+  align-items: center;
 }
 
-.radioGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 200px;
+.field {
+  min-width: 180px;
   flex-shrink: 0;
 }
 
-.radioOption {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.field select {
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
   min-height: var(--field-height);
   padding: var(--field-padding-y) var(--field-padding-x);
+  padding-inline-end: var(--select-padding-end);
   font-size: var(--field-font-size);
-  line-height: 1.4;
+  font-family: var(--font-ui);
   color: var(--text-primary);
   background-color: rgba(255, 255, 255, 0.7);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--select-arrow-offset) center;
+  background-size: var(--select-arrow-size);
   border: 1px solid rgba(148, 163, 184, 0.35);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  outline: none;
 }
 
-.radioOption:has(input:checked) {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
+:global([dir='rtl']) .field select {
+  background-position: left var(--select-arrow-offset) center;
 }
 
-.radioOption:has(input:disabled) {
+.field select:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-.radioOption input {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--primary);
+.sitemapRow {
+  align-items: center;
+}
+
+.sitemapActions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
   flex-shrink: 0;
 }
 
+.rebuildBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: var(--field-height);
+  padding: 0 14px;
+  font-size: var(--field-font-size);
+  font-family: var(--font-ui);
+  font-weight: 600;
+  color: var(--primary);
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(var(--primary-rgb) / 0.35);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+.rebuildBtn:hover:not(:disabled) {
+  background-color: rgba(var(--primary-rgb) / 0.08);
+  border-color: var(--primary);
+}
+
+.rebuildBtn:focus-visible {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
+}
+
+.rebuildBtn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sitemapUrl {
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-family: var(--font-ui);
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.sitemapUrl:hover {
+  text-decoration: underline;
+}
+
 @media (max-width: 768px) {
-  .radioGroup {
+  .field,
+  .sitemapActions {
     width: 100%;
     min-width: 0;
   }
-}
 
-.sitemapRow {
-  align-items: flex-start;
-}
+  .sitemapActions {
+    align-items: stretch;
+  }
 
-.sitemapMeta {
-  margin: 8px 0 0;
-  font-size: 12px;
-  color: var(--text-secondary);
+  .sitemapUrl {
+    max-width: none;
+  }
 }
 
 .spin {

apps/business/src/pages/WebsiteSettingsPage.tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react'
 import { RefreshCw } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
 import { PageTitle } from '../components/PageTitle'
-import { Tooltip } from '../components/Tooltip'
 import { useToast } from '../context/ToastContext'
 import { useT } from '../i18n/useT'
 import { ApiError } from '../lib/api'
+import { getBusinessDomain } from '../lib/config'
 import {
   getSettings,
   updateWebsiteSettings,
@@ -14,7 +14,6 @@ import {
 } from '../services/settingsService'
 import { syncWebsiteSitemapConfig } from '../services/websiteSitemapService'
 import { hasBusinessModule, type BusinessModuleId } from '../utils/businessModules'
-import controlStyles from '../components/CategoryRow.module.css'
 import pageStyles from '../components/PageContent.module.css'
 import sharedStyles from './ProductSettingsPage.module.css'
 import styles from './WebsiteSettingsPage.module.css'
@@ -32,14 +31,10 @@ function defaultSpecialProductsSource(
     : 'product'
 }
 
-function formatSyncedAt(value: string | null | undefined, locale: string) {
-  if (!value) return null
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return null
-  return date.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-GB', {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  })
+function resolveSitemapUrl(config: WebsiteSitemapConfig | null): string {
+  const fromConfig = config?.baseUrl?.trim().replace(/\/+$/, '')
+  const origin = fromConfig || `https://${getBusinessDomain()}`
+  return `${origin}/sitemap.xml`
 }
 
 export function WebsiteSettingsPage() {
@@ -126,14 +121,7 @@ export function WebsiteSettingsPage() {
     }
   }
 
-  const syncedAtLabel = formatSyncedAt(
-    sitemapConfig?.syncedAt,
-    document.documentElement.lang || 'en',
-  )
-  const staticPageCount = sitemapConfig?.staticPages?.length ?? 0
-  const templateCount = sitemapConfig?.templates
-    ? Object.keys(sitemapConfig.templates).length
-    : 0
+  const sitemapUrl = resolveSitemapUrl(sitemapConfig)
 
   return (
     <main className={pageStyles.content}>
@@ -165,35 +153,30 @@ export function WebsiteSettingsPage() {
           <div className={sharedStyles.list}>
             <div className={`${sharedStyles.row} ${styles.sourceRow}`}>
               <div className={sharedStyles.rowText}>
-                <span className={sharedStyles.rowLabel} id="special-products-source-label">
+                <label htmlFor="special-products-source" className={sharedStyles.rowLabel}>
                   {t('website.settings.specialSource')}
-                </span>
+                </label>
                 <p className={sharedStyles.rowDescription}>
                   {t('website.settings.specialSourceDesc')}
                 </p>
               </div>
-              <div
-                className={styles.radioGroup}
-                role="radiogroup"
-                aria-labelledby="special-products-source-label"
-              >
-                {SOURCE_OPTIONS.map((option) => (
-                  <label key={option} className={styles.radioOption}>
-                    <input
-                      type="radio"
-                      name="special-products-source"
-                      value={option}
-                      checked={source === option}
-                      disabled={isSaving}
-                      onChange={() => void handleSourceChange(option)}
-                    />
-                    <span>
+              <div className={styles.field}>
+                <select
+                  id="special-products-source"
+                  value={source}
+                  disabled={isSaving}
+                  onChange={(e) =>
+                    void handleSourceChange(e.target.value as SpecialProductsSource)
+                  }
+                >
+                  {SOURCE_OPTIONS.map((option) => (
+                    <option key={option} value={option}>
                       {option === 'product'
                         ? t('website.settings.source.product')
                         : t('website.settings.source.storeItem')}
-                    </span>
-                  </label>
-                ))}
+                    </option>
+                  ))}
+                </select>
               </div>
             </div>
 
@@ -205,35 +188,30 @@ export function WebsiteSettingsPage() {
                 <p className={sharedStyles.rowDescription}>
                   {t('website.settings.sitemapDesc')}
                 </p>
-                {sitemapConfig ? (
-                  <p className={styles.sitemapMeta}>
-                    {syncedAtLabel
-                      ? t('website.settings.sitemapSyncedAt', { date: syncedAtLabel })
-                      : t('website.settings.sitemapImported')}
-                    {' · '}
-                    {t('website.settings.sitemapSummary', {
-                      pages: staticPageCount,
-                      templates: templateCount,
-                    })}
-                  </p>
-                ) : (
-                  <p className={styles.sitemapMeta}>{t('website.settings.sitemapNotSynced')}</p>
-                )}
               </div>
-              <Tooltip label={t('website.settings.sitemapSync')}>
+              <div className={styles.sitemapActions}>
                 <button
                   type="button"
-                  className={controlStyles.controlBtn}
+                  className={styles.rebuildBtn}
                   onClick={() => void handleSyncSitemap()}
                   disabled={isLoading || isSaving || isSyncingSitemap}
-                  aria-label={t('website.settings.sitemapSync')}
                 >
                   <RefreshCw
                     size={16}
                     className={isSyncingSitemap ? styles.spin : undefined}
                   />
+                  {t('website.settings.sitemapSync')}
                 </button>
-              </Tooltip>
+                <a
+                  href={sitemapUrl}
+                  className={styles.sitemapUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  dir="ltr"
+                >
+                  {sitemapUrl}
+                </a>
+              </div>
             </div>
           </div>
         )}