Backup: fix DataViews list row separators, zebra, selection, pagination

Three layout fidelity fixes after wiring DataViews:

1. Pagination was rendered but inert — DataViews treats `data` as the
   already-paginated page when `paginationInfo` is passed. Slice
   `data` ourselves by `view.page` / `view.perPage` and forward the
   totals; row count now matches the per-page setting and the next/prev
   arrows actually advance the list.

2. Row separators, zebra striping, and the selected-row highlight all
   need to target the per-item `<div>` DataViews wraps each list entry
   in (not the `.dataviews-view-list__item-wrapper`, which is nested
   one level deeper and is therefore always `:nth-child(1)` of its
   parent). The selected state lands on that wrapping div as
   `.is-selected`.

3. The earlier `:global(...)` SCSS escape leaked literally into the
   compiled CSS (these files aren't CSS Modules), so none of the
   DataViews-class selectors were matching. Drop `:global` and write
   the descendant selectors directly under `.jpb-activity-list`.

Also adds in-memory search filtering so the DataViews search box
narrows the visible list before pagination kicks in.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dhasilva

projects/packages/backup/src/dashboard/components/activity-list/index.tsx

@@ -97,6 +97,11 @@ const DEFAULT_PER_PAGE = 10;
  * @return The rendered list.
  */
 export default function ActivityList( { selectedId, onSelect }: Props ) {
+	// In DataViews' list layout, the `titleField`, `mediaField` and
+	// `descriptionField` fields are rendered implicitly — anything else
+	// in `fields` would render a second time as a generic row. Leave
+	// `fields` empty so the title + media + description are the only
+	// things shown per row.
 	const [ view, setView ] = useState< View >( {
 		type: 'list',
 		page: 1,
@@ -106,7 +111,7 @@ export default function ActivityList( { selectedId, onSelect }: Props ) {
 		titleField: 'title',
 		mediaField: 'icon',
 		descriptionField: 'description',
-		fields: [ 'description' ],
+		fields: [],
 	} );
 
 	// Always pull the full fixture; DataViews handles pagination, search,
@@ -165,16 +170,37 @@ export default function ActivityList( { selectedId, onSelect }: Props ) {
 		[ selectedId ]
 	);
 
+	// DataViews treats `data` as the already-paginated/filtered page when
+	// `paginationInfo` is passed. We want client-side everything for the
+	// in-memory fixture, so we slice ourselves and forward the totals.
+	const filtered = useMemo( () => {
+		const q = ( view.search ?? '' ).toLowerCase();
+		if ( ! q ) {
+			return allItems;
+		}
+		return allItems.filter( item => {
+			const haystack = `${ item.title } ${ item.summary ?? '' } ${ item.publishedAt }`;
+			return haystack.toLowerCase().includes( q );
+		} );
+	}, [ allItems, view.search ] );
+
+	const perPage = view.perPage ?? DEFAULT_PER_PAGE;
+	const page = view.page ?? 1;
+	const paged = useMemo(
+		() => filtered.slice( ( page - 1 ) * perPage, page * perPage ),
+		[ filtered, page, perPage ]
+	);
+
 	return (
 		<div className="jpb-activity-list" aria-busy={ isLoading }>
 			<DataViews< ActivityItem >
-				data={ allItems }
+				data={ paged }
 				fields={ fields }
 				view={ view }
 				onChangeView={ setView }
 				paginationInfo={ {
-					totalItems: allItems.length,
-					totalPages: Math.max( 1, Math.ceil( allItems.length / DEFAULT_PER_PAGE ) ),
+					totalItems: filtered.length,
+					totalPages: Math.max( 1, Math.ceil( filtered.length / perPage ) ),
 				} }
 				defaultLayouts={ { list: {} } }
 				getItemId={ getRowId }

projects/packages/backup/src/dashboard/components/activity-list/style.scss

@@ -4,10 +4,35 @@
 	min-height: 0;
 	overflow: hidden;
 
-	// DataViews' list layout doesn't ship a column dedicated to the
-	// "media" field — it renders the field's value inline at the start
-	// of each row. We give that tile a fixed 32x32 white square with
-	// a light border to match the legacy admin's icon affordance.
+	// DataViews wraps each list item in its own per-item `<div>` (which
+	// flips to `.is-selected` when chosen). The `__item-wrapper` is
+	// nested one level deeper, so `:nth-child(even)` on the wrapper never
+	// matches more than itself. Target the per-item `<div>` directly —
+	// it's the only child of `.dataviews-view-list`.
+	.dataviews-view-list > div {
+		border-bottom: 1px solid var(--wp-components-color-gray-100, #f0f0f0);
+
+		&:last-child {
+			border-bottom: 0;
+		}
+
+		// Subtle alternating background — same treatment as Calypso's
+		// activity-log list.
+		&:nth-child(even) {
+			background-color: var(--wp-components-color-gray-100, #fafafa);
+		}
+
+		// DataViews puts `is-selected` on the per-item `<div>` when the
+		// row is chosen via `selection` + `onChangeSelection`.
+		&.is-selected,
+		&.is-selected:nth-child(even) {
+			background-color: var(--wp-admin-theme-color-background, #e0ecf7);
+		}
+	}
+
+	// Tile the media slot in a 32x32 white square with a thin border so
+	// each row reads as "icon | title | description", matching the
+	// legacy admin.
 	&__icon {
 		display: inline-flex;
 		align-items: center;