کارت جستجوی ذخیره‌شده (SavedQueryCard)

معرفی

SavedQueryCard نمایش یک filter preset / query ذخیره‌شده است — کاربر روی Run کلیک می‌کند و نتایج با همان فیلترهای ذخیره‌شده دوباره اجرا می‌شود. مناسب صفحه‌ی My Saved Searches در پنل افکارسنجی + sidebarهای جستجوی ذخیره‌شده.

چه زمانی استفاده کنیم:

• صفحه‌ی جستجوهای ذخیره‌ی من — grid چندتایی
• panel سمت‌راست داشبورد — لیست quick-runها
• مرور هیستوری گزارش‌سازی که هر گزارش از یک query تولید شد

چه زمانی استفاده نکنیم:

• ایجاد یک query جدید با فیلترهای زنده → از FilterPanel + useFilterPresets (این کارت نمایش است، آن hook ذخیره/بازخوانی است)
• نتایج خود query (لیست پست/concept/etc.) → از DataTable یا PostList
• جستجوی fuzzy لحظه‌ای → از SearchInput یا CommandPalette

زمین بازی

استفاده

import { SavedQueryCard } from '@parto-system-design/ui'

const [starred, setStarred] = React.useState(false)

<SavedQueryCard
  name="گزارش هفتگی — منتقدان سازنده"
  description="نظرات منتقد سازنده در شبکه‌های اجتماعی، ۷ روز اخیر"
  filters={[
    { label: 'گرایش', value: 'منتقد سازنده' },
    { label: 'پلتفرم', value: 'تلگرام، توییتر' },
    { label: 'بازه', value: '۷ روز' },
  ]}
  runCount={48}
  lastRun="۲ روز پیش"
  onRun={() => execute(query)}
  favorite={{ starred, onChange: setStarred }}
/>

ترکیب با useFilterPresets:

import { useFilterPresets, FilterProvider } from '@parto-system-design/ui'

function SavedSearches() {
  const presets = useFilterPresets({ storageKey: 'comments-app:filters' })
  return presets.presets.map((p) => (
    <SavedQueryCard
      key={p.id}
      name={p.name}
      lastRun={new Date(p.updatedAt).toLocaleDateString('fa')}
      onRun={() => presets.load(p.id)}
    />
  ))
}

راهنمای استفاده

جدول ویژگی‌ها

دسترسی‌پذیری

• دکمه favorite (ستاره) aria-label پویا دارد (star/unstar) به همراه aria-pressed={starred} تا screen reader وضعیت toggle را اعلام کند.
• آیکون Search و Clock و Play همگی aria-hidden="true" هستند — معنا از طریق label و متن کنار آن‌ها منتقل می‌شود.
• دکمه‌ی Run یک <button> استاندارد با focus ring است؛ کلید Enter/Space آن را فعال می‌کند.
• ترتیب tab منطقی است: متن کارت → favorite → Run، تا کاربر کیبورد بدون trap به‌سرعت به action برسد.
• lastRun به‌صورت متن نسبی (مثل «۲ روز پیش») رندر می‌شود — اگر دقت ثانیه نیاز است، title با ISO time به consumer اضافه شود.

کامپوننت‌های مرتبط

• ذخیره و بازخوانی state preset → useFilterPresets hook
• alert ذخیره‌شده به‌جای جستجو → AlertRuleCard
• اجرای فیلتر زنده → FilterPanel + FilterProvider
• نتایج همان query → DataTable یا PostList