جای فیلترها — سایدبار فیلتر یا نوار ابزار

معرفی

هر صفحه فیلترهایش را فقط در یکی از دو جا می‌گذارد (تصمیم مالک، 9 اکتبر 2026):

• (الف) سایدبار فیلتر: ستون دوم ProductFrame، کنار منو، با همه‌چیز داخلش: سربرگ «N فیلتر فعال · پاک کردن همه»، چیپ‌های مقدار فعال زیر آن، و هر بخش با نشانگر فعال خودش و کنترلی متناسب با داده. نوار ابزار فقط جست‌وجو، مرتب‌سازی و اقدام‌ها را دارد: نه دکمهٔ «فیلترها»، نه چیپ، نه «پاک کردن فیلترها».
• (ب) نوار ابزار: چند فیلتر کشویی (حداکثر 4) بالای فهرست. هر ماشه مقدار خودش را نشان می‌دهد، پس چیپ لازم نیست.

پنلی کنار نتیجه‌ها با دکمهٔ «فیلترها» در نوار ابزار، یا چیپ‌های فیلتر بالای نتیجه‌ها کنار پنل، دیگر جایی ندارد (منسوخ در 7.13). هر بُعد یک فیلتر است (پلتفرم، احساس، موضوع، بازهٔ زمانی)؛ جست‌وجو و مرتب‌سازی بُعد فیلتر نیستند.

نمونه بصری

قاعده

• شمار بُعدها اول تصمیم می‌گیرد: حداکثر 4 بُعد که گاه‌به‌گاه عوض می‌شوند ⇒ نوار ابزار. 5 بُعد یا بیشتر، بُعدهایی که کنار هر مقدار شمار دارند، یا صفحه‌ای که کار اصلی‌اش فیلتر کردن است (جست‌وجو، کاوش، تحلیل یک نتیجهٔ بزرگ) ⇒ سایدبار فیلتر. صفحهٔ جدولی با 2 بُعد یا کمتر هرگز سایدبار نمی‌گیرد.
• ستون دوم در هر صفحه یا ناوبری است یا فیلتر. اگر secondaryNav همان صفحه ستون را گرفته باشد، قاب نباشد یا کنار ستون کمتر از 40rem برای محتوا بماند، همان بخش‌های سایدبار نوار افقی بالای فهرست می‌شوند: هر بخش یک Popover با همان کنترل‌ها و ماشه‌ای که مقدار خودش را نشان می‌دهد. زیر 36rem محتوا در Sheet. ستون سوم یا فیلتر زیر ناوبری ساخته نمی‌شود.
• هرگز هر دو با هم (filters و filterPanel خطای نوع است). وضعیت فیلترها وضعیت صفحه است (React.useState)؛ هر تغییر فوراً اعمال می‌شود و فهرست از اول بار می‌شود. دکمهٔ «اعمال» نیست.

کدام صفحه، کدام جا

پیاده‌سازی

(الف) سایدبار فیلتر

پنل را به filterPanel قالب بدهید و placement را ننویسید. قالب آن را به ستون دوم قاب می‌برد (با ProductFrame filterSidebarWidth="wide" عرض 18rem، مثل صفحهٔ Logs در Supabase و Prototype) و activeFilters را بالای خود پنل رسم می‌کند. شرح کامل، کنترل‌ها و Props در سایدبار فیلتر.

<ListPage
  title="جست‌وجوی پست‌ها"
  content="feed"
  query={{ value: typed, onValueChange: setTyped, onSubmit: submit, submitted, label: 'جست‌وجو در پست‌ها' }}
  filterPanel={{ panel: <PostFilters />, activeCount }}
  // داخل سایدبار، زیر «N فیلتر فعال · پاک کردن همه» — هرگز در نوار ابزار
  activeFilters={chips}
  filtered={activeCount > 0}
  onClearFilters={clearFacets}
  state={state}
  loadMore={list.loadMore}
>
  <EntityCollection entity="post" items={posts} getId={(post) => post.id} renderItem={renderPost} />
</ListPage>

