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, multi-column sorting, and pagination primitive.

Architecture

Features (as implemented)

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 & Grid Navigation

Shortcuts and accessible keyboard grid navigation follow WCAG 2.2 AA and ATAG 2.0 standards:

Global Action Shortcuts

Accessible Grid Traversal (Roving Tabindex)

When focused on the table body or card view container:

Multi-Column Sort & Ordinal Ranks

Clicking a table header toggles directional sort (asc → desc → none). Holding Shift + Click composes multi-column sorting:

• Ordinal Indicators: Badges (1, 2, 3) appear adjacent to sort direction chevrons to indicate priority order.
• Server Serialization: Multi-sort queries serialize to URL parameter sort=field1:asc,field2:desc which the SSR loader consumes.
• Client Cascading: In client mode, secondary and tertiary comparators break ties sequentially.

Responsive Card Mode

The table toolbar includes a View Mode switcher allowing seamless toggling between Table View and Responsive Card Grid View:

• Card Presentation: Each card renders the selection checkbox, title/ID, status badge, top visible schema fields, relative timestamps, and quick edit action.
• Persistence: Saved per-collection in SmartTableLayoutPrefs (layoutKey: entry-list:{collectionId}).
• Mobile Viewports: Optimized for touch targets (≥40px) and auto-collapses dense multi-column headers on small viewports (<768px).

Advanced Filter Operators Modal

In addition to inline scalar column filters, clicking Advanced Filters opens AdvancedFilterModal:

• Compound Logic: Select between ALL conditions (AND) and ANY condition (OR).
• Field-Specific Operators: Text fields support equals, contains, starts_with, ends_with, is_empty, and is_not_empty. Numeric/date fields support =, ≠, >, ≥, <, ≤.
• Badge Indicators: The active filter count badge reflects total applied compound clauses.

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:

Draft, Status & Scheduled Publishing

The list always renders a system status column unless the collection schema already declares a field named status. The row badge maps the stored values as follows:

The schedule timestamp _scheduled lives inside the entry data payload and is not shown in the list.

Changing status from the list

• Clicking the status cell proposes the next status and asks for confirmation: draft → publish, publish → unpublish, unpublish → publish, schedule → publish, any other value → publish.
• The update is a single-entry PATCH /api/collections/:id/:entryId/status with { status }. Publishing is gated server-side by required-field validation and the workflow publication gate.
• Bulk Published / Unpublished / Draft actions and Alt+P / Alt+U / Alt+D send one POST /api/collections/:id/batch with action: "status". Bulk status changes do not ask for confirmation.
• Collection mutations require collections:write; administrators bypass endpoint permission checks.

Status facets

• Facet counts are streamed from the server and are tenant-wide. They are not narrowed by the current search, column filters, or advanced filters.
• Counts cover publish, draft, unpublish, schedule, and archive only. Zero-count chips are hidden unless they are the active filter.
• Selecting a chip writes filter_status and opens the filter row.
• The legacy importer value "published" is not counted by the Published facet or filter — only "publish" is.

Scheduled publishing

The date/time/action picker is opened from the single-entry editor (header-edit on mobile, right-sidebar on desktop), not from the list. See fields for the full workflow.

Known limitations of the list surface:

• Bulk scheduling has no future-date picker.
• Cancelling a schedule is only available from the desktop sidebar and does not delete the already-created job.
• Re-saving a scheduled entry creates another job; jobs are not deduplicated.
• Scheduled unpublish/delete selections are not persisted — the job always targets publish.

Autosave interaction

Leaving the editor with unsaved changes runs the navigation-guard autosave. Existing entries keep their loaded status (and schedule timestamp); only new entries are saved as draft. If the edited payload fails the publish gate, the autosave is rejected and navigation stays on the form. See fields.

Archive toggle

showDeleted does not switch the list to archived entries. It only changes delete semantics (archive vs permanent delete) and the toolbar icon; the SSR loader ignores it.

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