File: src/components/collection-display/entry-list.svelte

Primary table for collection view mode. Data comes from +page.server.ts props; the component does not perform client-side collection fetching.

Platform: Built on the unified Smart Table (createSmartTable server mode) + Collection Filtering. Design-system tables share the same headless controller and pagination primitive.

Architecture

Features (as implemented)

| Plugin columns | availablePlugins → dynamic headers → PluginComponent cells | | Translation UI | Embeds translation-status.svelte in filter toolbar | | Hover preload | preloadEntry() from @utils/navigation on row hover | | Idle warm-cache | First 5 visible rows → POST /api/collections/warm-cache (one ID per request) | | Connection-aware | Disables preload on slow-2g / 2g / saveData (Network Information API) | | Row virtualization | On pages with >25 rows, only visible rows + buffer (5 above/below) render as DOM elements; spacers maintain scroll height |

URL Parameters

Smart Filters (createSmartFilter)

Files:

• src/components/collection-display/create-smart-filter.svelte.ts — reactive factory + pure helpers
• src/components/collection-display/smart-filter-row.svelte — type-aware filter row + badges

Filter control types are derived from collection schema widgets (database-agnostic — no adapter imports):

Unsafe widgets (media, rich text, relations, groups, etc.) are excluded via safeForFiltering: false.

Client API

const smartFilter = createSmartFilter(() => collection.value);

smartFilter.setFilter("status", "publish");
smartFilter.clearFilter("status");
smartFilter.clearAll();

// URL deep-link params: { filter_status: "publish", filter_title: null, ... }
updateURL({ ...smartFilter.toURLParams(), page: "1" });

// Adapter-agnostic server payload (contains operator — adapters interpret)
smartFilter.toFilterQuery(); // { status: { contains: "publish" } }

Security & architecture (must stay enforced server-side)

Shared modules

Architecture docs

• Collection Filtering Platform — core capability (schema, FLAC, QueryBuilder, cache)
• Cache System — L1/L2, getOrSetSWR, prefix invalidation, negative caching rules
• Content API — list query params — search / filter_* / global search vs column filters
• Data Operations — import/sync/apply must invalidate collection list caches

Props

interface EntryListProps {
  entries: Entry[];
  pagination: {
    currentPage: number;
    pageSize: number;
    totalItems: number;
    pagesCount: number;
  };
  contentLanguage: string;
  breadcrumb?: Array<{ name: string; path: string }>;
  collectionStats?: {
    _id: string;
    name: string;
    count: number;
    lastModified: string;
  } | null;
}

Keyboard Shortcuts

Shortcuts are implemented on entry-list-multi-button, not in entry-list.svelte directly:

Row Virtualization

When the page size exceeds 25 rows (useRowVirtualization = $derived(pageSize > 25)), the component activates row virtualization to avoid rendering all rows into the DOM:

• Row height: 44px per row (defined in src/utils/table-constants.ts)
• Buffer: 5 rows rendered above and below the visible viewport to prevent blank flashes during scroll
• Scroll container: max-h-[calc(100dvh)] with overflow-auto; scroll position tracked via onscroll handler
• Index mapping: {@const realIndex = virtualStartIndex + idx} preserves selection state across virtual/non-virtual modes
• content-visibility: auto: Applied to virtualized rows for additional browser-level rendering optimization

Key state variables:

Scheduling Note

Bulk Schedule from MultiButton calls onSchedule(date) which sets a _scheduled timestamp payload on selected entries. The full schedule-modal (date/time/action picker) is opened from header-edit / right-sidebar / entry-actions.ts via showScheduleModal(), not from the bulk schedule stub.

Plugin Columns

Plugins register ui.columns in their definition. entry-list adds headers and renders cells with:

<PluginComponent
  pluginId={...}
  componentName={header.component}
  {...mapPluginProps(header.props, entry)}
/>

Zone for list-level plugin UI: dashboard slot list_actions (see plugin docs).

Related Documentation

• MultiButton
• translation-status
• fields
• Collection page load tiers
• Cache System — L1/L2 SWR + collection:{id}:query:{hash}
• Content API query params — search / filter_* / global search
• Data Operations — invalidate list caches after import/sync
• Unit tests: tests/unit/components/create-smart-filter.test.ts, tests/unit/utils/collection-query-filters.test.ts