داخل سایدبار، به ترتیب Supabase: بازهٔ زمانی اول و باز (FilterSectionPeriod، با relativeInput روی تقویم)، بُعدهای پرتکرار باز، کم‌کاربردها با defaultOpen={false} و summary. کنترل هر بخش از نوع داده می‌آید: هیجان و تازگی FilterSectionChoices variant="chips" با رنگ و آیکون، منبع و زبان cards، دیدگاه swatches، سطح بحران levelCards، عدد FilterSectionRange، فهرست بلند FilterSectionOptions (جعبهٔ مرزدار، شمار، «فقط»، جست‌وجو).

(ب) نوار ابزار

فیلترها در ردیف نوار ابزار بعد از جست‌وجو می‌آیند و «پاک کردن فیلترها» در انتهایشان:

<ListPage
  title="منشن‌ها"
  search={<SearchInput placeholder="جست‌وجو در منشن‌ها" aria-label="جست‌وجو در منشن‌ها" value={q} onChange={onQ} />}
  filters={
    <>
      <DataTableFacetedFilter title="پلتفرم" options={PLATFORMS} selected={platforms} onSelectedChange={onPlatforms} />
      <DataTableFacetedFilter
        title="احساس"
        options={SENTIMENTS}
        selected={sentiments}
        onSelectedChange={onSentiments}
      />
      <DateRangePicker value={range} onChange={onRange} placeholder="بازهٔ زمانی" />
    </>
  }
  filtered={filtered}
  onClearFilters={clear}
  state={state}
  loadMore={list.loadMore}
>
  <DataTable columns={columns} data={rows} />
</ListPage>

الگوهای رایج

ستون دوم با ناوبری بخش

صفحه‌ای که ستون دومش ناوبری بخش است (مثلاً زیرصفحه‌های «جست‌وجو»)، همان سایدبار را به‌صورت نوار افقی بالای فهرست می‌گیرد. هر بخش یک Popover است و ماشه‌اش مقدار فعال را نشان می‌دهد؛ «پاک کردن فیلترها» در انتهای نوار است.

صفحهٔ کاوش با جدول

همان سایدبار برای صفحهٔ جدولی با بُعدهای شمارش‌دار. نمونهٔ قابل‌کامپایل: npx --no parto-ui example list-page-filter-panel.

ستون جمع‌شدنی

collapsible اختیاری و پیش‌فرض خاموش است (در Prototype هم خاموش). محصولی که روشنش کند، ستون را با «بستن فیلترها» یا Ctrl+B می‌بندد و از زبانهٔ «فیلترها» در خود قاب (با شمار فیلتر فعال) برمی‌گرداند؛ هرگز دکمه‌ای در نوار ابزار.

بهترین روش‌ها و دام‌های رایج

• سایدبار را یک ستون آرام ببینید، نه کارت: پس‌زمینهٔ خود ستون قاب، بی جعبه و بی سایه.
• فیلتری که بخش ندارد (کلیک روی نمودار) یک FilterSection با summary بگیرد تا در سایدبار و نوار افقی دیده شود.
• دام: دکمهٔ «فیلترها» در نوار ابزار دسکتاپ، چیپ‌های فیلتر بالای نتیجه‌ها، یا فوتر «اعمال» در سایدبار.
• دام: placement: 'page' یا FilterPanelLayout (منسوخ؛ هشدار توسعه و ESLint).
• دام: همهٔ بخش‌ها فهرست چک‌باکس.
• بررسی خودکار: ESLint parto/filter-placement (در recommended، سطح warn) بیش از 4 فیلتر در نوار، صفحهٔ جدولی‌ای که پنلش 1 یا 2 بخش دارد، placement: 'page'، FilterPanelLayout، FilterPanelTrigger بیرون از SheetTrigger، و FilterBarActiveFilters کنار یک FilterPanel را نشان می‌دهد. ListPage در زمان توسعه هم هشدار می‌دهد.

صفحات مرتبط

• سایدبار فیلتر (FilterPanel)
• صفحهٔ فهرست (ListPage)
• انتخاب بصری در فیلتر (FilterSectionChoices)
• نوار فیلتر (FilterBar)
• صفحهٔ تحلیل