From 5c710b61529dfa68ced38095cab2ab0c44eee3c1 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:29:31 +0300
Subject: [PATCH 01/12] feat: add a guarded extra-actions slot to the snippet
 preview modal

---
 .../components/common/SnippetPreviewModal.tsx | 72 +++++++++++++++----
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index d535b9fb5..210cdfd69 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -15,6 +15,14 @@ import type { Snippet, SnippetType } from '../../types/Snippet'
 
 const CODE_PREVIEW_LABEL = __('Snippet code preview', 'code-snippets')
 
+export interface PreviewWorkingState {
+	isWorking: boolean
+	beginWorking: () => boolean
+	finishWorking: () => void
+}
+
+export type PreviewExtraActions = (working: PreviewWorkingState) => ReactNode
+
 export interface SnippetPreviewModalProps {
 	title: string
 	code: string
@@ -23,6 +31,7 @@ export interface SnippetPreviewModalProps {
 	setIsOpen: (isOpen: boolean) => void
 	snippet?: Snippet
 	footerActions?: ReactNode
+	extraActions?: PreviewExtraActions
 }
 
 const EDITOR_MODES: Record<string, string> = {
@@ -47,19 +56,49 @@ const getPreviewEditorSettings = (type: string): EditorConfiguration => ({
 interface SnippetPreviewActionsProps {
 	snippet: Snippet
 	closeModal: () => void
+	extraActions?: PreviewExtraActions
 }
 
 interface SnippetPreviewButtonsProps extends SnippetPreviewActionsProps {
 	requestDelete: () => void
-	isWorking: boolean
-	setIsWorking: (working: boolean) => void
+	working: PreviewWorkingState & { setIsWorking: (working: boolean) => void }
+}
+
+/**
+ * Tracks whether a footer action is in flight. The ref mirrors the state so
+ * `beginWorking` can reject re-entry within the same tick, before React
+ * re-renders with the disabled buttons.
+ */
+const useWorkingState = () => {
+	const [isWorking, setIsWorking] = useState(false)
+	const isWorkingRef = useRef(false)
+	const updateWorking = (value: boolean) => {
+		isWorkingRef.current = value
+		setIsWorking(value)
+	}
+
+	return {
+		isWorking,
+		beginWorking: () => {
+			if (isWorkingRef.current) {
+				return false
+			}
+
+			updateWorking(true)
+			return true
+		},
+		finishWorking: () => updateWorking(false),
+		setIsWorking: updateWorking
+	}
 }
 
 const usePreviewActionHandlers = ({
 	snippet,
 	closeModal,
 	setIsWorking
-}: Omit<SnippetPreviewButtonsProps, 'requestDelete' | 'isWorking'>) => {
+}: Pick<SnippetPreviewActionsProps, 'snippet' | 'closeModal'> & {
+	setIsWorking: (working: boolean) => void
+}) => {
 	const api = useSnippetsAPI()
 	const { refreshSnippetsList } = useSnippetsList()
 	const handleClone = () => {
@@ -87,10 +126,11 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
 	snippet,
 	closeModal,
 	requestDelete,
-	isWorking,
-	setIsWorking
+	working,
+	extraActions
 }) => {
 	const canModify = canModifySnippet(snippet)
+	const { isWorking, setIsWorking } = working
 	const actionOptions = { snippet, closeModal, setIsWorking }
 	const { handleClone, handleExport } = usePreviewActionHandlers(actionOptions)
 
@@ -118,6 +158,8 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
 				{__('Export', 'code-snippets')}
 			</Button>
 
+			{extraActions?.(working)}
+
 			{snippet.locked || !canModify
 				? null
 				: <Button
@@ -139,13 +181,14 @@ const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
  */
 const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({
 	snippet,
-	closeModal
+	closeModal,
+	extraActions
 }) => {
 	const { refreshSnippetsList } = useSnippetsList()
-	const [isWorking, setIsWorking] = useState(false)
+	const working = useWorkingState()
 	const { requestDelete, confirmDialog } = useDeleteSnippet({
 		snippet,
-		setIsWorking,
+		setIsWorking: working.setIsWorking,
 		onSuccess: () => {
 			closeModal()
 			return refreshSnippetsList()
@@ -159,8 +202,8 @@ const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({
 				snippet={snippet}
 				closeModal={closeModal}
 				requestDelete={requestDelete}
-				isWorking={isWorking}
-				setIsWorking={setIsWorking}
+				working={working}
+				extraActions={extraActions}
 			/>
 
 			<div className="code-snippets-preview-modal__priority">
@@ -198,7 +241,8 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 	isOpen,
 	setIsOpen,
 	snippet,
-	footerActions
+	footerActions,
+	extraActions
 }) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
 
@@ -239,7 +283,11 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			</div>
 
 			{snippet
-				? <SnippetPreviewActions snippet={snippet} closeModal={() => setIsOpen(false)} />
+				? <SnippetPreviewActions
+					snippet={snippet}
+					extraActions={extraActions}
+					closeModal={() => setIsOpen(false)}
+				/>
 				: <PreviewFooterActionsWrapper>{footerActions}</PreviewFooterActionsWrapper>}
 		</Modal>
 		: null

From 1a4049662f36e80569863a8a458a24a682c9f1d8 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:29:41 +0300
Subject: [PATCH 02/12] fix: limit cloud snippet selection to downloadable
 snippets

---
 .../ManageMenu/CommunityCloud/CloudSearch.tsx |  42 ++---
 .../CommunityCloud/CloudSnippetsTable.tsx     |  76 +++++----
 src/js/utils/snippets/cloud.ts                |   8 +
 tests/e2e/cloud-download-eligibility.spec.ts  | 153 ++++++++++++++++++
 .../code-snippets-community-featured.spec.ts  |   7 +-
 5 files changed, 232 insertions(+), 54 deletions(-)
 create mode 100644 src/js/utils/snippets/cloud.ts
 create mode 100644 tests/e2e/cloud-download-eligibility.spec.ts

diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 862e4eaca..d387143d6 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -4,8 +4,7 @@ import classnames from 'classnames'
 import { Spinner } from '@wordpress/components'
 import { useRestAPI } from '../../../hooks/useRestAPI'
 import { REST_BASES } from '../../../utils/restAPI'
-import { isLicensed } from '../../../utils/screen'
-import { isProSnippet } from '../../../utils/snippets/snippets'
+import { isCloudSnippetDownloadable } from '../../../utils/snippets/cloud'
 import { TableNav } from '../../common/ListTable/TableNavigation'
 import { LoadingStatusNotices } from '../../common/LoadingStatusNotices'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
@@ -67,9 +66,6 @@ const SearchBox = () => {
 	)
 }
 
-const isSnippetDownloadable = (snippet: CloudSnippetSchema): boolean =>
-	!snippet.local_id && (isLicensed() || !isProSnippet(snippet))
-
 interface SearchResultsGridProps {
 	snippets: CloudSnippetSchema[]
 	selected: Set<CloudSnippetSchema['id']>
@@ -88,19 +84,21 @@ const SearchResultsGrid: React.FC<SearchResultsGridProps> = ({ snippets, selecte
 				snippet={result}
 				author={<CloudSnippetAuthor codevaultSlug={result.codevault} />}
 				isSelected={selected.has(result.id)}
-				onSelectedChange={isSelected => {
-					setSelected(previous => {
-						const updated = new Set(previous)
-
-						if (isSelected) {
-							updated.add(result.id)
-						} else {
-							updated.delete(result.id)
-						}
-
-						return updated
-					})
-				}}
+				onSelectedChange={isCloudSnippetDownloadable(result)
+					? isSelected => {
+						setSelected(previous => {
+							const updated = new Set(previous)
+
+							if (isSelected) {
+								updated.add(result.id)
+							} else {
+								updated.delete(result.id)
+							}
+
+							return updated
+						})
+					}
+					: undefined}
 			/>)}
 	</ul>
 
@@ -130,7 +128,7 @@ const useSearchResultsSelection = () => {
 	): Promise<void> => {
 		if ('download' === action) {
 			await Promise.all((searchResults?.snippets ?? [])
-				.filter(snippet => selectedIds.has(snippet.id) && isSnippetDownloadable(snippet))
+				.filter(snippet => selectedIds.has(snippet.id) && isCloudSnippetDownloadable(snippet))
 				.map(({ id }) => api.post(`${REST_BASES.cloud.snippets}/${id}/download`)))
 
 			doSearch()
@@ -166,7 +164,11 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 				which="top"
 				actions={CLOUD_BULK_ACTIONS}
 				doAction={doAction}
-				selectAllKeys={searchResults.snippets.map(snippet => snippet.id)}
+				selectAllKeys={'card' === snippetView
+					? searchResults.snippets
+						.filter(snippet => isCloudSnippetDownloadable(snippet))
+						.map(snippet => snippet.id)
+					: undefined}
 				extraTableNav={() => <SearchFilters />}
 				endTableNav={which =>
 					'top' === which
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
index a81777748..a53bdaec3 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
@@ -1,5 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n'
 import React, { useState } from 'react'
+import { isCloudSnippetDownloadable } from '../../../utils/snippets/cloud'
 import { getSnippetType } from '../../../utils/snippets/snippets'
 import { stripTags, truncateChars } from '../../../utils/text'
 import { Badge } from '../../common/Badge'
@@ -24,8 +25,8 @@ const updateSelection = (setSelected: SetSelected, ids: CloudSnippetId[], isSele
 
 interface CloudSnippetRowProps {
 	snippet: CloudSnippetSchema
-	selected: Set<CloudSnippetId>
-	setSelected: SetSelected
+	selected?: Set<CloudSnippetId>
+	setSelected?: SetSelected
 }
 
 interface CloudSnippetActionsProps extends Pick<CloudSnippetRowProps, 'snippet'> {
@@ -65,20 +66,22 @@ const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet, selected, se
 
 	return (
 		<tr>
-			<th scope="row" className="check-column">
-				<input
-					id={`cb-select-${snippet.id}`}
-					type="checkbox"
-					name="checked[]"
-					checked={selected.has(snippet.id)}
-					aria-label={sprintf(
-						// translators: %s: snippet name.
-						__('Select %s', 'code-snippets'),
-						snippet.name
-					)}
-					onChange={event => updateSelection(setSelected, [snippet.id], event.target.checked)}
-				/>
-			</th>
+			{selected && setSelected
+				? <th scope="row" className="check-column">
+					{isCloudSnippetDownloadable(snippet) && <input
+						id={`cb-select-${snippet.id}`}
+						type="checkbox"
+						name="checked[]"
+						checked={selected.has(snippet.id)}
+						aria-label={sprintf(
+							// translators: %s: snippet name.
+							__('Select %s', 'code-snippets'),
+							snippet.name
+						)}
+						onChange={event => updateSelection(setSelected, [snippet.id], event.target.checked)}
+					/>}
+				</th>
+				: null}
 
 			<td className="column-name column-primary">
 				<strong>
@@ -110,29 +113,39 @@ const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet, selected, se
 
 export interface CloudSnippetsTableProps {
 	snippets: CloudSnippetSchema[]
-	selected: Set<CloudSnippetId>
-	setSelected: SetSelected
+	selected?: Set<CloudSnippetId>
+	setSelected?: SetSelected
 }
 
 /**
  * Table view for lists of cloud snippets (community search results and
  * bundle contents), mirroring the card actions. Descriptions are clamped
- * so all rows stay the same height.
+ * so all rows stay the same height. Selection is only offered when the
+ * containing view provides selection state, as bundle contents have no
+ * bulk actions.
  */
-export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({ snippets, selected, setSelected }) =>
-	<table className="wp-list-table widefat fixed striped cloud-snippets-table">
+export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({
+	snippets,
+	selected,
+	setSelected
+}) => {
+	const downloadable = snippets.filter(snippet => isCloudSnippetDownloadable(snippet))
+
+	return <table className="wp-list-table widefat fixed striped cloud-snippets-table">
 		<thead>
 			<tr>
-				<td className="column-cb check-column">
-					<input
-						id="cb-select-all-cloud-snippets"
-						type="checkbox"
-						checked={0 < snippets.length && snippets.every(snippet => selected.has(snippet.id))}
-						aria-label={__('Select all snippets', 'code-snippets')}
-						onChange={event =>
-							updateSelection(setSelected, snippets.map(snippet => snippet.id), event.target.checked)}
-					/>
-				</td>
+				{selected && setSelected
+					? <td className="column-cb check-column">
+						<input
+							id="cb-select-all-cloud-snippets"
+							type="checkbox"
+							checked={0 < downloadable.length && downloadable.every(snippet => selected.has(snippet.id))}
+							aria-label={__('Select all snippets', 'code-snippets')}
+							onChange={event =>
+								updateSelection(setSelected, downloadable.map(snippet => snippet.id), event.target.checked)}
+						/>
+					</td>
+					: null}
 				<th scope="col" className="column-name column-primary">{__('Name', 'code-snippets')}</th>
 				<th scope="col" className="column-type">{__('Type', 'code-snippets')}</th>
 				<th scope="col" className="column-status">{__('Status', 'code-snippets')}</th>
@@ -147,3 +160,4 @@ export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({ snippets
 				<CloudSnippetRow key={snippet.id} {...{ snippet, selected, setSelected }} />)}
 		</tbody>
 	</table>
+}
diff --git a/src/js/utils/snippets/cloud.ts b/src/js/utils/snippets/cloud.ts
new file mode 100644
index 000000000..74041d8e2
--- /dev/null
+++ b/src/js/utils/snippets/cloud.ts
@@ -0,0 +1,8 @@
+import { isLicensed } from '../screen'
+import { isProSnippet } from './snippets'
+import type { CloudSnippetSchema } from '../../types/schema/CloudSnippetSchema'
+
+export const isCloudSnippetDownloadable = (
+	snippet: Pick<CloudSnippetSchema, 'scope' | 'local_id'>
+): boolean =>
+	!snippet.local_id && (!isProSnippet(snippet) || isLicensed())
diff --git a/tests/e2e/cloud-download-eligibility.spec.ts b/tests/e2e/cloud-download-eligibility.spec.ts
new file mode 100644
index 000000000..8d9eecc0d
--- /dev/null
+++ b/tests/e2e/cloud-download-eligibility.spec.ts
@@ -0,0 +1,153 @@
+import { expect, test } from '@playwright/test'
+import { CloudStatus } from '../../src/js/types/schema/CloudSnippetSchema'
+import { URLS } from './helpers/constants'
+import type { CloudSnippetSchema } from '../../src/js/types/schema/CloudSnippetSchema'
+import type { Page } from '@playwright/test'
+
+const cloudSnippet = (fields: Partial<CloudSnippetSchema> & Pick<CloudSnippetSchema, 'id' | 'name'>): CloudSnippetSchema => ({
+	slug: `snippet-${fields.id}`,
+	description: '',
+	code: 'phpinfo();',
+	tags: [],
+	scope: 'global',
+	codevault: 'testvault',
+	total_votes: 0,
+	vote_count: 0,
+	wp_tested: '6.7',
+	status: CloudStatus.Public,
+	created: '2026-01-01 00:00:00',
+	updated: '2026-01-01 00:00:00',
+	revision: 1,
+	is_owner: false,
+	local_id: null,
+	update_available: false,
+	...fields
+})
+
+const ELIGIBLE = cloudSnippet({ id: 101, name: 'Eligible Alpha' })
+const LINKED = cloudSnippet({ id: 102, name: 'Linked Beta', local_id: 42 })
+const PRO_LOCKED = cloudSnippet({ id: 103, name: 'Pro Gamma', scope: 'site-css' })
+const ELIGIBLE_OTHER = cloudSnippet({ id: 104, name: 'Eligible Delta' })
+
+interface CloudRoutesState {
+	snippets: CloudSnippetSchema[]
+	downloads: number[]
+}
+
+const forceLicenseState = (page: Page, isLicensed: boolean) =>
+	page.addInitScript(licensed => {
+		let value: { isLicensed?: boolean } | undefined
+
+		Object.defineProperty(window, 'CODE_SNIPPETS', {
+			configurable: true,
+			get: () => value,
+			set: (incoming: { isLicensed?: boolean } | undefined) => {
+				value = incoming ? { ...incoming, isLicensed: licensed } : incoming
+			}
+		})
+	}, isLicensed)
+
+const routeCloudSnippets = (page: Page, state: CloudRoutesState) =>
+	page.route(url => decodeURIComponent(url.href).includes('cloud/snippets'), async route => {
+		const url = decodeURIComponent(route.request().url())
+		const download = /cloud\/snippets\/(?<id>\d+)\/download/.exec(url)
+
+		if (download && 'POST' === route.request().method()) {
+			state.downloads.push(Number(download.groups?.id))
+			await route.fulfill({ json: { snippet: null } })
+		} else {
+			await route.fulfill({
+				json: {
+					snippets: state.snippets,
+					page: 1,
+					total_pages: 1,
+					total_snippets: state.snippets.length
+				}
+			})
+		}
+	})
+
+const openCommunityCloud = async (page: Page, view: 'table' | 'card') => {
+	await page.goto(URLS.COMMUNITY_CLOUD)
+	await expect(page.locator('.cloud-search')).toBeVisible()
+	await page.getByTitle(`Switch to ${view} view`).click()
+}
+
+const applyBulkDownload = async (page: Page) => {
+	await page.locator('#bulk-action-selector-top').selectOption('download')
+	await page.locator('#doaction').click()
+}
+
+test.describe('Cloud bulk download eligibility', () => {
+	test('unlicensed table view only offers and downloads eligible snippets', async ({ page }) => {
+		const state: CloudRoutesState = { snippets: [ELIGIBLE, LINKED, PRO_LOCKED], downloads: [] }
+		await forceLicenseState(page, false)
+		await routeCloudSnippets(page, state)
+		await openCommunityCloud(page, 'table')
+
+		const table = page.locator('.cloud-snippets-table')
+		await expect(table.getByRole('checkbox', { name: 'Select Eligible Alpha' })).toBeVisible()
+		await expect(table.getByRole('checkbox', { name: 'Select Linked Beta' })).toHaveCount(0)
+		await expect(table.getByRole('checkbox', { name: 'Select Pro Gamma' })).toHaveCount(0)
+
+		await table.getByRole('checkbox', { name: 'Select all snippets' }).check()
+		await expect(table.getByRole('checkbox', { name: 'Select Eligible Alpha' })).toBeChecked()
+
+		await applyBulkDownload(page)
+		await expect.poll(() => state.downloads).toEqual([ELIGIBLE.id])
+	})
+
+	test('unlicensed card view select-all only downloads eligible snippets', async ({ page }) => {
+		const state: CloudRoutesState = { snippets: [ELIGIBLE, LINKED, PRO_LOCKED], downloads: [] }
+		await forceLicenseState(page, false)
+		await routeCloudSnippets(page, state)
+		await openCommunityCloud(page, 'card')
+
+		const cards = page.locator('.cloud-search-results')
+		await expect(cards.getByRole('checkbox', { name: 'Select Eligible Alpha' })).toBeVisible()
+		await expect(cards.getByRole('checkbox', { name: 'Select Linked Beta' })).toHaveCount(0)
+		await expect(cards.getByRole('checkbox', { name: 'Select Pro Gamma' })).toHaveCount(0)
+
+		await page.getByRole('checkbox', { name: 'Select all items' }).check()
+		await expect(cards.getByRole('checkbox', { name: 'Select Eligible Alpha' })).toBeChecked()
+
+		await applyBulkDownload(page)
+		await expect.poll(() => state.downloads).toEqual([ELIGIBLE.id])
+	})
+
+	test('licensed table view select-all includes Pro snippets but not linked ones', async ({ page }) => {
+		const state: CloudRoutesState = { snippets: [ELIGIBLE, LINKED, PRO_LOCKED], downloads: [] }
+		await forceLicenseState(page, true)
+		await routeCloudSnippets(page, state)
+		await openCommunityCloud(page, 'table')
+
+		const table = page.locator('.cloud-snippets-table')
+		await expect(table.getByRole('checkbox', { name: 'Select Pro Gamma' })).toBeVisible()
+		await expect(table.getByRole('checkbox', { name: 'Select Linked Beta' })).toHaveCount(0)
+
+		await table.getByRole('checkbox', { name: 'Select all snippets' }).check()
+		await applyBulkDownload(page)
+		await expect.poll(() => [...state.downloads].sort((a, b) => a - b)).toEqual([ELIGIBLE.id, PRO_LOCKED.id])
+	})
+
+	test('selections hidden by a new search are not downloaded', async ({ page }) => {
+		const state: CloudRoutesState = { snippets: [ELIGIBLE, LINKED, PRO_LOCKED], downloads: [] }
+		await forceLicenseState(page, false)
+		await routeCloudSnippets(page, state)
+		await openCommunityCloud(page, 'table')
+
+		const table = page.locator('.cloud-snippets-table')
+		await table.getByRole('checkbox', { name: 'Select Eligible Alpha' }).check()
+
+		state.snippets = [ELIGIBLE_OTHER]
+		await page.locator('#cloud-search-query').fill('delta')
+		await page.locator('.cloud-search-form').getByRole('button', { name: /Search Cloud Library/i }).click()
+
+		const otherCheckbox = table.getByRole('checkbox', { name: 'Select Eligible Delta' })
+		await expect(otherCheckbox).toBeVisible()
+		await otherCheckbox.check()
+
+		await applyBulkDownload(page)
+		await expect.poll(() => state.downloads).toEqual([ELIGIBLE_OTHER.id])
+	})
+})
diff --git a/tests/e2e/code-snippets-community-featured.spec.ts b/tests/e2e/code-snippets-community-featured.spec.ts
index f8302cef7..eb2c4257e 100644
--- a/tests/e2e/code-snippets-community-featured.spec.ts
+++ b/tests/e2e/code-snippets-community-featured.spec.ts
@@ -264,15 +264,16 @@ test.describe('Community Cloud Featured Snippets', () => {
 
 		const headerCheckbox = table.locator('thead').getByRole('checkbox', { name: 'Select all snippets' })
 		const rowCheckbox = table.locator('tbody').getByRole('checkbox', { name: 'Select Mock Cloud Snippet' })
-		const toolbarCheckbox = page.getByRole('checkbox', { name: 'Select all items' })
+
+		// The table owns the only select-all control; the toolbar checkbox is
+		// reserved for the card view.
+		await expect(page.getByRole('checkbox', { name: 'Select all items' })).toHaveCount(0)
 
 		await rowCheckbox.check()
 		await expect(rowCheckbox).toBeChecked()
 		await expect(headerCheckbox).toBeChecked()
-		await expect(toolbarCheckbox).toBeChecked()
 
 		await headerCheckbox.uncheck()
 		await expect(rowCheckbox).not.toBeChecked()
-		await expect(toolbarCheckbox).not.toBeChecked()
 	})
 })

From 2898c91851f5724b78f7ca91d333d97f468b37d5 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:29:52 +0300
Subject: [PATCH 03/12] fix: render cloud search result metadata when tags are
 present

---
 .../CommunityCloud/SearchResult.tsx           | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
index 023d57bd9..6cc839718 100644
--- a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
@@ -59,22 +59,32 @@ const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({
 			</h3>
 		</div>
 
-		{0 < snippet.tags.length || snippet.updated && (
-			<div className="snippet-card-meta">
-				{0 < snippet.tags.length && (
-					<span className="cloud-snippet-tags">{snippet.tags.join(', ')}</span>)}
+		{0 < snippet.tags.length || snippet.updated
+			? <div className="snippet-card-meta">
+				{0 < snippet.tags.length
+					? <span className="cloud-snippet-tags">
+						<span className="snippet-card-tags-label">{__('Tags:', 'code-snippets')}</span>
+						{' '}{snippet.tags.join(', ')}
+					</span>
+					: null}
 
-				{snippet.updated && (
-					<time className="snippet-card-modified" dateTime={snippet.updated} title={snippet.updated}>
-						{/* translators: %s: human-readable time difference, including "ago" suffix. */
-							sprintf(__('Modified %s', 'code-snippets'), humanTimeDiff(snippet.updated, undefined))}
-					</time>)}
-			</div>)}
+				{snippet.updated
+					? <time className="snippet-card-modified" dateTime={snippet.updated} title={snippet.updated}>
+						{sprintf(
+							/* translators: %s: human-readable time difference. */
+							__('Modified %s', 'code-snippets'),
+							humanTimeDiff(snippet.updated, undefined)
+						)}
+					</time>
+					: null}
+			</div>
+			: null}
 
-		{snippet.description && (
-			<p className="snippet-description-content">
+		{snippet.description
+			? <p className="snippet-description-content">
 				{truncateChars(stripTags(snippet.description))}
-			</p>)}
+			</p>
+			: null}
 
 		{author}
 	</div>

From d805c7ffa356b7a0d81dbeaa11b9c0a43a49354e Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:30:01 +0300
Subject: [PATCH 04/12] fix: preserve native menu input keyboard behaviour

---
 src/css/common/_kebab-menu.scss        |  3 ++-
 src/js/components/common/KebabMenu.tsx | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/css/common/_kebab-menu.scss b/src/css/common/_kebab-menu.scss
index 89cc93b16..c7557d3b3 100644
--- a/src/css/common/_kebab-menu.scss
+++ b/src/css/common/_kebab-menu.scss
@@ -40,7 +40,8 @@
 	inline-size: 224px;
 	box-sizing: border-box;
 	margin: 0;
-	padding: 0;
+	padding-block: 6px;
+	padding-inline: 0;
 	list-style: none;
 	background: #fff;
 	border: 1px solid #e2e2e4;
diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
index 49fae455a..eb151c27c 100644
--- a/src/js/components/common/KebabMenu.tsx
+++ b/src/js/components/common/KebabMenu.tsx
@@ -140,8 +140,16 @@ const handlePopoverKeyDown = (
 		return
 	}
 
-	const focusable = Array.from(popoverRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
 	const active = document.activeElement
+
+	const isFormInput = active instanceof HTMLElement &&
+		(active.isContentEditable || active.matches('input, select, textarea'))
+
+	if (isFormInput) {
+		return
+	}
+
+	const focusable = Array.from(popoverRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
 	const currentIndex = active instanceof HTMLElement ? focusable.indexOf(active) : -1
 
 	if (

From 15c7f541001867b3c88d64e63512e26767c66f39 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:30:11 +0300
Subject: [PATCH 05/12] fix: label the snippets table tag filter for screen
 readers

---
 .../ManageMenu/SnippetsTable/SnippetsTableControls.tsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
index ef52b61eb..07db89183 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
@@ -1,4 +1,4 @@
-import { __, sprintf } from '@wordpress/i18n'
+import { __, _x, sprintf } from '@wordpress/i18n'
 import React, { Fragment, useMemo } from 'react'
 import { useRestAPI } from '../../../hooks/useRestAPI'
 import { useSnippetsList } from '../../../hooks/useSnippetsList'
@@ -47,9 +47,9 @@ const SnippetStatusCounts = () => {
 						>
 							{`${label} `}
 							<span className="count">{
+								// translators: %d: number of snippets in the current view.
 								sprintf(
-									// translators: %d: number of snippets in the current view.
-									__('(%d)', 'code-snippets'),
+									_x('(%d)', 'table view count', 'code-snippets'),
 									snippetsByStatus.get(status)?.length ?? 0
 								)
 							}</span>
@@ -105,6 +105,7 @@ const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ visibleSnippets
 				id="snippets-tag-filter"
 				name="tag"
 				value={currentTag}
+				aria-label={__('Filter snippets by tag', 'code-snippets')}
 				onChange={event => setCurrentTag(event.target.value)}
 			>
 				<option value="">{__('All Tags', 'code-snippets')}</option>

From 506e7961124193017e566d42aace20628a4d6715 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:30:20 +0300
Subject: [PATCH 06/12] fix: hide empty snippet type counts in the subnav

---
 src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 8bcc05701..50c80f9c9 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -51,7 +51,7 @@ const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, count }) => {
 							<span className="snippet-type-name-short">{__('All', 'code-snippets')}</span>
 						</>}
 				</span>
-				{count && <span className="subnav-count">{count}</span>}
+				{count ? <span className="subnav-count">{count}</span> : null}
 				{type && isProType(type) && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 			</a>
 		</li>

From 38f819987ec2d9d4ac0486b73802eb64aa175c87 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:30:29 +0300
Subject: [PATCH 07/12] fix: avoid duplicate history entries after saving a new
 snippet

---
 src/js/components/EditMenu/SnippetForm/SnippetForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index b6cb64c60..aa9b8398e 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -96,7 +96,7 @@ const EditForm: React.FC<EditFormProps> = ({ children, className }) => {
 							.replace(__('Create New Condition', 'code-snippets'), __('Edit Condition', 'code-snippets'))
 
 						const newUrl = buildUrl(window.CODE_SNIPPETS.urls.edit, { id: response.id })
-						window.history.pushState({}, document.title, newUrl)
+						window.history.replaceState({}, document.title, newUrl)
 					}
 				}
 			})

From 2f04649dc20e6cc2d942d7c501b75961a2762fb0 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:30:38 +0300
Subject: [PATCH 08/12] fix: normalise remote cloud snippet fields at the model
 boundary

---
 src/php/Model/Cloud_Snippet.php          |  9 ++++++++
 tests/unit/Model/Cloud_Snippets_Test.php | 28 ++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/src/php/Model/Cloud_Snippet.php b/src/php/Model/Cloud_Snippet.php
index 60dde61b3..1cb5ee342 100644
--- a/src/php/Model/Cloud_Snippet.php
+++ b/src/php/Model/Cloud_Snippet.php
@@ -87,6 +87,15 @@ protected function prepare_field( $value, string $field ) {
 			case 'language':
 				return is_array( $value ) ? ( $value['name'] ?? '' ) : (string) $value;
 
+			case 'name':
+			case 'code':
+			case 'scope':
+			case 'codevault':
+			case 'wp_tested':
+			case 'created':
+			case 'updated':
+				return is_scalar( $value ) ? (string) $value : '';
+
 			default:
 				return $value;
 		}
diff --git a/tests/unit/Model/Cloud_Snippets_Test.php b/tests/unit/Model/Cloud_Snippets_Test.php
index 1a02b49e7..05f2b6a53 100644
--- a/tests/unit/Model/Cloud_Snippets_Test.php
+++ b/tests/unit/Model/Cloud_Snippets_Test.php
@@ -241,4 +241,32 @@ public function test_scalar_snippet_entries_decode_into_default_snippets(): void
 		$this->assertSame( '', $result->snippets[0]->name );
 		$this->assertSame( '', $result->snippets[1]->description );
 	}
+
+	/**
+	 * String fields coerce scalar values and fall back to an empty string for
+	 * non-scalar values, so malformed remote data never reaches the frontend.
+	 *
+	 * @return void
+	 */
+	public function test_string_fields_normalise_non_string_values(): void {
+		$snippet = new Cloud_Snippet(
+			[
+				'name'      => 123,
+				'scope'     => [ 'not', 'a', 'string' ],
+				'code'      => 4.5,
+				'codevault' => null,
+				'wp_tested' => [ 'nested' => 'array' ],
+				'created'   => false,
+				'updated'   => 20260101,
+			]
+		);
+
+		$this->assertSame( '123', $snippet->name );
+		$this->assertSame( '', $snippet->scope );
+		$this->assertSame( '4.5', $snippet->code );
+		$this->assertSame( '', $snippet->codevault );
+		$this->assertSame( '', $snippet->wp_tested );
+		$this->assertSame( '', $snippet->created );
+		$this->assertSame( '20260101', $snippet->updated );
+	}
 }

From c85701c3d2b02fa57518ea074db0e3ee4a234983 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:30:50 +0300
Subject: [PATCH 09/12] fix: restore the table view when navigating to the
 snippets admin page

---
 tests/e2e/helpers/SnippetsTestHelper.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/helpers/SnippetsTestHelper.ts b/tests/e2e/helpers/SnippetsTestHelper.ts
index 4a3493122..f2588d95a 100644
--- a/tests/e2e/helpers/SnippetsTestHelper.ts
+++ b/tests/e2e/helpers/SnippetsTestHelper.ts
@@ -226,10 +226,22 @@ export class SnippetsTestHelper {
 	}
 
 	/**
-	 * Navigate to the Code Snippets admin page
+	 * Navigate to the Code Snippets admin page.
+	 *
+	 * The snippet view preference persists server-side per user, so an earlier
+	 * card-view test can leave the manage page rendering cards. Callers of this
+	 * helper expect the table, so switch back whenever cards are active.
 	 */
 	async navigateToSnippetsAdmin(): Promise<void> {
 		await this.page.goto(URLS.SNIPPETS_ADMIN)
+
+		const viewToggle = this.page.getByRole('button', { name: 'Table view' })
+		await viewToggle.waitFor({ timeout: TIMEOUTS.DEFAULT })
+
+		if (0 === await this.page.locator(SELECTORS.SNIPPETS_TABLE).count()) {
+			await viewToggle.click()
+		}
+
 		await this.page.waitForSelector(SELECTORS.SNIPPETS_TABLE, { timeout: TIMEOUTS.DEFAULT })
 	}
 

From bfd6ff626e08531ea65bc8df8ff27e1bbbc6c637 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:30:59 +0300
Subject: [PATCH 10/12] fix: cover settings tab switching against the real
 settings page

---
 tests/e2e/settings-tabs.spec.ts | 35 +++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 tests/e2e/settings-tabs.spec.ts

diff --git a/tests/e2e/settings-tabs.spec.ts b/tests/e2e/settings-tabs.spec.ts
new file mode 100644
index 000000000..d4821f793
--- /dev/null
+++ b/tests/e2e/settings-tabs.spec.ts
@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+const SETTINGS_URL = '/wp-admin/admin.php?page=snippets-settings&section=general'
+const TABS = '#settings-sections-tabs'
+
+test.describe('Settings tabs', () => {
+	test('switch between rendered sections in place', async ({ page }) => {
+		await page.goto(SETTINGS_URL)
+
+		const wrap = page.locator('.wrap[data-active-tab]')
+		await expect(wrap).toHaveAttribute('data-active-tab', 'general')
+
+		// Mark the document so a full navigation would be detectable below.
+		await page.evaluate(() => {
+			(<Record<string, boolean>> <unknown> window).csSameDocument = true
+		})
+
+		await page.locator(`${TABS} [data-section="editor"]`).click()
+
+		await expect(wrap).toHaveAttribute('data-active-tab', 'editor')
+		await expect(page.locator(`${TABS} [data-section="editor"]`)).toHaveClass(/active-type/)
+		await expect(page).toHaveURL(/section=editor/)
+
+		// Redirections after saving must lead back to the selected tab.
+		await expect(page.locator('input[name=_wp_http_referer]')).toHaveValue(/section=editor/)
+
+		// The swap happens without reloading the page.
+		expect(await page.evaluate(() =>
+			(<Record<string, boolean>> <unknown> window).csSameDocument)).toBe(true)
+
+		await page.locator(`${TABS} [data-section="general"]`).click()
+		await expect(wrap).toHaveAttribute('data-active-tab', 'general')
+		await expect(page.locator(`${TABS} [data-section="general"]`)).toHaveClass(/active-type/)
+	})
+})

From bd893094713d0414287b1bea35f9c4fb704290a9 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 4 Aug 2026 23:31:07 +0300
Subject: [PATCH 11/12] chore: widen the cloud community filter selects

---
 src/css/manage/_cloud-community.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/css/manage/_cloud-community.scss b/src/css/manage/_cloud-community.scss
index 088478d27..ed637aa9a 100644
--- a/src/css/manage/_cloud-community.scss
+++ b/src/css/manage/_cloud-community.scss
@@ -83,6 +83,10 @@ $status-colors: (
 	.banner {
 		justify-content: center;
 	}
+
+	.cloud-search-filters select {
+		inline-size: 245px;
+	}
 }
 
 .bundle-share-code-form {

From 9fa5020239e44479eb3fa623f211bb66b606e83d Mon Sep 17 00:00:00 2001
From: Shea Bunge <shea@sheabunge.com>
Date: Wed, 5 Aug 2026 11:55:03 +1000
Subject: [PATCH 12/12] Streamline changes.

---
 src/css/common/_kebab-menu.scss               |  3 +-
 src/css/edit/_form.scss                       |  3 +-
 .../ImportMenu/MigrateForm/MigrateForm.tsx    |  6 ++--
 .../MigrateForm/SimpleSnippetTable.tsx        |  7 ++--
 .../SelectFiles/SelectedFilesList.tsx         |  7 ++--
 .../SelectSnippets/SelectSnippets.tsx         |  9 ++---
 .../ManageMenu/CommunityCloud/CloudSearch.tsx |  2 +-
 .../CommunityCloud/CloudSnippetsTable.tsx     | 10 +++---
 .../CommunityCloud/SearchResult.tsx           |  5 +--
 .../SnippetsTable/ManageSnippetCard.tsx       | 30 ++++++++--------
 .../SnippetsTable/SnippetsTableControls.tsx   | 10 ++----
 src/js/components/common/KebabMenu.tsx        | 35 ++++++++++---------
 src/js/utils/snippets/cloud.ts                |  8 -----
 src/js/utils/snippets/snippets.ts             |  6 ++++
 14 files changed, 62 insertions(+), 79 deletions(-)
 delete mode 100644 src/js/utils/snippets/cloud.ts

diff --git a/src/css/common/_kebab-menu.scss b/src/css/common/_kebab-menu.scss
index c7557d3b3..99c601000 100644
--- a/src/css/common/_kebab-menu.scss
+++ b/src/css/common/_kebab-menu.scss
@@ -40,8 +40,7 @@
 	inline-size: 224px;
 	box-sizing: border-box;
 	margin: 0;
-	padding-block: 6px;
-	padding-inline: 0;
+	padding: 6px 0;
 	list-style: none;
 	background: #fff;
 	border: 1px solid #e2e2e4;
diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss
index 59a97a24f..6153c4840 100644
--- a/src/css/edit/_form.scss
+++ b/src/css/edit/_form.scss
@@ -64,8 +64,7 @@ $sidebar-gap: 30px;
 		gap: 8px;
 		inline-size: 100%;
 		border-color: #ccc;
-		padding-block: 6px;
-		padding-inline: 12px;
+		padding: 6px 12px;
 	}
 
 	&.no-condition .cond-badge {
diff --git a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
index d96c8442a..ba45bd93b 100644
--- a/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx
@@ -47,7 +47,7 @@ const StatusMessages: React.FC = () => {
 				</StatusDisplay>)}
 
 			{0 < importedIds.length && (
-			// translators: %d: number of imported snippets.
+				// translators: %d: number of imported snippets.
 				<StatusDisplay type="success" title={sprintf(__('%d snippets imported!', 'code-snippets'), importedIds.length)}>
 					{createInterpolateElement(
 						__('Selected snippets have been successfully imported to your <a>Code Snippets library</a>.', 'code-snippets'),
@@ -59,8 +59,8 @@ const StatusMessages: React.FC = () => {
 				</StatusDisplay>)}
 
 			{selectedImporter &&
-					isWorking !== MigrationStep.FetchSnippets && error?.step !== MigrationStep.FetchSnippets &&
-					0 === snippetSelection.availableItems.length && 0 === importedIds.length && (
+				isWorking !== MigrationStep.FetchSnippets && error?.step !== MigrationStep.FetchSnippets &&
+				0 === snippetSelection.availableItems.length && 0 === importedIds.length && (
 				<ImportCard className="no-snippets-card" role="status" aria-live="polite">
 					<div className="card-inner">
 						<div className="card-icon" aria-hidden="true">📭</div>
diff --git a/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx b/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
index 5c4197e56..958e5fbcd 100644
--- a/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
+++ b/src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx
@@ -24,11 +24,8 @@ const TableNav: React.FC<TableNavProps> = ({ which, onImport, isImporting, selec
 		>
 			{isImporting
 				? __('Importing…', 'code-snippets')
-				: sprintf(
-					// translators: %d: number of selected snippets.
-					__('Import Selected (%d)', 'code-snippets'),
-					selection.selectedItems.size
-				)}
+				// translators: %d: number of selected snippets.
+				: sprintf(__('Import Selected (%d)', 'code-snippets'), selection.selectedItems.size)}
 		</Button>
 	</div>
 
diff --git a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
index ef545aae5..a5d63118a 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx
@@ -48,11 +48,8 @@ export interface SelectedFilesListProps {
 export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onRemoveFile }) =>
 	<div className="selected-files">
 		<h3>
-			{sprintf(
-				// translators: %d: number of selected files.
-				__('Selected files: (%d)', 'code-snippets'),
-				files.length
-			)}
+			{// translators: %d: number of selected files.
+				sprintf(__('Selected files: (%d)', 'code-snippets'), files.length)}
 		</h3>
 
 		<div className="selected-files-list">
diff --git a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
index d9becf264..e7a581086 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
@@ -8,7 +8,7 @@ import { Button } from '../../../common/Button'
 import { ImportCard } from '../../common/ImportCard'
 import { useSelection } from '../../../../hooks/useSelection'
 import { SnippetSelectionTable } from './SnippetSelectionTable'
-import type { FormEventHandler, ReactNode} from 'react'
+import type { FormEventHandler, ReactNode } from 'react'
 import type { UseSelection } from '../../../../hooks/useSelection'
 import type { ImportResult } from './ImportResultDisplay'
 import type { ImportableSnippetSchema } from '../../../../types/schema/ImportableSnippetSchema'
@@ -67,11 +67,8 @@ const SelectSnippetsForm: React.FC<SelectSnippetsFormProps> = ({ availableSnippe
 		<>
 			<div className="tablenav top">
 				<div>
-					<h2>{sprintf(
-						// translators: %d: number of available snippets.
-						__('Available snippets (%d)', 'code-snippets'),
-						availableSnippets.length
-					)}</h2>
+					<h2>{// translators: %d: number of available snippets.
+						sprintf(__('Available snippets (%d)', 'code-snippets'), availableSnippets.length)}</h2>
 					<p>{__('Select the snippets you would like to import.', 'code-snippets')}</p>
 				</div>
 				<div className="table-actions">
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 3cafec7fd..93feba6b4 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import { Spinner } from '@wordpress/components'
 import { useRestAPI } from '../../../hooks/useRestAPI'
 import { REST_BASES } from '../../../utils/restAPI'
-import { isCloudSnippetDownloadable } from '../../../utils/snippets/cloud'
+import { isCloudSnippetDownloadable } from '../../../utils/snippets/snippets'
 import { TableNav } from '../../common/ListTable/TableNavigation'
 import { LoadingStatusNotices } from '../../common/LoadingStatusNotices'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
index a53bdaec3..ebc13e1aa 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
@@ -1,7 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n'
 import React, { useState } from 'react'
-import { isCloudSnippetDownloadable } from '../../../utils/snippets/cloud'
-import { getSnippetType } from '../../../utils/snippets/snippets'
+import { getSnippetType , isCloudSnippetDownloadable } from '../../../utils/snippets/snippets'
 import { stripTags, truncateChars } from '../../../utils/text'
 import { Badge } from '../../common/Badge'
 import { Button } from '../../common/Button'
@@ -134,8 +133,8 @@ export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({
 	return <table className="wp-list-table widefat fixed striped cloud-snippets-table">
 		<thead>
 			<tr>
-				{selected && setSelected
-					? <td className="column-cb check-column">
+				{selected && setSelected && (
+					<td className="column-cb check-column">
 						<input
 							id="cb-select-all-cloud-snippets"
 							type="checkbox"
@@ -144,8 +143,7 @@ export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({
 							onChange={event =>
 								updateSelection(setSelected, downloadable.map(snippet => snippet.id), event.target.checked)}
 						/>
-					</td>
-					: null}
+					</td>)}
 				<th scope="col" className="column-name column-primary">{__('Name', 'code-snippets')}</th>
 				<th scope="col" className="column-type">{__('Type', 'code-snippets')}</th>
 				<th scope="col" className="column-status">{__('Status', 'code-snippets')}</th>
diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
index 6cc839718..3c3ee0ca0 100644
--- a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
@@ -63,8 +63,9 @@ const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({
 			? <div className="snippet-card-meta">
 				{0 < snippet.tags.length
 					? <span className="cloud-snippet-tags">
-						<span className="snippet-card-tags-label">{__('Tags:', 'code-snippets')}</span>
-						{' '}{snippet.tags.join(', ')}
+						<span className="snippet-card-tags-label">
+							{__('Tags:', 'code-snippets')}
+						</span> {snippet.tags.join(', ')}
 					</span>
 					: null}
 
diff --git a/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx b/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
index 9c36fd6a1..3ea7d961c 100644
--- a/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
@@ -1,3 +1,4 @@
+import classnames from 'classnames'
 import { humanTimeDiff } from '@wordpress/date'
 import { RawHTML } from '@wordpress/element'
 import { __, sprintf } from '@wordpress/i18n'
@@ -187,12 +188,12 @@ export const ManageSnippetCard: React.FC<ManageSnippetCardProps> = ({
 
 	return (
 		<SnippetCard
-			className={[
+			className={classnames(
 				'snippet',
 				`${isSnippetActive(snippet, activeByCondition) ? 'active' : 'inactive'}-snippet`,
 				`${getSnippetType(snippet)}-snippet`,
 				`${snippet.scope}-snippet`
-			].join(' ')}
+			)}
 			isSelected={isSelected}
 			onSelectedChange={onSelectedChange}
 			selectionLabel={sprintf(
@@ -210,23 +211,20 @@ export const ManageSnippetCard: React.FC<ManageSnippetCardProps> = ({
 					<SnippetExtraIcons snippet={snippet} />
 				</div>
 
-				{0 < snippet.tags.length || snippet.modified
-					? <div className="snippet-card-meta">
-						{0 < snippet.tags.length
-							? <span className="snippet-card-tags">
-								<span className="snippet-card-tags-label">{__('Tags:', 'code-snippets')}</span>
-								{' '}
-								<TagsColumn snippet={snippet} />
-							</span>
-							: null}
+				{(0 < snippet.tags.length || snippet.modified) && (
+					<div className="snippet-card-meta">
+						{0 < snippet.tags.length && (
+							<span className="snippet-card-tags">
+								<span className="snippet-card-tags-label">
+									{__('Tags:', 'code-snippets')}
+								</span> <TagsColumn snippet={snippet} />
+							</span>)}
 
 						<CardModifiedDate snippet={snippet} />
-					</div>
-					: null}
+					</div>)}
 
-				{snippet.desc
-					? <div className="snippet-description-content"><RawHTML>{snippet.desc}</RawHTML></div>
-					: null}
+				{snippet.desc && (
+					<div className="snippet-description-content"><RawHTML>{snippet.desc}</RawHTML></div>)}
 			</div>
 		</SnippetCard>
 	)
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
index 07db89183..29aa7f8f3 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
@@ -45,13 +45,9 @@ const SnippetStatusCounts = () => {
 								setCurrentStatus(status)
 							}}
 						>
-							{`${label} `}
-							<span className="count">{
-								// translators: %d: number of snippets in the current view.
-								sprintf(
-									_x('(%d)', 'table view count', 'code-snippets'),
-									snippetsByStatus.get(status)?.length ?? 0
-								)
+							{label} <span className="count">{
+							// translators: %d: number of snippets in the current view.
+								sprintf(_x('(%d)', 'table view count', 'code-snippets'), snippetsByStatus.get(status)?.length ?? 0)
 							}</span>
 						</a>
 					</li>
diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
index eb151c27c..b22c252d4 100644
--- a/src/js/components/common/KebabMenu.tsx
+++ b/src/js/components/common/KebabMenu.tsx
@@ -21,7 +21,7 @@ const FOCUSABLE_SELECTOR = [
 ].join(', ')
 
 interface KebabMenuContextValue {
-	closeMenu: () => void
+	closeMenu: VoidFunction
 }
 
 const KebabMenuContext = createContext<KebabMenuContextValue>({ closeMenu: () => undefined })
@@ -29,7 +29,7 @@ const KebabMenuContext = createContext<KebabMenuContextValue>({ closeMenu: () =>
 export const useKebabMenu = (): KebabMenuContextValue => useContext(KebabMenuContext)
 
 export interface KebabMenuItemProps {
-	onSelect?: () => void
+	onSelect?: VoidFunction
 	destructive?: boolean
 	disabled?: boolean
 	className?: string
@@ -152,22 +152,25 @@ const handlePopoverKeyDown = (
 	const focusable = Array.from(popoverRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
 	const currentIndex = active instanceof HTMLElement ? focusable.indexOf(active) : -1
 
-	if (
-		'ArrowDown' === event.key ||
-		'ArrowUp' === event.key ||
-		'Home' === event.key ||
-		'End' === event.key
-	) {
-		if (0 < focusable.length) {
-			event.preventDefault()
-			const offset = 'ArrowDown' === event.key ? currentIndex + 1 : currentIndex - 1
-			const target = 'Home' === event.key
-				? 0
-				: 'End' === event.key ? focusable.length - 1 : (offset + focusable.length) % focusable.length
-			focusable[target].focus()
+	if (0 < focusable.length && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+		event.preventDefault()
+
+		const getTarget = () => {
+			switch (event.key) {
+				case 'Home':
+					return 0
+
+				case 'End':
+					return focusable.length - 1
+
+				default: {
+					const offset = currentIndex + ('ArrowDown' === event.key ? 1 : -1)
+					return (offset + focusable.length) % focusable.length
+				}
+			}
 		}
 
-		return
+		focusable[getTarget()].focus()
 	}
 }
 
diff --git a/src/js/utils/snippets/cloud.ts b/src/js/utils/snippets/cloud.ts
deleted file mode 100644
index 74041d8e2..000000000
--- a/src/js/utils/snippets/cloud.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { isLicensed } from '../screen'
-import { isProSnippet } from './snippets'
-import type { CloudSnippetSchema } from '../../types/schema/CloudSnippetSchema'
-
-export const isCloudSnippetDownloadable = (
-	snippet: Pick<CloudSnippetSchema, 'scope' | 'local_id'>
-): boolean =>
-	!snippet.local_id && (!isProSnippet(snippet) || isLicensed())
diff --git a/src/js/utils/snippets/snippets.ts b/src/js/utils/snippets/snippets.ts
index df5c52c3d..cf5584772 100644
--- a/src/js/utils/snippets/snippets.ts
+++ b/src/js/utils/snippets/snippets.ts
@@ -2,6 +2,7 @@ import { __, sprintf } from '@wordpress/i18n'
 import { isLicensed, isNetworkAdmin } from '../screen'
 import { buildUrl } from '../urls'
 import { parseSnippetObject } from './objects'
+import type { CloudSnippetSchema } from '../../types/schema/CloudSnippetSchema'
 import type { SnippetSchema } from '../../types/schema/SnippetSchema'
 import type { Snippet, SnippetScope, SnippetType } from '../../types/Snippet'
 
@@ -112,3 +113,8 @@ export const isNetworkOnlySnippet = (snippet: Snippet): boolean =>
 export const canModifySnippet = (snippet: Snippet): boolean =>
 	!isNetworkOnlySnippet(snippet) &&
 	!(snippet.shared_network && !window.CODE_SNIPPETS_MANAGE?.hasNetworkCap)
+
+export const isCloudSnippetDownloadable = (
+	snippet: Pick<CloudSnippetSchema, 'scope' | 'local_id'>
+): boolean =>
+	!snippet.local_id && (!isProSnippet(snippet) || isLicensed())