feat: refresh snippet table, preview and notice presentation

[imantsk]

Summary

Community Cloud

• show page-level loading and error notices for Community Cloud requests, announced through live regions
• share download state across cards, table rows and the preview so every action reflects a completed download
• add download or edit actions to cloud snippet previews

Preview modal

• move the type badge into the modal header, and style the modal actions with the plugin control tokens

Snippet tables

• apply one canonical checkbox style across cards, tables, the toolbar and settings
• line checkbox cells up across the header, footer and both row states, and reserve the active-row accent border so rows no longer shift when toggled
• centre row contents and the activate column, and match column padding between the snippets and cloud tables
• unify row action colours, including hover, and add a focus ring to snippet type badges

Admin chrome

• hide foreign admin notices on every plugin screen, keeping notices owned by the plugin and by WordPress settings visible
• mark notices rendered by the plugin as its own, so the filter cannot hide them
• match the add new button to the other plugin buttons, and align the upgrade button icon

Tests

• consolidate the end-to-end coverage added here into fewer page loads, and stub the cloud requests before the first navigation
• cover row alignment, badge focus, cross-mount download state and the notice filtering rules

Compatibility

• WordPress 6.4 and newer display the preview type badge in the modal header. WordPress 5.5–6.3 ignore the unsupported header action prop; the modal remains functional without the badge.

Verification

• npx eslint src tests
• npx stylelint "src/css/**/*.scss"
• phpcs
• npm run build
• Playwright: full suite across both storage targets, 168 checks

Note

• The preview modal trash action uses the destructive colours as literals, matching the twenty existing occurrences across the stylesheets. _theme.scss has no destructive token yet; adding one and converting every occurrence is tracked separately, so that this change does not leave a token and a literal in use for the same colour.

[imantsk]

there should be abetter solution imo

[imantsk]

the absolute positioning and magic offsets are gone. The badge now renders as the first row of the modal content, aligned to the inline end under the title, plain flex flow (f740d76). Placement is covered by the geometry assertions in the preview spec.

[code-snippets-bot]

• Medium — tests/e2e/code-snippets-community-featured.spec.ts:106: The new loading test does not type-check because releaseRequest is inferred as () => undefined and cannot receive the Promise resolver. Give it an explicit () => void type and assign a zero-argument wrapper around resolve.

• Medium — src/js/components/common/LoadingStatusNotices.tsx:21: Loading and error updates are inserted as plain region landmarks, so assistive technology is not notified when either state changes. Reuse the existing Notice component with status/polite semantics for loading and alert/assertive semantics for errors, then update the E2E roles.

• Medium — src/js/components/common/cloud/CloudSnippetPreviewModal.tsx:20: The preview and card/table mount independent download-button state, so downloading in the preview leaves the underlying action as Download and a second click creates another local copy. Share the resolved local snippet ID with sibling actions or refresh cloud results after success.

[imantsk]

Addressed all three findings: the loading and error notices now use live-region semantics (role="status" polite / role="alert") so state changes are announced; downloading from the preview refreshes the shared cloud results, so every action for that snippet flips to Edit and repeat downloads are prevented, with e2e coverage; and releaseRequest is explicitly typed () => void with a zero-argument resolver wrapper. Verified with lint, PHPUnit (single and multisite), the build, and the featured + preview Playwright suites.

[code-snippets-bot]

• Medium — src/js/components/common/cloud/CloudSnippetDownloadButton.tsx:28: Each button still owns its downloaded ID, while onDownloaded only starts an asynchronous refresh; closing the preview before that refresh completes—or after it fails—leaves the sibling Download action enabled and permits another download POST. Lift the resolved ID and pending state to the row/card and share them between both buttons, with a delayed/failed-refresh test.

[imantsk]

Download state is now owned by a shared per-snippet provider rather than each button: card, table, and preview actions read the same pending/downloaded record, so a download in the preview immediately flips every sibling action and repeat downloads are prevented even before the results refresh completes or if it fails. Covered by e2e cases for the delayed-refresh and failed-refresh paths. Verified with lint, PHPUnit (single and multisite), the build, and the featured + preview Playwright suites.

[code-snippets-bot]

Download and install

📦 code-snippets.4.0.0-beta.2.zip