feat(content-drive): grid view with a table/grid switcher

[rjvelazco]

Closes #37930. Implementation for the spec merged in #37959 (PR 2 of 2).

⚠️ The spec changed after it was approved. This PR carries edits to specs/37930-content-drive-grid-view/spec.md from the 2026-10-13 session: the card follows the design team's revised layout (status and avatar over the image, click opens, checkbox selects, 240px cards, lock always shown), and the view now opens from viewType in the URL → the view remembered for this screen → a custom tool's defaultViewType → the table. The review on this PR added a few more (Back/Forward keep the view, FR-019a; the avatar shows the editor's initial and never calls Gravatar, FR-007; drags highlight folders only). Those edits need a reviewer's re-approval alongside the code.

Proposed Changes

• View switcher (p-selectbutton) beside the search box toggles table ↔ grid.
• Grid view: a second layout of the shared dot-folder-list-view (layout="grid"), with the Drive's dot-content-drive-grid-card (p-card) passed in as a #card template. The card: preview on top (video = still frame, type icon fallback), the editor's initial and the status badge over its top-left corner, checkbox top-right; title; language, content type, lock state and a hover ⋮ menu. Cards are at least 240px wide and fill the row.
• Same behaviour as the table, because it is the same component: shared selection, pagination and page size, sort, context menu, ⋮ menu, drag to folders, file drop to upload, busy cards, skeletons, empty and search-failed states. A click opens the item; the checkbox selects; Shift-click on it selects a range.
• Keyboard: one tab stop; Left/Right/Up/Down/Home/End; Shift+arrows for ranges; Enter/Space select; Shift+F10 opens the actions menu. Focus and anchor carry across a switch. Documented in docs/frontend/KEYBOARD_SHORTCUTS.md.
• Which view opens: viewType URL param (written back on every switch, so a copied link opens in the same view) → the view remembered in localStorage per portlet (dotcms.content-drive.view-type.<portletId>, key worked out once when the Drive opens) → defaultViewType (for Open custom tools in Content Drive with their content types locked #37931) → table. Back/Forward keep the view showing.
• Shared listing (dot-folder-list-view), all opt-in: layout, the #card template (DotFolderListViewCardContext), rows, sortField/sortOrder (a switch back rebuilds the table, which must show the caller's page size and sort). The grid's paginator shares the table's lock, with Previous/Next truly disabled while a page loads. Drag pictures are found by dataKey, and drags highlight folders only (both layouts). Unbound, pickers, the Action Center, edit-content, publishing-queue and experiments behave as before.

Checklist

• Tests — Vitest: portlets-content-drive (2180), ui (2222, including the new dot-folder-list-view.grid.spec.ts), plus the listing's consumers edit-content (2474), publishing-queue (1400), experiments (277). Lint, format:check, strict gate and nx build dotcms-ui pass locally.
• Translations — 8 new keys in Language.properties.
• Security Implications Contemplated — no new data is exposed and nothing is sent to outside services: the avatar draws the first letter of the editor's name with PrimeNG's avatar and never uses the Gravatar directive, since a user without first/last names is named after their email.

Additional Info

• Assumptions under review: the decisions taken without asking (31 of them, with reasons and alternatives) are being reviewed with the author before this leaves draft; any changes they bring will land here.
• No Gravatar on cards: the Drive search returns editor names only, and a name can be an email. Real photos would need the search to return an email or hash: a backend change with a privacy question, left as a possible follow-up.
• Open custom tools in Content Drive with their content types locked #37931 should send the tool's view as defaultViewType, not viewMode/viewType, so it never outranks the user's remembered choice.
• The main shell spec was already at the Vitest worker's heap ceiling, so the shell's grid wiring tests live in dot-content-drive-shell.grid-view.spec.ts; the listing's grid tests live in dot-folder-list-view.grid.spec.ts.
• Browser-checked against a local instance (Chrome, 1440px and 1000px): switching, the URL param, the remembered view, viewType=List overriding it, selection kept across a switch, arrow keys (4 columns at 1440px), folder cards entering the folder, right-click menu, card click opening the editor, and the selected-card border. After the review refactor: no table in the DOM while the grid shows, the tab stop kept across table → grid → table, ⋮ menu closes on a second click, no Gravatar request from cards. No page errors.

Screenshots

Local instance, Chrome, 1440px wide unless noted. Every avatar reads "A" because the editor here is "Admin User".

Grid view, all site content

One card on hover: the ⋮ button appears

The view switcher beside the search box

Folder cards. An owner the listing can't name gets the neutral person icon

Right-click opens the same menu as a table row

1000px window with the folder tree open: two columns

🤖 Generated with Claude Code

This PR fixes: #37930

[claude]

Claude finished @rjvelazco's task in 4m 4s —— View job

---

Review

I read the refactored listing (dot-folder-list-view.component.ts/.html), the grid card, the view-type utils, the store and shell wiring, and the toolbar switcher, and rechecked each prior finding against the current diff.

New Issues

No new blocking issues found. The refactor to a single layout="grid" listing is clean, the shared selection/anchor/page-lock/drag paths are genuinely one code path now, and the message keys all resolve.

A few things I confirmed behave correctly (not findings, just the ones worth stating because they were the risky parts):

• Content cards are not drop targets. onDragOver returns before preventDefault() for non-folders (dot-folder-list-view.component.ts:1573), so the browser never fires drop on a content card — the earlier "UI says allowed, drop silently ignored" case can't happen in either layout.
• No hidden table in grid mode. @if ($isGrid()) renders only the grid (...component.html:10), so dataTable() is undefined and $paginatorPt correctly falls back to $rows() for the prev/next boundary.
• Back/Forward keeps the view. locationSub no longer reads viewType (dot-content-drive.store.ts:759), and the shell's isFolderNavigation now excludes a URL that already names the folder (...shell.component.ts:1659), so a view-only rewrite replaces rather than pushes and Forward survives.

Resolved

• ✅ dot-folder-list-view grid as a separate component → now a second layout of the shared listing; selection, ranges, page lock, drag image and languages map are single copies (dot-folder-list-view.component.ts).
• ✅ #followActiveKey dropping a later report of the old key → the activeKey/activeKeyChange handoff is gone; both layouts read one $activeRowIndex and only the range anchor is carried across (...component.ts:1813).
• ✅ Gravatar request from cards when a display name is an email → the card renders <p-avatar [label]> from $editorInitial and never imports DotGravatarDirective (dot-content-drive-grid-card.component.ts:142, .html:68).
• ✅ Drag preview keyed by identifier → cards and lookup now key on dataKey via data-drag-key/[data-drag-preview], scoped to the host (dot-folder-list-view.component.ts:1666, .html:507, card .html:47).
• ✅ onDragOver accepting any card + missing dragleave → onDragOver gates on #isFolder, onDragLeave clears the highlight and ignores moves onto children (...component.ts:1573,1594).
• ✅ Grid paginator could desync on Enter-while-loading → the grid shares the table's $paginatorPt lock with truly-disabled prev/next, and onGridPageChange resets the paginator on a refused change (...component.ts:672,2018).
• ✅ Back silently switching the view → view is now a preference; viewType is applied once at open via resolveViewType and not re-read on history events (dot-content-drive.store.ts, view-type.ts).
• ✅ Unreachable try/catch + storage key recomputed per switch → key is resolved once in onInit and held in state as viewTypeStorageKey (dot-content-drive.store.ts:698, state models.ts).
• ✅ [pt] with inline body styles → [dt]="{ body: { padding, gap } }", pt carries only the content class (dot-content-drive-grid-card.component.html:25).

Test coverage is substantial for the new behavior (dot-folder-list-view.grid.spec.ts, dot-content-drive-shell.grid-view.spec.ts, view-type.spec.ts, grid-navigation.spec.ts, grid-card.component.spec.ts, store spec additions).

Nice work on the refactor — this reads much better as one component than two listings kept in sync.
• issue-37930-content-drive-grid-view-impl

[zJaaal]

A few more findings from a review pass, on top of the reuse comments above. They're in the code but aren't covered by those threads.

Written by Claude Code on behalf of @zJaaal.