From 62d904a224acd6497a4f113f4e66491d44e283dc Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:29:44 +0300
Subject: [PATCH 01/91] feat: restructure admin toolbar into header and primary
 nav bands

---
 src/css/common/_toolbar.scss                  | 37 +++++++++++++------
 src/js/components/common/Toolbar.tsx          | 26 +++++++++----
 .../components/common/icons/ToolbarIcons.tsx  | 11 ++++++
 src/js/types/Window.ts                        |  1 +
 src/php/Plugin.php                            |  1 +
 5 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index b05cd0699..d0198db0f 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -1,6 +1,6 @@
 @use 'upsell';
 
-$toolbar-block-size: 150px;
+$toolbar-block-size: 136px;
 $wpcontent-inline-start-indent: 20px;
 
 #wpbody {
@@ -28,8 +28,11 @@ $wpcontent-inline-start-indent: 20px;
 
 .code-snippets-toolbar-upper {
 	justify-content: space-between;
-	block-size: 77px;
+	block-size: 76px;
+	box-sizing: border-box;
+	padding-block: 16px;
 	padding-inline: 24px;
+	border-block-end: 1px solid rgb(195 196 199 / 50%);
 	display: flex;
 	align-items: center;
 
@@ -62,35 +65,45 @@ $wpcontent-inline-start-indent: 20px;
 }
 
 .code-snippets-toolbar-lower {
-	border-block: 1px solid #c3c4c7;
+	border-block-end: 1px solid #c3c4c7;
+	block-size: 60px;
+	box-sizing: border-box;
 
 	ul {
 		display: flex;
-		align-items: end;
+		align-items: stretch;
+		block-size: 100%;
 	}
 
+	// 15px + 26px icon + 11px + 4px underline fills the 60px band exactly.
 	li a {
 		display: flex;
 		margin: 0;
-		padding: 24px 24px 20px;
-		color: inherit;
+		padding: 15px 24px 11px;
+		color: #2c3337;
 		gap: 12px;
 		align-items: center;
 		font-size: 16px;
+		font-weight: 590;
+		letter-spacing: -0.16px;
 		text-decoration: none;
-		font-weight: bold;
 		box-sizing: border-box;
 		transition: border unset;
 		border-block-end: 4px solid transparent;
 		cursor: pointer;
 
+		svg {
+			inline-size: 26px;
+			block-size: 26px;
+		}
+
 		&.active-link, &:hover, &:focus, &:active {
 			color: #2271b1;
 			border-block-end-color: currentcolor;
 		}
 	}
 
-	li:last-of-type {
+	li:not(.toolbar-end-item) + li.toolbar-end-item {
 		margin-inline-start: auto;
 	}
 }
@@ -105,16 +118,16 @@ $wpcontent-inline-start-indent: 20px;
 .code-snippets-toolbar-lower .pro-chip,
 .nav-tab .pro-chip,
 .snippet-type-link .pro-chip {
-	color: #d46f4d;
+	color: #2271b1;
+	background: #d4e7f7;
 	text-transform: uppercase;
-	border: 2px solid currentcolor;
 	border-radius: 999px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	box-sizing: border-box;
 	padding: 3px 9px;
-	font-weight: 600;
+	font-weight: 700;
 }
 
 
@@ -125,7 +138,7 @@ $wpcontent-inline-start-indent: 20px;
 .nav-tab .pro-chip,
 .snippet-type-link .pro-chip {
 	font-size: 10px;
-	padding: 0 6px;
+	padding: 2px 8px;
 }
 
 .code-snippets-return-link {
diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index 07ffd688d..f6580231f 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import React, { useState } from 'react'
 import { isLicensed, shouldShowUpsell } from '../../utils/screen'
 import { buildUrl, fetchQueryParam } from '../../utils/urls'
-import { BlueprintIcon, CommunityIcon, LibraryIcon, SettingsIcon, SnippetsIcon } from './icons/ToolbarIcons'
+import { BlueprintIcon, CommunityIcon, ImportIcon, LibraryIcon, SettingsIcon, SnippetsIcon } from './icons/ToolbarIcons'
 import { UpsellDialog } from './UpsellDialog'
 import type { ReactNode } from 'react'
 
@@ -18,6 +18,7 @@ interface NavLink {
 	pro?: boolean
 	pageSlug?: string
 	subpage?: typeof SUBPAGES[number]
+	end?: boolean
 }
 
 const UPPER_NAV_LINKS: readonly NavLink[] = [
@@ -49,6 +50,13 @@ const LOWER_NAV_LINKS: readonly NavLink[] = [
 		icon: <SnippetsIcon aria-hidden="true" />,
 		pageSlug: 'snippets'
 	},
+	{
+		name: 'blueprints',
+		label: __('Blueprints', 'code-snippets'),
+		icon: <BlueprintIcon />,
+		pro: true,
+		subpage: 'blueprints'
+	},
 	{
 		name: 'cloud-community',
 		label: __('Community Cloud', 'code-snippets'),
@@ -63,18 +71,20 @@ const LOWER_NAV_LINKS: readonly NavLink[] = [
 		subpage: 'cloud-library'
 	},
 	{
-		name: 'blueprints',
-		label: __('Blueprints', 'code-snippets'),
-		icon: <BlueprintIcon />,
-		pro: true,
-		subpage: 'blueprints'
+		name: 'import',
+		url: window.CODE_SNIPPETS?.urls.import,
+		label: __('Import', 'code-snippets'),
+		icon: <ImportIcon aria-hidden="true" />,
+		pageSlug: 'import-code-snippets',
+		end: true
 	},
 	{
 		name: 'settings',
 		url: window.CODE_SNIPPETS?.urls.settings,
 		label: __('Settings', 'code-snippets'),
 		icon: <SettingsIcon aria-hidden="true" />,
-		pageSlug: 'snippets-settings'
+		pageSlug: 'snippets-settings',
+		end: true
 	}
 ]
 
@@ -143,7 +153,7 @@ const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 		<nav aria-label={__('Main features', 'code-snippets')}>
 			<ul>
 				{LOWER_NAV_LINKS.map(link =>
-					<li key={link.name}>
+					<li key={link.name} className={link.end ? 'toolbar-end-item' : undefined}>
 						<a
 							href={link.url ?? buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: link.name })}
 							className={classnames(`${link.name}-link`, { 'active-link': isActiveLink(link) })}
diff --git a/src/js/components/common/icons/ToolbarIcons.tsx b/src/js/components/common/icons/ToolbarIcons.tsx
index dcdc4590d..fec0a9703 100644
--- a/src/js/components/common/icons/ToolbarIcons.tsx
+++ b/src/js/components/common/icons/ToolbarIcons.tsx
@@ -52,6 +52,17 @@ export const SnippetsIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
 		/>
 	</svg>
 
+export const ImportIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
+	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+		<path
+			d="M4.33333 17.3337V20.5837C4.33333 21.1584 4.5616 21.7094 4.96793 22.1157C5.37426 22.5221 5.92536 22.7503 6.5 22.7503H19.5C20.0746 22.7503 20.6257 22.5221 21.0321 22.1157C21.4384 21.7094 21.6667 21.1584 21.6667 20.5837V17.3337M13 3.25033V16.2503M13 16.2503L8.66667 11.917M13 16.2503L17.3333 11.917"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+
 export const BlueprintIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
 	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path
diff --git a/src/js/types/Window.ts b/src/js/types/Window.ts
index f29630376..0cde7f3cb 100644
--- a/src/js/types/Window.ts
+++ b/src/js/types/Window.ts
@@ -45,6 +45,7 @@ declare global {
 				addNew: string
 				edit: string
 				welcome: string
+				import: string
 				settings: string
 				cloud: string
 			}
diff --git a/src/php/Plugin.php b/src/php/Plugin.php
index 923dc28fb..870d968ba 100644
--- a/src/php/Plugin.php
+++ b/src/php/Plugin.php
@@ -368,6 +368,7 @@ public function localize_script( string $handle ) {
 					'edit'     => esc_url_raw( $this->get_menu_url( 'edit' ) ),
 					'addNew'   => esc_url_raw( $this->get_menu_url( 'add' ) ),
 					'welcome'  => esc_url_raw( $this->get_menu_url( 'welcome' ) ),
+					'import'   => esc_url_raw( $this->get_menu_url( 'import' ) ),
 					'settings' => esc_url_raw( $this->get_menu_url( 'settings' ) ),
 					'cloud'    => esc_url_raw( $this->cloud_connection->get_base_url() ),
 				],

From 2b573f94fc54fa43fb22a13acf1e6a983d74d241 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:30:56 +0300
Subject: [PATCH 02/91] feat: restyle snippet type tabs as boxed segmented
 control

---
 src/css/common/_subnav.scss                   | 51 +++++++++----------
 src/css/manage/_snippets-table.scss           |  7 ---
 .../SnippetsTable/SnippetsTable.tsx           |  5 +-
 3 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index e3416243a..444328539 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -1,10 +1,10 @@
-// Snippet-type navigation styled to match the main plugin toolbar: a white
-// bar with tab links showing an icon beside black text, highlighting blue
-// with a blue bottom border on hover and for the active type. The create
-// button sits at the far end of the bar.
+// Snippet-type navigation: a boxed segmented control on a grey band, with
+// each tab separated by a vertical rule and the active tab shown as a
+// filled tile. The view toggle sits at the far end of the band.
 .snippet-type-nav {
-	background: #fff;
-	border-block-end: 1px solid #c3c4c7;
+	background: #f7f7f8;
+	border-block: 1px solid #e2e2e4;
+	min-block-size: 53px;
 
 	// Bleed across the full admin content width, flush against the plugin
 	// toolbar above: counteract the .wrap top margin (10px) plus its 2px /
@@ -26,6 +26,7 @@
 		display: flex;
 		align-items: stretch;
 		flex-wrap: wrap;
+		min-block-size: 51px;
 		margin: 0;
 		padding: 0;
 		list-style: none;
@@ -38,11 +39,9 @@
 
 	button.snippet-type-link {
 		background: none;
-		border-inline: none;
-		border-block-start: none;
+		border-block: none;
+		border-inline-start: none;
 		font-family: inherit;
-		font-size: 15px;
-		font-weight: 600;
 	}
 
 	.snippet-type-icon {
@@ -54,19 +53,18 @@
 	.snippet-type-link {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		gap: 10px;
-		padding: 18px 20px 14px;
+		min-inline-size: 100px;
+		padding-block: 0;
+		padding-inline: 24px;
 		cursor: pointer;
-
-		// Overlap the nav's black bottom border so the blue active/hover
-		// border paints directly on top of it with no gap between the two.
-		margin-block-end: -1px;
-		font-size: 15px;
-		font-weight: 600;
-		color: #1d2327;
+		font-size: 14px;
+		font-weight: 700;
+		color: #646970;
 		text-decoration: none;
 		box-sizing: border-box;
-		border-block-end: 4px solid transparent;
+		border-inline-end: 1px solid #e2e2e4;
 
 		svg {
 			display: block;
@@ -76,10 +74,13 @@
 
 		&:hover,
 		&:focus,
-		&:active,
+		&:active {
+			color: #2c3337;
+		}
+
 		&.active-type {
-			color: #2271b1;
-			border-block-end-color: currentcolor;
+			background: #f0f0f1;
+			color: #2c3337;
 		}
 
 		// Suppress the persistent focus ring left behind after a mouse click;
@@ -104,12 +105,6 @@
 		margin-inline-start: auto;
 		align-items: center;
 	}
-
-	.create-snippet-nav-item {
-		margin-inline-start: 24px;
-		padding-inline-end: 16px;
-		align-items: center;
-	}
 }
 
 
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index c3c900e5a..f1f8f0f29 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -267,10 +267,3 @@
 	line-clamp: 2;
 	overflow: hidden;
 }
-
-// The All tab keeps the width it had with its longer label, with the
-// icon and text centred inside it.
-.snippet-type-nav .all-type-link {
-	min-inline-size: 165px;
-	justify-content: center;
-}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 9510938df..41eb27cab 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -11,7 +11,6 @@ import { isLicensed } from '../../../utils/screen'
 import { SNIPPET_TYPE_LABELS, getSnippetEditUrl, isProType } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { Badge } from '../../common/Badge'
-import { SnippetsIcon } from '../../common/icons/ToolbarIcons'
 import { Notice } from '../../common/Notice'
 import { ScreenMetaSlot } from '../../common/ScreenMetaSlot'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
@@ -50,9 +49,9 @@ const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, count, setIsUpgra
 					}
 				}}
 			>
-				{type ? <Badge small name={type} /> : <SnippetsIcon aria-hidden="true" />}
+				{type && <Badge small name={type} />}
 				<span className={`${tabName}-label`}>
-					{type ? SNIPPET_TYPE_LABELS[type] : __('All', 'code-snippets')}
+					{type ? SNIPPET_TYPE_LABELS[type] : __('All Snippets', 'code-snippets')}
 				</span>
 				{undefined !== count && <span className="subnav-count">{count}</span>}
 				{type && isProType(type) && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}

From 515e7cc3bcaa29f17689154357a420eb3d29e30b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:33:44 +0300
Subject: [PATCH 03/91] feat: move create button into contextual page title row

---
 src/css/common/_list-table.scss               | 41 +++++++++++++++----
 src/css/common/_page-header.scss              | 30 ++++++++++++++
 src/css/manage.scss                           |  1 +
 src/css/manage/_snippets-table.scss           |  5 ---
 .../CommunityCloud/CommunityCloud.tsx         |  4 ++
 .../SnippetsTable/SnippetsListTable.tsx       | 15 ++-----
 .../SnippetsTable/SnippetsTable.tsx           | 13 +++---
 7 files changed, 78 insertions(+), 31 deletions(-)
 create mode 100644 src/css/common/_page-header.scss

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 341cc2e1c..3ee768e20 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -234,9 +234,28 @@
 
 	.subsubsub {
 		display: flex;
-		gap: 5px;
+		align-items: center;
+		gap: 0;
 		margin: 0;
 		padding: 0;
+		font-size: 13px;
+
+		li {
+			display: flex;
+			align-items: center;
+			margin: 0;
+			padding-inline: 10px;
+		}
+
+		// Vertical rules between the status links, sized to the 13px text.
+		li + li {
+			border-inline-start: 1px solid #c3c4c7;
+			line-height: 1;
+		}
+
+		li:first-child {
+			padding-inline-start: 0;
+		}
 	}
 }
 
@@ -258,15 +277,23 @@
 	}
 }
 
-/* Status filter links (All | Active | Inactive | …): WP 7.0 recolours these with the modern blue. Restore the classic
-   accent for non-current links; the current one keeps its own colour. */
+/* Status filter links (All | Active | Inactive | …): the current view keeps the accent colour
+   while the remaining links stay muted. */
 /* stylelint-disable-next-line no-descending-specificity -- unrelated element; ordering is fine. */
 .subsubsub a:not(.current) {
-	color: theme.$accent;
+	color: #2c3337;
 
 	&:hover,
 	&:focus {
-		color: theme.$accent-hover;
+		color: theme.$accent;
+	}
+}
+
+.subsubsub a.current {
+	color: theme.$accent;
+
+	.count {
+		color: theme.$accent;
 	}
 }
 
@@ -281,8 +308,7 @@
 	padding-inline: 0;
 }
 
-.snippets-search-area,
-.tablenav .displaying-num {
+.tablenav .tablenav-pages {
 	margin-inline-start: auto;
 }
 
@@ -297,7 +323,6 @@
 
 		input[type='search'] {
 			inline-size: 260px;
-			min-block-size: 32px;
 		}
 	}
 }
diff --git a/src/css/common/_page-header.scss b/src/css/common/_page-header.scss
new file mode 100644
index 000000000..f072964c0
--- /dev/null
+++ b/src/css/common/_page-header.scss
@@ -0,0 +1,30 @@
+// Contextual page header row shared by the plugin admin screens: the page
+// title on the inline-start side and the primary page action, if any,
+// aligned to the inline-end side of the same row.
+.snippets-page-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	gap: 16px 24px;
+	margin-block: 24px 16px;
+
+	h1,
+	h2 {
+		margin: 0;
+		padding: 0;
+		font-size: 32px;
+		font-weight: 510;
+		line-height: 1.25;
+		color: #000;
+	}
+}
+
+.wrap .snippets-page-header .button.button-primary {
+	padding: 12px;
+	min-block-size: 0;
+	border-radius: 5px;
+	line-height: 1;
+	font-size: 14px;
+	font-weight: 700;
+}
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 163624485..5caab9cc8 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -10,6 +10,7 @@
 @use 'common/toolbar';
 @use 'common/subnav';
 @use 'common/wp-admin';
+@use 'common/page-header';
 @use 'prism';
 @use 'manage/snippets-table';
 @use 'manage/cloud-community';
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index f1f8f0f29..78c92e4c4 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -252,11 +252,6 @@
 	gap: 1em;
 }
 
-// The visible 'N items found' count beside the search box already reports
-// the total, so hide the pagination's duplicate item count in this view.
-.snippets-list-view .tablenav-pages .displaying-num {
-	display: none;
-}
 
 // Keep every table row the same height by clamping the description cell
 // to two lines, matching the two-line name + row-actions column.
diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index 871abb48a..946e47159 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -58,6 +58,10 @@ const CommunityCloudInner = () => {
 
 			<ScreenMetaSlot />
 
+			<div className="snippets-page-header">
+				<h1>{__('Community Cloud', 'code-snippets')}</h1>
+			</div>
+
 			<hr className="wp-header-end" />
 
 			{'snippets' === currentTab && <CloudSearch snippetView={snippetView} />}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index 39c9f9fe0..ca2f33b5f 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -1,4 +1,4 @@
-import { __, _n, _x, sprintf } from '@wordpress/i18n'
+import { __, _x, sprintf } from '@wordpress/i18n'
 import React, { Fragment, useEffect, useMemo, useState } from 'react'
 import classnames from 'classnames'
 import { createInterpolateElement } from '@wordpress/element'
@@ -42,7 +42,7 @@ const SnippetStatusCounts = () => {
 
 	return (
 		<ul className="subsubsub">
-			{visibleStatuses.map(([status, label], index) =>
+			{visibleStatuses.map(([status, label]) =>
 				<Fragment key={status}>
 					<li className={status}>
 						<a
@@ -60,7 +60,6 @@ const SnippetStatusCounts = () => {
 								sprintf(_x('(%d)', 'table view count', 'code-snippets'), snippetsByStatus.get(status)?.length ?? 0)
 							}</span>
 						</a>
-						{index < visibleStatuses.length - 1 && ' | '}
 					</li>
 				</Fragment>)}
 		</ul>
@@ -268,21 +267,13 @@ export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({ snippetVie
 		<>
 			{'top' === which && <FilterByTagControl visibleSnippets={snippetsByStatus.get('all') ?? []} />}
 			<ClearRecentlyActiveButton />
-
-			<span className="displaying-num" role="status" aria-live="polite">
-				{sprintf(
-				// translators: %d: total number of snippets across all pages.
-					_n('%d item', '%d items', currentSnippets.length),
-					currentSnippets.length
-				)}
-			</span>
+			{'top' === which && <SearchArea />}
 		</>
 
 	return (
 		<>
 			<div className="snippets-table-toolbar">
 				<SnippetStatusCounts />
-				<SearchArea />
 			</div>
 
 			<div className="snippets-list-view">
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 41eb27cab..4ad793779 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -102,17 +102,18 @@ const SnippetsTableInner = () => {
 					<li className="snippet-view-toggle-nav-item">
 						<SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
 					</li>
-
-					<li className="create-snippet-nav-item">
-						<a href={getSnippetEditUrl()} className="button button-primary">
-							{__('Create new snippet', 'code-snippets')}
-						</a>
-					</li>
 				</ul>
 			</nav>
 
 			<ScreenMetaSlot />
 
+			<div className="snippets-page-header">
+				<h1>{__('Manage Code Snippets', 'code-snippets')}</h1>
+				<a href={getSnippetEditUrl()} className="button button-primary">
+					{__('Create new Snippet', 'code-snippets')}
+				</a>
+			</div>
+
 			<hr className="wp-header-end" />
 
 			<SafeModeNotice />

From 9bf5cf6eb4d48162348879db624786b268018426 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:34:48 +0300
Subject: [PATCH 04/91] feat: replace snippet view switch with segmented icon
 toggle

---
 src/css/common/_subnav.scss                   | 44 ++++++++++++++++
 src/css/common/_switch.scss                   | 11 ----
 .../components/common/SnippetViewToggle.tsx   | 51 ++++++++++---------
 src/js/components/common/icons/ViewIcons.tsx  | 20 ++++++++
 4 files changed, 92 insertions(+), 34 deletions(-)
 create mode 100644 src/js/components/common/icons/ViewIcons.tsx

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 444328539..a72743b9b 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -107,6 +107,50 @@
 	}
 }
 
+// Card/table view toggle: a two-icon segmented pair of square tiles with
+// the active view filled in the accent colour.
+.snippet-view-toggle {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding-inline-end: 16px;
+
+	.snippet-view-toggle-option {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		inline-size: 38px;
+		block-size: 38px;
+		box-sizing: border-box;
+		padding: 0;
+		margin: 0;
+		background: #f0f0f1;
+		color: #646970;
+		border: none;
+		border-radius: 4.5px;
+		cursor: pointer;
+
+		svg {
+			display: block;
+		}
+
+		&:hover,
+		&:focus {
+			color: #2c3337;
+		}
+
+		&.active-view {
+			background: #2271b1;
+			color: #fff;
+
+			&:hover,
+			&:focus {
+				color: #fff;
+			}
+		}
+	}
+}
+
 
 // Slot that adopts the WordPress Screen Options / Help tabs so they appear
 // directly below the snippet-type nav instead of above the page content.
diff --git a/src/css/common/_switch.scss b/src/css/common/_switch.scss
index 3d47ad39b..36da256f8 100644
--- a/src/css/common/_switch.scss
+++ b/src/css/common/_switch.scss
@@ -112,14 +112,3 @@ a.snippet-condition-count {
 		}
 	}
 }
-
-.snippet-view-toggle {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding-inline-end: 16px;
-
-	input[type='checkbox'].switch {
-		display: inline-block;
-	}
-}
diff --git a/src/js/components/common/SnippetViewToggle.tsx b/src/js/components/common/SnippetViewToggle.tsx
index 40c0e8a55..e7232e94c 100644
--- a/src/js/components/common/SnippetViewToggle.tsx
+++ b/src/js/components/common/SnippetViewToggle.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
+import { CardViewIcon, TableViewIcon } from './icons/ViewIcons'
 import type { SnippetView } from '../../types/SnippetView'
 
 export interface SnippetViewToggleProps {
@@ -10,30 +11,34 @@ export interface SnippetViewToggleProps {
 }
 
 /**
- * Switch between the table and card snippet views, styled like the
- * snippet activation toggle. Checked means the card view is active.
+ * Switch between the card and table snippet views, presented as a
+ * two-icon segmented pair with the active view shown as a filled tile.
  */
 export const SnippetViewToggle: React.FC<SnippetViewToggleProps> = ({ snippetView, setSnippetView, className }) =>
-	<div className={classnames('snippet-view-toggle', className)}>
-		<span id="snippet-view-toggle-table-label" aria-hidden="true">
-			{__('Table', 'code-snippets')}
-		</span>
+	<div
+		className={classnames('snippet-view-toggle', className)}
+		role="group"
+		aria-label={__('Snippet view', 'code-snippets')}
+	>
+		<button
+			type="button"
+			className={classnames('snippet-view-toggle-option', { 'active-view': 'card' === snippetView })}
+			aria-pressed={'card' === snippetView}
+			title={__('Switch to card view', 'code-snippets')}
+			onClick={() => setSnippetView('card')}
+		>
+			<CardViewIcon aria-hidden="true" />
+			<span className="screen-reader-text">{__('Card view', 'code-snippets')}</span>
+		</button>
 
-		<input
-			id="snippet-view-toggle-switch"
-			type="checkbox"
-			role="switch"
-			className="switch"
-			checked={'card' === snippetView}
-			aria-checked={'card' === snippetView}
-			title={'card' === snippetView
-				? __('Switch to table view', 'code-snippets')
-				: __('Switch to card view', 'code-snippets')}
-			aria-label={__('Display snippets as cards instead of a table', 'code-snippets')}
-			onChange={event => setSnippetView(event.target.checked ? 'card' : 'table')}
-		/>
-
-		<span id="snippet-view-toggle-card-label" aria-hidden="true">
-			{__('Cards', 'code-snippets')}
-		</span>
+		<button
+			type="button"
+			className={classnames('snippet-view-toggle-option', { 'active-view': 'table' === snippetView })}
+			aria-pressed={'table' === snippetView}
+			title={__('Switch to table view', 'code-snippets')}
+			onClick={() => setSnippetView('table')}
+		>
+			<TableViewIcon aria-hidden="true" />
+			<span className="screen-reader-text">{__('Table view', 'code-snippets')}</span>
+		</button>
 	</div>
diff --git a/src/js/components/common/icons/ViewIcons.tsx b/src/js/components/common/icons/ViewIcons.tsx
new file mode 100644
index 000000000..74d8422cf
--- /dev/null
+++ b/src/js/components/common/icons/ViewIcons.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+
+export const CardViewIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+		<rect x="2" y="2" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
+		<rect x="10.5" y="2" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
+		<rect x="2" y="10.5" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
+		<rect x="10.5" y="10.5" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
+	</svg>
+
+export const TableViewIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+		<path
+			d="M2.5 4.5H15.5M2.5 9H15.5M2.5 13.5H15.5"
+			stroke="currentColor"
+			strokeWidth="1.8"
+			strokeLinecap="round"
+		/>
+	</svg>

From 93769ee7ef7536bb27d0c9819058e2832393500c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:36:57 +0300
Subject: [PATCH 05/91] feat: apply shared control tokens to admin form
 elements

---
 src/css/common/_theme.scss          | 10 +++---
 src/css/common/_wp-admin.scss       | 49 ++++++++++++++---------------
 src/css/manage/_snippets-table.scss |  8 ++---
 src/css/menu.scss                   |  8 ++---
 4 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/css/common/_theme.scss b/src/css/common/_theme.scss
index f15af1ec9..3453a6f84 100644
--- a/src/css/common/_theme.scss
+++ b/src/css/common/_theme.scss
@@ -9,13 +9,13 @@ $brand-facebook: #3b5998;
 $cloud: #00bcd4;
 $cloud-update: #ff9800;
 
-// WordPress classic admin control palette. WP 7.0's "modern" redesign restyles native form
-// controls; these restore the classic metrics our admin UI is designed around (see
-// common/_wp-admin.scss).
+// Plugin admin control tokens, applied to native form controls on all plugin
+// screens regardless of WordPress version (see common/_wp-admin.scss).
 $accent-hover: #0a4b78;
-$control-border: #8c8f94;
+$control-border: #c3c4c7;
 $control-text: #2c3338;
-$control-height: 30px;
+$control-height: 38px;
+$control-radius: 5px;
 
 /* format: background-color [color] */
 $badges: (
diff --git a/src/css/common/_wp-admin.scss b/src/css/common/_wp-admin.scss
index f511cef57..f5d900453 100644
--- a/src/css/common/_wp-admin.scss
+++ b/src/css/common/_wp-admin.scss
@@ -1,18 +1,16 @@
 @use 'theme';
 
 /**
- * WordPress 7.0 admin compatibility.
+ * Native form control styling.
  *
- * WP 7.0 ships the "modern" admin redesign, which enlarges native form controls
- * (40px tall vs. 30/32px), reduces their corner radius (2px vs. 3/4px) and recolours
- * secondary buttons with a transparent fill and the modern accent (#3858E9). Our admin
- * UI was designed against the classic control metrics and the brand accent (#2271b1),
- * so the redesign throws our spacing and colours out of alignment.
- *
- * These rules restore the classic control metrics for native elements inside our admin
- * pages so the layout renders consistently on both WP 6.9 and WP 7.0. They deliberately
- * leave the admin menu, admin bar and `@wordpress/components` React widgets untouched —
- * only native inputs/buttons rendered inside our own markup are normalised.
+ * WordPress core ships different control metrics between versions (30/32px classic,
+ * 40px with a 2px radius in the WP 7.0 "modern" redesign) and recolours secondary
+ * buttons with the modern accent (#3858E9). These rules apply the plugin's own control
+ * tokens — 38px height, 5px radius, #c3c4c7 borders and the brand accent (#2271b1) —
+ * to native elements inside our admin pages so the layout renders consistently across
+ * WP versions. They deliberately leave the admin menu, admin bar and
+ * `@wordpress/components` React widgets untouched — only native inputs/buttons
+ * rendered inside our own markup are normalised.
  */
 
 // Scope to our admin page content. We intentionally keep this to a single `.wrap` class so
@@ -21,7 +19,7 @@
 // win on equal specificity. This lets bespoke controls (conditions button, row-action links,
 // priority input, etc.) keep their intended styling without per-element exclusions here.
 .wrap {
-	// Native single-line text controls and selects: restore 30px height + classic border.
+	// Native single-line text controls and selects: token height + border.
 	// `@wordpress/components` inputs/selects (`.components-*`) keep their own design — they
 	// are excluded so React widgets such as the tags token field are left untouched.
 	// `.snippet-priority` (the borderless list-table priority field) is excluded so it keeps
@@ -33,13 +31,13 @@
 	input[type='url']:not([class*='components-']),
 	input[type='password']:not([class*='components-']),
 	input[type='tel']:not([class*='components-']) {
-		// `min-block-size` (not a fixed `block-size`) so controls floor at 30px but can still
-		// flex-stretch where the layout calls for it (e.g. the 54px cloud search bar).
+		// `min-block-size` (not a fixed `block-size`) so controls floor at the token height but
+		// can still flex-stretch where the layout calls for it (e.g. the 54px cloud search bar).
 		min-block-size: theme.$control-height;
 		padding-block: 0;
 		padding-inline: 8px;
 		border: 1px solid theme.$control-border;
-		border-radius: 4px;
+		border-radius: theme.$control-radius;
 		line-height: 2;
 		color: theme.$control-text;
 		font-size: 14px;
@@ -59,10 +57,10 @@
 		padding-block: 0;
 		padding-inline: 8px 24px;
 		border: 1px solid theme.$control-border;
-		border-radius: 3px;
+		border-radius: theme.$control-radius;
 
-		// WP 7.0 leaves a tall (≈38px) line-height on selects, pushing the value off-centre in
-		// the 30px control. Pin it so the text stays vertically centred.
+		// WP 7.0 leaves a tall (≈38px) line-height on selects, pushing the value off-centre.
+		// Pin it so the text stays vertically centred within the token height.
 		line-height: 2;
 		color: theme.$control-text;
 		font-size: 14px;
@@ -74,16 +72,17 @@
 		}
 	}
 
-	// Secondary buttons: restore classic geometry, the grey fill and the brand accent
-	// border/text in place of WP 7.0's transparent + modern-blue treatment. `.button-primary`
-	// is excluded so its solid fill below is not overwritten.
+	// Secondary buttons: token geometry, the grey fill and the brand accent border/text in
+	// place of WP 7.0's transparent + modern-blue treatment. `.button-primary` is excluded
+	// so its solid fill below is not overwritten. The line-height centres text vertically
+	// in anchor-based buttons, which lack a button element's automatic centring.
 	.button:not(.button-primary, .button-link),
 	.button-secondary {
 		min-block-size: theme.$control-height;
 		padding-block: 0;
 		padding-inline: 12px;
-		border-radius: 3px;
-		line-height: 2.3077;
+		border-radius: theme.$control-radius;
+		line-height: 2.7692;
 		font-size: 13px;
 		font-weight: 400;
 		background: #f6f7f7;
@@ -109,8 +108,8 @@
 		min-block-size: theme.$control-height;
 		padding-block: 0;
 		padding-inline: 12px;
-		border-radius: 3px;
-		line-height: 2.3077;
+		border-radius: theme.$control-radius;
+		line-height: 2.7692;
 		font-size: 13px;
 		font-weight: 400;
 		background: theme.$accent;
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 78c92e4c4..35b28bedd 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -1,4 +1,3 @@
-@use '../common/theme';
 @use '../common/list-table';
 
 .column-name,
@@ -16,15 +15,16 @@
 }
 
 // `.wp-list-table` prefix keeps this above WP 7.0's 40px control height so the borderless
-// priority field stays 30px tall and vertically aligned with the rest of the row.
+// priority field stays 30px tall (below the 38px control token, which would stretch the
+// table rows) and vertically aligned with the rest of the row.
 .wp-list-table .priority-column input {
 	appearance: none;
 	background: none;
 	border: none;
 	box-shadow: none;
 	box-sizing: border-box;
-	min-block-size: theme.$control-height;
-	block-size: theme.$control-height;
+	min-block-size: 30px;
+	block-size: 30px;
 	inline-size: 4em;
 
 	// Pin the box model so padding/margins/line-height match WP 6.9 regardless of WP 7.0's
diff --git a/src/css/menu.scss b/src/css/menu.scss
index e329afa5c..87d5c1dbe 100644
--- a/src/css/menu.scss
+++ b/src/css/menu.scss
@@ -1,4 +1,3 @@
-@use 'common/theme';
 
 #adminmenu {
 	.toplevel_page_snippets div.wp-menu-image::before {
@@ -15,12 +14,13 @@
 		border: none;
 
 		// WP 7.0 restyles `.button`/`.button-primary` with wider padding, a 2px radius and a
-		// 40px min-height; pin these so the menu pill keeps its classic dimensions and stays
-		// aligned with the surrounding submenu items across WP versions.
+		// 40px min-height; pin these (independent of the plugin control tokens, which are
+		// sized for page content rather than the admin menu) so the pill keeps its compact
+		// dimensions and stays aligned with the surrounding submenu items across WP versions.
 		border-radius: 3px;
 		padding-block: 0;
 		padding-inline: 10px;
-		min-block-size: theme.$control-height;
+		min-block-size: 30px;
 		block-size: auto;
 		text-align: center;
 		font-weight: bold;

From 1cb3b4990c011fd03255df409e61338c8b5028a1 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:39:05 +0300
Subject: [PATCH 06/91] feat: add reusable kebab menu popover component

---
 src/css/common/_kebab-menu.scss        | 104 ++++++++++++
 src/css/manage.scss                    |   1 +
 src/js/components/common/KebabMenu.tsx | 220 +++++++++++++++++++++++++
 3 files changed, 325 insertions(+)
 create mode 100644 src/css/common/_kebab-menu.scss
 create mode 100644 src/js/components/common/KebabMenu.tsx

diff --git a/src/css/common/_kebab-menu.scss b/src/css/common/_kebab-menu.scss
new file mode 100644
index 000000000..061bc0eb7
--- /dev/null
+++ b/src/css/common/_kebab-menu.scss
@@ -0,0 +1,104 @@
+// Generic kebab ("more actions") menu: a square accent-outlined trigger
+// button that opens a small popover of actions anchored to its
+// bottom-end corner, flipping above the trigger near the viewport edge.
+.kebab-menu {
+	position: relative;
+	display: inline-flex;
+}
+
+.kebab-menu-trigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	inline-size: 38px;
+	block-size: 38px;
+	box-sizing: border-box;
+	padding: 0;
+	background: #fff;
+	color: #2271b1;
+	border: 1px solid #2271b1;
+	border-radius: 5px;
+	cursor: pointer;
+
+	svg {
+		display: block;
+	}
+
+	&:hover,
+	&:focus {
+		background: #f0f6fc;
+	}
+}
+
+.kebab-menu-popover {
+	position: absolute;
+	inset-block-start: calc(100% + 4px);
+	inset-inline-end: 0;
+	z-index: 1000;
+	inline-size: 224px;
+	box-sizing: border-box;
+	margin: 0;
+	padding-block: 6px;
+	padding-inline: 0;
+	list-style: none;
+	background: #fff;
+	border: 1px solid #e2e2e4;
+	border-radius: 5px;
+	box-shadow: 0 3px 16px rgb(0 0 0 / 15%);
+
+	&.kebab-menu-popover-top {
+		inset-block: auto calc(100% + 4px);
+	}
+
+	li {
+		margin: 0;
+	}
+}
+
+.kebab-menu-item {
+	display: block;
+	inline-size: 100%;
+	box-sizing: border-box;
+	padding-block: 10px;
+	padding-inline: 14px;
+	background: none;
+	border: none;
+	font-family: inherit;
+	font-size: 14px;
+	line-height: 1.4;
+	color: #2c3337;
+	text-align: start;
+	cursor: pointer;
+
+	&:hover,
+	&:focus {
+		background: #f0f0f1;
+	}
+
+	&:disabled {
+		color: #a7aaad;
+		cursor: default;
+		background: none;
+	}
+
+	&.kebab-menu-item-destructive {
+		color: #d63638;
+	}
+}
+
+.kebab-menu-divider {
+	margin-block: 6px;
+	border-block-start: 1px solid #e2e2e4;
+}
+
+.kebab-menu-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	box-sizing: border-box;
+	padding-block: 10px;
+	padding-inline: 14px;
+	font-size: 14px;
+	line-height: 1.4;
+	color: #2c3337;
+}
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 5caab9cc8..f3135683a 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -11,6 +11,7 @@
 @use 'common/subnav';
 @use 'common/wp-admin';
 @use 'common/page-header';
+@use 'common/kebab-menu';
 @use 'prism';
 @use 'manage/snippets-table';
 @use 'manage/cloud-community';
diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
new file mode 100644
index 000000000..06ebe972c
--- /dev/null
+++ b/src/js/components/common/KebabMenu.tsx
@@ -0,0 +1,220 @@
+import classnames from 'classnames'
+import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import type { Dispatch, PropsWithChildren, ReactNode, RefObject, SetStateAction } from 'react'
+
+const FOCUSABLE_SELECTOR = [
+	'button:not(:disabled)',
+	'[href]',
+	'input:not(:disabled)',
+	'select:not(:disabled)',
+	'textarea:not(:disabled)',
+	'[tabindex]:not([tabindex="-1"])'
+].join(', ')
+
+interface KebabMenuContextValue {
+	closeMenu: () => void
+}
+
+const KebabMenuContext = createContext<KebabMenuContextValue>({ closeMenu: () => undefined })
+
+/**
+ * Retrieve the close handler of the containing kebab menu, allowing custom
+ * rows to dismiss the popover once their action has completed.
+ */
+export const useKebabMenu = (): KebabMenuContextValue => useContext(KebabMenuContext)
+
+export interface KebabMenuItemProps {
+	onSelect?: () => void
+	destructive?: boolean
+	keepOpen?: boolean
+	disabled?: boolean
+	className?: string
+}
+
+export const KebabMenuItem: React.FC<PropsWithChildren<KebabMenuItemProps>> = ({
+	onSelect,
+	destructive,
+	keepOpen,
+	disabled,
+	className,
+	children
+}) => {
+	const { closeMenu } = useKebabMenu()
+
+	return (
+		<li role="presentation">
+			<button
+				type="button"
+				role="menuitem"
+				className={classnames('kebab-menu-item', { 'kebab-menu-item-destructive': destructive }, className)}
+				disabled={disabled}
+				onClick={() => {
+					onSelect?.()
+
+					if (!keepOpen) {
+						closeMenu()
+					}
+				}}
+			>
+				{children}
+			</button>
+		</li>
+	)
+}
+
+export const KebabMenuDivider: React.FC = () =>
+	<li role="separator" aria-orientation="horizontal" className="kebab-menu-divider" />
+
+export interface KebabMenuRowProps {
+	className?: string
+}
+
+export const KebabMenuRow: React.FC<PropsWithChildren<KebabMenuRowProps>> = ({ className, children }) =>
+	<li role="presentation" className={classnames('kebab-menu-row', className)}>
+		{children}
+	</li>
+
+const KebabIcon: React.FC = () =>
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+		<circle cx="9" cy="3.5" r="1.6" fill="currentColor" />
+		<circle cx="9" cy="9" r="1.6" fill="currentColor" />
+		<circle cx="9" cy="14.5" r="1.6" fill="currentColor" />
+	</svg>
+
+interface PopoverBehaviourOptions {
+	isOpen: boolean
+	setIsOpen: Dispatch<SetStateAction<boolean>>
+	closeMenu: () => void
+	containerRef: RefObject<HTMLDivElement>
+	triggerRef: RefObject<HTMLButtonElement>
+	popoverRef: RefObject<HTMLUListElement>
+}
+
+// Flip the popover above the trigger when it would overflow the viewport,
+// and move focus to its first interactive element on open.
+const usePopoverPlacement = ({ isOpen, triggerRef, popoverRef }: PopoverBehaviourOptions): boolean => {
+	const [isFlipped, setIsFlipped] = useState(false)
+
+	useLayoutEffect(() => {
+		if (isOpen && popoverRef.current) {
+			const popover = popoverRef.current.getBoundingClientRect()
+			const trigger = triggerRef.current?.getBoundingClientRect()
+			setIsFlipped(popover.bottom > window.innerHeight && (trigger?.top ?? 0) > popover.height)
+			popoverRef.current.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)?.focus()
+		} else {
+			setIsFlipped(false)
+		}
+	}, [isOpen, triggerRef, popoverRef])
+
+	return isFlipped
+}
+
+// Close the open popover on outside clicks or Escape, and trap Tab focus
+// within it while it remains open.
+const usePopoverDismissal = ({ isOpen, setIsOpen, closeMenu, containerRef, popoverRef }: PopoverBehaviourOptions) => {
+	useEffect(() => {
+		if (!isOpen) {
+			return
+		}
+
+		const handlePointerDown = (event: MouseEvent) => {
+			if (event.target instanceof Node && !containerRef.current?.contains(event.target)) {
+				setIsOpen(false)
+			}
+		}
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if ('Escape' === event.key) {
+				event.preventDefault()
+				closeMenu()
+				return
+			}
+
+			if ('Tab' !== event.key || !popoverRef.current) {
+				return
+			}
+
+			const focusable = Array.from(popoverRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+			const active = document.activeElement
+			const currentIndex = active instanceof HTMLElement ? focusable.indexOf(active) : -1
+
+			if (0 === focusable.length) {
+				event.preventDefault()
+			} else if (event.shiftKey && 0 >= currentIndex) {
+				event.preventDefault()
+				focusable[focusable.length - 1].focus()
+			} else if (!event.shiftKey && (-1 === currentIndex || currentIndex === focusable.length - 1)) {
+				event.preventDefault()
+				focusable[0].focus()
+			}
+		}
+
+		document.addEventListener('mousedown', handlePointerDown)
+		document.addEventListener('keydown', handleKeyDown)
+
+		return () => {
+			document.removeEventListener('mousedown', handlePointerDown)
+			document.removeEventListener('keydown', handleKeyDown)
+		}
+	}, [isOpen, setIsOpen, closeMenu, containerRef, popoverRef])
+}
+
+export interface KebabMenuProps {
+	label: string
+	className?: string
+	children: ReactNode
+}
+
+/**
+ * Generic "more actions" menu: a square trigger button that opens a popover
+ * of actions anchored to its bottom-end corner, flipping above the trigger
+ * when there is no room below. The popover stays open for clicks inside it
+ * and closes on outside clicks, Escape, or when an item action completes.
+ */
+export const KebabMenu: React.FC<KebabMenuProps> = ({ label, className, children }) => {
+	const [isOpen, setIsOpen] = useState(false)
+	const containerRef = useRef<HTMLDivElement>(null)
+	const triggerRef = useRef<HTMLButtonElement>(null)
+	const popoverRef = useRef<HTMLUListElement>(null)
+	const menuId = useId()
+
+	const closeMenu = useCallback(() => {
+		setIsOpen(false)
+		triggerRef.current?.focus()
+	}, [])
+
+	const behaviourOptions = { isOpen, setIsOpen, closeMenu, containerRef, triggerRef, popoverRef }
+	const isFlipped = usePopoverPlacement(behaviourOptions)
+	usePopoverDismissal(behaviourOptions)
+
+	return (
+		<div ref={containerRef} className={classnames('kebab-menu', className)}>
+			<button
+				ref={triggerRef}
+				type="button"
+				className="kebab-menu-trigger"
+				aria-label={label}
+				aria-haspopup="true"
+				aria-expanded={isOpen}
+				aria-controls={menuId}
+				onClick={() => setIsOpen(open => !open)}
+			>
+				<KebabIcon />
+			</button>
+
+			{isOpen
+				? <KebabMenuContext.Provider value={{ closeMenu }}>
+					<ul
+						ref={popoverRef}
+						id={menuId}
+						role="menu"
+						aria-label={label}
+						className={classnames('kebab-menu-popover', { 'kebab-menu-popover-top': isFlipped })}
+					>
+						{children}
+					</ul>
+				</KebabMenuContext.Provider>
+				: null}
+		</div>
+	)
+}

From fa5cb75ebd81a5e6acb16d04ede0ee09ec0d98e5 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:40:11 +0300
Subject: [PATCH 07/91] feat: restyle settings page tabs and title to new admin
 shell

---
 src/css/settings.scss                 | 27 ++++++++++++++++++++-------
 src/php/Admin/Menus/Settings_Menu.php | 15 ++++-----------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/css/settings.scss b/src/css/settings.scss
index df3285f11..fb2e1217b 100644
--- a/src/css/settings.scss
+++ b/src/css/settings.scss
@@ -2,20 +2,33 @@
 @use 'common/subnav';
 @use 'common/toolbar';
 @use 'common/wp-admin';
+@use 'common/page-header';
 
 $sections: general, editor, debug, version-switch;
 
-.wrap > h2:first-of-type {
-	font-size: 1.5rem;
-	font-weight: 400;
-	line-height: 1.3;
-	padding: 0;
-	margin-block: 50px 1rem;
+.snippets-page-header h1 {
+	color: #2c3337;
+}
+
+// Settings tab tiles sit slightly darker than the manage-page subnav so
+// they read against the plain white settings page background.
+.settings-type-nav .snippet-type-link {
+	background: #e5e5e6;
+	border-inline-end: 1px solid #c3c4c7;
+
+	&.active-type {
+		background: #f0f0f1;
+	}
 }
 
 p.submit {
 	display: flex;
-	justify-content: space-between;
+	justify-content: flex-start;
+	gap: 14px;
+
+	.button-secondary {
+		background: transparent;
+	}
 }
 
 .settings-section,
diff --git a/src/php/Admin/Menus/Settings_Menu.php b/src/php/Admin/Menus/Settings_Menu.php
index 2506e6f58..50f0cbec1 100644
--- a/src/php/Admin/Menus/Settings_Menu.php
+++ b/src/php/Admin/Menus/Settings_Menu.php
@@ -200,7 +200,9 @@ public function render() {
 		<div class="wrap" data-active-tab="<?php echo esc_attr( $current_section ); ?>">
 			<?php $this->render_section_tabs(); ?>
 
-			<h2 class="screen-reader-text"><?php esc_html_e( 'Settings', 'code-snippets' ); ?></h2>
+			<div class="snippets-page-header">
+				<h1><?php esc_html_e( 'Snippets Settings', 'code-snippets' ); ?></h1>
+			</div>
 
 			<?php
 			if ( code_snippets()->is_compact_menu() ) {
@@ -261,23 +263,14 @@ protected function render_section_tabs() {
 		$sections = $this->get_sections();
 		$active_tab = $this->get_current_section();
 
-		$icons = [
-			'general'        => 'admin-generic',
-			'editor'         => 'editor-code',
-			'debug'          => 'admin-tools',
-			'version-switch' => 'backup',
-			'license'        => 'admin-network',
-		];
-
 		echo '<nav class="snippet-type-nav settings-type-nav" id="settings-sections-tabs" aria-label="' . esc_attr__( 'Settings tabs', 'code-snippets' ) . '"><ul>';
 
 		foreach ( $sections as $section ) {
 			printf(
-				'<li><a class="snippet-type-link%s" data-section="%s" href="%s"><span class="dashicons dashicons-%s snippet-type-icon" aria-hidden="true"></span><span>%s</span></a></li>',
+				'<li><a class="snippet-type-link%s" data-section="%s" href="%s"><span>%s</span></a></li>',
 				esc_attr( $active_tab ) === $section['id'] ? ' active-type' : '',
 				esc_attr( $section['id'] ),
 				esc_url( add_query_arg( 'section', $section['id'] ) ),
-				esc_attr( $icons[ $section['id'] ] ?? 'admin-generic' ),
 				esc_html( $section['title'] )
 			);
 		}

From 5c267c3cfb66f3cd4a5ec4bc9a6afd90ea1e5bc8 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:40:48 +0300
Subject: [PATCH 08/91] feat: align import page title with new admin shell

---
 src/css/import/_page.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/css/import/_page.scss b/src/css/import/_page.scss
index 428016bcf..0cc3917b6 100644
--- a/src/css/import/_page.scss
+++ b/src/css/import/_page.scss
@@ -1,8 +1,9 @@
 .wrap > h2:first-of-type {
-	font-size: 1.5rem;
-	font-weight: 400;
-	line-height: 1.3;
-	margin-block: 50px 1rem;
+	font-size: 32px;
+	font-weight: 510;
+	line-height: 1.25;
+	color: #2c3337;
+	margin-block: 24px 16px;
 	padding: 0;
 }
 

From ee0e4de0c43475c7539b3cd59c2782569342218d Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 17:30:43 +0300
Subject: [PATCH 09/91] fix: align badge palette, nav border, controls and
 settings labels with design

---
 src/css/common/_theme.scss                          |  8 ++++----
 src/css/common/_toolbar.scss                        |  2 +-
 src/css/common/_wp-admin.scss                       | 10 +++++-----
 src/css/settings.scss                               |  7 +++++++
 .../ManageMenu/SnippetsTable/SnippetsTable.tsx      | 13 ++++---------
 src/js/components/common/SubnavTabs.tsx             |  1 -
 6 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/css/common/_theme.scss b/src/css/common/_theme.scss
index 3453a6f84..e2ca153f4 100644
--- a/src/css/common/_theme.scss
+++ b/src/css/common/_theme.scss
@@ -19,11 +19,11 @@ $control-radius: 5px;
 
 /* format: background-color [color] */
 $badges: (
-	php: #1d97c6,
-	html: #ef6a36,
+	php: #3288bd,
+	html: #d7754e,
 	css: #9b59b6,
-	js: #ffeb3b #1c1f20,
-	cond: #2eae95,
+	js: #f7d67a #1c1f20,
+	cond: #67a5ad,
 	core: #61c5cb,
 	pro: #f7e8e3 #df9279,
 	cloud: $cloud,
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index d0198db0f..0e88d4d27 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -65,7 +65,7 @@ $wpcontent-inline-start-indent: 20px;
 }
 
 .code-snippets-toolbar-lower {
-	border-block-end: 1px solid #c3c4c7;
+	border-block-end: 1px solid #e2e2e4;
 	block-size: 60px;
 	box-sizing: border-box;
 
diff --git a/src/css/common/_wp-admin.scss b/src/css/common/_wp-admin.scss
index f5d900453..3d591025f 100644
--- a/src/css/common/_wp-admin.scss
+++ b/src/css/common/_wp-admin.scss
@@ -82,8 +82,8 @@
 		padding-block: 0;
 		padding-inline: 12px;
 		border-radius: theme.$control-radius;
-		line-height: 2.7692;
-		font-size: 13px;
+		line-height: 2.5715;
+		font-size: 14px;
 		font-weight: 400;
 		background: #f6f7f7;
 		border-color: theme.$accent;
@@ -109,9 +109,9 @@
 		padding-block: 0;
 		padding-inline: 12px;
 		border-radius: theme.$control-radius;
-		line-height: 2.7692;
-		font-size: 13px;
-		font-weight: 400;
+		line-height: 2.5715;
+		font-size: 14px;
+		font-weight: 700;
 		background: theme.$accent;
 		border-color: theme.$accent;
 		color: #fff;
diff --git a/src/css/settings.scss b/src/css/settings.scss
index fb2e1217b..8e2f3b081 100644
--- a/src/css/settings.scss
+++ b/src/css/settings.scss
@@ -31,6 +31,13 @@ p.submit {
 	}
 }
 
+.settings-section .form-table th {
+	inline-size: 261px;
+	font-size: 14px;
+	font-weight: 700;
+	color: #2c3337;
+}
+
 .settings-section,
 p.submit {
 	max-inline-size: 1020px;
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 4ad793779..5a73a2e7e 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
 import { useSnippetView } from '../../../hooks/useSnippetView'
 import { WithSnippetsAPIContext } from '../../../hooks/useSnippetsAPI'
-import { WithSnippetsListContext, useSnippetsList } from '../../../hooks/useSnippetsList'
+import { WithSnippetsListContext } from '../../../hooks/useSnippetsList'
 import { SNIPPET_TYPES } from '../../../types/Snippet'
 import { isLicensed } from '../../../utils/screen'
 import { SNIPPET_TYPE_LABELS, getSnippetEditUrl, isProType } from '../../../utils/snippets/snippets'
@@ -22,11 +22,10 @@ import type { SnippetType } from '../../../types/Snippet'
 
 interface SnippetTypeTabProps {
 	type?: SnippetType
-	count?: number
 	setIsUpgradeDialogOpen: (isOpen: boolean) => void
 }
 
-const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, count, setIsUpgradeDialogOpen }) => {
+const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, setIsUpgradeDialogOpen }) => {
 	const { currentType, setCurrentType } = useSnippetsFilters()
 	const tabName = type ?? 'all'
 
@@ -49,11 +48,10 @@ const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, count, setIsUpgra
 					}
 				}}
 			>
-				{type && <Badge small name={type} />}
+				{type && <Badge name={type} />}
 				<span className={`${tabName}-label`}>
 					{type ? SNIPPET_TYPE_LABELS[type] : __('All Snippets', 'code-snippets')}
 				</span>
-				{undefined !== count && <span className="subnav-count">{count}</span>}
 				{type && isProType(type) && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 			</a>
 		</li>
@@ -84,9 +82,6 @@ const SafeModeNotice = () =>
 const SnippetsTableInner = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 	const { snippetView, setSnippetView } = useSnippetView()
-	const { snippetsList } = useSnippetsList()
-
-	const allCount = snippetsList?.filter(snippet => !snippet.trashed).length
 
 	return (
 		<>
@@ -95,7 +90,7 @@ const SnippetsTableInner = () => {
 				aria-label={__('Snippet types', 'code-snippets')}
 			>
 				<ul>
-					<SnippetTypeTab count={allCount} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
+					<SnippetTypeTab setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
 					{SNIPPET_TYPES.map(type =>
 						<SnippetTypeTab key={type} type={type} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />)}
 
diff --git a/src/js/components/common/SubnavTabs.tsx b/src/js/components/common/SubnavTabs.tsx
index a12c2ff6f..2d6731c2c 100644
--- a/src/js/components/common/SubnavTabs.tsx
+++ b/src/js/components/common/SubnavTabs.tsx
@@ -62,7 +62,6 @@ export const SubnavTabs = <T extends string>({
 							>
 								{tab.icon}
 								<span>{tab.label}</span>
-								{undefined !== tab.count && <span className="subnav-count">{tab.count}</span>}
 								{tab.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 							</button>
 						</li>)}

From 9b0912e665c15a219a1c3a42a4790a9b92c2566b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 18:24:38 +0300
Subject: [PATCH 10/91] feat: remove import link from plugin toolbar navigation

---
 src/js/components/common/Toolbar.tsx            | 10 +---------
 src/js/components/common/icons/ToolbarIcons.tsx | 11 -----------
 src/js/types/Window.ts                          |  1 -
 src/php/Plugin.php                              |  1 -
 4 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index f6580231f..f6c4e04fc 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import React, { useState } from 'react'
 import { isLicensed, shouldShowUpsell } from '../../utils/screen'
 import { buildUrl, fetchQueryParam } from '../../utils/urls'
-import { BlueprintIcon, CommunityIcon, ImportIcon, LibraryIcon, SettingsIcon, SnippetsIcon } from './icons/ToolbarIcons'
+import { BlueprintIcon, CommunityIcon, LibraryIcon, SettingsIcon, SnippetsIcon } from './icons/ToolbarIcons'
 import { UpsellDialog } from './UpsellDialog'
 import type { ReactNode } from 'react'
 
@@ -70,14 +70,6 @@ const LOWER_NAV_LINKS: readonly NavLink[] = [
 		pro: true,
 		subpage: 'cloud-library'
 	},
-	{
-		name: 'import',
-		url: window.CODE_SNIPPETS?.urls.import,
-		label: __('Import', 'code-snippets'),
-		icon: <ImportIcon aria-hidden="true" />,
-		pageSlug: 'import-code-snippets',
-		end: true
-	},
 	{
 		name: 'settings',
 		url: window.CODE_SNIPPETS?.urls.settings,
diff --git a/src/js/components/common/icons/ToolbarIcons.tsx b/src/js/components/common/icons/ToolbarIcons.tsx
index fec0a9703..dcdc4590d 100644
--- a/src/js/components/common/icons/ToolbarIcons.tsx
+++ b/src/js/components/common/icons/ToolbarIcons.tsx
@@ -52,17 +52,6 @@ export const SnippetsIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
 		/>
 	</svg>
 
-export const ImportIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
-	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-		<path
-			d="M4.33333 17.3337V20.5837C4.33333 21.1584 4.5616 21.7094 4.96793 22.1157C5.37426 22.5221 5.92536 22.7503 6.5 22.7503H19.5C20.0746 22.7503 20.6257 22.5221 21.0321 22.1157C21.4384 21.7094 21.6667 21.1584 21.6667 20.5837V17.3337M13 3.25033V16.2503M13 16.2503L8.66667 11.917M13 16.2503L17.3333 11.917"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-	</svg>
-
 export const BlueprintIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
 	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path
diff --git a/src/js/types/Window.ts b/src/js/types/Window.ts
index 0cde7f3cb..f29630376 100644
--- a/src/js/types/Window.ts
+++ b/src/js/types/Window.ts
@@ -45,7 +45,6 @@ declare global {
 				addNew: string
 				edit: string
 				welcome: string
-				import: string
 				settings: string
 				cloud: string
 			}
diff --git a/src/php/Plugin.php b/src/php/Plugin.php
index 870d968ba..923dc28fb 100644
--- a/src/php/Plugin.php
+++ b/src/php/Plugin.php
@@ -368,7 +368,6 @@ public function localize_script( string $handle ) {
 					'edit'     => esc_url_raw( $this->get_menu_url( 'edit' ) ),
 					'addNew'   => esc_url_raw( $this->get_menu_url( 'add' ) ),
 					'welcome'  => esc_url_raw( $this->get_menu_url( 'welcome' ) ),
-					'import'   => esc_url_raw( $this->get_menu_url( 'import' ) ),
 					'settings' => esc_url_raw( $this->get_menu_url( 'settings' ) ),
 					'cloud'    => esc_url_raw( $this->cloud_connection->get_base_url() ),
 				],

From 05760a0519c7be2e62b7c36d72f7b52a30e90ebb Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 18:26:32 +0300
Subject: [PATCH 11/91] feat: restyle snippet type tabs with restored item
 counts

---
 src/css/common/_subnav.scss                   | 56 +++++++++----------
 .../SnippetsTable/SnippetsTable.tsx           | 33 +++++++++--
 src/js/components/common/SubnavTabs.tsx       |  1 +
 3 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index a72743b9b..77cb5b30c 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -1,9 +1,10 @@
-// Snippet-type navigation: a boxed segmented control on a grey band, with
+// Snippet-type navigation: a boxed segmented control on a white band, with
 // each tab separated by a vertical rule and the active tab shown as a
-// filled tile. The view toggle sits at the far end of the band.
+// filled tile. The plugin toolbar above already draws the separating border,
+// so the band only draws its own bottom border.
 .snippet-type-nav {
-	background: #f7f7f8;
-	border-block: 1px solid #e2e2e4;
+	background: #fff;
+	border-block-end: 1px solid #e2e2e4;
 	min-block-size: 53px;
 
 	// Bleed across the full admin content width, flush against the plugin
@@ -26,20 +27,24 @@
 		display: flex;
 		align-items: stretch;
 		flex-wrap: wrap;
-		min-block-size: 51px;
+		min-block-size: 52px;
 		margin: 0;
 		padding: 0;
 		list-style: none;
 	}
 
+	// Pull each tab 1px past the band so its own bottom border sits exactly
+	// on the band border; the active tab then repaints that line in its tile
+	// colour without doubling up borders anywhere.
 	li {
 		display: flex;
-		margin: 0;
+		margin-block: 0 -1px;
+		margin-inline: 0;
 	}
 
 	button.snippet-type-link {
 		background: none;
-		border-block: none;
+		border-block-start: none;
 		border-inline-start: none;
 		font-family: inherit;
 	}
@@ -54,17 +59,24 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: 10px;
+		gap: 8px;
 		min-inline-size: 100px;
 		padding-block: 0;
 		padding-inline: 24px;
 		cursor: pointer;
 		font-size: 14px;
-		font-weight: 700;
+		font-weight: 590;
+		line-height: 1.5;
 		color: #646970;
 		text-decoration: none;
 		box-sizing: border-box;
 		border-inline-end: 1px solid #e2e2e4;
+		border-block-end: 1px solid #e2e2e4;
+
+		// The text-only "All Snippets" tab uses a wider gap before its count.
+		&.all-type-link {
+			gap: 12px;
+		}
 
 		svg {
 			display: block;
@@ -80,6 +92,7 @@
 
 		&.active-type {
 			background: #f0f0f1;
+			border-color: #f0f0f1;
 			color: #2c3337;
 		}
 
@@ -168,24 +181,11 @@
 }
 
 
-// Count pill shown beside a subnav tab's label (e.g. total on the "All" tab).
+// Item count shown after a subnav tab's label, muted against the label text.
 .snippet-type-nav .subnav-count {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-inline-size: 20px;
-	block-size: 20px;
-	padding-inline: 7px;
-	border-radius: 999px;
-	background: #2271b1;
-	color: #fff;
-	font-size: 11px;
-	font-weight: 600;
-	line-height: 1;
-	box-sizing: border-box;
-}
-
-.snippet-type-nav .snippet-type-link:not(.active-type) .subnav-count {
-	background: #dbebf7;
-	color: #2271b1;
+	font-size: 14px;
+	font-weight: 590;
+	line-height: 1.5;
+	color: #2c3337;
+	opacity: 0.4;
 }
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 5a73a2e7e..671243792 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -1,14 +1,14 @@
 import { __ } from '@wordpress/i18n'
 import { createInterpolateElement } from '@wordpress/element'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import classnames from 'classnames'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
 import { useSnippetView } from '../../../hooks/useSnippetView'
 import { WithSnippetsAPIContext } from '../../../hooks/useSnippetsAPI'
-import { WithSnippetsListContext } from '../../../hooks/useSnippetsList'
+import { WithSnippetsListContext, useSnippetsList } from '../../../hooks/useSnippetsList'
 import { SNIPPET_TYPES } from '../../../types/Snippet'
 import { isLicensed } from '../../../utils/screen'
-import { SNIPPET_TYPE_LABELS, getSnippetEditUrl, isProType } from '../../../utils/snippets/snippets'
+import { SNIPPET_TYPE_LABELS, getSnippetEditUrl, getSnippetType, isProType } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { Badge } from '../../common/Badge'
 import { Notice } from '../../common/Notice'
@@ -22,10 +22,11 @@ import type { SnippetType } from '../../../types/Snippet'
 
 interface SnippetTypeTabProps {
 	type?: SnippetType
+	count?: number
 	setIsUpgradeDialogOpen: (isOpen: boolean) => void
 }
 
-const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, setIsUpgradeDialogOpen }) => {
+const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, count, setIsUpgradeDialogOpen }) => {
 	const { currentType, setCurrentType } = useSnippetsFilters()
 	const tabName = type ?? 'all'
 
@@ -52,6 +53,7 @@ const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, setIsUpgradeDialo
 				<span className={`${tabName}-label`}>
 					{type ? SNIPPET_TYPE_LABELS[type] : __('All Snippets', 'code-snippets')}
 				</span>
+				{undefined !== count && <span className="subnav-count">{count}</span>}
 				{type && isProType(type) && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 			</a>
 		</li>
@@ -82,6 +84,20 @@ const SafeModeNotice = () =>
 const SnippetsTableInner = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 	const { snippetView, setSnippetView } = useSnippetView()
+	const { snippetsList } = useSnippetsList()
+
+	const countedSnippets = useMemo(
+		() => snippetsList?.filter(snippet => !snippet.trashed),
+		[snippetsList]
+	)
+
+	const typeCounts = useMemo(
+		() => countedSnippets?.reduce((counts, snippet) => {
+			const type = getSnippetType(snippet)
+			return counts.set(type, (counts.get(type) ?? 0) + 1)
+		}, new Map<SnippetType, number>()),
+		[countedSnippets]
+	)
 
 	return (
 		<>
@@ -90,9 +106,14 @@ const SnippetsTableInner = () => {
 				aria-label={__('Snippet types', 'code-snippets')}
 			>
 				<ul>
-					<SnippetTypeTab setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
+					<SnippetTypeTab count={countedSnippets?.length} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
 					{SNIPPET_TYPES.map(type =>
-						<SnippetTypeTab key={type} type={type} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />)}
+						<SnippetTypeTab
+							key={type}
+							type={type}
+							count={countedSnippets && (typeCounts?.get(type) ?? 0)}
+							setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
+						/>)}
 
 					<li className="snippet-view-toggle-nav-item">
 						<SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
diff --git a/src/js/components/common/SubnavTabs.tsx b/src/js/components/common/SubnavTabs.tsx
index 2d6731c2c..a12c2ff6f 100644
--- a/src/js/components/common/SubnavTabs.tsx
+++ b/src/js/components/common/SubnavTabs.tsx
@@ -62,6 +62,7 @@ export const SubnavTabs = <T extends string>({
 							>
 								{tab.icon}
 								<span>{tab.label}</span>
+								{undefined !== tab.count && <span className="subnav-count">{tab.count}</span>}
 								{tab.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 							</button>
 						</li>)}

From d3de19476fcb1ed4b9309bf48472e0b55560adba Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 18:27:05 +0300
Subject: [PATCH 12/91] feat: reflect selected snippet type in manage page
 title

---
 .../ManageMenu/SnippetsTable/SnippetsTable.tsx           | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 671243792..48662c4bc 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -1,4 +1,4 @@
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 import { createInterpolateElement } from '@wordpress/element'
 import React, { useMemo, useState } from 'react'
 import classnames from 'classnames'
@@ -84,6 +84,7 @@ const SafeModeNotice = () =>
 const SnippetsTableInner = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 	const { snippetView, setSnippetView } = useSnippetView()
+	const { currentType } = useSnippetsFilters()
 	const { snippetsList } = useSnippetsList()
 
 	const countedSnippets = useMemo(
@@ -124,7 +125,11 @@ const SnippetsTableInner = () => {
 			<ScreenMetaSlot />
 
 			<div className="snippets-page-header">
-				<h1>{__('Manage Code Snippets', 'code-snippets')}</h1>
+				<h1>{sprintf(
+					// translators: %s: label of the currently selected snippet type.
+					__('Local Snippets: %s', 'code-snippets'),
+					currentType ? SNIPPET_TYPE_LABELS[currentType] : __('All Snippets', 'code-snippets')
+				)}</h1>
 				<a href={getSnippetEditUrl()} className="button button-primary">
 					{__('Create new Snippet', 'code-snippets')}
 				</a>

From 62f5faa48d16a028ad581440ac215264db73ff44 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 18:36:16 +0300
Subject: [PATCH 13/91] feat: unify results toolbar across table and card
 snippet views

---
 src/css/manage/_snippets-table.scss           | 152 +++++++++++++++---
 .../SnippetsTable/SnippetsCardGrid.tsx        | 122 ++------------
 .../SnippetsTable/SnippetsListTable.tsx       |  14 +-
 .../SnippetsTable/SnippetsTable.tsx           |  21 +--
 .../SnippetsTable/SnippetsTableSearch.tsx     |   6 +
 .../components/common/ListTable/ListTable.tsx |   9 +-
 .../common/ListTable/TableNavigation.tsx      |  39 +++++
 .../common/ListTable/TablePagination.tsx      |   2 +-
 8 files changed, 224 insertions(+), 141 deletions(-)

diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 35b28bedd..0cf9caecb 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -1,4 +1,5 @@
 @use '../common/list-table';
+@use '../common/theme';
 
 .column-name,
 .column-type {
@@ -60,21 +61,6 @@
 	display: table-cell !important;
 }
 
-.snippets-card-grid-container {
-	.snippets-cards-toolbar {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-
-		.snippets-cards-select-all,
-		.snippets-cards-sort {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-		}
-	}
-}
-
 .snippets-card-grid {
 	// Three equal-height cards per row; descriptions are clamped so height
 	// stays uniform regardless of text length. The compound selector wins
@@ -221,25 +207,155 @@
 	}
 }
 
-// Shared top table-navigation layout for both snippet views: bulk actions
-// and filters on the left, with the search field filling the remaining
-// width of the row.
+// Unified results toolbar shared by the table and card snippet views:
+// bulk actions, select-all, tag filter and search grouped on the
+// inline-start side, with the item count, pagination and view toggle
+// grouped on the inline-end side.
 .snippets-list-view .tablenav.top {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	block-size: auto;
+	gap: 12px 18px;
 	margin-block-end: 20px;
 
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		float: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.bulkactions select,
+	#snippets-tag-filter {
+		inline-size: 154px;
+	}
+
+	.snippets-search-area {
+		gap: 8px;
+	}
+
+	// The trailing float-clearing break would otherwise register as an
+	// empty flex item and contribute a stray column gap.
+	br.clear {
+		display: none;
+	}
+}
+
+.snippets-list-view label.snippets-select-all {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+
+	input[type='checkbox'] {
+		inline-size: 20px;
+		block-size: 20px;
+		margin: 0;
+		border: 1px solid #c3c4c7;
+		border-radius: 5px;
+		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
+	}
+}
+
+// Search field uses a lighter border than the other toolbar controls.
+.snippets-list-view .tablenav .search-box {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	input[type='search'] {
+		border-color: #e3e3e4;
+	}
+}
+
+// Inline-end toolbar group: item count and pagination pushed to the end of
+// the row, with the view toggle following at a 24px gap (18px column gap
+// plus 6px margin).
+.snippets-list-view .tablenav.top .tablenav-pages-nav {
+	margin-inline-start: auto;
+}
+
+.snippets-list-view .tablenav.top .snippet-view-toggle {
+	margin-inline-start: auto;
+	padding-inline-end: 0;
+}
+
+.snippets-list-view .tablenav.top .tablenav-pages-nav + .snippet-view-toggle {
+	margin-inline-start: 6px;
 }
 
 .tablenav-pages {
 	.displaying-num {
 		color: #646970;
+		font-size: 14px;
 		white-space: nowrap;
 	}
 }
 
+// Pagination controls: square outline arrow tiles around a wide
+// current-page box with a muted "of N" indicator.
+.snippets-list-view .tablenav .tablenav-pages {
+	display: flex;
+	align-items: center;
+	gap: 24px;
+	margin: 0;
+	float: none;
+
+	.pagination-links {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+
+		.paging-input {
+			gap: 8px;
+			margin-inline: 4px;
+		}
+
+		.button,
+		.tablenav-pages-navspan.button {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			inline-size: 38px;
+			min-inline-size: 38px;
+			block-size: 38px;
+			min-block-size: 38px;
+			box-sizing: border-box;
+			padding: 0;
+			margin: 0;
+			background: #fff;
+			border: 1px solid theme.$accent;
+			border-radius: 5.6px;
+			color: theme.$accent;
+			font-size: 16px;
+			line-height: 1;
+		}
+
+		.tablenav-pages-navspan.button.disabled {
+			background: #fff;
+			border-color: #c3c4c7;
+			color: #a7aaad;
+		}
+
+		input.current-page {
+			inline-size: 45px;
+			min-block-size: 38px;
+			box-sizing: border-box;
+			margin: 0;
+			text-align: center;
+			color: #2c3337;
+		}
+
+		.tablenav-paging-text {
+			font-size: 14px;
+			color: #646970;
+		}
+	}
+}
+
 .snippets-search-subtitle {
 	margin-block: 0 12px;
 	font-size: 14px;
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
index 989d59af4..49fbed1d9 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
@@ -1,66 +1,13 @@
 import React, { useMemo, useState } from 'react'
-import { __ } from '@wordpress/i18n'
-import { getSnippetDisplayName, getSnippetType } from '../../../utils/snippets/snippets'
+import { getSnippetDisplayName } from '../../../utils/snippets/snippets'
 import { TableNavigation } from '../../common/ListTable/TableNavigation'
 import { ManageSnippetCard } from './ManageSnippetCard'
 import type { ListTableAction, ListTableNavProps } from '../../common/ListTable'
 import type { Snippet } from '../../../types/Snippet'
 import type { Dispatch, ReactNode, SetStateAction } from 'react'
 
-type SortKey = 'name' | 'type' | 'modified' | 'priority'
-
-const SORT_LABELS: Record<SortKey, string> = {
-	name: __('Name', 'code-snippets'),
-	type: __('Type', 'code-snippets'),
-	modified: __('Recently Modified', 'code-snippets'),
-	priority: __('Priority', 'code-snippets')
-}
-
-const SORT_COMPARATORS: Record<SortKey, (snippetA: Snippet, snippetB: Snippet) => number> = {
-	name: (snippetA, snippetB) =>
-		getSnippetDisplayName(snippetA).localeCompare(getSnippetDisplayName(snippetB), undefined, { sensitivity: 'base' }),
-	type: (snippetA, snippetB) => getSnippetType(snippetA).localeCompare(getSnippetType(snippetB)),
-	modified: (snippetA, snippetB) =>
-		new Date(snippetB.modified ?? 0).getTime() - new Date(snippetA.modified ?? 0).getTime(),
-	priority: (snippetA, snippetB) => snippetA.priority - snippetB.priority
-}
-
-const isSortKey = (value: string): value is SortKey => value in SORT_COMPARATORS
-
-interface CardsToolbarProps {
-	sortKey: SortKey
-	setSortKey: (sortKey: SortKey) => void
-	allSelected: boolean
-	toggleSelectAll: (isSelected: boolean) => void
-}
-
-const CardsToolbar: React.FC<CardsToolbarProps> = ({ sortKey, setSortKey, allSelected, toggleSelectAll }) =>
-	<div className="alignleft actions snippets-cards-toolbar">
-		<label className="snippets-cards-select-all">
-			<input
-				type="checkbox"
-				checked={allSelected}
-				aria-label={__('Select all snippets', 'code-snippets')}
-				onChange={event => toggleSelectAll(event.target.checked)}
-			/>
-			{__('Select all', 'code-snippets')}
-		</label>
-
-		<label className="snippets-cards-sort">
-			{__('Sort by', 'code-snippets')}
-			<select
-				value={sortKey}
-				onChange={event => {
-					if (isSortKey(event.target.value)) {
-						setSortKey(event.target.value)
-					}
-				}}
-			>
-				{Object.entries(SORT_LABELS).map(([key, label]) =>
-					<option key={key} value={key}>{label}</option>)}
-			</select>
-		</label>
-	</div>
+const compareSnippetNames = (snippetA: Snippet, snippetB: Snippet): number =>
+	getSnippetDisplayName(snippetA).localeCompare(getSnippetDisplayName(snippetB), undefined, { sensitivity: 'base' })
 
 interface CardGridProps {
 	snippets: Snippet[]
@@ -94,43 +41,11 @@ const CardGrid: React.FC<CardGridProps> = ({ snippets, noItems, selected, setSel
 		</ul>
 		: <p className="no-items">{noItems}</p>
 
-interface ToggleSnippetsSelectionParams {
-	previous: Set<Snippet['id']>
-	snippets: Snippet[]
-	isSelected: boolean
-}
-
-const toggleSnippetsSelection = ({ previous, snippets, isSelected }: ToggleSnippetsSelectionParams): Set<Snippet['id']> => {
-	const updated = new Set(previous)
-
-	snippets.forEach(snippet => {
-		if (isSelected) {
-			updated.add(snippet.id)
-		} else {
-			updated.delete(snippet.id)
-		}
-	})
-
-	return updated
-}
-
 const getVisibleSelection = (selected: Set<Snippet['id']>, visible: Snippet[]): Set<Snippet['id']> =>
 	new Set([...selected].filter(id => visible.some(snippet => snippet.id === id)))
 
-const composeExtraTableNav = (
-	toolbar: ReactNode,
-	extraTableNav: ((which: 'top' | 'bottom') => ReactNode) | undefined
-) =>
-	function extraCardsTableNav(which: 'top' | 'bottom'): ReactNode {
-		return <>
-			{'top' === which ? toolbar : null}
-			{extraTableNav?.(which)}
-		</>
-	}
-
 interface SortedPagedSnippetsParams {
 	snippets: Snippet[]
-	sortKey: SortKey
 	itemsPerPage: number | undefined
 	currentPage: number
 }
@@ -142,10 +57,10 @@ interface PagedSnippets {
 	visibleSnippets: Snippet[]
 }
 
-const useSortedPagedSnippets = ({ snippets, sortKey, itemsPerPage, currentPage }: SortedPagedSnippetsParams): PagedSnippets => {
+const useSortedPagedSnippets = ({ snippets, itemsPerPage, currentPage }: SortedPagedSnippetsParams): PagedSnippets => {
 	const sortedSnippets = useMemo(
-		() => snippets.toSorted(SORT_COMPARATORS[sortKey]),
-		[snippets, sortKey]
+		() => snippets.toSorted(compareSnippetNames),
+		[snippets]
 	)
 
 	const totalPages = itemsPerPage ? Math.ceil(sortedSnippets.length / itemsPerPage) : 0
@@ -162,7 +77,7 @@ const useSortedPagedSnippets = ({ snippets, sortKey, itemsPerPage, currentPage }
 }
 
 export interface SnippetsCardGridProps<A extends string>
-	extends Pick<ListTableNavProps<Snippet['id'], A>, 'extraTableNav'> {
+	extends Pick<ListTableNavProps<Snippet['id'], A>, 'extraTableNav' | 'selectAll' | 'endTableNav'> {
 	snippets: Snippet[]
 	actions: ListTableAction<A>[]
 	doAction: (action: A, selected: Set<Snippet['id']>) => Promise<void>
@@ -176,41 +91,34 @@ export const SnippetsCardGrid = <A extends string>({
 	actions,
 	doAction,
 	extraTableNav,
+	selectAll,
+	endTableNav,
 	itemsPerPage,
 	noItems,
 	beforeGrid
 }: SnippetsCardGridProps<A>) => {
 	const [selected, setSelected] = useState(() => new Set<Snippet['id']>())
-	const [sortKey, setSortKey] = useState<SortKey>('name')
 	const [currentPage, setCurrentPage] = useState(1)
 
 	const { sortedSnippets, totalPages, safePage, visibleSnippets } =
-		useSortedPagedSnippets({ snippets, sortKey, itemsPerPage, currentPage })
-	const allSelected = 0 < visibleSnippets.length && visibleSnippets.every(snippet => selected.has(snippet.id))
+		useSortedPagedSnippets({ snippets, itemsPerPage, currentPage })
 
 	return (
 		<div className="snippets-card-grid-container">
 			<TableNavigation
 				totalItems={sortedSnippets.length}
-				totalPages={1 < totalPages ? totalPages : undefined}
+				totalPages={totalPages || undefined}
 				currentPage={safePage}
 				setCurrentPage={setCurrentPage}
 				pageSearchParam=""
 				selected={getVisibleSelection(selected, visibleSnippets)}
 				setSelected={setSelected}
+				visibleKeys={visibleSnippets.map(snippet => snippet.id)}
 				actions={actions}
 				doAction={doAction}
-				extraTableNav={composeExtraTableNav(
-					<CardsToolbar
-						sortKey={sortKey}
-						setSortKey={setSortKey}
-						allSelected={allSelected}
-						toggleSelectAll={isSelected => {
-							setSelected(previous => toggleSnippetsSelection({ previous, snippets: visibleSnippets, isSelected }))
-						}}
-					/>,
-					extraTableNav
-				)}
+				extraTableNav={extraTableNav}
+				selectAll={selectAll}
+				endTableNav={endTableNav}
 			>
 				{beforeGrid}
 
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index ca2f33b5f..20dd51953 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -9,6 +9,7 @@ import { REST_BASES } from '../../../utils/restAPI'
 import { getSnippetType, isSnippetActive } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { ListTable } from '../../common/ListTable'
+import { SnippetViewToggle } from '../../common/SnippetViewToggle'
 import { SubmitButton } from '../../common/SubmitButton'
 import { INDEX_STATUS, useSnippetsFilters } from './WithSnippetsTableFilters'
 import { useFilteredSnippets } from './WithFilteredSnippetsContext'
@@ -154,7 +155,7 @@ const FilterByTagControl: React.FC<ExtraTableNavProps> = ({ visibleSnippets }) =
 				aria-label={__('Filter snippets by tag', 'code-snippets')}
 				onChange={event => setCurrentTag(event.target.value)}
 			>
-				<option value="">{__('Show all tags', 'code-snippets')}</option>
+				<option value="">{__('All Tags', 'code-snippets')}</option>
 				{[...tagsList].map(tag =>
 					<option key={tag} value={tag}>{tag}</option>)}
 			</select>
@@ -195,6 +196,7 @@ const getRowClassName = (snippet: Snippet, activeByCondition: Map<Snippet['id'],
 
 interface SnippetsViewProps {
 	snippetView: SnippetView
+	setSnippetView: (view: SnippetView) => void
 	snippets: Snippet[]
 	actions: ListTableAction<SnippetsTableAction>[]
 	doAction: (action: SnippetsTableAction, selected: Set<Snippet['id']>) => Promise<void>
@@ -205,6 +207,7 @@ interface SnippetsViewProps {
 
 const SnippetsView: React.FC<SnippetsViewProps> = ({
 	snippetView,
+	setSnippetView,
 	snippets,
 	actions,
 	doAction,
@@ -216,6 +219,7 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 	const columns = useMemo(() => getTableColumns(hiddenColumns), [hiddenColumns])
 	const itemsPerPage = window.CODE_SNIPPETS_MANAGE?.snippetsPerPage
 	const pageCount = itemsPerPage && Math.ceil(snippets.length / itemsPerPage)
+	const viewToggle = <SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
 
 	return 'card' === snippetView
 		? <SnippetsCardGrid
@@ -224,6 +228,8 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 			doAction={doAction}
 			itemsPerPage={itemsPerPage}
 			extraTableNav={extraTableNav}
+			selectAll
+			endTableNav={viewToggle}
 			noItems={<NoItemsMessage />}
 			beforeGrid={<SearchResultsIndicator />}
 		/>
@@ -236,6 +242,8 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 			doAction={doAction}
 			totalPages={pageCount}
 			extraTableNav={extraTableNav}
+			selectAll
+			endTableNav={viewToggle}
 			rowClassName={snippet => getRowClassName(snippet, activeByCondition)}
 			noItems={<NoItemsMessage />}
 			beforeTable={<SearchResultsIndicator />}
@@ -244,9 +252,10 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 
 export interface SnippetsListTableProps {
 	snippetView: SnippetView
+	setSnippetView: (view: SnippetView) => void
 }
 
-export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({ snippetView }) => {
+export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({ snippetView, setSnippetView }) => {
 	const { snippetsByStatus } = useFilteredSnippets()
 	const { currentStatus, setCurrentStatus } = useSnippetsFilters()
 	const { hiddenColumns, truncateRowValues } = useManageTableSettings()
@@ -279,6 +288,7 @@ export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({ snippetVie
 			<div className="snippets-list-view">
 				<SnippetsView
 					snippetView={snippetView}
+					setSnippetView={setSnippetView}
 					snippets={currentSnippets}
 					actions={'trashed' === currentStatus ? TRASHED_BULK_ACTIONS : BULK_ACTIONS}
 					doAction={applyBulkAction}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 48662c4bc..f1692639a 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -13,7 +13,6 @@ import { buildUrl } from '../../../utils/urls'
 import { Badge } from '../../common/Badge'
 import { Notice } from '../../common/Notice'
 import { ScreenMetaSlot } from '../../common/ScreenMetaSlot'
-import { SnippetViewToggle } from '../../common/SnippetViewToggle'
 import { UpsellDialog } from '../../common/UpsellDialog'
 import { WithSnippetsTableFilters, useSnippetsFilters } from './WithSnippetsTableFilters'
 import { WithFilteredSnippetsContext } from './WithFilteredSnippetsContext'
@@ -81,10 +80,7 @@ const SafeModeNotice = () =>
 		</Notice>
 		: null
 
-const SnippetsTableInner = () => {
-	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
-	const { snippetView, setSnippetView } = useSnippetView()
-	const { currentType } = useSnippetsFilters()
+const useSnippetTypeCounts = () => {
 	const { snippetsList } = useSnippetsList()
 
 	const countedSnippets = useMemo(
@@ -100,6 +96,15 @@ const SnippetsTableInner = () => {
 		[countedSnippets]
 	)
 
+	return { countedSnippets, typeCounts }
+}
+
+const SnippetsTableInner = () => {
+	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+	const { snippetView, setSnippetView } = useSnippetView()
+	const { currentType } = useSnippetsFilters()
+	const { countedSnippets, typeCounts } = useSnippetTypeCounts()
+
 	return (
 		<>
 			<nav
@@ -115,10 +120,6 @@ const SnippetsTableInner = () => {
 							count={countedSnippets && (typeCounts?.get(type) ?? 0)}
 							setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
 						/>)}
-
-					<li className="snippet-view-toggle-nav-item">
-						<SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
-					</li>
 				</ul>
 			</nav>
 
@@ -140,7 +141,7 @@ const SnippetsTableInner = () => {
 			<SafeModeNotice />
 
 			<WithFilteredSnippetsContext>
-				<SnippetsListTable snippetView={snippetView} />
+				<SnippetsListTable snippetView={snippetView} setSnippetView={setSnippetView} />
 			</WithFilteredSnippetsContext>
 
 			<UpsellDialog isOpen={isUpgradeDialogOpen} setIsOpen={setIsUpgradeDialogOpen} />
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
index 1f6869c04..fdf5f345b 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
@@ -18,6 +18,12 @@ const SearchBox = () => {
 					onChange={event => setSearchQuery(event.target.value)}
 					placeholder={__('Search snippets', 'code-snippets')}
 				/>
+				<Button
+					className="snippets-search-button"
+					onClick={() => setSearchQuery(searchQuery)}
+				>
+					{__('Search', 'code-snippets')}
+				</Button>
 			</p>
 		</search>
 	)
diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
index 9eb91d606..42cfe9d4b 100644
--- a/src/js/components/common/ListTable/ListTable.tsx
+++ b/src/js/components/common/ListTable/ListTable.tsx
@@ -31,6 +31,8 @@ export interface ListTableNavProps<K extends Key, A extends string> {
 	doAction?: (action: A, selected: Set<K>) => Promise<void>
 	disabled?: boolean
 	extraTableNav?: (which: 'top' | 'bottom') => ReactNode
+	selectAll?: boolean
+	endTableNav?: ReactNode
 }
 
 export interface ListTableRowsProps<T, K extends Key> {
@@ -189,16 +191,17 @@ export const PartialDataListTable = <T, K extends Key, A extends string>({
 	extraTableNav,
 	setCurrentPage,
 	pageSearchParam,
-	setSortDirection,
+	setSortDirection, selectAll, endTableNav,
 	...tableRowsProps
 }: PartialDataListTableProps<T, K, A>) => {
 	const [selected, setSelected] = useState(() => new Set<K>())
 
 	return (
 		<TableNavigation
-			totalItems={totalItems}
 			selected={getVisibleSelected(visibleItems, getKey, selected)}
-			{...{ actions, doAction, extraTableNav, disabled, currentPage, totalPages, pageSearchParam, setSelected, setCurrentPage }}
+			visibleKeys={visibleItems.map(getKey)}
+			{...{ totalItems, actions, doAction, extraTableNav, selectAll, endTableNav }}
+			{...{ disabled, currentPage, totalPages, pageSearchParam, setSelected, setCurrentPage }}
 		>
 			{beforeTable}
 
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index e586318b2..63b7c49e8 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -122,6 +122,36 @@ const BulkActions = function BulkActions<K extends Key, A extends string>({
 	)
 }
 
+interface SelectAllControlProps<K extends Key> {
+	visibleKeys: K[]
+	selected: Set<K>
+	setSelected: Dispatch<SetStateAction<Set<K>>>
+}
+
+const SelectAllControl = <K extends Key>({ visibleKeys, selected, setSelected }: SelectAllControlProps<K>) =>
+	<label className="snippets-select-all">
+		<input
+			type="checkbox"
+			checked={0 < visibleKeys.length && visibleKeys.every(key => selected.has(key))}
+			disabled={0 === visibleKeys.length}
+			aria-label={__('Select all items', 'code-snippets')}
+			onChange={event => {
+				setSelected(previous => {
+					const updated = new Set(previous)
+					visibleKeys.forEach(key => {
+						if (event.target.checked) {
+							updated.add(key)
+						} else {
+							updated.delete(key)
+						}
+					})
+					return updated
+				})
+			}}
+		/>
+		{__('Select all', 'code-snippets')}
+	</label>
+
 export interface TableNavProps<K extends Key, A extends string> extends TableNavigationProps<K, A> {
 	which: 'top' | 'bottom'
 }
@@ -135,6 +165,9 @@ export const TableNav = <K extends Key, A extends string>({
 	totalItems,
 	totalPages = 0,
 	extraTableNav,
+	selectAll,
+	endTableNav,
+	visibleKeys,
 	...paginationProps
 }: TableNavProps<K, A>) =>
 	extraTableNav || 0 < totalItems && actions
@@ -150,8 +183,13 @@ export const TableNav = <K extends Key, A extends string>({
 					onActionSuccess={() => setSelected(new Set())}
 				/>)}
 
+			{'top' === which && selectAll && visibleKeys
+				? <SelectAllControl {...{ visibleKeys, selected, setSelected }} />
+				: null}
+
 			{extraTableNav?.(which)}
 			{0 < totalPages && <TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
+			{'top' === which ? endTableNav : null}
 
 			<br className="clear" />
 		</div>
@@ -163,6 +201,7 @@ export interface TableNavigationProps<K extends Key, A extends string> extends L
 	setSelected: Dispatch<SetStateAction<Set<K>>>
 	totalItems: number
 	totalPages: number | undefined
+	visibleKeys?: K[]
 }
 
 export const TableNavigation = <K extends Key, A extends string>({
diff --git a/src/js/components/common/ListTable/TablePagination.tsx b/src/js/components/common/ListTable/TablePagination.tsx
index c549e24b1..f4b32e526 100644
--- a/src/js/components/common/ListTable/TablePagination.tsx
+++ b/src/js/components/common/ListTable/TablePagination.tsx
@@ -236,7 +236,7 @@ const PaginationControls: React.FC<PaginationControlsProps> = ({
 		: __('Pagination, after the table', 'code-snippets')
 
 	return (
-		<nav aria-label={navLabel}>
+		<nav className="tablenav-pages-nav" aria-label={navLabel}>
 			<form
 				className={classnames('tablenav-pages', {
 					'one-page': totalPages && 1 === totalPages,

From 1fd27031d4873442b5f80159f9ef1808a445b3cd Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 19:06:30 +0300
Subject: [PATCH 14/91] feat: show contextual title and description on
 community cloud page

---
 src/css/common/_page-header.scss              |  8 +++++
 .../CommunityCloud/CommunityCloud.tsx         | 30 ++++++++++++-------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/css/common/_page-header.scss b/src/css/common/_page-header.scss
index f072964c0..0c9f60791 100644
--- a/src/css/common/_page-header.scss
+++ b/src/css/common/_page-header.scss
@@ -28,3 +28,11 @@
 	font-size: 14px;
 	font-weight: 700;
 }
+
+// One-line supporting description shown directly beneath the page title.
+.snippets-page-description {
+	margin-block: 0 16px;
+	font-size: 14px;
+	line-height: 1.5;
+	color: #646970;
+}
diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index 946e47159..bab8f7378 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
 import { useSnippetView } from '../../../hooks/useSnippetView'
 import { fetchConstQueryParam, updateQueryParams } from '../../../utils/urls'
 import { SnippetsIcon } from '../../common/icons/ToolbarIcons'
 import { ScreenMetaSlot } from '../../common/ScreenMetaSlot'
-import { SnippetViewToggle } from '../../common/SnippetViewToggle'
 import { SubnavTabs } from '../../common/SubnavTabs'
 import { WithCloudSearchContext, useCloudSearch } from './WithCloudSearchContext'
 import { CloudSearch } from './CloudSearch'
@@ -15,6 +14,11 @@ const TABS = ['snippets', 'bundles'] as const
 
 type CommunityTab = typeof TABS[number]
 
+const TAB_LABELS: Record<CommunityTab, string> = {
+	snippets: __('Snippets', 'code-snippets'),
+	bundles: __('Bundles', 'code-snippets')
+}
+
 const CommunityCloudInner = () => {
 	const [currentTab, setCurrentTab] =
 		useState<CommunityTab>(() => fetchConstQueryParam(TAB_QUERY_PARAM, TABS) ?? TABS[0])
@@ -29,13 +33,13 @@ const CommunityCloudInner = () => {
 				tabs={[
 					{
 						name: 'snippets',
-						label: __('Code Snippets', 'code-snippets'),
+						label: TAB_LABELS.snippets,
 						icon: <SnippetsIcon aria-hidden="true" />,
 						count: searchResults?.totalItems
 					},
 					{
 						name: 'bundles',
-						label: __('Bundles', 'code-snippets'),
+						label: TAB_LABELS.bundles,
 						icon:
 							<span
 								className="dashicons dashicons-screenoptions snippet-type-icon"
@@ -49,22 +53,26 @@ const CommunityCloudInner = () => {
 					updateQueryParams({ [TAB_QUERY_PARAM]: tab })
 					setCurrentTab(tab)
 				}}
-				endContent={
-					<li className="snippet-view-toggle-nav-item">
-						<SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
-					</li>
-				}
 			/>
 
 			<ScreenMetaSlot />
 
 			<div className="snippets-page-header">
-				<h1>{__('Community Cloud', 'code-snippets')}</h1>
+				<h1>{sprintf(
+					// translators: %s: label of the currently selected community cloud tab.
+					__('Community Cloud: %s', 'code-snippets'),
+					TAB_LABELS[currentTab]
+				)}</h1>
 			</div>
 
 			<hr className="wp-header-end" />
 
-			{'snippets' === currentTab && <CloudSearch snippetView={snippetView} />}
+			<p className="snippets-page-description">
+				{__('Search the community cloud for snippets shared by other users, and download them directly to your site.', 'code-snippets')}
+			</p>
+
+			{'snippets' === currentTab &&
+				<CloudSearch snippetView={snippetView} setSnippetView={setSnippetView} />}
 		</>
 	)
 }

From a56ff93e30b6e0d2c912018f150cd4a450e7ee53 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 19:06:52 +0300
Subject: [PATCH 15/91] feat: unify community cloud results toolbar with bulk
 download and view toggle

---
 src/css/manage/_cloud-community.scss          |  22 ---
 .../ManageMenu/CommunityCloud/CloudSearch.tsx | 131 +++++++++++++++---
 .../CommunityCloud/SearchFilters.tsx          |  43 +++---
 3 files changed, 139 insertions(+), 57 deletions(-)

diff --git a/src/css/manage/_cloud-community.scss b/src/css/manage/_cloud-community.scss
index c23c88d34..9005ffe99 100644
--- a/src/css/manage/_cloud-community.scss
+++ b/src/css/manage/_cloud-community.scss
@@ -84,28 +84,6 @@ $status-colors: (
 	.banner {
 		justify-content: center;
 	}
-
-	.tablenav.top {
-		display: flex;
-		gap: 20px;
-		block-size: 40px;
-		margin-block-end: 31px;
-		align-items: center;
-
-		select {
-			inline-size: 245px;
-			block-size: 100%;
-		}
-
-		nav {
-			margin-inline-start: auto;
-		}
-
-		.tablenav-pages {
-			margin: 0;
-			margin-inline-start: auto;
-		}
-	}
 }
 
 .bundle-share-code-form {
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 50e233c9c..d9c164b9e 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -1,14 +1,22 @@
 import { __ } from '@wordpress/i18n'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Spinner } from '@wordpress/components'
+import { useRestAPI } from '../../../hooks/useRestAPI'
+import { handleUnknownError } from '../../../utils/errors'
+import { REST_BASES } from '../../../utils/restAPI'
+import { isLicensed } from '../../../utils/screen'
+import { isProSnippet } from '../../../utils/snippets/snippets'
 import { TablePagination } from '../../common/ListTable/TablePagination'
+import { SnippetViewToggle } from '../../common/SnippetViewToggle'
+import { SubmitButton } from '../../common/SubmitButton'
 import { CloudSnippetsTable } from './CloudSnippetsTable'
 import { SearchResult } from './SearchResult'
 import { useCloudSearch } from './WithCloudSearchContext'
 import { SearchFilters } from './SearchFilters'
+import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema'
 import type { SnippetView } from '../../../types/SnippetView'
 import type { TablePaginationProps } from '../../common/ListTable/TablePagination'
-import type { FormEventHandler } from 'react'
+import type { Dispatch, FormEventHandler, SetStateAction } from 'react'
 
 const SearchBox = () => {
 	const { searchParams, updateSearchParams, isSearching, doSearch } = useCloudSearch()
@@ -59,12 +67,106 @@ const SearchBox = () => {
 	)
 }
 
+const isSnippetDownloadable = (snippet: CloudSnippetSchema): boolean =>
+	!snippet.local_id && (isLicensed() || !isProSnippet(snippet))
+
+interface BulkEditActionsProps {
+	selected: Set<CloudSnippetSchema['id']>
+}
+
+const BulkEditActions: React.FC<BulkEditActionsProps> = ({ selected }) => {
+	const { api } = useRestAPI()
+	const { searchResults, isSearching, doSearch } = useCloudSearch()
+	const [selectedAction, setSelectedAction] = useState('')
+	const [isPerformingAction, setIsPerformingAction] = useState(false)
+
+	const applyDownloadAction = () => {
+		const downloadable = searchResults?.snippets
+			.filter(snippet => selected.has(snippet.id) && isSnippetDownloadable(snippet)) ?? []
+
+		setIsPerformingAction(true)
+		Promise.all(downloadable.map(snippet =>
+			api.post(`${REST_BASES.cloud.snippets}/${snippet.id}/download`)))
+			.then(() => doSearch())
+			.catch(handleUnknownError)
+			.finally(() => setIsPerformingAction(false))
+	}
+
+	return (
+		<div className="alignleft actions bulkactions">
+			<label htmlFor="cloud-bulk-action-selector" className="screen-reader-text">
+				{/* translators: Hidden accessibility text. */}
+				{__('Select bulk action', 'code-snippets')}
+			</label>
+
+			<select
+				id="cloud-bulk-action-selector"
+				value={selectedAction}
+				onChange={event => setSelectedAction('download' === event.target.value ? 'download' : '')}
+			>
+				<option value="">{__('Bulk Edit', 'code-snippets')}</option>
+				<option value="download">{__('Download', 'code-snippets')}</option>
+			</select>
+
+			<SubmitButton
+				name="cloud_bulk_action"
+				text={__('Apply', 'code-snippets')}
+				className="action"
+				disabled={isSearching || isPerformingAction || !selectedAction || 0 === selected.size}
+				onClick={event => {
+					event.preventDefault()
+					applyDownloadAction()
+				}}
+			/>
+
+			{isPerformingAction ? <Spinner /> : null}
+		</div>
+	)
+}
+
+interface SearchResultsGridProps {
+	snippets: CloudSnippetSchema[]
+	selected: Set<CloudSnippetSchema['id']>
+	setSelected: Dispatch<SetStateAction<Set<CloudSnippetSchema['id']>>>
+}
+
+const SearchResultsGrid: React.FC<SearchResultsGridProps> = ({ snippets, selected, setSelected }) =>
+	<ul className="cloud-search-results code-snippets-cards">
+		{snippets.map(result =>
+			<SearchResult
+				key={result.id}
+				snippet={result}
+				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
+					})
+				}}
+			/>)}
+	</ul>
+
 interface SearchResultsViewProps {
 	snippetView: SnippetView
+	setSnippetView: (view: SnippetView) => void
 }
 
-const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView }) => {
+const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, setSnippetView }) => {
 	const { searchResults, isSearching, doSearch } = useCloudSearch()
+	const [selected, setSelected] = useState<Set<CloudSnippetSchema['id']>>(new Set())
+
+	const snippets = searchResults?.snippets
+
+	useEffect(() => {
+		setSelected(new Set())
+	}, [snippets])
 
 	if (!searchResults) {
 		return null
@@ -81,28 +183,26 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView }) =
 	}
 
 	return (
-		<>
+		<div className="snippets-list-view">
 			<div className="tablenav top">
+				<BulkEditActions selected={selected} />
 				<SearchFilters />
-
 				<TablePagination which="top" {...paginationProps} />
+				<SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
 			</div>
 
 			{'card' === snippetView
-				? <ul className="cloud-search-results code-snippets-cards">
-					{searchResults.snippets.map(result =>
-						<SearchResult key={result.id} snippet={result} />)}
-				</ul>
+				? <SearchResultsGrid snippets={searchResults.snippets} selected={selected} setSelected={setSelected} />
 				: <CloudSnippetsTable snippets={searchResults.snippets} />}
 
 			<div className="tablenav bottom">
 				<TablePagination which="bottom" {...paginationProps} />
 			</div>
-		</>
+		</div>
 	)
 }
 
-const SearchResults: React.FC<SearchResultsViewProps> = ({ snippetView }) => {
+const SearchResults: React.FC<SearchResultsViewProps> = ({ snippetView, setSnippetView }) => {
 	const { searchResults, searchParams, isErrored } = useCloudSearch()
 
 	if (isErrored) {
@@ -133,19 +233,18 @@ const SearchResults: React.FC<SearchResultsViewProps> = ({ snippetView }) => {
 			{searchResults.isFeatured
 				? <h3 className="cloud-featured-heading">{__('Featured Snippets', 'code-snippets')}</h3>
 				: <h3 className="cloud-snippets-heading">{__('Search Results', 'code-snippets')}</h3>}
-			<SearchResultsTable snippetView={snippetView} />
+			<SearchResultsTable snippetView={snippetView} setSnippetView={setSnippetView} />
 		</>
 		: null
 }
 
 export interface CloudSearchProps {
 	snippetView: SnippetView
+	setSnippetView: (view: SnippetView) => void
 }
 
-export const CloudSearch: React.FC<CloudSearchProps> = ({ snippetView }) =>
+export const CloudSearch: React.FC<CloudSearchProps> = ({ snippetView, setSnippetView }) =>
 	<div className="cloud-search">
-		<p>{__('Search the community cloud for snippets shared by other users, and download them directly to your site.', 'code-snippets')}</p>
-
 		<SearchBox />
-		<SearchResults snippetView={snippetView} />
+		<SearchResults snippetView={snippetView} setSnippetView={setSnippetView} />
 	</div>
diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
index c9b8170c9..5da6520bf 100644
--- a/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchFilters.tsx
@@ -48,24 +48,29 @@ const normaliseFilterValue = (filter: keyof CloudSearchParams, params: CloudSear
 export const SearchFilters = () => {
 	const { availableFilters, searchParams, doSearch } = useCloudSearch()
 
-	return FILTERS.map(({ label, allOptionLabel, filterName, paramName }) =>
-		availableFilters[filterName] && 0 < availableFilters[filterName].length
-			? <Fragment key={filterName}>
-				<label htmlFor={`cloud-search-${filterName}`} className="screen-reader-text">
-					{label}
-				</label>
+	const visibleFilters = FILTERS.filter(({ filterName }) =>
+		availableFilters[filterName] && 0 < availableFilters[filterName].length)
 
-				<select
-					id={`cloud-search-${filterName}`}
-					className="cloud-search-category-filter"
-					value={searchParams[paramName]}
-					onChange={event =>
-						doSearch({ [paramName]: normaliseFilterValue(paramName, searchParams, event.target.value) })}
-				>
-					<option value="">{allOptionLabel}</option>
-					{availableFilters[filterName].map(filterOption =>
-						<option key={filterOption.id} value={filterOption.id}>{filterOption.name}</option>)}
-				</select>
-			</Fragment>
-			: null)
+	return 0 < visibleFilters.length
+		? <div className="alignleft actions">
+			{visibleFilters.map(({ label, allOptionLabel, filterName, paramName }) =>
+				<Fragment key={filterName}>
+					<label htmlFor={`cloud-search-${filterName}`} className="screen-reader-text">
+						{label}
+					</label>
+
+					<select
+						id={`cloud-search-${filterName}`}
+						className="cloud-search-category-filter"
+						value={searchParams[paramName]}
+						onChange={event =>
+							doSearch({ [paramName]: normaliseFilterValue(paramName, searchParams, event.target.value) })}
+					>
+						<option value="">{allOptionLabel}</option>
+						{availableFilters[filterName]?.map(filterOption =>
+							<option key={filterOption.id} value={filterOption.id}>{filterOption.name}</option>)}
+					</select>
+				</Fragment>)}
+		</div>
+		: null
 }

From 304c9b484ded6b25037d2f5c5e9b9a4b69abf3f4 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 19:25:10 +0300
Subject: [PATCH 16/91] fix: render table priority field as boxed input per
 design

---
 src/css/manage/_snippets-table.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 0cf9caecb..ce537a3f4 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -15,13 +15,14 @@
 	}
 }
 
-// `.wp-list-table` prefix keeps this above WP 7.0's 40px control height so the borderless
+// `.wp-list-table` prefix keeps this above WP 7.0's 40px control height so the boxed
 // priority field stays 30px tall (below the 38px control token, which would stretch the
 // table rows) and vertically aligned with the rest of the row.
 .wp-list-table .priority-column input {
 	appearance: none;
-	background: none;
-	border: none;
+	background: #fff;
+	border: 1px solid #c3c4c7;
+	border-radius: 5px;
 	box-shadow: none;
 	box-sizing: border-box;
 	min-block-size: 30px;
@@ -36,7 +37,7 @@
 	margin-block: 0;
 	margin-inline: 1px;
 	line-height: 2;
-	color: #666;
+	color: #2c3337;
 	text-align: center;
 
 	&:disabled {

From 220e83ecb2fea8a2c68ed69fd271354fea4b3da4 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 19:50:28 +0300
Subject: [PATCH 17/91] fix: normalize navigation font weight to 600

---
 src/css/common/_subnav.scss  | 4 ++--
 src/css/common/_toolbar.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 77cb5b30c..e0a835829 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -65,7 +65,7 @@
 		padding-inline: 24px;
 		cursor: pointer;
 		font-size: 14px;
-		font-weight: 590;
+		font-weight: 600;
 		line-height: 1.5;
 		color: #646970;
 		text-decoration: none;
@@ -184,7 +184,7 @@
 // Item count shown after a subnav tab's label, muted against the label text.
 .snippet-type-nav .subnav-count {
 	font-size: 14px;
-	font-weight: 590;
+	font-weight: 600;
 	line-height: 1.5;
 	color: #2c3337;
 	opacity: 0.4;
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 0e88d4d27..2221d081d 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -84,7 +84,7 @@ $wpcontent-inline-start-indent: 20px;
 		gap: 12px;
 		align-items: center;
 		font-size: 16px;
-		font-weight: 590;
+		font-weight: 600;
 		letter-spacing: -0.16px;
 		text-decoration: none;
 		box-sizing: border-box;

From 765b16930ec89aa25a2b90549d134f779fdb9a88 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 19:53:28 +0300
Subject: [PATCH 18/91] fix: fill nav band height so active underline sits
 flush

---
 src/css/common/_toolbar.scss | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 2221d081d..131030622 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -69,17 +69,27 @@ $wpcontent-inline-start-indent: 20px;
 	block-size: 60px;
 	box-sizing: border-box;
 
+	nav,
+	ul {
+		block-size: 100%;
+	}
+
 	ul {
 		display: flex;
 		align-items: stretch;
-		block-size: 100%;
 	}
 
-	// 15px + 26px icon + 11px + 4px underline fills the 60px band exactly.
+	li {
+		display: flex;
+	}
+
+	// Items fill the 60px band so the 4px active underline sits flush on its bottom edge.
 	li a {
 		display: flex;
 		margin: 0;
-		padding: 15px 24px 11px;
+		block-size: 100%;
+		padding-block: 0;
+		padding-inline: 24px;
 		color: #2c3337;
 		gap: 12px;
 		align-items: center;

From a7e9fd9aa3ddeca26932f17bb48c840702e5fe6c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 19:58:45 +0300
Subject: [PATCH 19/91] fix: hide zero item counts on snippet type tabs

---
 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 f1692639a..ed11fefd3 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -52,7 +52,7 @@ const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, count, setIsUpgra
 				<span className={`${tabName}-label`}>
 					{type ? SNIPPET_TYPE_LABELS[type] : __('All Snippets', 'code-snippets')}
 				</span>
-				{undefined !== 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 d7392167aa8e5d82c277943426650123cc9c1acc Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:07:22 +0300
Subject: [PATCH 20/91] fix: override wp core disabled pagination button
 styling

---
 src/css/manage/_snippets-table.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index ce537a3f4..e06d620d7 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -335,10 +335,13 @@
 			line-height: 1;
 		}
 
+		// WP core styles disabled buttons with !important, so these need it too.
 		.tablenav-pages-navspan.button.disabled {
-			background: #fff;
-			border-color: #c3c4c7;
-			color: #a7aaad;
+			/* stylelint-disable declaration-no-important */
+			background: #fff !important;
+			border-color: #c3c4c7 !important;
+			color: #a7aaad !important;
+			/* stylelint-enable declaration-no-important */
 		}
 
 		input.current-page {

From 4e277e53d4f260c9f13dc946682fbf4bd027b88d Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:19:05 +0300
Subject: [PATCH 21/91] fix: share accent pill switch styling across both
 states

---
 src/css/common/_switch.scss | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/css/common/_switch.scss b/src/css/common/_switch.scss
index 36da256f8..9823e71a4 100644
--- a/src/css/common/_switch.scss
+++ b/src/css/common/_switch.scss
@@ -1,7 +1,5 @@
 @use 'theme';
 
-$off-color: #789;
-
 .snippet-execution-button,
 .snippet-activation-switch,
 input[type='checkbox'].switch {
@@ -9,17 +7,19 @@ input[type='checkbox'].switch {
 	position: relative;
 }
 
+// Activation switch: an accent-coloured 36x19 pill shared by the list-table
+// activate column, snippet cards and settings toggles.
 .snippet-activation-switch,
 input[type='checkbox'].switch {
 	appearance: none;
 	outline: 0;
 	cursor: pointer;
 	margin: 0;
-	inline-size: 32px;
+	inline-size: 36px;
 	block-size: 19px;
 	border-radius: 34px;
 	text-align: start;
-	border: 1px solid $off-color;
+	border: 1px solid theme.$accent;
 	box-sizing: border-box;
 
 	&::before {
@@ -28,7 +28,7 @@ input[type='checkbox'].switch {
 		block-size: 13px;
 		inline-size: 13px;
 		display: inline-block;
-		background-color: $off-color;
+		background-color: theme.$accent;
 		border-radius: 50%;
 		margin: 2px;
 
@@ -40,11 +40,12 @@ input[type='checkbox'].switch {
 
 .active-snippet .snippet-activation-switch,
 input[type='checkbox'].switch:checked {
-	background-color: #0073aa;
+	background-color: theme.$accent;
 
+	// Travel distance: pill width minus the knob, its margins and the borders.
 	&::before {
 		background-color: white;
-		transform: translateX(calc(100% * var(--cs-direction-multiplier)));
+		transform: translateX(calc((100% + 4px) * var(--cs-direction-multiplier)));
 	}
 }
 

From 4ad9f8f085e22fc25504f0139a269cc29b739705 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:39:55 +0300
Subject: [PATCH 22/91] fix: unify results toolbar layout across snippet views

---
 src/css/common/_list-table.scss               | 16 +++++++++++++++-
 src/css/manage/_snippets-table.scss           | 19 ++-----------------
 .../common/ListTable/TableNavigation.tsx      |  3 +--
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 3ee768e20..bad9c5959 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -316,13 +316,27 @@
 	display: flex;
 	align-items: center;
 	gap: 12px;
+	inline-size: 237px;
+
+	search {
+		display: flex;
+		flex: 1 1 auto;
+		min-inline-size: 0;
+	}
 
 	.search-box {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex: 1 1 auto;
+		min-inline-size: 0;
 		float: none;
 		margin: 0;
 
 		input[type='search'] {
-			inline-size: 260px;
+			flex: 1 1 auto;
+			min-inline-size: 0;
+			border-color: #e3e3e4;
 		}
 	}
 }
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index e06d620d7..5bf0098bf 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -234,10 +234,6 @@
 		inline-size: 154px;
 	}
 
-	.snippets-search-area {
-		gap: 8px;
-	}
-
 	// The trailing float-clearing break would otherwise register as an
 	// empty flex item and contribute a stray column gap.
 	br.clear {
@@ -245,7 +241,7 @@
 	}
 }
 
-.snippets-list-view label.snippets-select-all {
+.snippets-list-view label.tablenav-select-all {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -261,17 +257,6 @@
 	}
 }
 
-// Search field uses a lighter border than the other toolbar controls.
-.snippets-list-view .tablenav .search-box {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-
-	input[type='search'] {
-		border-color: #e3e3e4;
-	}
-}
-
 // Inline-end toolbar group: item count and pagination pushed to the end of
 // the row, with the view toggle following at a 24px gap (18px column gap
 // plus 6px margin).
@@ -301,7 +286,7 @@
 .snippets-list-view .tablenav .tablenav-pages {
 	display: flex;
 	align-items: center;
-	gap: 24px;
+	gap: 8px;
 	margin: 0;
 	float: none;
 
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index 63b7c49e8..389a6ca9c 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -129,7 +129,7 @@ interface SelectAllControlProps<K extends Key> {
 }
 
 const SelectAllControl = <K extends Key>({ visibleKeys, selected, setSelected }: SelectAllControlProps<K>) =>
-	<label className="snippets-select-all">
+	<label className="tablenav-select-all">
 		<input
 			type="checkbox"
 			checked={0 < visibleKeys.length && visibleKeys.every(key => selected.has(key))}
@@ -211,5 +211,4 @@ export const TableNavigation = <K extends Key, A extends string>({
 	<>
 		<TableNav which="top" {...props} />
 		{children}
-		<TableNav which="bottom" {...props} />
 	</>

From edf59ef2dd3ac32bd30087d2a59973ec36d57908 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:40:05 +0300
Subject: [PATCH 23/91] fix: remove bottom pagination from cloud search results

---
 src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index d9c164b9e..6103fc848 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -194,10 +194,6 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 			{'card' === snippetView
 				? <SearchResultsGrid snippets={searchResults.snippets} selected={selected} setSelected={setSelected} />
 				: <CloudSnippetsTable snippets={searchResults.snippets} />}
-
-			<div className="tablenav bottom">
-				<TablePagination which="bottom" {...paginationProps} />
-			</div>
 		</div>
 	)
 }

From f3b41c836a931f52d32cc7959df1905ab55368cf Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:57:48 +0300
Subject: [PATCH 24/91] fix: restore bottom toolbar with unified bulk actions
 and pagination

---
 src/css/manage/_snippets-table.scss           | 34 +++++++++++++++++--
 .../ManageMenu/CommunityCloud/CloudSearch.tsx |  4 +++
 .../common/ListTable/TableNavigation.tsx      |  5 +--
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 5bf0098bf..9226cdcd7 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -211,8 +211,9 @@
 // Unified results toolbar shared by the table and card snippet views:
 // bulk actions, select-all, tag filter and search grouped on the
 // inline-start side, with the item count, pagination and view toggle
-// grouped on the inline-end side.
-.snippets-list-view .tablenav.top {
+// grouped on the inline-end side. The bottom toolbar reuses the same
+// styling for its reduced set of controls: bulk actions and pagination.
+.snippets-list-view .tablenav {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
@@ -260,7 +261,7 @@
 // Inline-end toolbar group: item count and pagination pushed to the end of
 // the row, with the view toggle following at a 24px gap (18px column gap
 // plus 6px margin).
-.snippets-list-view .tablenav.top .tablenav-pages-nav {
+.snippets-list-view .tablenav .tablenav-pages-nav {
 	margin-inline-start: auto;
 }
 
@@ -345,6 +346,33 @@
 	}
 }
 
+// Below desktop widths the toolbar wraps: the inline-end cluster (pagination
+// and view toggle) drops onto its own row while staying pinned inline-end via
+// its auto margin, and the search field flexes into the remaining space.
+@media screen and (width <= 1024px) {
+	.snippets-list-view .tablenav .snippets-search-area {
+		inline-size: auto;
+		flex: 1 1 237px;
+		max-inline-size: 100%;
+	}
+}
+
+@media screen and (width <= 782px) {
+	.snippets-list-view .tablenav .snippets-search-area {
+		flex-basis: 100%;
+	}
+
+	// WP core hides the item count and stretches the pagination form at
+	// mobile widths; keep the unified toolbar shape and 38px tiles instead.
+	.snippets-list-view .tablenav .tablenav-pages {
+		inline-size: auto;
+
+		.displaying-num {
+			display: inline;
+		}
+	}
+}
+
 .snippets-search-subtitle {
 	margin-block: 0 12px;
 	font-size: 14px;
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 6103fc848..d9c164b9e 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -194,6 +194,10 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 			{'card' === snippetView
 				? <SearchResultsGrid snippets={searchResults.snippets} selected={selected} setSelected={setSelected} />
 				: <CloudSnippetsTable snippets={searchResults.snippets} />}
+
+			<div className="tablenav bottom">
+				<TablePagination which="bottom" {...paginationProps} />
+			</div>
 		</div>
 	)
 }
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index 389a6ca9c..df3864c73 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -170,7 +170,7 @@ export const TableNav = <K extends Key, A extends string>({
 	visibleKeys,
 	...paginationProps
 }: TableNavProps<K, A>) =>
-	extraTableNav || 0 < totalItems && actions
+	('bottom' === which ? 0 < totalItems && actions || 0 < totalPages : extraTableNav || 0 < totalItems && actions)
 		? <div className={`tablenav ${which}`}>
 
 			{0 < totalItems && actions && doAction && (
@@ -187,7 +187,7 @@ export const TableNav = <K extends Key, A extends string>({
 				? <SelectAllControl {...{ visibleKeys, selected, setSelected }} />
 				: null}
 
-			{extraTableNav?.(which)}
+			{'top' === which ? extraTableNav?.(which) : null}
 			{0 < totalPages && <TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
 			{'top' === which ? endTableNav : null}
 
@@ -211,4 +211,5 @@ export const TableNavigation = <K extends Key, A extends string>({
 	<>
 		<TableNav which="top" {...props} />
 		{children}
+		<TableNav which="bottom" {...props} />
 	</>

From a8a1ca4a96cfb3b2335c85d117bd1061805a399c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 20:57:57 +0300
Subject: [PATCH 25/91] fix: make nav bands scroll horizontally on narrow
 screens

---
 src/css/common/_subnav.scss  | 13 ++++++++++++-
 src/css/common/_toolbar.scss | 11 +++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index e0a835829..92d68bf70 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -17,10 +17,21 @@
 
 	// Core admin switches to 10px #wpcontent padding, 0/12px .wrap margins
 	// below 782px; mirror them so the bar stays flush without overflowing
-	// the viewport.
+	// the viewport. The tabs stop wrapping and the band scrolls inline
+	// instead, so it never stacks or clips.
 	@media screen and (width <= 782px) {
 		margin-inline-start: -10px;
 		inline-size: calc(100% + 22px);
+		overflow-x: auto;
+		scrollbar-width: thin;
+
+		ul {
+			flex-wrap: nowrap;
+		}
+
+		.snippet-type-link {
+			white-space: nowrap;
+		}
 	}
 
 	ul {
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 131030622..e5303ab62 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -116,6 +116,17 @@ $wpcontent-inline-start-indent: 20px;
 	li:not(.toolbar-end-item) + li.toolbar-end-item {
 		margin-inline-start: auto;
 	}
+
+	// The primary nav band scrolls inline on narrow screens rather than
+	// wrapping or clipping its items.
+	@media screen and (width <= 782px) {
+		overflow-x: auto;
+		scrollbar-width: thin;
+
+		li a {
+			white-space: nowrap;
+		}
+	}
 }
 
 .code-snippets-toolbar-upper li a.active-link,

From c1704a00215d7c82d4b340b6fc6862a98ffa603e Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 21:07:53 +0300
Subject: [PATCH 26/91] fix: wrap pagination and view toggle together as one
 end cluster

---
 src/css/manage/_snippets-table.scss              | 16 +++++++---------
 .../common/ListTable/TableNavigation.tsx         |  9 +++++++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 9226cdcd7..41fbd5b04 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -259,21 +259,19 @@
 }
 
 // Inline-end toolbar group: item count and pagination pushed to the end of
-// the row, with the view toggle following at a 24px gap (18px column gap
-// plus 6px margin).
-.snippets-list-view .tablenav .tablenav-pages-nav {
+// The pagination group and view toggle wrap together as one end-pinned
+// cluster so narrow viewports never split them across rows.
+.snippets-list-view .tablenav .tablenav-end-group {
+	display: flex;
+	align-items: center;
+	gap: 24px;
 	margin-inline-start: auto;
 }
 
-.snippets-list-view .tablenav.top .snippet-view-toggle {
-	margin-inline-start: auto;
+.snippets-list-view .tablenav .snippet-view-toggle {
 	padding-inline-end: 0;
 }
 
-.snippets-list-view .tablenav.top .tablenav-pages-nav + .snippet-view-toggle {
-	margin-inline-start: 6px;
-}
-
 .tablenav-pages {
 	.displaying-num {
 		color: #646970;
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index df3864c73..707c239c2 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -188,8 +188,13 @@ export const TableNav = <K extends Key, A extends string>({
 				: null}
 
 			{'top' === which ? extraTableNav?.(which) : null}
-			{0 < totalPages && <TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
-			{'top' === which ? endTableNav : null}
+
+			{0 < totalPages || 'top' === which && endTableNav
+				? <div className="tablenav-end-group">
+					{0 < totalPages && <TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
+					{'top' === which ? endTableNav : null}
+				</div>
+				: null}
 
 			<br className="clear" />
 		</div>

From 5b608c561f77f34551c74a2fbee1aa64ca24d59f Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 21:21:16 +0300
Subject: [PATCH 27/91] fix: let toolbar components shrink before the row wraps

---
 src/css/common/_list-table.scss | 41 +++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index bad9c5959..3e869f6a6 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -350,3 +350,44 @@
 		block-size: auto;
 	}
 }
+
+// Toolbar squeeze: components shrink gracefully before the row is allowed
+// to wrap, so moderate viewports keep everything on one line.
+.snippets-list-view .tablenav {
+	.alignleft.actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex: 0 1 auto;
+		min-inline-size: 0;
+
+		select {
+			inline-size: auto;
+			flex: 1 1 154px;
+			min-inline-size: 104px;
+			max-inline-size: 154px;
+		}
+	}
+
+	.tablenav-select-all {
+		flex-shrink: 0;
+	}
+
+	.snippets-search-area {
+		inline-size: auto;
+		flex: 1 1 237px;
+		min-inline-size: 150px;
+		max-inline-size: 237px;
+	}
+
+	.tablenav-end-group {
+		flex: 0 1 auto;
+		min-inline-size: 0;
+	}
+
+	@media (width <= 960px) {
+		.tablenav-pages .displaying-num {
+			display: none;
+		}
+	}
+}

From 0f7ff26a902d45fe7179aa769ce54e7ac1f01956 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 21:26:11 +0300
Subject: [PATCH 28/91] fix: squeeze toolbar components instead of wrapping
 above mobile widths

---
 src/css/common/_list-table.scss | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 3e869f6a6..2a4a5968f 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -351,9 +351,15 @@
 	}
 }
 
-// Toolbar squeeze: components shrink gracefully before the row is allowed
-// to wrap, so moderate viewports keep everything on one line.
+// Toolbar squeeze: above the mobile breakpoint the row never wraps —
+// components shrink gracefully instead (flex-wrap would otherwise win
+// before flex-shrink ever engages). Wrapping remains the small-screen
+// fallback only.
 .snippets-list-view .tablenav {
+	@media (width > 782px) {
+		flex-wrap: nowrap;
+	}
+
 	.alignleft.actions {
 		display: flex;
 		align-items: center;
@@ -385,7 +391,8 @@
 		min-inline-size: 0;
 	}
 
-	@media (width <= 960px) {
+	// The item count is the first thing to give way when space runs short.
+	@media (width <= 1240px) {
 		.tablenav-pages .displaying-num {
 			display: none;
 		}

From 10c6cd82ebc41d4c7b6ee505702bb126de7a1c9e Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 23:15:22 +0300
Subject: [PATCH 29/91] fix: keep toolbar nowrap above mobile by resolving
 cascade order

---
 src/css/common/_list-table.scss     | 2 ++
 src/css/manage/_snippets-table.scss | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 2a4a5968f..22d406d92 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -356,6 +356,8 @@
 // before flex-shrink ever engages). Wrapping remains the small-screen
 // fallback only.
 .snippets-list-view .tablenav {
+	flex-wrap: wrap;
+
 	@media (width > 782px) {
 		flex-wrap: nowrap;
 	}
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 41fbd5b04..5b82ce1d9 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -216,7 +216,6 @@
 .snippets-list-view .tablenav {
 	display: flex;
 	align-items: center;
-	flex-wrap: wrap;
 	block-size: auto;
 	gap: 12px 18px;
 	margin-block-end: 20px;

From a9aaee4792d6622a54e06e12ac5ad77f6715d883 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 23:20:29 +0300
Subject: [PATCH 30/91] fix: keep search row, pagination labels and tab band on
 one line

---
 src/css/common/_list-table.scss | 28 ++++++++++++++++++++++++++++
 src/css/common/_subnav.scss     |  3 +++
 2 files changed, 31 insertions(+)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 22d406d92..498b0f05f 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -386,6 +386,34 @@
 		flex: 1 1 237px;
 		min-inline-size: 150px;
 		max-inline-size: 237px;
+
+		// The inner search row never wraps — the field shrinks instead.
+		search,
+		form,
+		p.search-box {
+			display: flex;
+			align-items: center;
+			flex-wrap: nowrap;
+			gap: 8px;
+			min-inline-size: 0;
+			margin: 0;
+		}
+
+		input[type='search'] {
+			min-inline-size: 110px;
+		}
+
+		.button {
+			flex: 0 0 auto;
+		}
+	}
+
+	// Pagination labels stay on one line while the row squeezes.
+	.tablenav-pages,
+	.tablenav-pages .paging-input,
+	.tablenav-pages .tablenav-paging-text {
+		white-space: nowrap;
+		flex-wrap: nowrap;
 	}
 
 	.tablenav-end-group {
diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 92d68bf70..498552ded 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -3,6 +3,9 @@
 // filled tile. The plugin toolbar above already draws the separating border,
 // so the band only draws its own bottom border.
 .snippet-type-nav {
+	// The tab band scrolls sideways instead of wrapping at any width.
+	overflow-x: auto;
+	scrollbar-width: thin;
 	background: #fff;
 	border-block-end: 1px solid #e2e2e4;
 	min-block-size: 53px;

From 7194c52be54f4b406ab4978d5c233846cbdca455 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 23:29:45 +0300
Subject: [PATCH 31/91] fix: keep snippet type tabs on a single scrolling row

---
 src/css/common/_subnav.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 498552ded..93215c679 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -40,7 +40,7 @@
 	ul {
 		display: flex;
 		align-items: stretch;
-		flex-wrap: wrap;
+		flex-wrap: nowrap;
 		min-block-size: 52px;
 		margin: 0;
 		padding: 0;

From 2eaaf511b4d2baca3ee80b313936ee1b29905929 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 00:48:43 +0300
Subject: [PATCH 32/91] fix: consolidate shared toolbar and list table styling
 across editions

---
 src/css/common/_badges.scss                   |   8 +
 src/css/common/_list-table.scss               | 171 ++++++++++++++---
 src/css/common/_subnav.scss                   |  40 ++--
 src/css/common/_toolbar.scss                  |  15 +-
 src/css/manage/_snippets-table.scss           | 175 +-----------------
 .../SnippetsTable/SnippetsCardGrid.tsx        |   8 +-
 .../SnippetsTable/SnippetsListTable.tsx       |  13 +-
 .../components/common/ListTable/ListTable.tsx |  16 +-
 .../common/ListTable/TableNavigation.tsx      |  44 ++---
 src/js/components/common/SubnavTabs.tsx       |   2 +-
 10 files changed, 244 insertions(+), 248 deletions(-)

diff --git a/src/css/common/_badges.scss b/src/css/common/_badges.scss
index 5dcaaf0b8..eb2dbe221 100644
--- a/src/css/common/_badges.scss
+++ b/src/css/common/_badges.scss
@@ -123,3 +123,11 @@
 		}
 	}
 }
+
+// Override WordPress' .wp-core-ui .button .dashicons { line-height: 1.9 } —
+// inside a button the inflated line-box would shift the glyph below the
+// badge's bottom border. Placed at end-of-file so it follows all other
+// .dashicons rules in source order (no-descending-specificity).
+.wp-core-ui .button .badge .dashicons {
+	line-height: 1;
+}
diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 498b0f05f..40ae95c3c 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -207,22 +207,21 @@
 		text-align: start;
 	}
 
-	&.truncate-row-values {
-		td.column-name > .snippet-name,
-		td.column-desc .snippet-description-content {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		td.column-name > .snippet-name {
-			max-inline-size: min(15rem, 30vw);
-		}
+	// Snippet names always stay on a single line, truncating gracefully;
+	// the full name is exposed through the title attribute.
+	td.column-name > .snippet-name {
+		display: block;
+		max-inline-size: min(15rem, 30vw);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 
-		td.column-desc .snippet-description-content {
-			max-inline-size: min(25rem, 45vw);
-			overflow: clip;
-		}
+	&.truncate-row-values td.column-desc .snippet-description-content {
+		display: block;
+		max-inline-size: min(25rem, 45vw);
+		overflow: clip;
+		text-overflow: ellipsis;
 	}
 }
 
@@ -263,6 +262,12 @@
 	margin: 20px 0;
 	display: flex;
 	align-items: center;
+	flex-wrap: wrap;
+
+	// The 12px row gap only shows once controls wrap onto a second row: below
+	// ~1280px the pagination group and view toggle drop to their own
+	// end-aligned row while the left cluster keeps its 18px column gaps.
+	gap: 12px 18px;
 }
 
 /* WP 7.0 changes the default admin link colour to the modern blue. Pin the classic accent on active rows (names and
@@ -308,39 +313,89 @@
 	padding-inline: 0;
 }
 
-.tablenav .tablenav-pages {
+// The pagination group and view toggle wrap together as one end-pinned
+// cluster so narrow viewports never split them across rows.
+.tablenav .tablenav-end-group {
+	display: flex;
+	align-items: center;
+	gap: 24px;
 	margin-inline-start: auto;
 }
 
+.tablenav .tablenav-pages-nav {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	.tablenav-pages {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin: 0;
+	}
+}
+
+// "Select all" control shown in the toolbar beside the bulk actions.
+.tablenav .tablenav-select-all {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+
+	input[type='checkbox'] {
+		inline-size: 20px;
+		block-size: 20px;
+		margin: 0;
+		border: 1px solid #c3c4c7;
+		border-radius: 5px;
+		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
+	}
+}
+
 .snippets-search-area {
 	display: flex;
 	align-items: center;
 	gap: 12px;
-	inline-size: 237px;
 
 	search {
-		display: flex;
 		flex: 1 1 auto;
 		min-inline-size: 0;
 	}
 
 	.search-box {
+		float: none;
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		flex: 1 1 auto;
-		min-inline-size: 0;
-		float: none;
 		margin: 0;
 
 		input[type='search'] {
 			flex: 1 1 auto;
 			min-inline-size: 0;
-			border-color: #e3e3e4;
 		}
 	}
 }
 
+// Inside the results toolbar the search area is fixed to the design width,
+// with the input flexing to fill the space left over by the Search button.
+.tablenav .snippets-search-area {
+	inline-size: 237px;
+}
+
+.wrap .snippets-search-area input[type='search'] {
+	border-color: #e3e3e4;
+}
+
+// Tablet widths: let the search area grow to fill the remainder of its row
+// while the fixed-width selects keep their sizing and groups wrap naturally.
+@media (width <= 1024px) {
+	.tablenav .snippets-search-area {
+		inline-size: auto;
+		flex: 1 1 237px;
+		max-inline-size: 100%;
+	}
+}
+
 @media (width <= 782px) {
 	p.search-box {
 		float: inline-start;
@@ -349,8 +404,20 @@
 		margin-inline: 0;
 		block-size: auto;
 	}
+
+	// Mobile: the search area takes a full row of its own, and the action
+	// groups stay visible (core admin hides .tablenav.top .actions here).
+	.tablenav .snippets-search-area {
+		flex-basis: 100%;
+	}
+
+	.tablenav .alignleft.actions {
+		display: flex;
+	}
 }
 
+
+
 // Toolbar squeeze: above the mobile breakpoint the row never wraps —
 // components shrink gracefully instead (flex-wrap would otherwise win
 // before flex-shrink ever engages). Wrapping remains the small-screen
@@ -366,6 +433,9 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
+		float: none;
+		margin: 0;
+		padding: 0;
 		flex: 0 1 auto;
 		min-inline-size: 0;
 
@@ -416,6 +486,63 @@
 		flex-wrap: nowrap;
 	}
 
+	// Square pagination tiles with a compact page-number box between them.
+	// Enabled arrows pick up the accent border/text from the shared control
+	// styling; disabled arrows keep the native WordPress treatment.
+	.pagination-links {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+
+		.button {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			inline-size: 38px;
+			block-size: 38px;
+			min-block-size: 38px;
+			box-sizing: border-box;
+			padding: 0;
+			margin: 0;
+			border-radius: 5.6px;
+		}
+
+		a.button {
+			color: #2271b1;
+		}
+
+		.paging-input {
+			gap: 8px;
+			margin-inline: 4px;
+		}
+
+		.current-page {
+			inline-size: 45px;
+			min-block-size: 38px;
+			box-sizing: border-box;
+			margin: 0;
+			text-align: center;
+			color: #2c3337;
+		}
+
+		.tablenav-paging-text {
+			font-size: 14px;
+			color: #646970;
+		}
+	}
+
+	.tablenav-pages .displaying-num {
+		font-size: 14px;
+		color: #646970;
+		white-space: nowrap;
+	}
+
+	// The trailing float-clearing break would otherwise register as an
+	// empty flex item and contribute a stray column gap.
+	br.clear {
+		display: none;
+	}
+
 	.tablenav-end-group {
 		flex: 0 1 auto;
 		min-inline-size: 0;
diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 93215c679..50f0e94ab 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -1,12 +1,14 @@
 // Snippet-type navigation: a boxed segmented control on a white band, with
 // each tab separated by a vertical rule and the active tab shown as a
-// filled tile. The plugin toolbar above already draws the separating border,
-// so the band only draws its own bottom border.
+// filled tile.
 .snippet-type-nav {
 	// The tab band scrolls sideways instead of wrapping at any width.
 	overflow-x: auto;
 	scrollbar-width: thin;
 	background: #fff;
+
+	// The toolbar band above already draws the 1px separator, so only a
+	// bottom border here — a top border would double the line weight.
 	border-block-end: 1px solid #e2e2e4;
 	min-block-size: 53px;
 
@@ -20,13 +22,17 @@
 
 	// Core admin switches to 10px #wpcontent padding, 0/12px .wrap margins
 	// below 782px; mirror them so the bar stays flush without overflowing
-	// the viewport. The tabs stop wrapping and the band scrolls inline
-	// instead, so it never stacks or clips.
+	// the viewport. The tabs scroll horizontally on a single row rather than
+	// stacking, with the scrollbar chrome hidden.
 	@media screen and (width <= 782px) {
 		margin-inline-start: -10px;
 		inline-size: calc(100% + 22px);
 		overflow-x: auto;
-		scrollbar-width: thin;
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
 
 		ul {
 			flex-wrap: nowrap;
@@ -47,18 +53,14 @@
 		list-style: none;
 	}
 
-	// Pull each tab 1px past the band so its own bottom border sits exactly
-	// on the band border; the active tab then repaints that line in its tile
-	// colour without doubling up borders anywhere.
 	li {
 		display: flex;
-		margin-block: 0 -1px;
-		margin-inline: 0;
+		margin: 0;
 	}
 
 	button.snippet-type-link {
 		background: none;
-		border-block-start: none;
+		border-block: none;
 		border-inline-start: none;
 		font-family: inherit;
 	}
@@ -85,9 +87,9 @@
 		text-decoration: none;
 		box-sizing: border-box;
 		border-inline-end: 1px solid #e2e2e4;
-		border-block-end: 1px solid #e2e2e4;
 
-		// The text-only "All Snippets" tab uses a wider gap before its count.
+		// The text-only "All Snippets" tab uses a slightly wider gap between
+		// its label and count than tabs that lead with a badge or icon.
 		&.all-type-link {
 			gap: 12px;
 		}
@@ -108,6 +110,10 @@
 			background: #f0f0f1;
 			border-color: #f0f0f1;
 			color: #2c3337;
+
+			// Children paint over the parent nav's border, so this recolours
+			// the 1px band separator beneath the active tab to match its fill.
+			box-shadow: 0 1px 0 0 #f0f0f1;
 		}
 
 		// Suppress the persistent focus ring left behind after a mouse click;
@@ -140,7 +146,6 @@
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	padding-inline-end: 16px;
 
 	.snippet-view-toggle-option {
 		display: flex;
@@ -178,6 +183,11 @@
 	}
 }
 
+// Inset the toggle from the band edge when hosted inside a subnav bar.
+.snippet-type-nav .snippet-view-toggle-nav-item .snippet-view-toggle {
+	padding-inline-end: 16px;
+}
+
 
 // Slot that adopts the WordPress Screen Options / Help tabs so they appear
 // directly below the snippet-type nav instead of above the page content.
@@ -195,7 +205,7 @@
 }
 
 
-// Item count shown after a subnav tab's label, muted against the label text.
+// Item count shown after a subnav tab's label, as muted text.
 .snippet-type-nav .subnav-count {
 	font-size: 14px;
 	font-weight: 600;
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index e5303ab62..3eb9062fa 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -117,11 +117,19 @@ $wpcontent-inline-start-indent: 20px;
 		margin-inline-start: auto;
 	}
 
-	// The primary nav band scrolls inline on narrow screens rather than
-	// wrapping or clipping its items.
+	// Mobile: the primary navigation scrolls horizontally on its band rather
+	// than wrapping, with the scrollbar chrome hidden.
 	@media screen and (width <= 782px) {
 		overflow-x: auto;
-		scrollbar-width: thin;
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		ul {
+			flex-wrap: nowrap;
+		}
 
 		li a {
 			white-space: nowrap;
@@ -165,3 +173,4 @@ $wpcontent-inline-start-indent: 20px;
 .code-snippets-return-link {
 	float: inline-end;
 }
+
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 5b82ce1d9..9e862f9e6 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -1,5 +1,4 @@
 @use '../common/list-table';
-@use '../common/theme';
 
 .column-name,
 .column-type {
@@ -141,18 +140,6 @@
 		margin-block-start: 12px;
 	}
 
-	// Enlarge the activation switch when shown in the card corner so it
-	// reads clearly next to the selection checkbox.
-	.snippet-card-corner input[type='checkbox'].switch {
-		inline-size: 38px;
-		block-size: 22px;
-
-		&::before {
-			block-size: 16px;
-			inline-size: 16px;
-		}
-	}
-
 	.snippet-card-priority {
 		display: flex;
 		align-items: center;
@@ -208,166 +195,13 @@
 	}
 }
 
-// Unified results toolbar shared by the table and card snippet views:
-// bulk actions, select-all, tag filter and search grouped on the
-// inline-start side, with the item count, pagination and view toggle
-// grouped on the inline-end side. The bottom toolbar reuses the same
-// styling for its reduced set of controls: bulk actions and pagination.
+// Shared table-navigation layout for both snippet views and both toolbars:
+// bulk actions, select all, tag filter and search on the left, with the item
+// count, pagination and view toggle pinned to the far end of the row. The
+// bottom toolbar repeats only the bulk actions and pagination group.
 .snippets-list-view .tablenav {
-	display: flex;
-	align-items: center;
 	block-size: auto;
-	gap: 12px 18px;
 	margin-block-end: 20px;
-
-	.actions {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		float: none;
-		margin: 0;
-		padding: 0;
-	}
-
-	.bulkactions select,
-	#snippets-tag-filter {
-		inline-size: 154px;
-	}
-
-	// The trailing float-clearing break would otherwise register as an
-	// empty flex item and contribute a stray column gap.
-	br.clear {
-		display: none;
-	}
-}
-
-.snippets-list-view label.tablenav-select-all {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 14px;
-
-	input[type='checkbox'] {
-		inline-size: 20px;
-		block-size: 20px;
-		margin: 0;
-		border: 1px solid #c3c4c7;
-		border-radius: 5px;
-		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
-	}
-}
-
-// Inline-end toolbar group: item count and pagination pushed to the end of
-// The pagination group and view toggle wrap together as one end-pinned
-// cluster so narrow viewports never split them across rows.
-.snippets-list-view .tablenav .tablenav-end-group {
-	display: flex;
-	align-items: center;
-	gap: 24px;
-	margin-inline-start: auto;
-}
-
-.snippets-list-view .tablenav .snippet-view-toggle {
-	padding-inline-end: 0;
-}
-
-.tablenav-pages {
-	.displaying-num {
-		color: #646970;
-		font-size: 14px;
-		white-space: nowrap;
-	}
-}
-
-// Pagination controls: square outline arrow tiles around a wide
-// current-page box with a muted "of N" indicator.
-.snippets-list-view .tablenav .tablenav-pages {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin: 0;
-	float: none;
-
-	.pagination-links {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-
-		.paging-input {
-			gap: 8px;
-			margin-inline: 4px;
-		}
-
-		.button,
-		.tablenav-pages-navspan.button {
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			inline-size: 38px;
-			min-inline-size: 38px;
-			block-size: 38px;
-			min-block-size: 38px;
-			box-sizing: border-box;
-			padding: 0;
-			margin: 0;
-			background: #fff;
-			border: 1px solid theme.$accent;
-			border-radius: 5.6px;
-			color: theme.$accent;
-			font-size: 16px;
-			line-height: 1;
-		}
-
-		// WP core styles disabled buttons with !important, so these need it too.
-		.tablenav-pages-navspan.button.disabled {
-			/* stylelint-disable declaration-no-important */
-			background: #fff !important;
-			border-color: #c3c4c7 !important;
-			color: #a7aaad !important;
-			/* stylelint-enable declaration-no-important */
-		}
-
-		input.current-page {
-			inline-size: 45px;
-			min-block-size: 38px;
-			box-sizing: border-box;
-			margin: 0;
-			text-align: center;
-			color: #2c3337;
-		}
-
-		.tablenav-paging-text {
-			font-size: 14px;
-			color: #646970;
-		}
-	}
-}
-
-// Below desktop widths the toolbar wraps: the inline-end cluster (pagination
-// and view toggle) drops onto its own row while staying pinned inline-end via
-// its auto margin, and the search field flexes into the remaining space.
-@media screen and (width <= 1024px) {
-	.snippets-list-view .tablenav .snippets-search-area {
-		inline-size: auto;
-		flex: 1 1 237px;
-		max-inline-size: 100%;
-	}
-}
-
-@media screen and (width <= 782px) {
-	.snippets-list-view .tablenav .snippets-search-area {
-		flex-basis: 100%;
-	}
-
-	// WP core hides the item count and stretches the pagination form at
-	// mobile widths; keep the unified toolbar shape and 38px tiles instead.
-	.snippets-list-view .tablenav .tablenav-pages {
-		inline-size: auto;
-
-		.displaying-num {
-			display: inline;
-		}
-	}
 }
 
 .snippets-search-subtitle {
@@ -382,7 +216,6 @@
 	gap: 1em;
 }
 
-
 // Keep every table row the same height by clamping the description cell
 // to two lines, matching the two-line name + row-actions column.
 .snippets-list-view .wp-list-table td.column-desc .snippet-description-content {
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
index 49fbed1d9..68a6d86a6 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
@@ -77,7 +77,8 @@ const useSortedPagedSnippets = ({ snippets, itemsPerPage, currentPage }: SortedP
 }
 
 export interface SnippetsCardGridProps<A extends string>
-	extends Pick<ListTableNavProps<Snippet['id'], A>, 'extraTableNav' | 'selectAll' | 'endTableNav'> {
+	extends Pick<ListTableNavProps<Snippet['id'], A>, 'extraTableNav' | 'endTableNav'> {
+	selectAllControl?: boolean
 	snippets: Snippet[]
 	actions: ListTableAction<A>[]
 	doAction: (action: A, selected: Set<Snippet['id']>) => Promise<void>
@@ -91,7 +92,7 @@ export const SnippetsCardGrid = <A extends string>({
 	actions,
 	doAction,
 	extraTableNav,
-	selectAll,
+	selectAllControl,
 	endTableNav,
 	itemsPerPage,
 	noItems,
@@ -113,11 +114,10 @@ export const SnippetsCardGrid = <A extends string>({
 				pageSearchParam=""
 				selected={getVisibleSelection(selected, visibleSnippets)}
 				setSelected={setSelected}
-				visibleKeys={visibleSnippets.map(snippet => snippet.id)}
+				selectAllKeys={selectAllControl ? visibleSnippets.map(snippet => snippet.id) : undefined}
 				actions={actions}
 				doAction={doAction}
 				extraTableNav={extraTableNav}
-				selectAll={selectAll}
 				endTableNav={endTableNav}
 			>
 				{beforeGrid}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index 20dd51953..0a0f9bebb 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -219,7 +219,10 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 	const columns = useMemo(() => getTableColumns(hiddenColumns), [hiddenColumns])
 	const itemsPerPage = window.CODE_SNIPPETS_MANAGE?.snippetsPerPage
 	const pageCount = itemsPerPage && Math.ceil(snippets.length / itemsPerPage)
-	const viewToggle = <SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
+	const endTableNav = (which: 'top' | 'bottom') =>
+		'top' === which
+			? <SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
+			: null
 
 	return 'card' === snippetView
 		? <SnippetsCardGrid
@@ -228,8 +231,8 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 			doAction={doAction}
 			itemsPerPage={itemsPerPage}
 			extraTableNav={extraTableNav}
-			selectAll
-			endTableNav={viewToggle}
+			selectAllControl
+			endTableNav={endTableNav}
 			noItems={<NoItemsMessage />}
 			beforeGrid={<SearchResultsIndicator />}
 		/>
@@ -242,8 +245,8 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 			doAction={doAction}
 			totalPages={pageCount}
 			extraTableNav={extraTableNav}
-			selectAll
-			endTableNav={viewToggle}
+			selectAllControl
+			endTableNav={endTableNav}
 			rowClassName={snippet => getRowClassName(snippet, activeByCondition)}
 			noItems={<NoItemsMessage />}
 			beforeTable={<SearchResultsIndicator />}
diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
index 42cfe9d4b..3ab3b695d 100644
--- a/src/js/components/common/ListTable/ListTable.tsx
+++ b/src/js/components/common/ListTable/ListTable.tsx
@@ -31,8 +31,7 @@ export interface ListTableNavProps<K extends Key, A extends string> {
 	doAction?: (action: A, selected: Set<K>) => Promise<void>
 	disabled?: boolean
 	extraTableNav?: (which: 'top' | 'bottom') => ReactNode
-	selectAll?: boolean
-	endTableNav?: ReactNode
+	endTableNav?: (which: 'top' | 'bottom') => ReactNode
 }
 
 export interface ListTableRowsProps<T, K extends Key> {
@@ -128,6 +127,7 @@ export interface ListTableProps<T, K extends Key, A extends string> extends List
 	ListTableRowsProps<T, K> {
 	items: T[]
 	beforeTable?: ReactNode
+	selectAllControl?: boolean
 }
 
 export const ListTable = <T, K extends Key, A extends string = never>({
@@ -165,6 +165,7 @@ export interface PartialDataListTableProps<T, K extends Key, A extends string> e
 	currentPage: number
 	visibleItems: T[]
 	beforeTable?: ReactNode
+	selectAllControl?: boolean
 	setSortColumn: (column: ListTableColumn<T> | undefined) => void
 	sortDirection?: ListTableSortDirection
 	setCurrentPage: (page: number) => void
@@ -189,19 +190,22 @@ export const PartialDataListTable = <T, K extends Key, A extends string>({
 	sortDirection = 'asc',
 	setSortColumn,
 	extraTableNav,
+	endTableNav,
+	selectAllControl,
 	setCurrentPage,
 	pageSearchParam,
-	setSortDirection, selectAll, endTableNav,
+	setSortDirection,
 	...tableRowsProps
 }: PartialDataListTableProps<T, K, A>) => {
 	const [selected, setSelected] = useState(() => new Set<K>())
 
 	return (
 		<TableNavigation
+			totalItems={totalItems}
 			selected={getVisibleSelected(visibleItems, getKey, selected)}
-			visibleKeys={visibleItems.map(getKey)}
-			{...{ totalItems, actions, doAction, extraTableNav, selectAll, endTableNav }}
-			{...{ disabled, currentPage, totalPages, pageSearchParam, setSelected, setCurrentPage }}
+			selectAllKeys={selectAllControl ? visibleItems.map(getKey) : undefined}
+			{...{ actions, doAction, extraTableNav, endTableNav, disabled, currentPage, totalPages }}
+			{...{ pageSearchParam, setSelected, setCurrentPage }}
 		>
 			{beforeTable}
 
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index 707c239c2..a44b2cc24 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -123,28 +123,24 @@ const BulkActions = function BulkActions<K extends Key, A extends string>({
 }
 
 interface SelectAllControlProps<K extends Key> {
-	visibleKeys: K[]
+	keys: K[]
 	selected: Set<K>
 	setSelected: Dispatch<SetStateAction<Set<K>>>
 }
 
-const SelectAllControl = <K extends Key>({ visibleKeys, selected, setSelected }: SelectAllControlProps<K>) =>
+const SelectAllControl = <K extends Key>({ keys, selected, setSelected }: SelectAllControlProps<K>) =>
 	<label className="tablenav-select-all">
 		<input
 			type="checkbox"
-			checked={0 < visibleKeys.length && visibleKeys.every(key => selected.has(key))}
-			disabled={0 === visibleKeys.length}
+			checked={0 < keys.length && keys.every(key => selected.has(key))}
+			disabled={0 === keys.length}
 			aria-label={__('Select all items', 'code-snippets')}
 			onChange={event => {
+				const { checked } = event.target
+
 				setSelected(previous => {
 					const updated = new Set(previous)
-					visibleKeys.forEach(key => {
-						if (event.target.checked) {
-							updated.add(key)
-						} else {
-							updated.delete(key)
-						}
-					})
+					keys.forEach(key => checked ? updated.add(key) : updated.delete(key))
 					return updated
 				})
 			}}
@@ -165,12 +161,17 @@ export const TableNav = <K extends Key, A extends string>({
 	totalItems,
 	totalPages = 0,
 	extraTableNav,
-	selectAll,
 	endTableNav,
-	visibleKeys,
+	selectAllKeys,
 	...paginationProps
-}: TableNavProps<K, A>) =>
-	('bottom' === which ? 0 < totalItems && actions || 0 < totalPages : extraTableNav || 0 < totalItems && actions)
+}: TableNavProps<K, A>) => {
+	// Singular controls (select all, filters, search and the view toggle)
+	// render only in the top toolbar: the bottom toolbar repeats just the
+	// bulk actions and the pagination group.
+	const isTop = 'top' === which
+	const hasBulkActions = 0 < totalItems && Boolean(actions)
+
+	return isTop && Boolean(extraTableNav ?? endTableNav) || hasBulkActions || 0 < totalPages
 		? <div className={`tablenav ${which}`}>
 
 			{0 < totalItems && actions && doAction && (
@@ -183,22 +184,23 @@ export const TableNav = <K extends Key, A extends string>({
 					onActionSuccess={() => setSelected(new Set())}
 				/>)}
 
-			{'top' === which && selectAll && visibleKeys
-				? <SelectAllControl {...{ visibleKeys, selected, setSelected }} />
+			{isTop && selectAllKeys
+				? <SelectAllControl keys={selectAllKeys} selected={selected} setSelected={setSelected} />
 				: null}
 
-			{'top' === which ? extraTableNav?.(which) : null}
+			{isTop ? extraTableNav?.(which) : null}
 
-			{0 < totalPages || 'top' === which && endTableNav
+			{0 < totalPages || isTop && endTableNav
 				? <div className="tablenav-end-group">
 					{0 < totalPages && <TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
-					{'top' === which ? endTableNav : null}
+					{isTop ? endTableNav?.(which) : null}
 				</div>
 				: null}
 
 			<br className="clear" />
 		</div>
 		: null
+}
 
 export interface TableNavigationProps<K extends Key, A extends string> extends ListTableNavProps<K, A>,
 	Omit<TablePaginationProps, 'totalPages' | 'which'> {
@@ -206,7 +208,7 @@ export interface TableNavigationProps<K extends Key, A extends string> extends L
 	setSelected: Dispatch<SetStateAction<Set<K>>>
 	totalItems: number
 	totalPages: number | undefined
-	visibleKeys?: K[]
+	selectAllKeys?: K[]
 }
 
 export const TableNavigation = <K extends Key, A extends string>({
diff --git a/src/js/components/common/SubnavTabs.tsx b/src/js/components/common/SubnavTabs.tsx
index a12c2ff6f..a92d091a5 100644
--- a/src/js/components/common/SubnavTabs.tsx
+++ b/src/js/components/common/SubnavTabs.tsx
@@ -38,7 +38,7 @@ export const SubnavTabs = <T extends string>({
 	endContent
 }: SubnavTabsProps<T>) => {
 	const [isUpsellDialogOpen, setIsUpsellDialogOpen] = useState(false)
-	const hasProTabs = useMemo(() => tabs.some(tab => tab.pro), [tabs])
+	const hasProTabs = useMemo(() => !isLicensed() && tabs.some(tab => tab.pro), [tabs])
 
 	return (
 		<>

From 5277a9fe68d114bdf3fd8f24fa014be6aaf03320 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 00:54:50 +0300
Subject: [PATCH 33/91] feat: support custom bulk select label in table
 navigation

---
 .../common/ListTable/TableNavigation.tsx           | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index a44b2cc24..7415184fe 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -49,9 +49,10 @@ interface BulkActionSelectProps<A extends string> {
 	actions: ListTableAction<A>[]
 	selectedAction: A | undefined
 	setSelectedAction: Dispatch<SetStateAction<A | undefined>>
+	label: string
 }
 
-const BulkActionSelect = <A extends string>({ which, actions, selectedAction, setSelectedAction }: BulkActionSelectProps<A>) =>
+const BulkActionSelect = <A extends string>({ which, actions, selectedAction, setSelectedAction, label }: BulkActionSelectProps<A>) =>
 	<select
 		name={`action${'bottom' === which ? '-2' : ''}`}
 		id={`bulk-action-selector-${which}`}
@@ -64,7 +65,7 @@ const BulkActionSelect = <A extends string>({ which, actions, selectedAction, se
 			}
 		}}
 	>
-		<option value="-1">{__('Bulk actions', 'code-snippets')}</option>
+		<option value="-1">{label}</option>
 		<BulkActionSelectOptions actions={actions} />
 	</select>
 
@@ -72,6 +73,7 @@ interface BulkActionsProps<K extends Key, A extends string> extends Required<Pic
 	onActionSuccess?: () => void
 	disabled?: boolean
 	selected: Set<K>
+	selectLabel?: string
 }
 
 const BulkActions = function BulkActions<K extends Key, A extends string>({
@@ -80,7 +82,8 @@ const BulkActions = function BulkActions<K extends Key, A extends string>({
 	selected,
 	doAction,
 	onActionSuccess,
-	disabled
+	disabled,
+	selectLabel
 }: BulkActionsProps<K, A>) {
 	const [selectedAction, setSelectedAction] = useState<A>()
 	const [isPerformingAction, setIsPerformingAction] = useState(false)
@@ -106,7 +109,7 @@ const BulkActions = function BulkActions<K extends Key, A extends string>({
 				{__('Select bulk action', 'code-snippets')}
 			</label>
 
-			<BulkActionSelect {...{ which, actions, selectedAction, setSelectedAction }} />
+			<BulkActionSelect {...{ which, actions, selectedAction, setSelectedAction }} label={selectLabel ?? __('Bulk actions', 'code-snippets')} />
 
 			<SubmitButton
 				id={`doaction${'bottom' === which ? '-2' : ''}`}
@@ -163,6 +166,7 @@ export const TableNav = <K extends Key, A extends string>({
 	extraTableNav,
 	endTableNav,
 	selectAllKeys,
+	bulkSelectLabel,
 	...paginationProps
 }: TableNavProps<K, A>) => {
 	// Singular controls (select all, filters, search and the view toggle)
@@ -181,6 +185,7 @@ export const TableNav = <K extends Key, A extends string>({
 					doAction={doAction}
 					disabled={paginationProps.disabled}
 					selected={selected}
+					selectLabel={bulkSelectLabel}
 					onActionSuccess={() => setSelected(new Set())}
 				/>)}
 
@@ -209,6 +214,7 @@ export interface TableNavigationProps<K extends Key, A extends string> extends L
 	totalItems: number
 	totalPages: number | undefined
 	selectAllKeys?: K[]
+	bulkSelectLabel?: string
 }
 
 export const TableNavigation = <K extends Key, A extends string>({

From b74ae3323f3639eb280550272397abb618b63ced Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 00:59:54 +0300
Subject: [PATCH 34/91] fix: style links inside the page description

---
 src/css/common/_page-header.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/css/common/_page-header.scss b/src/css/common/_page-header.scss
index 0c9f60791..2d3de5ced 100644
--- a/src/css/common/_page-header.scss
+++ b/src/css/common/_page-header.scss
@@ -1,3 +1,5 @@
+@use 'theme';
+
 // Contextual page header row shared by the plugin admin screens: the page
 // title on the inline-start side and the primary page action, if any,
 // aligned to the inline-end side of the same row.
@@ -35,4 +37,9 @@
 	font-size: 14px;
 	line-height: 1.5;
 	color: #646970;
+
+	a {
+		color: theme.$accent;
+		text-decoration: underline;
+	}
 }

From 7350bc8c0649ab57bcd1729f5d9e31a77d5c5cf7 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 12:33:59 +0300
Subject: [PATCH 35/91] fix: seed snippets list from localized data to avoid
 initial fetch flash

---
 src/js/hooks/useSnippetsList.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/js/hooks/useSnippetsList.tsx b/src/js/hooks/useSnippetsList.tsx
index 69c29d7a9..df1b115d4 100644
--- a/src/js/hooks/useSnippetsList.tsx
+++ b/src/js/hooks/useSnippetsList.tsx
@@ -14,7 +14,9 @@ const [Context, useSnippetsList] = createContextHook<SnippetsListContext>('useSn
 
 export const WithSnippetsListContext: React.FC<PropsWithChildren> = ({ children }) => {
 	const { fetchAll } = useSnippetsAPI()
-	const [snippetsList, setSnippetsList] = useState<Snippet[]>()
+	// Seed from the list localized with the page so counts and rows render
+	// immediately; the mount-time refresh below keeps the data fresh.
+	const [snippetsList, setSnippetsList] = useState<Snippet[] | undefined>(() => window.CODE_SNIPPETS_MANAGE?.snippetsList)
 
 	const refreshSnippetsList = useCallback(async (): Promise<void> => {
 		try {

From c5515153949fc2af18bec78eddcad14743f62806 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 13:05:27 +0300
Subject: [PATCH 36/91] fix: parse localized snippets into full objects when
 seeding the list

---
 src/js/hooks/useSnippetsList.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/js/hooks/useSnippetsList.tsx b/src/js/hooks/useSnippetsList.tsx
index df1b115d4..a95aa9f67 100644
--- a/src/js/hooks/useSnippetsList.tsx
+++ b/src/js/hooks/useSnippetsList.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { createContextHook } from '../utils/bootstrap'
 import { isNetworkAdmin } from '../utils/screen'
+import { parseSnippetObject } from '../utils/snippets/objects'
 import { useSnippetsAPI } from './useSnippetsAPI'
 import type { PropsWithChildren } from 'react'
 import type { Snippet } from '../types/Snippet'
@@ -15,8 +16,12 @@ const [Context, useSnippetsList] = createContextHook<SnippetsListContext>('useSn
 export const WithSnippetsListContext: React.FC<PropsWithChildren> = ({ children }) => {
 	const { fetchAll } = useSnippetsAPI()
 	// Seed from the list localized with the page so counts and rows render
-	// immediately; the mount-time refresh below keeps the data fresh.
-	const [snippetsList, setSnippetsList] = useState<Snippet[] | undefined>(() => window.CODE_SNIPPETS_MANAGE?.snippetsList)
+	// immediately; the mount-time refresh below keeps the data fresh. Raw
+	// localized fields are parsed into full snippet objects, matching the
+	// shape the REST API responses are parsed into.
+	const [snippetsList, setSnippetsList] = useState<Snippet[] | undefined>(
+		() => window.CODE_SNIPPETS_MANAGE?.snippetsList?.map(parseSnippetObject)
+	)
 
 	const refreshSnippetsList = useCallback(async (): Promise<void> => {
 		try {

From 116ca198a462edbcbc2c4217ed94f534e88d2559 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 13:31:19 +0300
Subject: [PATCH 37/91] feat: apply design feedback for pro pills subnav icons
 and title gap

---
 src/css/common/_page-header.scss        | 2 +-
 src/css/common/_toolbar.scss            | 4 ++--
 src/js/components/common/SubnavTabs.tsx | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/css/common/_page-header.scss b/src/css/common/_page-header.scss
index 2d3de5ced..81a8c10e0 100644
--- a/src/css/common/_page-header.scss
+++ b/src/css/common/_page-header.scss
@@ -9,7 +9,7 @@
 	justify-content: space-between;
 	flex-wrap: wrap;
 	gap: 16px 24px;
-	margin-block: 24px 16px;
+	margin-block: 8px 16px;
 
 	h1,
 	h2 {
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 3eb9062fa..08a0759e1 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -147,8 +147,8 @@ $wpcontent-inline-start-indent: 20px;
 .code-snippets-toolbar-lower .pro-chip,
 .nav-tab .pro-chip,
 .snippet-type-link .pro-chip {
-	color: #2271b1;
-	background: #d4e7f7;
+	color: #fff;
+	background: #2271b1;
 	text-transform: uppercase;
 	border-radius: 999px;
 	display: flex;
diff --git a/src/js/components/common/SubnavTabs.tsx b/src/js/components/common/SubnavTabs.tsx
index a92d091a5..6a4de4ee1 100644
--- a/src/js/components/common/SubnavTabs.tsx
+++ b/src/js/components/common/SubnavTabs.tsx
@@ -60,7 +60,6 @@ export const SubnavTabs = <T extends string>({
 									}
 								}}
 							>
-								{tab.icon}
 								<span>{tab.label}</span>
 								{undefined !== tab.count && <span className="subnav-count">{tab.count}</span>}
 								{tab.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}

From 29739c4fc2007e8c4b6a1b53fddc4b46a93246b4 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 13:43:59 +0300
Subject: [PATCH 38/91] feat: connect navigation levels per latest design
 revision

---
 src/css/common/_subnav.scss  | 9 +++++++--
 src/css/common/_toolbar.scss | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 50f0e94ab..3201f6798 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -5,7 +5,7 @@
 	// The tab band scrolls sideways instead of wrapping at any width.
 	overflow-x: auto;
 	scrollbar-width: thin;
-	background: #fff;
+	background: #f7f7f8;
 
 	// The toolbar band above already draws the 1px separator, so only a
 	// bottom border here — a top border would double the line weight.
@@ -109,7 +109,7 @@
 		&.active-type {
 			background: #f0f0f1;
 			border-color: #f0f0f1;
-			color: #2c3337;
+			color: #2271b1;
 
 			// Children paint over the parent nav's border, so this recolours
 			// the 1px band separator beneath the active tab to match its fill.
@@ -213,3 +213,8 @@
 	color: #2c3337;
 	opacity: 0.4;
 }
+
+// The active tab's count adopts the accent alongside its label.
+.snippet-type-nav .snippet-type-link.active-type .subnav-count {
+	color: #2271b1;
+}
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 08a0759e1..112f8059f 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -99,7 +99,7 @@ $wpcontent-inline-start-indent: 20px;
 		text-decoration: none;
 		box-sizing: border-box;
 		transition: border unset;
-		border-block-end: 4px solid transparent;
+		border-block-end: 3px solid transparent;
 		cursor: pointer;
 
 		svg {

From 3608cda9bfd16d1a9026f72599b0dfd9c3a967f8 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:03:07 +0300
Subject: [PATCH 39/91] fix: sanitize snippet descriptions to post-safe markup
 at the model boundary

---
 src/php/Model/Snippet.php | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/php/Model/Snippet.php b/src/php/Model/Snippet.php
index 95a166577..06c985817 100644
--- a/src/php/Model/Snippet.php
+++ b/src/php/Model/Snippet.php
@@ -128,6 +128,11 @@ protected function prepare_field( $value, string $field ) {
 			case 'is_cloud_owner':
 				return is_bool( $value ) ? $value : (bool) $value;
 
+			case 'desc':
+				// Descriptions render as rich HTML but can originate from remote
+				// sources such as the cloud, so restrict them to post-safe markup.
+				return wp_kses_post( $value );
+
 			default:
 				return $value;
 		}

From 905622b81d77e4b36df453f4f7d2f7935c3e98e8 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:03:17 +0300
Subject: [PATCH 40/91] fix: skip inline snippets list payload for large
 libraries

---
 src/php/Admin/Menus/Manage_Menu.php | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index bc89312b0..bf09ab0cb 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -239,12 +239,18 @@ public function enqueue_assets() {
 		// Only the manage-table view consumes the full snippets list; skip the
 		// table scan and inline payload on subpages that don't render the table.
 		if ( $this->is_manage_table_view() ) {
-			$localized['snippetsList'] = array_map(
-				function ( $snippet ) {
-					return $snippet->get_fields();
-				},
-				get_snippets()
-			);
+			$snippets = get_snippets();
+
+			// The inline payload includes full code bodies, so its size grows with
+			// library content; larger libraries defer to the REST fetch instead.
+			if ( count( $snippets ) <= 100 ) {
+				$localized['snippetsList'] = array_map(
+					function ( $snippet ) {
+						return $snippet->get_fields();
+					},
+					$snippets
+				);
+			}
 		}
 
 		wp_localize_script( self::JS_HANDLE, 'CODE_SNIPPETS_MANAGE', $localized );

From cb90a482fd38f192d63760d2f2bd57bf1cef829c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:03:27 +0300
Subject: [PATCH 41/91] fix: align cloud search toolbar with canonical table
 navigation

---
 .../ManageMenu/CommunityCloud/CloudSearch.tsx      | 14 ++++++++++++--
 .../ManageMenu/CommunityCloud/CommunityCloud.tsx   |  7 -------
 .../common/ListTable/TableNavigation.tsx           |  4 ++--
 src/js/components/common/SubnavTabs.tsx            | 13 ++++++-------
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index d9c164b9e..dcb0451d7 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -6,6 +6,7 @@ import { handleUnknownError } from '../../../utils/errors'
 import { REST_BASES } from '../../../utils/restAPI'
 import { isLicensed } from '../../../utils/screen'
 import { isProSnippet } from '../../../utils/snippets/snippets'
+import { SelectAllControl } from '../../common/ListTable/TableNavigation'
 import { TablePagination } from '../../common/ListTable/TablePagination'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
 import { SubmitButton } from '../../common/SubmitButton'
@@ -186,9 +187,17 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 		<div className="snippets-list-view">
 			<div className="tablenav top">
 				<BulkEditActions selected={selected} />
+				<SelectAllControl
+					keys={searchResults.snippets.map(snippet => snippet.id)}
+					selected={selected}
+					setSelected={setSelected}
+				/>
 				<SearchFilters />
-				<TablePagination which="top" {...paginationProps} />
-				<SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
+				<div className="tablenav-end-group">
+					<TablePagination which="top" {...paginationProps} />
+					<SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
+				</div>
+				<br className="clear" />
 			</div>
 
 			{'card' === snippetView
@@ -197,6 +206,7 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 
 			<div className="tablenav bottom">
 				<TablePagination which="bottom" {...paginationProps} />
+				<br className="clear" />
 			</div>
 		</div>
 	)
diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index bab8f7378..07d3804d8 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -3,7 +3,6 @@ import { __, sprintf } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
 import { useSnippetView } from '../../../hooks/useSnippetView'
 import { fetchConstQueryParam, updateQueryParams } from '../../../utils/urls'
-import { SnippetsIcon } from '../../common/icons/ToolbarIcons'
 import { ScreenMetaSlot } from '../../common/ScreenMetaSlot'
 import { SubnavTabs } from '../../common/SubnavTabs'
 import { WithCloudSearchContext, useCloudSearch } from './WithCloudSearchContext'
@@ -34,17 +33,11 @@ const CommunityCloudInner = () => {
 					{
 						name: 'snippets',
 						label: TAB_LABELS.snippets,
-						icon: <SnippetsIcon aria-hidden="true" />,
 						count: searchResults?.totalItems
 					},
 					{
 						name: 'bundles',
 						label: TAB_LABELS.bundles,
-						icon:
-							<span
-								className="dashicons dashicons-screenoptions snippet-type-icon"
-								aria-hidden="true"
-							></span>,
 						pro: true
 					}
 				]}
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index 7415184fe..5f0e58cec 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -125,13 +125,13 @@ const BulkActions = function BulkActions<K extends Key, A extends string>({
 	)
 }
 
-interface SelectAllControlProps<K extends Key> {
+export interface SelectAllControlProps<K extends Key> {
 	keys: K[]
 	selected: Set<K>
 	setSelected: Dispatch<SetStateAction<Set<K>>>
 }
 
-const SelectAllControl = <K extends Key>({ keys, selected, setSelected }: SelectAllControlProps<K>) =>
+export const SelectAllControl = <K extends Key>({ keys, selected, setSelected }: SelectAllControlProps<K>) =>
 	<label className="tablenav-select-all">
 		<input
 			type="checkbox"
diff --git a/src/js/components/common/SubnavTabs.tsx b/src/js/components/common/SubnavTabs.tsx
index 6a4de4ee1..0ede77cbc 100644
--- a/src/js/components/common/SubnavTabs.tsx
+++ b/src/js/components/common/SubnavTabs.tsx
@@ -8,7 +8,6 @@ import type { ReactNode } from 'react'
 export interface SubnavTab<T extends string> {
 	name: T
 	label: string
-	icon?: ReactNode
 	pro?: boolean
 	count?: number
 }
@@ -23,11 +22,11 @@ export interface SubnavTabsProps<T extends string> {
 }
 
 /**
- * Toolbar-style subnavigation bar shared across manage pages: tab buttons
- * with an icon beside the label, pro-gated tabs showing an upsell chip and
- * dialog for unlicensed users, and an optional end slot for extra items
- * such as the card/table view toggle. Uses the same design language as the
- * snippet-type nav on the manage snippets page.
+ * Toolbar-style subnavigation bar shared across manage pages: text tab
+ * buttons, pro-gated tabs showing an upsell chip and dialog for unlicensed
+ * users, and an optional end slot for extra items such as the card/table
+ * view toggle. Uses the same design language as the snippet-type nav on the
+ * manage snippets page.
  */
 export const SubnavTabs = <T extends string>({
 	tabs,
@@ -61,7 +60,7 @@ export const SubnavTabs = <T extends string>({
 								}}
 							>
 								<span>{tab.label}</span>
-								{undefined !== tab.count && <span className="subnav-count">{tab.count}</span>}
+								{tab.count ? <span className="subnav-count">{tab.count}</span> : null}
 								{tab.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 							</button>
 						</li>)}

From d797403c405582e0ece61ddb7bac5fdb1c2dd6fe Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:03:35 +0300
Subject: [PATCH 42/91] fix: focus menu items over form fields and support
 arrow key navigation

---
 src/js/components/common/KebabMenu.tsx | 28 +++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
index 06ebe972c..411cb8756 100644
--- a/src/js/components/common/KebabMenu.tsx
+++ b/src/js/components/common/KebabMenu.tsx
@@ -91,7 +91,9 @@ interface PopoverBehaviourOptions {
 }
 
 // Flip the popover above the trigger when it would overflow the viewport,
-// and move focus to its first interactive element on open.
+// and move focus to its first menu item on open. Focus falls back to the
+// popover itself rather than the first focusable element, so embedded form
+// fields with blur handlers are never focused without user intent.
 const usePopoverPlacement = ({ isOpen, triggerRef, popoverRef }: PopoverBehaviourOptions): boolean => {
 	const [isFlipped, setIsFlipped] = useState(false)
 
@@ -100,7 +102,9 @@ const usePopoverPlacement = ({ isOpen, triggerRef, popoverRef }: PopoverBehaviou
 			const popover = popoverRef.current.getBoundingClientRect()
 			const trigger = triggerRef.current?.getBoundingClientRect()
 			setIsFlipped(popover.bottom > window.innerHeight && (trigger?.top ?? 0) > popover.height)
-			popoverRef.current.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)?.focus()
+
+			const firstItem = popoverRef.current.querySelector<HTMLElement>('[role="menuitem"]:not(:disabled)')
+			;(firstItem ?? popoverRef.current).focus()
 		} else {
 			setIsFlipped(false)
 		}
@@ -130,7 +134,7 @@ const usePopoverDismissal = ({ isOpen, setIsOpen, closeMenu, containerRef, popov
 				return
 			}
 
-			if ('Tab' !== event.key || !popoverRef.current) {
+			if (!popoverRef.current) {
 				return
 			}
 
@@ -138,6 +142,23 @@ const usePopoverDismissal = ({ isOpen, setIsOpen, closeMenu, containerRef, popov
 			const active = document.activeElement
 			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()
+				}
+
+				return
+			}
+
+			if ('Tab' !== event.key) {
+				return
+			}
+
 			if (0 === focusable.length) {
 				event.preventDefault()
 			} else if (event.shiftKey && 0 >= currentIndex) {
@@ -208,6 +229,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ label, className, children
 						ref={popoverRef}
 						id={menuId}
 						role="menu"
+						tabIndex={-1}
 						aria-label={label}
 						className={classnames('kebab-menu-popover', { 'kebab-menu-popover-top': isFlipped })}
 					>

From a672f8a6fb5e7100e71b07bb2e48c4021fe5c3bb Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:03:43 +0300
Subject: [PATCH 43/91] feat: add shared snippet capability helpers

---
 src/js/utils/snippets/snippets.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/js/utils/snippets/snippets.ts b/src/js/utils/snippets/snippets.ts
index 7f239d6eb..01141ecd8 100644
--- a/src/js/utils/snippets/snippets.ts
+++ b/src/js/utils/snippets/snippets.ts
@@ -1,4 +1,5 @@
 import { __, sprintf } from '@wordpress/i18n'
+import { isNetworkAdmin } from '../screen'
 import { buildUrl } from '../urls'
 import { parseSnippetObject } from './objects'
 import type { SnippetSchema } from '../../types/schema/SnippetSchema'
@@ -91,3 +92,18 @@ export const isSnippetActive = (
 	'cond' === getSnippetType(snippet)
 		? 0 < (activeByCondition.get(snippet.id)?.length ?? 0)
 		: snippet.active
+
+/**
+ * Whether the snippet belongs to the network and is not shared with subsites,
+ * making it read-only outside of the network admin.
+ */
+export const isNetworkOnlySnippet = (snippet: Snippet): boolean =>
+	!isNetworkAdmin() && snippet.network && !snippet.shared_network
+
+/**
+ * Whether the current user is able to modify the snippet, either directly or
+ * through actions such as cloning and trashing.
+ */
+export const canModifySnippet = (snippet: Snippet): boolean =>
+	!isNetworkOnlySnippet(snippet) &&
+	!(snippet.shared_network && !window.CODE_SNIPPETS_MANAGE?.hasNetworkCap)

From d4557da50515cb87b1c84618a820a6e48d445eea Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:23:30 +0300
Subject: [PATCH 44/91] fix: add missing text domain to pagination item count

---
 src/js/components/common/ListTable/TablePagination.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/components/common/ListTable/TablePagination.tsx b/src/js/components/common/ListTable/TablePagination.tsx
index f4b32e526..7ecaafcd3 100644
--- a/src/js/components/common/ListTable/TablePagination.tsx
+++ b/src/js/components/common/ListTable/TablePagination.tsx
@@ -251,7 +251,7 @@ const PaginationControls: React.FC<PaginationControlsProps> = ({
 					{
 						sprintf(
 							// translators: %s: Number of items.
-							_n('%s item', '%s items', totalItems),
+							_n('%s item', '%s items', totalItems, 'code-snippets'),
 							totalItems
 						)
 					}

From c4879781d2b127fd7b631dfdee307b7e69a520d6 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:01:31 +0300
Subject: [PATCH 45/91] fix: create snippets of the active type from the type
 tabs

---
 src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx | 4 ++--
 src/js/utils/snippets/snippets.ts                            | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index ed11fefd3..a8c4efea7 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -8,7 +8,7 @@ import { WithSnippetsAPIContext } from '../../../hooks/useSnippetsAPI'
 import { WithSnippetsListContext, useSnippetsList } from '../../../hooks/useSnippetsList'
 import { SNIPPET_TYPES } from '../../../types/Snippet'
 import { isLicensed } from '../../../utils/screen'
-import { SNIPPET_TYPE_LABELS, getSnippetEditUrl, getSnippetType, isProType } from '../../../utils/snippets/snippets'
+import { SNIPPET_TYPE_LABELS, getSnippetAddNewUrl, getSnippetType, isProType } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { Badge } from '../../common/Badge'
 import { Notice } from '../../common/Notice'
@@ -131,7 +131,7 @@ const SnippetsTableInner = () => {
 					__('Local Snippets: %s', 'code-snippets'),
 					currentType ? SNIPPET_TYPE_LABELS[currentType] : __('All Snippets', 'code-snippets')
 				)}</h1>
-				<a href={getSnippetEditUrl()} className="button button-primary">
+				<a href={getSnippetAddNewUrl(currentType)} className="button button-primary">
 					{__('Create new Snippet', 'code-snippets')}
 				</a>
 			</div>
diff --git a/src/js/utils/snippets/snippets.ts b/src/js/utils/snippets/snippets.ts
index 01141ecd8..452e5bf32 100644
--- a/src/js/utils/snippets/snippets.ts
+++ b/src/js/utils/snippets/snippets.ts
@@ -51,6 +51,11 @@ export const getSnippetEditUrl = (snippet?: Pick<Snippet, 'id'>): string | undef
 		? buildUrl(window.CODE_SNIPPETS?.urls.edit, { id: snippet.id })
 		: window.CODE_SNIPPETS?.urls.addNew
 
+export const getSnippetAddNewUrl = (type?: SnippetType): string | undefined =>
+	type
+		? buildUrl(window.CODE_SNIPPETS?.urls.addNew, { type })
+		: window.CODE_SNIPPETS?.urls.addNew
+
 export const getSnippetDisplayName = (snippet: Pick<Snippet, 'name' | 'id' | 'scope'>): string =>
 	'' === snippet.name.trim()
 		// translators: %s: snippet identifier.

From 914fa41d565e1d528008c70a77c0b603f9f7e389 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:18:23 +0300
Subject: [PATCH 46/91] fix: align type selector height with title field and
 tidy sidebar fallbacks

---
 src/css/edit/_form.scss                              | 12 ++++++++++++
 .../EditMenu/ConditionModal/ConditionModalButton.tsx |  2 --
 .../EditMenu/EditorSidebar/EditorSidebar.tsx         | 11 ++++++-----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss
index f11387dad..902b14963 100644
--- a/src/css/edit/_form.scss
+++ b/src/css/edit/_form.scss
@@ -9,6 +9,18 @@ $sidebar-gap: 30px;
 	block-size: 45px
 }
 
+// The type selector is a react-select control that sizes to its content;
+// pin it to the same 45px as the adjacent title field.
+.snippet-type-container .code-snippets-select {
+	block-size: 100%;
+
+	> div {
+		min-block-size: 45px;
+		max-block-size: 45px;
+		overflow: hidden;
+	}
+}
+
 .snippet-type-option {
 	display: flex;
 	align-items: center;
diff --git a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
index 7d1eaaa49..45684339b 100644
--- a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
+++ b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
@@ -23,8 +23,6 @@ export const ConditionModalButton: React.FC<ConditionModalButtonProps> = ({ setI
 				: <>
 					<strong>{__('Conditions', 'code-snippets')}</strong>
 
-					<Badge name="beta" small>{__('beta', 'code-snippets')}</Badge>
-
 					{!isLicensed() && <Badge name="pro" small>{__('Pro', 'code-snippets')}</Badge>}
 
 					<Button large disabled={isReadOnly} onClick={() => setIsDialogOpen(true)}>
diff --git a/src/js/components/EditMenu/EditorSidebar/EditorSidebar.tsx b/src/js/components/EditMenu/EditorSidebar/EditorSidebar.tsx
index 971d4df0e..77845851e 100644
--- a/src/js/components/EditMenu/EditorSidebar/EditorSidebar.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/EditorSidebar.tsx
@@ -29,7 +29,7 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = ({ setIsUpgradeDialog
 	return (
 		<div className="snippet-editor-sidebar">
 			<div className="box">
-				{snippet.id && !isCondition(snippet) && <ActivationSwitch />}
+				{snippet.id && !isCondition(snippet) ? <ActivationSwitch /> : null}
 
 				{isNetworkAdmin() && <MultisiteSharingSettings />}
 
@@ -40,8 +40,8 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = ({ setIsUpgradeDialog
 				<ShortcodeInfo />
 				<PriorityInput />
 
-				{snippet.id && (
-					<div className="row-actions visible inline-form-field">
+				{snippet.id
+					? <div className="row-actions visible inline-form-field">
 						<ExportButtons />
 						<DeleteButton
 							snippet={snippet}
@@ -54,8 +54,9 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = ({ setIsUpgradeDialog
 								handleRequestError(error, __('Could not delete snippet.', 'code-snippets'))
 							}}
 						/>
-						{snippet.id ? <LockControl /> : null}
-					</div>)}
+						<LockControl />
+					</div>
+					: null}
 			</div>
 
 			<p className="submit">

From 3b7dc3fa58247fd2439337e5e27a317e1a35cca2 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:31:30 +0300
Subject: [PATCH 47/91] fix: center type selector value and stack the
 conditions field

---
 src/css/edit/_form.scss                       | 25 +++++++++++++++----
 .../ConditionModal/ConditionModalButton.tsx   |  9 ++++---
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss
index 902b14963..8aa4facfa 100644
--- a/src/css/edit/_form.scss
+++ b/src/css/edit/_form.scss
@@ -9,15 +9,23 @@ $sidebar-gap: 30px;
 	block-size: 45px
 }
 
-// The type selector is a react-select control that sizes to its content;
-// pin it to the same 45px as the adjacent title field.
+// The type selector is a react-select control that sizes to its content; pin
+// its bordered control box to the same 45px as the adjacent title field and
+// keep the selected value vertically centred within it.
 .snippet-type-container .code-snippets-select {
 	block-size: 100%;
 
 	> div {
 		min-block-size: 45px;
+		block-size: 45px;
 		max-block-size: 45px;
-		overflow: hidden;
+	}
+
+	> div > div:first-child {
+		display: flex;
+		align-items: center;
+		block-size: 45px;
+		padding-block: 0;
 	}
 }
 
@@ -35,12 +43,19 @@ $sidebar-gap: 30px;
 
 
 .conditions-editor-open {
+	.conditions-editor-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+	}
+
 	.button.button-large {
-		block-size: 100%;
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		gap: 8px;
-		flex: 1;
+		inline-size: 100%;
 		border-color: #ccc;
 		padding-block: 6px;
 		padding-inline: 12px;
diff --git a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
index 45684339b..eaf83790f 100644
--- a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
+++ b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
@@ -18,12 +18,13 @@ export const ConditionModalButton: React.FC<ConditionModalButtonProps> = ({ setI
 	const hasCondition = 0 !== snippet.conditionId
 
 	return (
-		<div className={classnames('conditions-editor-open inline-form-field', hasCondition ? 'has-condition' : 'no-condition')}>
+		<div className={classnames('conditions-editor-open block-form-field', hasCondition ? 'has-condition' : 'no-condition')}>
 			{isCondition(snippet) ? null
 				: <>
-					<strong>{__('Conditions', 'code-snippets')}</strong>
-
-					{!isLicensed() && <Badge name="pro" small>{__('Pro', 'code-snippets')}</Badge>}
+					<div className="conditions-editor-header">
+						<strong>{__('Conditions', 'code-snippets')}</strong>
+						{!isLicensed() && <Badge name="pro" small>{__('Pro', 'code-snippets')}</Badge>}
+					</div>
 
 					<Button large disabled={isReadOnly} onClick={() => setIsDialogOpen(true)}>
 						<Badge name="cond" small />

From 9392642bcb546e9ef62071a0ad89f50bed681b7c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:31:39 +0300
Subject: [PATCH 48/91] fix: filter foreign admin notices on the add snippet
 screen

---
 src/php/Admin/Menus/Admin_Menu.php | 10 ++++++++++
 src/php/Admin/Menus/Edit_Menu.php  | 13 +++++++++++++
 src/php/Admin/Notice_Filter.php    | 10 +++++-----
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/php/Admin/Menus/Admin_Menu.php b/src/php/Admin/Menus/Admin_Menu.php
index e5a20db13..91b0754c0 100644
--- a/src/php/Admin/Menus/Admin_Menu.php
+++ b/src/php/Admin/Menus/Admin_Menu.php
@@ -128,6 +128,16 @@ public function get_hookname(): string {
 		return get_plugin_page_hookname( $this->slug, $this->base_slug );
 	}
 
+	/**
+	 * Retrieve every WordPress hookname registered by this menu, including any
+	 * additional pages it registers beyond its primary slug.
+	 *
+	 * @return string[]
+	 */
+	public function get_hooknames(): array {
+		return [ $this->get_hookname() ];
+	}
+
 	/**
 	 * Render the navigation bar at the top of the admin page.
 	 */
diff --git a/src/php/Admin/Menus/Edit_Menu.php b/src/php/Admin/Menus/Edit_Menu.php
index fbb24dfd8..abb4e9802 100644
--- a/src/php/Admin/Menus/Edit_Menu.php
+++ b/src/php/Admin/Menus/Edit_Menu.php
@@ -70,6 +70,19 @@ public function register() {
 		);
 	}
 
+	/**
+	 * Retrieve every hookname registered by this menu, including the separate
+	 * "Add New" page, so screen-based checks recognise both editor views.
+	 *
+	 * @return string[]
+	 */
+	public function get_hooknames(): array {
+		return [
+			$this->get_hookname(),
+			get_plugin_page_hookname( code_snippets()->get_menu_slug( 'add' ), $this->base_slug ),
+		];
+	}
+
 	/**
 	 * Hide the static Edit Snippet menu item unless a specific snippet is being edited.
 	 *
diff --git a/src/php/Admin/Notice_Filter.php b/src/php/Admin/Notice_Filter.php
index 010377cab..7d3a39ebf 100644
--- a/src/php/Admin/Notice_Filter.php
+++ b/src/php/Admin/Notice_Filter.php
@@ -112,11 +112,11 @@ private function is_code_snippets_screen( WP_Screen $screen ): bool {
 		}
 
 		foreach ( code_snippets()->admin->menus as $menu ) {
-			$hookname = $menu->get_hookname();
-
-			foreach ( [ $hookname, $hookname . '-network' ] as $candidate ) {
-				if ( $screen->id === $candidate || $screen->base === $candidate ) {
-					return true;
+			foreach ( $menu->get_hooknames() as $hookname ) {
+				foreach ( [ $hookname, $hookname . '-network' ] as $candidate ) {
+					if ( $screen->id === $candidate || $screen->base === $candidate ) {
+						return true;
+					}
 				}
 			}
 		}

From a5437d14f0be585e6736a07feefc77ba45e5b1b5 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:42:23 +0300
Subject: [PATCH 49/91] fix: keep type and location selects as searchless
 vertical dropdowns

---
 src/css/edit/_form.scss                                    | 7 ++++---
 .../EditMenu/SnippetForm/fields/SnippetLocationInput.tsx   | 1 +
 .../EditMenu/SnippetForm/fields/SnippetTypeInput.tsx       | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss
index 8aa4facfa..41df1bdd4 100644
--- a/src/css/edit/_form.scss
+++ b/src/css/edit/_form.scss
@@ -15,13 +15,15 @@ $sidebar-gap: 30px;
 .snippet-type-container .code-snippets-select {
 	block-size: 100%;
 
-	> div {
+	// Target the control box only (:first-of-type). The open menu is a later
+	// sibling div; matching it here would clamp and flex-row the option list.
+	> div:first-of-type {
 		min-block-size: 45px;
 		block-size: 45px;
 		max-block-size: 45px;
 	}
 
-	> div > div:first-child {
+	> div:first-of-type > div:first-child {
 		display: flex;
 		align-items: center;
 		block-size: 45px;
@@ -53,7 +55,6 @@ $sidebar-gap: 30px;
 	.button.button-large {
 		display: flex;
 		align-items: center;
-		justify-content: center;
 		gap: 8px;
 		inline-size: 100%;
 		border-color: #ccc;
diff --git a/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx
index 598e6f325..725e757f1 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx
@@ -59,6 +59,7 @@ export const SnippetLocationInput: React.FC = () => {
 				inputId="snippet-location"
 				className="code-snippets-select code-snippets-select-location"
 				options={options}
+				isSearchable={false}
 				isDisabled={isReadOnly}
 				styles={{
 					menu: provided => ({ ...provided, zIndex: 9999 }),
diff --git a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
index 01036433a..77b4d0120 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
@@ -71,6 +71,7 @@ export const SnippetTypeInput: React.FC<SnippetTypeInputProps> = ({ setIsUpgrade
 			<Select
 				inputId="snippet-type-select-input"
 				className="code-snippets-select"
+				isSearchable={false}
 				isDisabled={isReadOnly || 0 !== snippet.id && 'cond' === snippetType}
 				options={0 === snippet.id ? OPTIONS : OPTIONS.filter(option => 'cond' !== option.value)}
 				menuPlacement="bottom"

From c556af53b31cb9d6f6dc09b5a77c5ba65ea2d681 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:50:16 +0300
Subject: [PATCH 50/91] fix: lead snippet type options with the language badge

---
 .../SnippetForm/fields/SnippetTypeInput.tsx        | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
index 77b4d0120..655cd8982 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
@@ -35,15 +35,13 @@ interface SnippetTypeOptionProps {
 
 const SnippetTypeOption: React.FC<SnippetTypeOptionProps> = ({ option: { value, label }, context }) =>
 	<div className={classnames('snippet-type-option', { 'inverted-badges': isProType(value) && !isLicensed() })}>
-		{'menu' === context
-			? <div>
-				{label}
-				{isProType(value) && !isLicensed()
-					? <Badge name="pro" small>{_x('Pro', 'Upgrade to Pro', 'code-snippets')}</Badge>
-					: null}
-			</div>
+		<span className="snippet-type-option-main">
+			<Badge name={value} />
+			{'menu' === context ? label : null}
+		</span>
+		{'menu' === context && isProType(value) && !isLicensed()
+			? <Badge name="pro" small>{_x('Pro', 'Upgrade to Pro', 'code-snippets')}</Badge>
 			: null}
-		<Badge name={value} />
 	</div>
 
 export const SnippetTypeInput: React.FC<SnippetTypeInputProps> = ({ setIsUpgradeDialogOpen }) => {

From 877d6653899de81ac96d6eaa1273fc9807a709ea Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 15:50:26 +0300
Subject: [PATCH 51/91] fix: match location selector height to the conditions
 button

---
 src/css/edit/_form.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss
index 41df1bdd4..59a97a24f 100644
--- a/src/css/edit/_form.scss
+++ b/src/css/edit/_form.scss
@@ -38,6 +38,12 @@ $sidebar-gap: 30px;
 	flex-flow: row;
 	gap: 2em;
 
+	.snippet-type-option-main {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
 	.small-badge {
 		margin-inline-start: 0.5em;
 	}
@@ -145,3 +151,12 @@ $sidebar-gap: 30px;
 		min-inline-size: 180px;
 	}
 }
+
+// Match the location selector's control height to the adjacent conditions
+// button so the two sidebar controls line up. This targets a different
+// container than the type selector rules above, so their relative order does
+// not affect the cascade.
+// stylelint-disable-next-line no-descending-specificity
+.snippet-editor-sidebar .code-snippets-select.code-snippets-select-location > div:first-of-type {
+	min-block-size: 48px;
+}

From 455bbbda76628208fe17535511e9a7a4f9bc8e2f Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 16:03:16 +0300
Subject: [PATCH 52/91] feat: adopt the finalized navigation styling

---
 src/css/common/_subnav.scss  |  2 +-
 src/css/common/_toolbar.scss | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 3201f6798..b5c62b831 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -5,7 +5,7 @@
 	// The tab band scrolls sideways instead of wrapping at any width.
 	overflow-x: auto;
 	scrollbar-width: thin;
-	background: #f7f7f8;
+	background: #fff;
 
 	// The toolbar band above already draws the 1px separator, so only a
 	// bottom border here — a top border would double the line weight.
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 112f8059f..a28c0eb4a 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -83,7 +83,8 @@ $wpcontent-inline-start-indent: 20px;
 		display: flex;
 	}
 
-	// Items fill the 60px band so the 4px active underline sits flush on its bottom edge.
+	// Items fill the 60px band; the active tab is indicated by accent colour on
+	// its icon and label, with no underline.
 	li a {
 		display: flex;
 		margin: 0;
@@ -98,8 +99,6 @@ $wpcontent-inline-start-indent: 20px;
 		letter-spacing: -0.16px;
 		text-decoration: none;
 		box-sizing: border-box;
-		transition: border unset;
-		border-block-end: 3px solid transparent;
 		cursor: pointer;
 
 		svg {
@@ -109,7 +108,6 @@ $wpcontent-inline-start-indent: 20px;
 
 		&.active-link, &:hover, &:focus, &:active {
 			color: #2271b1;
-			border-block-end-color: currentcolor;
 		}
 	}
 
@@ -147,15 +145,16 @@ $wpcontent-inline-start-indent: 20px;
 .code-snippets-toolbar-lower .pro-chip,
 .nav-tab .pro-chip,
 .snippet-type-link .pro-chip {
-	color: #fff;
-	background: #2271b1;
+	color: #2271b1;
+	background: #eff5f9;
+	border: 1px solid rgb(34 113 177 / 10%);
 	text-transform: uppercase;
 	border-radius: 999px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	box-sizing: border-box;
-	padding: 3px 9px;
+	padding: 8px 12px;
 	font-weight: 700;
 }
 

From e5e9e9587b981d98c3226b2cd847dd5db4d0fbc6 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 16:05:13 +0300
Subject: [PATCH 53/91] fix: size the navigation pro chip to match the design

---
 src/css/common/_toolbar.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index a28c0eb4a..81ea38eef 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -154,8 +154,9 @@ $wpcontent-inline-start-indent: 20px;
 	justify-content: center;
 	align-items: center;
 	box-sizing: border-box;
-	padding: 8px 12px;
+	padding: 5px 12px;
 	font-weight: 700;
+	line-height: 1;
 }
 
 

From e4017552c61796655a98ccee0a763783eee9bf86 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 16:09:58 +0300
Subject: [PATCH 54/91] fix: drop redundant pro chip padding override

---
 src/css/common/_toolbar.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 81ea38eef..59abae215 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -167,7 +167,6 @@ $wpcontent-inline-start-indent: 20px;
 .nav-tab .pro-chip,
 .snippet-type-link .pro-chip {
 	font-size: 10px;
-	padding: 2px 8px;
 }
 
 .code-snippets-return-link {

From 0cf18f4c5363228ab1dfd686c999d91afd0bf49d Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 16:25:07 +0300
Subject: [PATCH 55/91] feat: use the sub-navigation bar on the import page

---
 src/css/import.scss                         |  2 +
 src/css/import/_page.scss                   |  4 --
 src/js/components/ImportMenu/ImportMenu.tsx | 58 +++++++++++----------
 3 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/css/import.scss b/src/css/import.scss
index c53285e62..978446da9 100644
--- a/src/css/import.scss
+++ b/src/css/import.scss
@@ -1,5 +1,7 @@
 @use 'common/toolbar';
+@use 'common/subnav';
 @use 'common/wp-admin';
+@use 'common/page-header';
 @use 'import/page';
 @use 'import/card';
 @use 'import/upload';
diff --git a/src/css/import/_page.scss b/src/css/import/_page.scss
index 0cc3917b6..885701a62 100644
--- a/src/css/import/_page.scss
+++ b/src/css/import/_page.scss
@@ -7,10 +7,6 @@
 	padding: 0;
 }
 
-.nav-tab-wrapper {
-	margin-block-end: 20px;
-}
-
 .import-snippets-section {
 	padding-block-start: 0;
 	display: none;
diff --git a/src/js/components/ImportMenu/ImportMenu.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
index f78a8654f..c8d00da73 100644
--- a/src/js/components/ImportMenu/ImportMenu.tsx
+++ b/src/js/components/ImportMenu/ImportMenu.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 import classnames from 'classnames'
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../hooks/useRestAPI'
 import { fetchQueryParam, updateQueryParams } from '../../utils/urls'
+import { ScreenMetaSlot } from '../common/ScreenMetaSlot'
+import { SubnavTabs } from '../common/SubnavTabs'
 import { Toolbar } from '../common/Toolbar'
 import { UploadForm } from './UploadForm/UploadForm'
 import { MigrateForm } from './MigrateForm/MigrateForm'
@@ -36,36 +38,36 @@ export const ImportMenu: React.FC = () => {
 	return (
 		<>
 			<Toolbar />
-			<>
-				<h2>{__('Import Snippets', 'code-snippets')}</h2>
 
-				<hr className="wp-header-end" />
+			<SubnavTabs
+				className="import-type-nav"
+				ariaLabel={__('Import sources', 'code-snippets')}
+				tabs={TABS.map(tab => ({ name: tab, label: TAB_LABELS[tab] }))}
+				currentTab={activeTab}
+				setCurrentTab={tab => {
+					setActiveTab(tab)
+					updateQueryParams({ tab })
+				}}
+			/>
 
-				<nav
-					className="nav-tab-wrapper"
-					aria-label={__('Import sources', 'code-snippets')}
-				>
-					{TABS.map(tab =>
-						<button
-							key={tab}
-							type="button"
-							className={classnames('nav-tab', { 'nav-tab-active': tab === activeTab })}
-							onClick={() => {
-								setActiveTab(tab)
-								updateQueryParams({ tab })
-							}}
-						>
-							{TAB_LABELS[tab]}
-						</button>)}
-				</nav>
+			<ScreenMetaSlot />
 
-				<WithRestAPIContext>
-					{TABS.map(tab =>
-						<div key={tab} className={classnames('import-snippets-section', { 'active-section': tab === activeTab })}>
-							{TAB_CONTENT[tab]}
-						</div>)}
-				</WithRestAPIContext>
-			</>
+			<div className="snippets-page-header">
+				<h1>{sprintf(
+					// translators: %s: label of the currently selected import tab.
+					__('Import: %s', 'code-snippets'),
+					TAB_LABELS[activeTab]
+				)}</h1>
+			</div>
+
+			<hr className="wp-header-end" />
+
+			<WithRestAPIContext>
+				{TABS.map(tab =>
+					<div key={tab} className={classnames('import-snippets-section', { 'active-section': tab === activeTab })}>
+						{TAB_CONTENT[tab]}
+					</div>)}
+			</WithRestAPIContext>
 		</>
 	)
 }

From 03728c166a890f69df7bf460357874cdbab10bec Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 16:31:36 +0300
Subject: [PATCH 56/91] fix: consolidate the pro badge to the navigation pill
 style

---
 src/css/common/_badges.scss | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/css/common/_badges.scss b/src/css/common/_badges.scss
index eb2dbe221..2e161bafb 100644
--- a/src/css/common/_badges.scss
+++ b/src/css/common/_badges.scss
@@ -131,3 +131,23 @@
 .wp-core-ui .button .badge .dashicons {
 	line-height: 1;
 }
+
+
+// Pro badge consolidated to the navigation pro-chip style: a light accent pill
+// in every context, overriding the badge colour map and the inverted/nav-tab
+// variants (whose white !important border must be beaten here). This is a
+// deliberate final override, so it intentionally follows higher-specificity
+// context rules above.
+/* stylelint-disable no-descending-specificity */
+.badge.pro-badge,
+.inverted-badges .badge.pro-badge,
+.nav-tab-inactive .badge.pro-badge {
+	color: #2271b1;
+	background-color: #eff5f9;
+	border: 1px solid rgb(34 113 177 / 10%) !important;
+	border-radius: 999px;
+	padding-block: 3px;
+	padding-inline: 10px;
+	line-height: 1;
+}
+/* stylelint-enable no-descending-specificity */

From fc8647634e16d9e9ef3ec1c8f5bdde85cde6e8c3 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 16:31:38 +0300
Subject: [PATCH 57/91] fix: use the settled sub-navigation style on the
 settings page

---
 src/css/settings.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/css/settings.scss b/src/css/settings.scss
index 8e2f3b081..43567de82 100644
--- a/src/css/settings.scss
+++ b/src/css/settings.scss
@@ -10,17 +10,6 @@ $sections: general, editor, debug, version-switch;
 	color: #2c3337;
 }
 
-// Settings tab tiles sit slightly darker than the manage-page subnav so
-// they read against the plain white settings page background.
-.settings-type-nav .snippet-type-link {
-	background: #e5e5e6;
-	border-inline-end: 1px solid #c3c4c7;
-
-	&.active-type {
-		background: #f0f0f1;
-	}
-}
-
 p.submit {
 	display: flex;
 	justify-content: flex-start;

From a17feb99924065425a102ef29e04628a09bc095b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 17:39:53 +0300
Subject: [PATCH 58/91] feat: collapse snippet type names to badges at
 mid-range widths

---
 src/css/common/_subnav.scss                   | 23 +++++++++++++++++++
 .../SnippetsTable/SnippetsTable.tsx           |  9 ++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index b5c62b831..e6995a3ba 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -218,3 +218,26 @@
 .snippet-type-nav .snippet-type-link.active-type .subnav-count {
 	color: #2271b1;
 }
+
+// The short "All" form of the all-snippets label only replaces "All Snippets"
+// once the bar collapses; the full form is shown at every wider width.
+.snippet-type-name-short {
+	display: none;
+}
+
+// Mid-width collapse: drop the type names so each tab shows just its badge and
+// count, and shorten "All Snippets" to "All". Only the badged manage nav owns
+// a .snippet-type-name; the text-only import/settings subnav tabs are untouched.
+@media (782px < width <= 1210px) {
+	.snippet-type-nav .snippet-type-link:not(.all-type-link) .snippet-type-name {
+		display: none;
+	}
+
+	.snippet-type-nav .all-type-link .snippet-type-name-full {
+		display: none;
+	}
+
+	.snippet-type-nav .all-type-link .snippet-type-name-short {
+		display: inline;
+	}
+}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index a8c4efea7..793df6ce4 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -49,8 +49,13 @@ const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, count, setIsUpgra
 				}}
 			>
 				{type && <Badge name={type} />}
-				<span className={`${tabName}-label`}>
-					{type ? SNIPPET_TYPE_LABELS[type] : __('All Snippets', 'code-snippets')}
+				<span className={classnames(`${tabName}-label`, 'snippet-type-name')}>
+					{type
+						? SNIPPET_TYPE_LABELS[type]
+						: <>
+							<span className="snippet-type-name-full">{__('All Snippets', 'code-snippets')}</span>
+							<span className="snippet-type-name-short">{__('All', 'code-snippets')}</span>
+						</>}
 				</span>
 				{count ? <span className="subnav-count">{count}</span> : null}
 				{type && isProType(type) && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}

From babd2e9cefde07814d0299ba1327fea7c01142a1 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 17:40:04 +0300
Subject: [PATCH 59/91] feat: stack the list-table toolbar onto two rows at
 mid-range widths

---
 src/css/common/_list-table.scss | 37 +++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 40ae95c3c..40a547557 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -555,3 +555,40 @@
 		}
 	}
 }
+
+// Mid-width collapse: rather than let the single toolbar row overflow, break
+// the top toolbar onto two rows. Row one keeps the bulk actions against the
+// pagination + view-toggle cluster; row two keeps "Select all" against the
+// filter dropdowns and search. The forced full-width break between the two
+// groups pins each pair to its own row independent of content width.
+@media (782px < width <= 1210px) {
+	.snippets-list-view .tablenav.top {
+		flex-wrap: wrap;
+		row-gap: 4px;
+
+		.bulkactions {
+			order: 1;
+		}
+
+		.tablenav-end-group {
+			order: 2;
+		}
+
+		&::after {
+			content: '';
+			order: 3;
+			flex-basis: 100%;
+			block-size: 0;
+		}
+
+		.tablenav-select-all {
+			order: 4;
+			margin-inline-end: auto;
+		}
+
+		.alignleft.actions:not(.bulkactions),
+		.snippets-search-area {
+			order: 5;
+		}
+	}
+}

From 0e218a1205c8de16aea5c011a43893febd2f7162 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 17:40:06 +0300
Subject: [PATCH 60/91] refactor: reuse the shared table navigation on the
 cloud search view

---
 .../ManageMenu/CommunityCloud/CloudSearch.tsx | 115 ++++++------------
 1 file changed, 36 insertions(+), 79 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index dcb0451d7..7974e71eb 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -2,21 +2,18 @@ import { __ } from '@wordpress/i18n'
 import React, { useEffect, useState } from 'react'
 import { Spinner } from '@wordpress/components'
 import { useRestAPI } from '../../../hooks/useRestAPI'
-import { handleUnknownError } from '../../../utils/errors'
 import { REST_BASES } from '../../../utils/restAPI'
 import { isLicensed } from '../../../utils/screen'
 import { isProSnippet } from '../../../utils/snippets/snippets'
-import { SelectAllControl } from '../../common/ListTable/TableNavigation'
-import { TablePagination } from '../../common/ListTable/TablePagination'
+import { TableNav } from '../../common/ListTable/TableNavigation'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
-import { SubmitButton } from '../../common/SubmitButton'
 import { CloudSnippetsTable } from './CloudSnippetsTable'
 import { SearchResult } from './SearchResult'
 import { useCloudSearch } from './WithCloudSearchContext'
 import { SearchFilters } from './SearchFilters'
 import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema'
 import type { SnippetView } from '../../../types/SnippetView'
-import type { TablePaginationProps } from '../../common/ListTable/TablePagination'
+import type { ListTableAction } from '../../common/ListTable/ListTable'
 import type { Dispatch, FormEventHandler, SetStateAction } from 'react'
 
 const SearchBox = () => {
@@ -71,60 +68,6 @@ const SearchBox = () => {
 const isSnippetDownloadable = (snippet: CloudSnippetSchema): boolean =>
 	!snippet.local_id && (isLicensed() || !isProSnippet(snippet))
 
-interface BulkEditActionsProps {
-	selected: Set<CloudSnippetSchema['id']>
-}
-
-const BulkEditActions: React.FC<BulkEditActionsProps> = ({ selected }) => {
-	const { api } = useRestAPI()
-	const { searchResults, isSearching, doSearch } = useCloudSearch()
-	const [selectedAction, setSelectedAction] = useState('')
-	const [isPerformingAction, setIsPerformingAction] = useState(false)
-
-	const applyDownloadAction = () => {
-		const downloadable = searchResults?.snippets
-			.filter(snippet => selected.has(snippet.id) && isSnippetDownloadable(snippet)) ?? []
-
-		setIsPerformingAction(true)
-		Promise.all(downloadable.map(snippet =>
-			api.post(`${REST_BASES.cloud.snippets}/${snippet.id}/download`)))
-			.then(() => doSearch())
-			.catch(handleUnknownError)
-			.finally(() => setIsPerformingAction(false))
-	}
-
-	return (
-		<div className="alignleft actions bulkactions">
-			<label htmlFor="cloud-bulk-action-selector" className="screen-reader-text">
-				{/* translators: Hidden accessibility text. */}
-				{__('Select bulk action', 'code-snippets')}
-			</label>
-
-			<select
-				id="cloud-bulk-action-selector"
-				value={selectedAction}
-				onChange={event => setSelectedAction('download' === event.target.value ? 'download' : '')}
-			>
-				<option value="">{__('Bulk Edit', 'code-snippets')}</option>
-				<option value="download">{__('Download', 'code-snippets')}</option>
-			</select>
-
-			<SubmitButton
-				name="cloud_bulk_action"
-				text={__('Apply', 'code-snippets')}
-				className="action"
-				disabled={isSearching || isPerformingAction || !selectedAction || 0 === selected.size}
-				onClick={event => {
-					event.preventDefault()
-					applyDownloadAction()
-				}}
-			/>
-
-			{isPerformingAction ? <Spinner /> : null}
-		</div>
-	)
-}
-
 interface SearchResultsGridProps {
 	snippets: CloudSnippetSchema[]
 	selected: Set<CloudSnippetSchema['id']>
@@ -159,7 +102,12 @@ interface SearchResultsViewProps {
 	setSnippetView: (view: SnippetView) => void
 }
 
+const CLOUD_BULK_ACTIONS: ListTableAction<'download'>[] = [
+	{ key: 'download', label: __('Download', 'code-snippets') }
+]
+
 const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, setSnippetView }) => {
+	const { api } = useRestAPI()
 	const { searchResults, isSearching, doSearch } = useCloudSearch()
 	const [selected, setSelected] = useState<Set<CloudSnippetSchema['id']>>(new Set())
 
@@ -175,39 +123,48 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 
 	const { totalItems, totalPages, page } = searchResults
 
-	const paginationProps: Omit<TablePaginationProps, 'which'> = {
+	const doAction = (_action: 'download', selectedIds: Set<CloudSnippetSchema['id']>): Promise<void> => {
+		const downloadable = searchResults.snippets
+			.filter(snippet => selectedIds.has(snippet.id) && isSnippetDownloadable(snippet))
+
+		return Promise.all(downloadable.map(snippet =>
+			api.post(`${REST_BASES.cloud.snippets}/${snippet.id}/download`)))
+			.then(() => doSearch())
+	}
+
+	// Shared across the top and bottom toolbars; the bottom toolbar omits the
+	// action and selection controls, showing only the pagination group.
+	const navProps = {
 		totalItems,
 		totalPages,
+		selected,
+		setSelected,
 		disabled: isSearching,
 		currentPage: page,
-		setCurrentPage: newPage => doSearch({ page: newPage })
+		setCurrentPage: (newPage: number) => doSearch({ page: newPage })
 	}
 
 	return (
 		<div className="snippets-list-view">
-			<div className="tablenav top">
-				<BulkEditActions selected={selected} />
-				<SelectAllControl
-					keys={searchResults.snippets.map(snippet => snippet.id)}
-					selected={selected}
-					setSelected={setSelected}
-				/>
-				<SearchFilters />
-				<div className="tablenav-end-group">
-					<TablePagination which="top" {...paginationProps} />
-					<SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
-				</div>
-				<br className="clear" />
-			</div>
+			<TableNav
+				which="top"
+				actions={CLOUD_BULK_ACTIONS}
+				doAction={doAction}
+				bulkSelectLabel={__('Bulk Edit', 'code-snippets')}
+				selectAllKeys={searchResults.snippets.map(snippet => snippet.id)}
+				extraTableNav={() => <SearchFilters />}
+				endTableNav={which =>
+					'top' === which
+						? <SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
+						: null}
+				{...navProps}
+			/>
 
 			{'card' === snippetView
 				? <SearchResultsGrid snippets={searchResults.snippets} selected={selected} setSelected={setSelected} />
 				: <CloudSnippetsTable snippets={searchResults.snippets} />}
 
-			<div className="tablenav bottom">
-				<TablePagination which="bottom" {...paginationProps} />
-				<br className="clear" />
-			</div>
+			<TableNav which="bottom" {...navProps} />
 		</div>
 	)
 }

From 3db3f2ab54a0ff1d88ef5ce51f934dff891983e9 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 17:40:14 +0300
Subject: [PATCH 61/91] feat: default to the table snippet view

---
 src/js/types/SnippetView.ts                               | 2 +-
 src/php/REST_API/Snippets/Preferences_REST_Controller.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/types/SnippetView.ts b/src/js/types/SnippetView.ts
index 509151887..ead88cc32 100644
--- a/src/js/types/SnippetView.ts
+++ b/src/js/types/SnippetView.ts
@@ -2,4 +2,4 @@ export const SNIPPET_VIEWS = <const> ['card', 'table']
 
 export type SnippetView = typeof SNIPPET_VIEWS[number]
 
-export const DEFAULT_SNIPPET_VIEW: SnippetView = 'card'
+export const DEFAULT_SNIPPET_VIEW: SnippetView = 'table'
diff --git a/src/php/REST_API/Snippets/Preferences_REST_Controller.php b/src/php/REST_API/Snippets/Preferences_REST_Controller.php
index 2a12fea03..0ec024494 100644
--- a/src/php/REST_API/Snippets/Preferences_REST_Controller.php
+++ b/src/php/REST_API/Snippets/Preferences_REST_Controller.php
@@ -39,7 +39,7 @@ final class Preferences_REST_Controller extends REST_Controller {
 	/**
 	 * The snippet view shown when no preference has been saved.
 	 */
-	public const DEFAULT_SNIPPET_VIEW = 'card';
+	public const DEFAULT_SNIPPET_VIEW = 'table';
 
 	/**
 	 * Retrieve the current snippet view preference, falling back to the

From f8f90a0e07ac7f2d889d54684fe913318d0d2bbb Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 17:57:12 +0300
Subject: [PATCH 62/91] feat: stack the primary nav labels under their icons at
 mid widths

---
 src/css/common/_toolbar.scss | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 59abae215..5f2ae0cc3 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -115,6 +115,19 @@ $wpcontent-inline-start-indent: 20px;
 		margin-inline-start: auto;
 	}
 
+	// Mid widths: stack each item's label beneath its icon and shrink the type
+	// so the full nav still fits on one row without the labels colliding.
+	@media (782px < width <= 1140px) {
+		li a {
+			flex-direction: column;
+			justify-content: center;
+			gap: 4px;
+			padding-inline: 14px;
+			font-size: 13px;
+			text-align: center;
+		}
+	}
+
 	// Mobile: the primary navigation scrolls horizontally on its band rather
 	// than wrapping, with the scrollbar chrome hidden.
 	@media screen and (width <= 782px) {

From 80929c468cff8c39eb3229347530797871712396 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 18:03:30 +0300
Subject: [PATCH 63/91] fix: keep stacked primary nav items aligned when a pro
 chip is present

---
 src/css/common/_toolbar.scss         | 9 +++++++++
 src/js/components/common/Toolbar.tsx | 6 ++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 5f2ae0cc3..73b14e71e 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -106,6 +106,15 @@ $wpcontent-inline-start-indent: 20px;
 			block-size: 26px;
 		}
 
+		// Label and its optional pro chip travel together as one inline group so
+		// each item stays exactly two rows (icon over label) once the bar stacks,
+		// keeping every icon and label on a shared baseline regardless of chips.
+		.toolbar-nav-label {
+			display: inline-flex;
+			align-items: center;
+			gap: 12px;
+		}
+
 		&.active-link, &:hover, &:focus, &:active {
 			color: #2271b1;
 		}
diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index f6c4e04fc..6bc42c1cc 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -157,8 +157,10 @@ const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 							}}
 						>
 							{link.icon}
-							<span>{link.label}</span>
-							{link.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
+							<span className="toolbar-nav-label">
+								<span>{link.label}</span>
+								{link.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
+							</span>
 						</a>
 					</li>)}
 			</ul>

From 377fd1d490b13ad5be8a77e6c9b14683c947a73a Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 18:06:57 +0300
Subject: [PATCH 64/91] fix: show the primary nav pro chip as a corner badge
 when stacked

---
 src/css/common/_toolbar.scss         | 26 +++++++++++++++-----------
 src/js/components/common/Toolbar.tsx |  6 ++----
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 73b14e71e..11cead44c 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -106,15 +106,6 @@ $wpcontent-inline-start-indent: 20px;
 			block-size: 26px;
 		}
 
-		// Label and its optional pro chip travel together as one inline group so
-		// each item stays exactly two rows (icon over label) once the bar stacks,
-		// keeping every icon and label on a shared baseline regardless of chips.
-		.toolbar-nav-label {
-			display: inline-flex;
-			align-items: center;
-			gap: 12px;
-		}
-
 		&.active-link, &:hover, &:focus, &:active {
 			color: #2271b1;
 		}
@@ -124,16 +115,29 @@ $wpcontent-inline-start-indent: 20px;
 		margin-inline-start: auto;
 	}
 
-	// Mid widths: stack each item's label beneath its icon and shrink the type
-	// so the full nav still fits on one row without the labels colliding.
+	// Mid widths: centre each item's label directly beneath its icon and shrink
+	// the type so the full nav still fits on one row. The pro chip becomes a
+	// small badge pinned to the item's top corner, out of the flow so it never
+	// shifts the icon off-centre from its label.
 	@media (782px < width <= 1140px) {
 		li a {
+			position: relative;
 			flex-direction: column;
 			justify-content: center;
+			align-items: center;
 			gap: 4px;
 			padding-inline: 14px;
 			font-size: 13px;
 			text-align: center;
+
+			.pro-chip {
+				position: absolute;
+				inset-block-start: 4px;
+				inset-inline-end: 4px;
+				padding-block: 1px;
+				padding-inline: 5px;
+				font-size: 8px;
+			}
 		}
 	}
 
diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index 6bc42c1cc..eac1b4c61 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -157,10 +157,8 @@ const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 							}}
 						>
 							{link.icon}
-							<span className="toolbar-nav-label">
-								<span>{link.label}</span>
-								{link.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
-							</span>
+							<span className="toolbar-nav-label">{link.label}</span>
+							{link.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 						</a>
 					</li>)}
 			</ul>

From 76f7667d4114dd4ad6bfd0996cb20656add59dba Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 18:24:56 +0300
Subject: [PATCH 65/91] fix: match the status filter counts row to the design

---
 src/css/common/_list-table.scss | 45 ++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 40a547557..277e86435 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -234,26 +234,27 @@
 	.subsubsub {
 		display: flex;
 		align-items: center;
-		gap: 0;
+		gap: 9px;
 		margin: 0;
 		padding: 0;
 		font-size: 13px;
+		line-height: 1.5;
 
 		li {
 			display: flex;
 			align-items: center;
+			gap: 9px;
 			margin: 0;
-			padding-inline: 10px;
-		}
-
-		// Vertical rules between the status links, sized to the 13px text.
-		li + li {
-			border-inline-start: 1px solid #c3c4c7;
-			line-height: 1;
+			padding: 0;
 		}
 
-		li:first-child {
-			padding-inline-start: 0;
+		// A thin vertical rule precedes every status after the first, sized to the
+		// 13px text rather than the taller line box.
+		li + li::before {
+			content: '';
+			inline-size: 1px;
+			block-size: 13px;
+			background: #c3c4c7;
 		}
 	}
 }
@@ -282,25 +283,27 @@
 	}
 }
 
-/* Status filter links (All | Active | Inactive | …): the current view keeps the accent colour
-   while the remaining links stay muted. */
-/* stylelint-disable-next-line no-descending-specificity -- unrelated element; ordering is fine. */
-.subsubsub a:not(.current) {
+/* Status filter links (All | Active | Inactive | …): the current view reads as plain
+   body text while the remaining views are accent-coloured links; every count stays
+   in the body-text colour regardless of its link state. */
+/* stylelint-disable no-descending-specificity -- unrelated element; ordering is fine. */
+.subsubsub a.current {
 	color: #2c3337;
+}
+
+.subsubsub a:not(.current) {
+	color: theme.$accent;
 
 	&:hover,
 	&:focus {
-		color: theme.$accent;
+		color: theme.$accent-hover;
 	}
 }
 
-.subsubsub a.current {
-	color: theme.$accent;
-
-	.count {
-		color: theme.$accent;
-	}
+.snippets-table-toolbar .subsubsub a .count {
+	color: #2c3337;
 }
+/* stylelint-enable no-descending-specificity */
 
 .wp-core-ui .button.clear-filters {
 	vertical-align: baseline;

From bf28db17de9ec1cfff118bae4ef3d7d0cc2db6b5 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 18:24:58 +0300
Subject: [PATCH 66/91] fix: refine the stacked nav pro chip and apply the
 collapse below 782px

---
 src/css/common/_toolbar.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 11cead44c..0ed5ab130 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -115,11 +115,12 @@ $wpcontent-inline-start-indent: 20px;
 		margin-inline-start: auto;
 	}
 
-	// Mid widths: centre each item's label directly beneath its icon and shrink
-	// the type so the full nav still fits on one row. The pro chip becomes a
+	// Narrow widths: centre each item's label directly beneath its icon and
+	// shrink the type so the nav still fits on one row. The pro chip becomes a
 	// small badge pinned to the item's top corner, out of the flow so it never
-	// shifts the icon off-centre from its label.
-	@media (782px < width <= 1140px) {
+	// shifts the icon off-centre from its label. Below 782px the row scrolls
+	// sideways (see the mobile block below) rather than wrapping.
+	@media (width <= 1140px) {
 		li a {
 			position: relative;
 			flex-direction: column;
@@ -132,11 +133,12 @@ $wpcontent-inline-start-indent: 20px;
 
 			.pro-chip {
 				position: absolute;
-				inset-block-start: 4px;
+				inset-block-start: 7px;
 				inset-inline-end: 4px;
 				padding-block: 1px;
 				padding-inline: 5px;
 				font-size: 8px;
+				line-height: normal;
 			}
 		}
 	}

From 186353c69735299032f82048304628f30e4926e9 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 18:35:34 +0300
Subject: [PATCH 67/91] fix: consolidate the manage-screen section spacing to a
 16px rhythm

---
 src/css/common/_list-table.scss     | 8 ++++++--
 src/css/manage/_snippets-table.scss | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 277e86435..334c9f3f2 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -229,7 +229,11 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin: 12px 0;
+
+	// The preceding page header owns the 16px gap above; a `wp-header-end` <hr>
+	// sits between them and prevents margin collapse, so this row keeps only its
+	// own 16px gap below (to the tablenav) and no top margin of its own.
+	margin-block: 0 16px;
 
 	.subsubsub {
 		display: flex;
@@ -260,7 +264,7 @@
 }
 
 .tablenav {
-	margin: 20px 0;
+	margin: 16px 0;
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 9e862f9e6..b89b2c1cf 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -201,7 +201,7 @@
 // bottom toolbar repeats only the bulk actions and pagination group.
 .snippets-list-view .tablenav {
 	block-size: auto;
-	margin-block-end: 20px;
+	margin-block-end: 16px;
 }
 
 .snippets-search-subtitle {

From 8dce50f4259630291b488a1d5fbadd3bf2913f06 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 18:35:40 +0300
Subject: [PATCH 68/91] fix: keep the snippet-type nav collapsed on mobile
 widths

---
 src/css/common/_subnav.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index e6995a3ba..67779f9fb 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -225,10 +225,12 @@
 	display: none;
 }
 
-// Mid-width collapse: drop the type names so each tab shows just its badge and
-// count, and shorten "All Snippets" to "All". Only the badged manage nav owns
-// a .snippet-type-name; the text-only import/settings subnav tabs are untouched.
-@media (782px < width <= 1210px) {
+// Collapse at mid-width and below (through mobile): drop the type names so each
+// tab shows just its badge and count, and shorten "All Snippets" to "All". Only
+// the badged manage nav owns a .snippet-type-name; the text-only import/settings
+// subnav tabs are untouched. Below 782px the bar still scrolls sideways (above),
+// now with the compact collapsed tabs.
+@media (width <= 1210px) {
 	.snippet-type-nav .snippet-type-link:not(.all-type-link) .snippet-type-name {
 		display: none;
 	}

From dcf3a1cfabe17c6318c1f5bc5fd92238d869effe Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 18:56:20 +0300
Subject: [PATCH 69/91] fix: collapse the list toolbar into two space-between
 rows on tablet widths

---
 src/css/common/_list-table.scss | 46 +++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 334c9f3f2..9a7b8e09e 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -269,9 +269,9 @@
 	align-items: center;
 	flex-wrap: wrap;
 
-	// The 12px row gap only shows once controls wrap onto a second row: below
-	// ~1280px the pagination group and view toggle drop to their own
-	// end-aligned row while the left cluster keeps its 18px column gaps.
+	// The row gap only shows once controls wrap onto a second row (see the
+	// tablet collapse below, where the selection + pagination cluster drops to
+	// its own row); the 18px column gap spaces the left cluster on one line.
 	gap: 12px 18px;
 }
 
@@ -563,39 +563,53 @@
 	}
 }
 
-// Mid-width collapse: rather than let the single toolbar row overflow, break
-// the top toolbar onto two rows. Row one keeps the bulk actions against the
-// pagination + view-toggle cluster; row two keeps "Select all" against the
-// filter dropdowns and search. The forced full-width break between the two
-// groups pins each pair to its own row independent of content width.
+// Tablet collapse (iPad-class widths): rather than let the single toolbar row
+// overflow, break the top toolbar onto two rows. Row one keeps the working
+// controls — bulk actions, the tag filter and the search box (stretched to
+// fill the remainder). Row two carries the selection + navigation cluster:
+// "Select all" at the start, the pagination + view-toggle group pinned to the
+// end. A forced full-width break keeps the split deterministic regardless of
+// content width.
 @media (782px < width <= 1210px) {
 	.snippets-list-view .tablenav.top {
 		flex-wrap: wrap;
-		row-gap: 4px;
+		row-gap: 8px;
 
+		// Both rows spread edge-to-edge: the first control sits at the start,
+		// the last at the end, with the slack distributed between.
+		justify-content: space-between;
+
+		// Row one: bulk actions, tag filter, search — at its design width so the
+		// space-between slack lands in the gaps rather than stretching the field.
 		.bulkactions {
 			order: 1;
 		}
 
-		.tablenav-end-group {
+		.alignleft.actions:not(.bulkactions) {
 			order: 2;
 		}
 
+		.snippets-search-area {
+			order: 3;
+			flex: 0 1 237px;
+			inline-size: 237px;
+			max-inline-size: 100%;
+		}
+
 		&::after {
 			content: '';
-			order: 3;
+			order: 4;
 			flex-basis: 100%;
 			block-size: 0;
 		}
 
+		// Row two: select all at the start, pagination + view-toggle at the end.
 		.tablenav-select-all {
-			order: 4;
-			margin-inline-end: auto;
+			order: 5;
 		}
 
-		.alignleft.actions:not(.bulkactions),
-		.snippets-search-area {
-			order: 5;
+		.tablenav-end-group {
+			order: 6;
 		}
 	}
 }

From 8c725d7921d8ce78e1c7cbd3eff51aa0c0407349 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 19:36:08 +0300
Subject: [PATCH 70/91] fix: unify the snippet card grid paging, ordering and
 selection behaviour

---
 .../SnippetsTable/SnippetsCardGrid.tsx        | 47 +++++++++----------
 .../SnippetsTable/SnippetsListTable.tsx       |  1 -
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
index 68a6d86a6..fa1719b19 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
@@ -1,13 +1,13 @@
+import classnames from 'classnames'
 import React, { useMemo, useState } from 'react'
-import { getSnippetDisplayName } from '../../../utils/snippets/snippets'
+import { fetchQueryParam } from '../../../utils/urls'
 import { TableNavigation } from '../../common/ListTable/TableNavigation'
 import { ManageSnippetCard } from './ManageSnippetCard'
 import type { ListTableAction, ListTableNavProps } from '../../common/ListTable'
 import type { Snippet } from '../../../types/Snippet'
 import type { Dispatch, ReactNode, SetStateAction } from 'react'
 
-const compareSnippetNames = (snippetA: Snippet, snippetB: Snippet): number =>
-	getSnippetDisplayName(snippetA).localeCompare(getSnippetDisplayName(snippetB), undefined, { sensitivity: 'base' })
+const PAGE_SEARCH_PARAM = 'paged'
 
 interface CardGridProps {
 	snippets: Snippet[]
@@ -18,7 +18,11 @@ interface CardGridProps {
 
 const CardGrid: React.FC<CardGridProps> = ({ snippets, noItems, selected, setSelected }) =>
 	0 < snippets.length
-		? <ul className="code-snippets-cards snippets-card-grid">
+		? <ul
+			className={classnames('code-snippets-cards', 'snippets-card-grid', {
+				'has-selection': snippets.some(snippet => selected.has(snippet.id))
+			})}
+		>
 			{snippets.map(snippet =>
 				<ManageSnippetCard
 					key={snippet.id}
@@ -44,41 +48,34 @@ const CardGrid: React.FC<CardGridProps> = ({ snippets, noItems, selected, setSel
 const getVisibleSelection = (selected: Set<Snippet['id']>, visible: Snippet[]): Set<Snippet['id']> =>
 	new Set([...selected].filter(id => visible.some(snippet => snippet.id === id)))
 
-interface SortedPagedSnippetsParams {
+interface PagedSnippetsParams {
 	snippets: Snippet[]
 	itemsPerPage: number | undefined
 	currentPage: number
 }
 
 interface PagedSnippets {
-	sortedSnippets: Snippet[]
 	totalPages: number
 	safePage: number
 	visibleSnippets: Snippet[]
 }
 
-const useSortedPagedSnippets = ({ snippets, itemsPerPage, currentPage }: SortedPagedSnippetsParams): PagedSnippets => {
-	const sortedSnippets = useMemo(
-		() => snippets.toSorted(compareSnippetNames),
-		[snippets]
-	)
-
-	const totalPages = itemsPerPage ? Math.ceil(sortedSnippets.length / itemsPerPage) : 0
+const usePagedSnippets = ({ snippets, itemsPerPage, currentPage }: PagedSnippetsParams): PagedSnippets => {
+	const totalPages = itemsPerPage ? Math.ceil(snippets.length / itemsPerPage) : 0
 	const safePage = totalPages ? Math.min(currentPage, totalPages) : 1
 
 	const visibleSnippets = useMemo(
 		() => itemsPerPage
-			? sortedSnippets.slice((safePage - 1) * itemsPerPage, safePage * itemsPerPage)
-			: sortedSnippets,
-		[sortedSnippets, itemsPerPage, safePage]
+			? snippets.slice((safePage - 1) * itemsPerPage, safePage * itemsPerPage)
+			: snippets,
+		[snippets, itemsPerPage, safePage]
 	)
 
-	return { sortedSnippets, totalPages, safePage, visibleSnippets }
+	return { totalPages, safePage, visibleSnippets }
 }
 
 export interface SnippetsCardGridProps<A extends string>
 	extends Pick<ListTableNavProps<Snippet['id'], A>, 'extraTableNav' | 'endTableNav'> {
-	selectAllControl?: boolean
 	snippets: Snippet[]
 	actions: ListTableAction<A>[]
 	doAction: (action: A, selected: Set<Snippet['id']>) => Promise<void>
@@ -92,29 +89,27 @@ export const SnippetsCardGrid = <A extends string>({
 	actions,
 	doAction,
 	extraTableNav,
-	selectAllControl,
 	endTableNav,
 	itemsPerPage,
 	noItems,
 	beforeGrid
 }: SnippetsCardGridProps<A>) => {
 	const [selected, setSelected] = useState(() => new Set<Snippet['id']>())
-	const [currentPage, setCurrentPage] = useState(1)
+	const [currentPage, setCurrentPage] = useState(() => Number(fetchQueryParam(PAGE_SEARCH_PARAM)) || 1)
 
-	const { sortedSnippets, totalPages, safePage, visibleSnippets } =
-		useSortedPagedSnippets({ snippets, itemsPerPage, currentPage })
+	const { totalPages, safePage, visibleSnippets } = usePagedSnippets({ snippets, itemsPerPage, currentPage })
 
 	return (
 		<div className="snippets-card-grid-container">
 			<TableNavigation
-				totalItems={sortedSnippets.length}
-				totalPages={totalPages || undefined}
+				totalItems={snippets.length}
+				totalPages={0 < totalPages ? totalPages : undefined}
 				currentPage={safePage}
 				setCurrentPage={setCurrentPage}
-				pageSearchParam=""
+				pageSearchParam={PAGE_SEARCH_PARAM}
 				selected={getVisibleSelection(selected, visibleSnippets)}
 				setSelected={setSelected}
-				selectAllKeys={selectAllControl ? visibleSnippets.map(snippet => snippet.id) : undefined}
+				selectAllKeys={visibleSnippets.map(snippet => snippet.id)}
 				actions={actions}
 				doAction={doAction}
 				extraTableNav={extraTableNav}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index 0a0f9bebb..f9b236e47 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -231,7 +231,6 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 			doAction={doAction}
 			itemsPerPage={itemsPerPage}
 			extraTableNav={extraTableNav}
-			selectAllControl
 			endTableNav={endTableNav}
 			noItems={<NoItemsMessage />}
 			beforeGrid={<SearchResultsIndicator />}

From 39e1b6862d6166119576900d3543663674a18a62 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 20:07:54 +0300
Subject: [PATCH 71/91] fix: keep the editor sidebar row actions on a single
 row

---
 src/css/edit/_sidebar.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/css/edit/_sidebar.scss b/src/css/edit/_sidebar.scss
index a964a38cc..5718847b9 100644
--- a/src/css/edit/_sidebar.scss
+++ b/src/css/edit/_sidebar.scss
@@ -82,8 +82,22 @@
 
 	.inline-form-field.row-actions {
 		display: flex;
+
+		// Keep the export/download, trash and lock controls on a single row; the
+		// base .inline-form-field sets `row wrap`, which would otherwise drop the
+		// lock control onto a second line in the narrow sidebar.
+		flex-wrap: nowrap;
 		gap: 0;
 
+		// Lay the export + download pair out inline too — the group is a plain
+		// block by default, so its two links would otherwise stack vertically.
+		.snippet-export-buttons {
+			display: flex;
+			flex-wrap: nowrap;
+			gap: 0;
+			min-inline-size: 0;
+		}
+
 		// Row-action buttons render as plain inline links. Neutralise the generic `.button`
 		// WP 7.0 compatibility styling (fill/border/radius/40px height) here — emitted after
 		// the wp-admin layer at equal specificity, so it wins. Export/Download inherit the accent.
@@ -91,7 +105,7 @@
 			block-size: auto;
 			min-block-size: theme.$control-height;
 			padding-block: 0;
-			padding-inline: 10px;
+			padding-inline: 8px;
 			font-weight: 400;
 			display: inline-flex;
 			justify-content: center;

From 38126ef454f62e63da755d5d12dd99a46fde1e9c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 20:14:52 +0300
Subject: [PATCH 72/91] fix: flatten the editor sidebar row-action buttons to
 plain links

---
 src/css/edit/_sidebar.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/edit/_sidebar.scss b/src/css/edit/_sidebar.scss
index 5718847b9..806aa8d6f 100644
--- a/src/css/edit/_sidebar.scss
+++ b/src/css/edit/_sidebar.scss
@@ -94,7 +94,7 @@
 		.snippet-export-buttons {
 			display: flex;
 			flex-wrap: nowrap;
-			gap: 0;
+			gap: 6px;
 			min-inline-size: 0;
 		}
 
@@ -120,6 +120,7 @@
 			&:not(.snippet-lock-button) {
 				border: 0;
 				border-radius: 0;
+				padding-inline: 0;
 				background: none;
 				box-shadow: none;
 

From 69272cedd9af7e18fcdf50fa404ed3a81d3fa958 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 20:18:07 +0300
Subject: [PATCH 73/91] fix: widen the editor sidebar export/download button
 gap

---
 src/css/edit/_sidebar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/edit/_sidebar.scss b/src/css/edit/_sidebar.scss
index 806aa8d6f..923fbc983 100644
--- a/src/css/edit/_sidebar.scss
+++ b/src/css/edit/_sidebar.scss
@@ -94,7 +94,7 @@
 		.snippet-export-buttons {
 			display: flex;
 			flex-wrap: nowrap;
-			gap: 6px;
+			gap: 12px;
 			min-inline-size: 0;
 		}
 

From 368b758028e4118b7c4a6676aaf9f9835c40734a Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 20:18:09 +0300
Subject: [PATCH 74/91] fix: use normal line-height on the pro badge

---
 src/css/common/_badges.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/common/_badges.scss b/src/css/common/_badges.scss
index 2e161bafb..45b518347 100644
--- a/src/css/common/_badges.scss
+++ b/src/css/common/_badges.scss
@@ -148,6 +148,6 @@
 	border-radius: 999px;
 	padding-block: 3px;
 	padding-inline: 10px;
-	line-height: 1;
+	line-height: normal;
 }
 /* stylelint-enable no-descending-specificity */

From 60bee89e3159ba48316e068b1e1704ddba802687 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 20:23:10 +0300
Subject: [PATCH 75/91] fix: keep disabled and active sidebar row buttons
 background-free

---
 src/css/edit/_sidebar.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/css/edit/_sidebar.scss b/src/css/edit/_sidebar.scss
index 923fbc983..888307702 100644
--- a/src/css/edit/_sidebar.scss
+++ b/src/css/edit/_sidebar.scss
@@ -124,8 +124,17 @@
 				background: none;
 				box-shadow: none;
 
+				// WordPress paints a fill on disabled buttons with !important;
+				// keep the disabled trash flat like the rest of the row.
+				&:disabled {
+					background: none !important;
+					border: 0;
+					box-shadow: none;
+				}
+
 				&:hover:not(:disabled),
-				&:focus:not(:disabled) {
+				&:focus:not(:disabled),
+				&:active:not(:disabled) {
 					background: none;
 					border: 0;
 					box-shadow: none;

From 172f0d370e6ebd9f816c823d57bea6261520d213 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 20:30:49 +0300
Subject: [PATCH 76/91] fix: keep primary small buttons at the standard control
 height

---
 src/css/common/_wp-admin.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/css/common/_wp-admin.scss b/src/css/common/_wp-admin.scss
index 3d591025f..b94f57a6d 100644
--- a/src/css/common/_wp-admin.scss
+++ b/src/css/common/_wp-admin.scss
@@ -103,8 +103,10 @@
 	}
 
 	// Primary buttons: WP 7.0 recolours these with the modern accent and drops the solid
-	// fill. Restore the classic solid brand-accent fill with white text.
-	.button-primary {
+	// fill. Restore the classic solid brand-accent fill with white text. The `:not`
+	// matches the secondary rule's specificity so a `.button-small.button-primary`
+	// keeps the token height instead of collapsing to the 26px small size.
+	.button-primary:not(.button-link) {
 		min-block-size: theme.$control-height;
 		padding-block: 0;
 		padding-inline: 12px;

From c048c465697492092555444b62d61838b92bbd44 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 20:35:34 +0300
Subject: [PATCH 77/91] fix: reload the snippet editor on browser back or
 forward navigation

---
 .../components/EditMenu/SnippetForm/SnippetForm.tsx  | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index bd337e7b6..6ccede60f 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
@@ -146,6 +146,16 @@ const EditFormWrap: React.FC = () => {
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 
+	// The Add New link and the post-save transition swap the snippet in place via
+	// history.pushState (no reload). Without this, the browser Back/Forward buttons
+	// change the URL but leave the stale form mounted; reload so the server
+	// re-renders the snippet that matches the restored URL.
+	useEffect(() => {
+		const handlePopState = () => window.location.reload()
+		window.addEventListener('popstate', handlePopState)
+		return () => window.removeEventListener('popstate', handlePopState)
+	}, [])
+
 	return (
 		<>
 			<PageHeading />

From f31fbeeda9e3f24628a1001945a73aaeb9e0a834 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 01:11:00 +0300
Subject: [PATCH 78/91] fix: align preference tests with table default

---
 tests/unit/REST_API/REST_API_Preferences_Test.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/unit/REST_API/REST_API_Preferences_Test.php b/tests/unit/REST_API/REST_API_Preferences_Test.php
index 806632204..ab1cd3b3e 100644
--- a/tests/unit/REST_API/REST_API_Preferences_Test.php
+++ b/tests/unit/REST_API/REST_API_Preferences_Test.php
@@ -83,13 +83,13 @@ protected function dispatch( string $method, array $params = [] ): WP_REST_Respo
 	}
 
 	/**
-	 * With no saved preference, the snippet view defaults to cards.
+	 * With no saved preference, the snippet view defaults to the table.
 	 */
-	public function test_snippet_view_defaults_to_card() {
+	public function test_snippet_view_defaults_to_table() {
 		$response = $this->dispatch( 'GET' );
 
 		$this->assertSame( 200, $response->get_status() );
-		$this->assertSame( [ 'view' => 'card' ], $response->get_data() );
+		$this->assertSame( [ 'view' => 'table' ], $response->get_data() );
 	}
 
 	/**
@@ -124,7 +124,7 @@ public function test_invalid_snippet_view_is_rejected() {
 	public function test_invalid_stored_option_falls_back_to_default() {
 		update_option( Preferences_REST_Controller::SNIPPET_VIEW_OPTION, 'nonsense' );
 
-		$this->assertSame( 'card', Preferences_REST_Controller::get_snippet_view() );
+		$this->assertSame( 'table', Preferences_REST_Controller::get_snippet_view() );
 	}
 
 	/**

From 357c79d757d8b23be28ec1375068a8d0bd646a43 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 09:07:43 +0300
Subject: [PATCH 79/91] fix: submit the snippets search through a real form
 control

---
 .../ManageMenu/SnippetsTable/SnippetsTableSearch.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
index fdf5f345b..d1b0783f2 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
@@ -8,7 +8,10 @@ const SearchBox = () => {
 
 	return (
 		<search aria-label={__('Search Snippets', 'code-snippets')}>
-			<p className="search-box">
+			<form
+				className="search-box"
+				onSubmit={event => event.preventDefault()}
+			>
 				<input
 					type="search"
 					id="snippets_search"
@@ -18,13 +21,10 @@ const SearchBox = () => {
 					onChange={event => setSearchQuery(event.target.value)}
 					placeholder={__('Search snippets', 'code-snippets')}
 				/>
-				<Button
-					className="snippets-search-button"
-					onClick={() => setSearchQuery(searchQuery)}
-				>
+				<Button type="submit">
 					{__('Search', 'code-snippets')}
 				</Button>
-			</p>
+			</form>
 		</search>
 	)
 }

From 972486f9d8dc7959ea4517752f4043d3d4c545a7 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 09:07:51 +0300
Subject: [PATCH 80/91] chore: drop the stray blank line at the toolbar
 stylesheet end

---
 src/css/common/_toolbar.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 0ed5ab130..7b1abaa5d 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -200,4 +200,3 @@ $wpcontent-inline-start-indent: 20px;
 .code-snippets-return-link {
 	float: inline-end;
 }
-

From b7d8d6c3ca3f34aae3cd59b627f85dd01609094b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 20:45:40 +0300
Subject: [PATCH 81/91] fix: make live search controls truthful

---
 .../SnippetsTable/SnippetsTableSearch.tsx     | 29 +++++++------------
 tests/e2e/code-snippets-list.spec.ts          | 10 +++++++
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
index d1b0783f2..469cba017 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
@@ -7,29 +7,20 @@ const SearchBox = () => {
 	const { searchQuery, setSearchQuery } = useSnippetsFilters()
 
 	return (
-		<search aria-label={__('Search Snippets', 'code-snippets')}>
-			<form
-				className="search-box"
-				onSubmit={event => event.preventDefault()}
-			>
-				<input
-					type="search"
-					id="snippets_search"
-					name="s"
-					value={searchQuery ?? ''}
-					aria-label={__('Search Snippets:', 'code-snippets')}
-					onChange={event => setSearchQuery(event.target.value)}
-					placeholder={__('Search snippets', 'code-snippets')}
-				/>
-				<Button type="submit">
-					{__('Search', 'code-snippets')}
-				</Button>
-			</form>
+		<search className="search-box" aria-label={__('Search Snippets', 'code-snippets')}>
+			<input
+				type="search"
+				id="snippets_search"
+				name="s"
+				value={searchQuery ?? ''}
+				aria-label={__('Search Snippets:', 'code-snippets')}
+				onChange={event => setSearchQuery(event.target.value)}
+				placeholder={__('Search snippets', 'code-snippets')}
+			/>
 		</search>
 	)
 }
 
-
 export const SearchArea = () =>
 	<div className="snippets-search-area">
 		<SearchBox />
diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts
index 0875a0801..83738ca39 100644
--- a/tests/e2e/code-snippets-list.spec.ts
+++ b/tests/e2e/code-snippets-list.spec.ts
@@ -26,6 +26,16 @@ test.describe('Code Snippets List Page Actions', () => {
 		await helper.cleanupSnippet(snippetName)
 	})
 
+	test('Filters snippets as the search query changes without a submit control', async ({ page }) => {
+		const search = page.getByRole('search')
+		const searchInput = search.getByRole('searchbox', { name: 'Search Snippets:' })
+
+		await searchInput.fill(snippetName)
+
+		await expect(page.getByRole('row', { name: new RegExp(snippetName) })).toBeVisible()
+		await expect(search.getByRole('button', { name: 'Search' })).toHaveCount(0)
+	})
+
 	test('Can toggle snippet activation from list page', async ({ page }) => {
 		const snippetRow = page
 			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)

From 59f8891786746bbc8bb3ce0520353c28ca11236c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 20:46:06 +0300
Subject: [PATCH 82/91] fix: label community bulk actions

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

diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 7974e71eb..7fbeefea4 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -150,7 +150,7 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 				which="top"
 				actions={CLOUD_BULK_ACTIONS}
 				doAction={doAction}
-				bulkSelectLabel={__('Bulk Edit', 'code-snippets')}
+				bulkSelectLabel={__('Bulk actions', 'code-snippets')}
 				selectAllKeys={searchResults.snippets.map(snippet => snippet.id)}
 				extraTableNav={() => <SearchFilters />}
 				endTableNav={which =>

From e07a8918d55ccd459551db19fd4e2eca78c76b4f Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 20:46:33 +0300
Subject: [PATCH 83/91] fix: move UI foundation tests to owning branch

---
 src/php/Admin/Menus/Manage_Menu.php         |  3 +-
 tests/unit/Admin/Menus/Manage_Menu_Test.php | 82 +++++++++++++++++++++
 tests/unit/Admin/Notice_Filter_Test.php     | 16 ++++
 tests/unit/Model/Snippet_Test.php           | 27 +++++++
 4 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 tests/unit/Model/Snippet_Test.php

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index e32685e6d..57229d95b 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -238,10 +238,11 @@ public function enqueue_assets() {
 		// table scan and inline payload on subpages that don't render the table.
 		if ( $this->is_manage_table_view() ) {
 			$snippets = get_snippets();
+			$inline_limit = max( 0, intval( apply_filters( 'code_snippets/manage/inline_snippets_limit', 100 ) ) );
 
 			// The inline payload includes full code bodies, so its size grows with
 			// library content; larger libraries defer to the REST fetch instead.
-			if ( count( $snippets ) <= 100 ) {
+			if ( 0 < $inline_limit && count( $snippets ) <= $inline_limit ) {
 				$localized['snippetsList'] = array_map(
 					function ( $snippet ) {
 						return $snippet->get_fields();
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Test.php
index 7c945fcad..c2b6cedc9 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -124,6 +124,88 @@ public function test_enqueue_assets_loads_preview_editor_without_full_editor_dep
 		$this->assertFalse( wp_script_is( 'code-snippets-code-editor', 'enqueued' ) );
 	}
 
+	/**
+	 * The inline snippets threshold can be disabled for constrained installations.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_assets_applies_inline_snippets_limit_filter(): void {
+		add_filter( 'code_snippets/manage/inline_snippets_limit', '__return_zero' );
+
+		$menu = new Manage_Menu();
+		$menu->enqueue_assets();
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+		$localized_offset = is_string( $data ) ? strrpos( $data, 'var CODE_SNIPPETS_MANAGE = ' ) : false;
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', '__return_zero' );
+
+		$this->assertIsString( $data );
+		$this->assertNotFalse( $localized_offset );
+		$this->assertStringNotContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
+	}
+
+	/**
+	 * Snippet lists at or below the configured limit are localized inline.
+	 *
+	 * @dataProvider provide_inline_limit_offsets
+	 *
+	 * @param int $limit_offset Number added to the current snippet count.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_assets_localizes_snippets_within_inline_limit( int $limit_offset ): void {
+		save_snippet( new Snippet( array( 'name' => 'Inline Snippet Fixture' ) ) );
+		$inline_limit = count( \Code_Snippets\get_snippets() ) + $limit_offset;
+		$filter = static fn() => $inline_limit;
+		add_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$menu = new Manage_Menu();
+		$menu->enqueue_assets();
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+		$localized_offset = is_string( $data ) ? strrpos( $data, 'var CODE_SNIPPETS_MANAGE = ' ) : false;
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$this->assertIsString( $data );
+		$this->assertNotFalse( $localized_offset );
+		$this->assertStringContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
+	}
+
+	/**
+	 * Provide offsets that place the snippet count at or below the inline limit.
+	 *
+	 * @return array<string,array{int}>
+	 */
+	public static function provide_inline_limit_offsets(): array {
+		return [
+			'at the limit' => [ 0 ],
+			'below the limit' => [ 1 ],
+		];
+	}
+
+	/**
+	 * Snippet lists above the configured limit are omitted from localized data.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_assets_omits_snippets_above_inline_limit(): void {
+		save_snippet( new Snippet( array( 'name' => 'Oversized Inline Snippet Fixture' ) ) );
+		$inline_limit = count( \Code_Snippets\get_snippets() ) - 1;
+		$filter = static fn() => $inline_limit;
+		add_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$menu = new Manage_Menu();
+		$menu->enqueue_assets();
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+		$localized_offset = is_string( $data ) ? strrpos( $data, 'var CODE_SNIPPETS_MANAGE = ' ) : false;
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$this->assertIsString( $data );
+		$this->assertNotFalse( $localized_offset );
+		$this->assertStringNotContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
+	}
+
 	/**
 	 * The manage screen renders a truncation toggle in Screen Options.
 	 *
diff --git a/tests/unit/Admin/Notice_Filter_Test.php b/tests/unit/Admin/Notice_Filter_Test.php
index 1c604d15c..2d4ff94a1 100644
--- a/tests/unit/Admin/Notice_Filter_Test.php
+++ b/tests/unit/Admin/Notice_Filter_Test.php
@@ -112,6 +112,22 @@ public function test_registers_filtering_on_code_snippets_screen(): void {
 		$this->assertNotFalse( has_action( 'admin_head', [ $this->notice_filter, 'print_fallback_styles' ] ) );
 	}
 
+	/**
+	 * The separate Add New editor screen also registers notice filtering.
+	 *
+	 * @return void
+	 */
+	public function test_registers_filtering_on_add_new_screen(): void {
+		$edit_menu = code_snippets()->admin->menus['edit'];
+		$hooknames = $edit_menu->get_hooknames();
+		set_current_screen( $hooknames[1] );
+
+		$this->notice_filter->register_filtering( get_current_screen() );
+
+		$this->assertNotFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
+		$this->assertNotFalse( has_action( 'admin_head', [ $this->notice_filter, 'print_fallback_styles' ] ) );
+	}
+
 	/**
 	 * The filter_foreign_notices filter disables filtering when set to false.
 	 *
diff --git a/tests/unit/Model/Snippet_Test.php b/tests/unit/Model/Snippet_Test.php
new file mode 100644
index 000000000..bb7005ab4
--- /dev/null
+++ b/tests/unit/Model/Snippet_Test.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace Code_Snippets\Model;
+
+use Code_Snippets\UnitTestCase;
+
+/**
+ * Tests for snippet field normalization.
+ */
+class Snippet_Test extends UnitTestCase {
+
+	/**
+	 * Descriptions preserve post-safe markup and strip executable elements.
+	 *
+	 * @return void
+	 */
+	public function test_description_sanitizes_remote_markup(): void {
+		$snippet = new Snippet(
+			[
+				'desc' => '<strong>Allowed</strong><script>alert("unsafe")</script>',
+			]
+		);
+
+		$this->assertStringContainsString( '<strong>Allowed</strong>', $snippet->desc );
+		$this->assertStringNotContainsString( '<script', $snippet->desc );
+	}
+}

From f58f3f1639425a41e1f6eddb4b35d615d6a89759 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 20:49:12 +0300
Subject: [PATCH 84/91] chore: split shared list table concerns

---
 src/css/common/_list-table.scss               | 619 +-----------------
 src/css/common/list-table/_layout.scss        | 264 ++++++++
 src/css/common/list-table/_navigation.scss    |  58 ++
 src/css/common/list-table/_pagination.scss    | 102 +++
 src/css/common/list-table/_responsive.scss    | 188 ++++++
 .../SnippetForm/fields/SnippetTypeInput.tsx   |  24 +-
 .../SnippetsTable/SnippetsListTable.tsx       | 128 +---
 .../SnippetsTable/SnippetsTableControls.tsx   | 129 ++++
 src/js/components/common/KebabMenu.tsx        |  90 +--
 .../components/common/ListTable/ListTable.tsx |  71 +-
 .../common/ListTable/TablePagination.tsx      | 212 +-----
 .../ListTable/TablePaginationNavigation.tsx   | 217 ++++++
 12 files changed, 1089 insertions(+), 1013 deletions(-)
 create mode 100644 src/css/common/list-table/_layout.scss
 create mode 100644 src/css/common/list-table/_navigation.scss
 create mode 100644 src/css/common/list-table/_pagination.scss
 create mode 100644 src/css/common/list-table/_responsive.scss
 create mode 100644 src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
 create mode 100644 src/js/components/common/ListTable/TablePaginationNavigation.tsx

diff --git a/src/css/common/_list-table.scss b/src/css/common/_list-table.scss
index 9a7b8e09e..89c5eb866 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -1,615 +1,4 @@
-@use 'theme';
-
-.column-name {
-	.extra-icons {
-		float: inline-end;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 5px;
-	}
-
-	.dashicons-lock {
-		color: #646970;
-		opacity: 0.7;
-
-		&:hover {
-			opacity: 1;
-		}
-	}
-}
-
-.active-snippet {
-	td, th {
-		background-color: rgba(#78c8e6, 0.06);
-	}
-
-	th.check-column {
-		border-inline-start: 2px solid #2ea2cc;
-	}
-
-	.column-name > .snippet-name {
-		font-weight: 600;
-	}
-}
-
-.inactive-snippet {
-	@include theme.link-colors(#579);
-}
-
-.paging-input {
-	display: inline-flex;
-	align-items: center;
-	gap: 2px;
-}
-
-.wp-list-table {
-	td.column-id {
-		text-align: center;
-	}
-
-	tr {
-		background: #fff;
-	}
-
-	ol, ul {
-		margin-block: 0 1.5em;
-		margin-inline: 1.5em 0;
-	}
-
-	ul {
-		list-style: disc;
-	}
-
-	.sortable-column-title {
-		display: flex;
-	}
-
-	th.sortable .list-table-sort-button,
-	th.sorted .list-table-sort-button {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		inline-size: 100%;
-		margin: 0;
-		border: none;
-		background: none;
-		font: inherit;
-		color: #2271b1;
-		cursor: pointer;
-		text-align: start;
-		overflow: hidden;
-		padding: 8px;
-	}
-
-	th.sortable .list-table-sort-button:focus-visible,
-	th.sorted .list-table-sort-button:focus-visible {
-		outline: 2px solid #2271b1;
-		outline-offset: 2px;
-		border-radius: 2px;
-	}
-
-	.row-actions {
-		color: #646970;
-		position: relative;
-		inset-inline-start: 0;
-
-		// Row-action buttons render as plain inline links. On WP 7.0 the generic `.button`
-		// compatibility styling would otherwise give them a fill, border, radius and fixed
-		// height, so fully neutralise it here (this rule is emitted after the wp-admin layer
-		// at equal specificity, so it wins). Non-delete links inherit the accent text colour.
-		.button-link {
-			block-size: auto;
-			min-block-size: 0;
-			padding: 0;
-			border: 0;
-			border-radius: 0;
-			background: none;
-			box-shadow: none;
-			line-height: inherit;
-			font-weight: 400;
-
-			&:hover:not(:disabled),
-			&:focus:not(:disabled) {
-				background: none;
-				border: 0;
-				box-shadow: none;
-			}
-
-			&.delete {
-				color: #b32d2e;
-			}
-
-			&.snippet-cloud-update {
-				color: #ff851b;
-			}
-		}
-
-		.snippet-row-action-feedback,
-		.snippet-row-action-error {
-			display: inline-flex;
-			align-items: center;
-			gap: .5em;
-
-			.components-spinner {
-				margin: 0;
-				inline-size: 1em;
-				block-size: 1em;
-			}
-
-		}
-
-		.snippet-row-action-error {
-			color: #b32d2e;
-
-		}
-
-		.delete.disabled {
-			color: #a7aaad;
-			cursor: not-allowed;
-			pointer-events: none;
-		}
-	}
-
-	.column-activate {
-		padding-inline-end: 0 !important;
-	}
-
-	.clear-filters {
-		vertical-align: middle;
-	}
-
-	tfoot th.check-column {
-		padding: 13px 0 0 3px;
-	}
-
-	thead th.check-column,
-	tfoot th.check-column,
-	.inactive-snippet th.check-column {
-		padding-inline-start: 5px;
-	}
-
-	.active-snippet, .inactive-snippet {
-		td, th {
-			padding: 10px 9px;
-			box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
-		}
-	}
-
-	tr.active-snippet + tr.inactive-snippet th,
-	tr.active-snippet + tr.inactive-snippet td {
-		border-block-start: 1px solid rgb(0 0 0 / 3%);
-		box-shadow: inset 0 1px 0 rgb(0 0 0 / 2%), inset 0 -1px 0 #e1e1e1;
-	}
-
-	.delete {
-		color: #b32d2e;
-	}
-
-	a.delete:not(.disabled) {
-		&:hover, &:focus, &:active {
-			border-block-end: 1px solid #f00;
-			color: #f00;
-		}
-	}
-
-	td.column-date, th.column-date {
-		white-space: nowrap;
-		inline-size: 130px; /* fixed column width */
-		min-inline-size: 130px;
-		max-inline-size: 130px;
-		text-align: end;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	td.column-date .modified-column-content {
-		display: block;
-		text-align: start;
-	}
-
-	// Snippet names always stay on a single line, truncating gracefully;
-	// the full name is exposed through the title attribute.
-	td.column-name > .snippet-name {
-		display: block;
-		max-inline-size: min(15rem, 30vw);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&.truncate-row-values td.column-desc .snippet-description-content {
-		display: block;
-		max-inline-size: min(25rem, 45vw);
-		overflow: clip;
-		text-overflow: ellipsis;
-	}
-}
-
-.snippets-table-toolbar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	// The preceding page header owns the 16px gap above; a `wp-header-end` <hr>
-	// sits between them and prevents margin collapse, so this row keeps only its
-	// own 16px gap below (to the tablenav) and no top margin of its own.
-	margin-block: 0 16px;
-
-	.subsubsub {
-		display: flex;
-		align-items: center;
-		gap: 9px;
-		margin: 0;
-		padding: 0;
-		font-size: 13px;
-		line-height: 1.5;
-
-		li {
-			display: flex;
-			align-items: center;
-			gap: 9px;
-			margin: 0;
-			padding: 0;
-		}
-
-		// A thin vertical rule precedes every status after the first, sized to the
-		// 13px text rather than the taller line box.
-		li + li::before {
-			content: '';
-			inline-size: 1px;
-			block-size: 13px;
-			background: #c3c4c7;
-		}
-	}
-}
-
-.tablenav {
-	margin: 16px 0;
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-
-	// The row gap only shows once controls wrap onto a second row (see the
-	// tablet collapse below, where the selection + pagination cluster drops to
-	// its own row); the 18px column gap spaces the left cluster on one line.
-	gap: 12px 18px;
-}
-
-/* WP 7.0 changes the default admin link colour to the modern blue. Pin the classic accent on active rows (names and
-   row-action links) so links keep their original colour; inactive rows are handled by the muted link-colors mixin,
-   and the trash button keeps its dark red from the `.delete` rules. */
-.wp-list-table .active-snippet a {
-	color: theme.$accent;
-
-	&:hover,
-	&:focus {
-		color: theme.$accent-hover;
-	}
-}
-
-/* Status filter links (All | Active | Inactive | …): the current view reads as plain
-   body text while the remaining views are accent-coloured links; every count stays
-   in the body-text colour regardless of its link state. */
-/* stylelint-disable no-descending-specificity -- unrelated element; ordering is fine. */
-.subsubsub a.current {
-	color: #2c3337;
-}
-
-.subsubsub a:not(.current) {
-	color: theme.$accent;
-
-	&:hover,
-	&:focus {
-		color: theme.$accent-hover;
-	}
-}
-
-.snippets-table-toolbar .subsubsub a .count {
-	color: #2c3337;
-}
-/* stylelint-enable no-descending-specificity */
-
-.wp-core-ui .button.clear-filters {
-	vertical-align: baseline;
-}
-
-.snippet-type-description {
-	border-block-end: 1px solid #ccc;
-	margin: 0;
-	padding-block: 1em;
-	padding-inline: 0;
-}
-
-// The pagination group and view toggle wrap together as one end-pinned
-// cluster so narrow viewports never split them across rows.
-.tablenav .tablenav-end-group {
-	display: flex;
-	align-items: center;
-	gap: 24px;
-	margin-inline-start: auto;
-}
-
-.tablenav .tablenav-pages-nav {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-
-	.tablenav-pages {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin: 0;
-	}
-}
-
-// "Select all" control shown in the toolbar beside the bulk actions.
-.tablenav .tablenav-select-all {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 14px;
-
-	input[type='checkbox'] {
-		inline-size: 20px;
-		block-size: 20px;
-		margin: 0;
-		border: 1px solid #c3c4c7;
-		border-radius: 5px;
-		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
-	}
-}
-
-.snippets-search-area {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-
-	search {
-		flex: 1 1 auto;
-		min-inline-size: 0;
-	}
-
-	.search-box {
-		float: none;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin: 0;
-
-		input[type='search'] {
-			flex: 1 1 auto;
-			min-inline-size: 0;
-		}
-	}
-}
-
-// Inside the results toolbar the search area is fixed to the design width,
-// with the input flexing to fill the space left over by the Search button.
-.tablenav .snippets-search-area {
-	inline-size: 237px;
-}
-
-.wrap .snippets-search-area input[type='search'] {
-	border-color: #e3e3e4;
-}
-
-// Tablet widths: let the search area grow to fill the remainder of its row
-// while the fixed-width selects keep their sizing and groups wrap naturally.
-@media (width <= 1024px) {
-	.tablenav .snippets-search-area {
-		inline-size: auto;
-		flex: 1 1 237px;
-		max-inline-size: 100%;
-	}
-}
-
-@media (width <= 782px) {
-	p.search-box {
-		float: inline-start;
-		position: initial;
-		margin-block: 1em 0;
-		margin-inline: 0;
-		block-size: auto;
-	}
-
-	// Mobile: the search area takes a full row of its own, and the action
-	// groups stay visible (core admin hides .tablenav.top .actions here).
-	.tablenav .snippets-search-area {
-		flex-basis: 100%;
-	}
-
-	.tablenav .alignleft.actions {
-		display: flex;
-	}
-}
-
-
-
-// Toolbar squeeze: above the mobile breakpoint the row never wraps —
-// components shrink gracefully instead (flex-wrap would otherwise win
-// before flex-shrink ever engages). Wrapping remains the small-screen
-// fallback only.
-.snippets-list-view .tablenav {
-	flex-wrap: wrap;
-
-	@media (width > 782px) {
-		flex-wrap: nowrap;
-	}
-
-	.alignleft.actions {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		float: none;
-		margin: 0;
-		padding: 0;
-		flex: 0 1 auto;
-		min-inline-size: 0;
-
-		select {
-			inline-size: auto;
-			flex: 1 1 154px;
-			min-inline-size: 104px;
-			max-inline-size: 154px;
-		}
-	}
-
-	.tablenav-select-all {
-		flex-shrink: 0;
-	}
-
-	.snippets-search-area {
-		inline-size: auto;
-		flex: 1 1 237px;
-		min-inline-size: 150px;
-		max-inline-size: 237px;
-
-		// The inner search row never wraps — the field shrinks instead.
-		search,
-		form,
-		p.search-box {
-			display: flex;
-			align-items: center;
-			flex-wrap: nowrap;
-			gap: 8px;
-			min-inline-size: 0;
-			margin: 0;
-		}
-
-		input[type='search'] {
-			min-inline-size: 110px;
-		}
-
-		.button {
-			flex: 0 0 auto;
-		}
-	}
-
-	// Pagination labels stay on one line while the row squeezes.
-	.tablenav-pages,
-	.tablenav-pages .paging-input,
-	.tablenav-pages .tablenav-paging-text {
-		white-space: nowrap;
-		flex-wrap: nowrap;
-	}
-
-	// Square pagination tiles with a compact page-number box between them.
-	// Enabled arrows pick up the accent border/text from the shared control
-	// styling; disabled arrows keep the native WordPress treatment.
-	.pagination-links {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-
-		.button {
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			inline-size: 38px;
-			block-size: 38px;
-			min-block-size: 38px;
-			box-sizing: border-box;
-			padding: 0;
-			margin: 0;
-			border-radius: 5.6px;
-		}
-
-		a.button {
-			color: #2271b1;
-		}
-
-		.paging-input {
-			gap: 8px;
-			margin-inline: 4px;
-		}
-
-		.current-page {
-			inline-size: 45px;
-			min-block-size: 38px;
-			box-sizing: border-box;
-			margin: 0;
-			text-align: center;
-			color: #2c3337;
-		}
-
-		.tablenav-paging-text {
-			font-size: 14px;
-			color: #646970;
-		}
-	}
-
-	.tablenav-pages .displaying-num {
-		font-size: 14px;
-		color: #646970;
-		white-space: nowrap;
-	}
-
-	// The trailing float-clearing break would otherwise register as an
-	// empty flex item and contribute a stray column gap.
-	br.clear {
-		display: none;
-	}
-
-	.tablenav-end-group {
-		flex: 0 1 auto;
-		min-inline-size: 0;
-	}
-
-	// The item count is the first thing to give way when space runs short.
-	@media (width <= 1240px) {
-		.tablenav-pages .displaying-num {
-			display: none;
-		}
-	}
-}
-
-// Tablet collapse (iPad-class widths): rather than let the single toolbar row
-// overflow, break the top toolbar onto two rows. Row one keeps the working
-// controls — bulk actions, the tag filter and the search box (stretched to
-// fill the remainder). Row two carries the selection + navigation cluster:
-// "Select all" at the start, the pagination + view-toggle group pinned to the
-// end. A forced full-width break keeps the split deterministic regardless of
-// content width.
-@media (782px < width <= 1210px) {
-	.snippets-list-view .tablenav.top {
-		flex-wrap: wrap;
-		row-gap: 8px;
-
-		// Both rows spread edge-to-edge: the first control sits at the start,
-		// the last at the end, with the slack distributed between.
-		justify-content: space-between;
-
-		// Row one: bulk actions, tag filter, search — at its design width so the
-		// space-between slack lands in the gaps rather than stretching the field.
-		.bulkactions {
-			order: 1;
-		}
-
-		.alignleft.actions:not(.bulkactions) {
-			order: 2;
-		}
-
-		.snippets-search-area {
-			order: 3;
-			flex: 0 1 237px;
-			inline-size: 237px;
-			max-inline-size: 100%;
-		}
-
-		&::after {
-			content: '';
-			order: 4;
-			flex-basis: 100%;
-			block-size: 0;
-		}
-
-		// Row two: select all at the start, pagination + view-toggle at the end.
-		.tablenav-select-all {
-			order: 5;
-		}
-
-		.tablenav-end-group {
-			order: 6;
-		}
-	}
-}
+@use 'list-table/layout';
+@use 'list-table/navigation';
+@use 'list-table/pagination';
+@use 'list-table/responsive';
diff --git a/src/css/common/list-table/_layout.scss b/src/css/common/list-table/_layout.scss
new file mode 100644
index 000000000..8141219f2
--- /dev/null
+++ b/src/css/common/list-table/_layout.scss
@@ -0,0 +1,264 @@
+@use '../theme';
+
+.column-name {
+	.extra-icons {
+		float: inline-end;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px;
+	}
+
+	.dashicons-lock {
+		color: #646970;
+		opacity: 0.7;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+
+.active-snippet {
+	td, th {
+		background-color: rgba(#78c8e6, 0.06);
+	}
+
+	th.check-column {
+		border-inline-start: 2px solid #2ea2cc;
+	}
+
+	.column-name > .snippet-name {
+		font-weight: 600;
+	}
+}
+
+.inactive-snippet {
+	@include theme.link-colors(#579);
+}
+
+.paging-input {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.wp-list-table {
+	td.column-id {
+		text-align: center;
+	}
+
+	tr {
+		background: #fff;
+	}
+
+	ol, ul {
+		margin-block: 0 1.5em;
+		margin-inline: 1.5em 0;
+	}
+
+	ul {
+		list-style: disc;
+	}
+
+	.sortable-column-title {
+		display: flex;
+	}
+
+	th.sortable .list-table-sort-button,
+	th.sorted .list-table-sort-button {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		inline-size: 100%;
+		margin: 0;
+		border: none;
+		background: none;
+		font: inherit;
+		color: #2271b1;
+		cursor: pointer;
+		text-align: start;
+		overflow: hidden;
+		padding: 8px;
+	}
+
+	th.sortable .list-table-sort-button:focus-visible,
+	th.sorted .list-table-sort-button:focus-visible {
+		outline: 2px solid #2271b1;
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+
+	.row-actions {
+		color: #646970;
+		position: relative;
+		inset-inline-start: 0;
+
+		// Row-action buttons render as plain inline links. On WP 7.0 the generic `.button`
+		// compatibility styling would otherwise give them a fill, border, radius and fixed
+		// height, so fully neutralise it here (this rule is emitted after the wp-admin layer
+		// at equal specificity, so it wins). Non-delete links inherit the accent text colour.
+		.button-link {
+			block-size: auto;
+			min-block-size: 0;
+			padding: 0;
+			border: 0;
+			border-radius: 0;
+			background: none;
+			box-shadow: none;
+			line-height: inherit;
+			font-weight: 400;
+
+			&:hover:not(:disabled),
+			&:focus:not(:disabled) {
+				background: none;
+				border: 0;
+				box-shadow: none;
+			}
+
+			&.delete {
+				color: #b32d2e;
+			}
+
+			&.snippet-cloud-update {
+				color: #ff851b;
+			}
+		}
+
+		.snippet-row-action-feedback,
+		.snippet-row-action-error {
+			display: inline-flex;
+			align-items: center;
+			gap: .5em;
+
+			.components-spinner {
+				margin: 0;
+				inline-size: 1em;
+				block-size: 1em;
+			}
+
+		}
+
+		.snippet-row-action-error {
+			color: #b32d2e;
+
+		}
+
+		.delete.disabled {
+			color: #a7aaad;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+	}
+
+	.column-activate {
+		padding-inline-end: 0 !important;
+	}
+
+	.clear-filters {
+		vertical-align: middle;
+	}
+
+	tfoot th.check-column {
+		padding: 13px 0 0 3px;
+	}
+
+	thead th.check-column,
+	tfoot th.check-column,
+	.inactive-snippet th.check-column {
+		padding-inline-start: 5px;
+	}
+
+	.active-snippet, .inactive-snippet {
+		td, th {
+			padding: 10px 9px;
+			box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
+		}
+	}
+
+	tr.active-snippet + tr.inactive-snippet th,
+	tr.active-snippet + tr.inactive-snippet td {
+		border-block-start: 1px solid rgb(0 0 0 / 3%);
+		box-shadow: inset 0 1px 0 rgb(0 0 0 / 2%), inset 0 -1px 0 #e1e1e1;
+	}
+
+	.delete {
+		color: #b32d2e;
+	}
+
+	a.delete:not(.disabled) {
+		&:hover, &:focus, &:active {
+			border-block-end: 1px solid #f00;
+			color: #f00;
+		}
+	}
+
+	td.column-date, th.column-date {
+		white-space: nowrap;
+		inline-size: 130px; /* fixed column width */
+		min-inline-size: 130px;
+		max-inline-size: 130px;
+		text-align: end;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	td.column-date .modified-column-content {
+		display: block;
+		text-align: start;
+	}
+
+	// Snippet names always stay on a single line, truncating gracefully;
+	// the full name is exposed through the title attribute.
+	td.column-name > .snippet-name {
+		display: block;
+		max-inline-size: min(15rem, 30vw);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&.truncate-row-values td.column-desc .snippet-description-content {
+		display: block;
+		max-inline-size: min(25rem, 45vw);
+		overflow: clip;
+		text-overflow: ellipsis;
+	}
+}
+
+.snippets-table-toolbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	// The preceding page header owns the 16px gap above; a `wp-header-end` <hr>
+	// sits between them and prevents margin collapse, so this row keeps only its
+	// own 16px gap below (to the tablenav) and no top margin of its own.
+	margin-block: 0 16px;
+
+	.subsubsub {
+		display: flex;
+		align-items: center;
+		gap: 9px;
+		margin: 0;
+		padding: 0;
+		font-size: 13px;
+		line-height: 1.5;
+
+		li {
+			display: flex;
+			align-items: center;
+			gap: 9px;
+			margin: 0;
+			padding: 0;
+		}
+
+		// A thin vertical rule precedes every status after the first, sized to the
+		// 13px text rather than the taller line box.
+		li + li::before {
+			content: '';
+			inline-size: 1px;
+			block-size: 13px;
+			background: #c3c4c7;
+		}
+	}
+}
diff --git a/src/css/common/list-table/_navigation.scss b/src/css/common/list-table/_navigation.scss
new file mode 100644
index 000000000..ffd19344e
--- /dev/null
+++ b/src/css/common/list-table/_navigation.scss
@@ -0,0 +1,58 @@
+@use '../theme';
+
+.tablenav {
+	margin: 16px 0;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+
+	// The row gap only shows once controls wrap onto a second row (see the
+	// tablet collapse below, where the selection + pagination cluster drops to
+	// its own row); the 18px column gap spaces the left cluster on one line.
+	gap: 12px 18px;
+}
+
+/* WP 7.0 changes the default admin link colour to the modern blue. Pin the classic accent on active rows (names and
+   row-action links) so links keep their original colour; inactive rows are handled by the muted link-colors mixin,
+   and the trash button keeps its dark red from the `.delete` rules. */
+.wp-list-table .active-snippet a {
+	color: theme.$accent;
+
+	&:hover,
+	&:focus {
+		color: theme.$accent-hover;
+	}
+}
+
+/* Status filter links (All | Active | Inactive | …): the current view reads as plain
+   body text while the remaining views are accent-coloured links; every count stays
+   in the body-text colour regardless of its link state. */
+/* stylelint-disable no-descending-specificity -- unrelated element; ordering is fine. */
+.subsubsub a.current {
+	color: #2c3337;
+}
+
+.subsubsub a:not(.current) {
+	color: theme.$accent;
+
+	&:hover,
+	&:focus {
+		color: theme.$accent-hover;
+	}
+}
+
+.snippets-table-toolbar .subsubsub a .count {
+	color: #2c3337;
+}
+/* stylelint-enable no-descending-specificity */
+
+.wp-core-ui .button.clear-filters {
+	vertical-align: baseline;
+}
+
+.snippet-type-description {
+	border-block-end: 1px solid #ccc;
+	margin: 0;
+	padding-block: 1em;
+	padding-inline: 0;
+}
diff --git a/src/css/common/list-table/_pagination.scss b/src/css/common/list-table/_pagination.scss
new file mode 100644
index 000000000..a278bb920
--- /dev/null
+++ b/src/css/common/list-table/_pagination.scss
@@ -0,0 +1,102 @@
+// The pagination group and view toggle wrap together as one end-pinned
+// cluster so narrow viewports never split them across rows.
+.tablenav .tablenav-end-group {
+	display: flex;
+	align-items: center;
+	gap: 24px;
+	margin-inline-start: auto;
+}
+
+.tablenav .tablenav-pages-nav {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	.tablenav-pages {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin: 0;
+	}
+}
+
+// "Select all" control shown in the toolbar beside the bulk actions.
+.tablenav .tablenav-select-all {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+
+	input[type='checkbox'] {
+		inline-size: 20px;
+		block-size: 20px;
+		margin: 0;
+		border: 1px solid #c3c4c7;
+		border-radius: 5px;
+		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
+	}
+}
+
+.snippets-search-area {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+
+	search {
+		flex: 1 1 auto;
+		min-inline-size: 0;
+	}
+
+	.search-box {
+		float: none;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin: 0;
+
+		input[type='search'] {
+			flex: 1 1 auto;
+			min-inline-size: 0;
+		}
+	}
+}
+
+// Inside the results toolbar the search area is fixed to the design width,
+// with the input flexing to fill the available space.
+.tablenav .snippets-search-area {
+	inline-size: 237px;
+}
+
+.wrap .snippets-search-area input[type='search'] {
+	border-color: #e3e3e4;
+}
+
+// Tablet widths: let the search area grow to fill the remainder of its row
+// while the fixed-width selects keep their sizing and groups wrap naturally.
+@media (width <= 1024px) {
+	.tablenav .snippets-search-area {
+		inline-size: auto;
+		flex: 1 1 237px;
+		max-inline-size: 100%;
+	}
+}
+
+@media (width <= 782px) {
+	p.search-box {
+		float: inline-start;
+		position: initial;
+		margin-block: 1em 0;
+		margin-inline: 0;
+		block-size: auto;
+	}
+
+	// Mobile: the search area takes a full row of its own, and the action
+	// groups stay visible (core admin hides .tablenav.top .actions here).
+	.tablenav .snippets-search-area {
+		flex-basis: 100%;
+	}
+
+	.tablenav .alignleft.actions {
+		display: flex;
+	}
+}
diff --git a/src/css/common/list-table/_responsive.scss b/src/css/common/list-table/_responsive.scss
new file mode 100644
index 000000000..a4e5967f9
--- /dev/null
+++ b/src/css/common/list-table/_responsive.scss
@@ -0,0 +1,188 @@
+// Toolbar squeeze: above the mobile breakpoint the row never wraps —
+// components shrink gracefully instead (flex-wrap would otherwise win
+// before flex-shrink ever engages). Wrapping remains the small-screen
+// fallback only.
+.snippets-list-view .tablenav {
+	flex-wrap: wrap;
+
+	@media (width > 782px) {
+		flex-wrap: nowrap;
+	}
+
+	.alignleft.actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		float: none;
+		margin: 0;
+		padding: 0;
+		flex: 0 1 auto;
+		min-inline-size: 0;
+
+		select {
+			inline-size: auto;
+			flex: 1 1 154px;
+			min-inline-size: 104px;
+			max-inline-size: 154px;
+		}
+	}
+
+	.tablenav-select-all {
+		flex-shrink: 0;
+	}
+
+	.snippets-search-area {
+		inline-size: auto;
+		flex: 1 1 237px;
+		min-inline-size: 150px;
+		max-inline-size: 237px;
+
+		// The inner search row never wraps — the field shrinks instead.
+		search,
+		form,
+		p.search-box {
+			display: flex;
+			align-items: center;
+			flex-wrap: nowrap;
+			gap: 8px;
+			min-inline-size: 0;
+			margin: 0;
+		}
+
+		input[type='search'] {
+			min-inline-size: 110px;
+		}
+
+		.button {
+			flex: 0 0 auto;
+		}
+	}
+
+	// Pagination labels stay on one line while the row squeezes.
+	.tablenav-pages,
+	.tablenav-pages .paging-input,
+	.tablenav-pages .tablenav-paging-text {
+		white-space: nowrap;
+		flex-wrap: nowrap;
+	}
+
+	// Square pagination tiles with a compact page-number box between them.
+	// Enabled arrows pick up the accent border/text from the shared control
+	// styling; disabled arrows keep the native WordPress treatment.
+	.pagination-links {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+
+		.button {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			inline-size: 38px;
+			block-size: 38px;
+			min-block-size: 38px;
+			box-sizing: border-box;
+			padding: 0;
+			margin: 0;
+			border-radius: 5.6px;
+		}
+
+		a.button {
+			color: #2271b1;
+		}
+
+		.paging-input {
+			gap: 8px;
+			margin-inline: 4px;
+		}
+
+		.current-page {
+			inline-size: 45px;
+			min-block-size: 38px;
+			box-sizing: border-box;
+			margin: 0;
+			text-align: center;
+			color: #2c3337;
+		}
+
+		.tablenav-paging-text {
+			font-size: 14px;
+			color: #646970;
+		}
+	}
+
+	.tablenav-pages .displaying-num {
+		font-size: 14px;
+		color: #646970;
+		white-space: nowrap;
+	}
+
+	// The trailing float-clearing break would otherwise register as an
+	// empty flex item and contribute a stray column gap.
+	br.clear {
+		display: none;
+	}
+
+	.tablenav-end-group {
+		flex: 0 1 auto;
+		min-inline-size: 0;
+	}
+
+	// The item count is the first thing to give way when space runs short.
+	@media (width <= 1240px) {
+		.tablenav-pages .displaying-num {
+			display: none;
+		}
+	}
+}
+
+// Tablet collapse (iPad-class widths): rather than let the single toolbar row
+// overflow, break the top toolbar onto two rows. Row one keeps the working
+// controls — bulk actions, the tag filter and the search box (stretched to
+// fill the remainder). Row two carries the selection + navigation cluster:
+// "Select all" at the start, the pagination + view-toggle group pinned to the
+// end. A forced full-width break keeps the split deterministic regardless of
+// content width.
+@media (782px < width <= 1210px) {
+	.snippets-list-view .tablenav.top {
+		flex-wrap: wrap;
+		row-gap: 8px;
+
+		// Both rows spread edge-to-edge: the first control sits at the start,
+		// the last at the end, with the slack distributed between.
+		justify-content: space-between;
+
+		// Row one: bulk actions, tag filter, search — at its design width so the
+		// space-between slack lands in the gaps rather than stretching the field.
+		.bulkactions {
+			order: 1;
+		}
+
+		.alignleft.actions:not(.bulkactions) {
+			order: 2;
+		}
+
+		.snippets-search-area {
+			order: 3;
+			flex: 0 1 237px;
+			inline-size: 237px;
+			max-inline-size: 100%;
+		}
+
+		&::after {
+			content: '';
+			order: 4;
+			flex-basis: 100%;
+			block-size: 0;
+		}
+
+		// Row two: select all at the start, pagination + view-toggle at the end.
+		.tablenav-select-all {
+			order: 5;
+		}
+
+		.tablenav-end-group {
+			order: 6;
+		}
+	}
+}
diff --git a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
index 655cd8982..d0b406e41 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
@@ -7,7 +7,7 @@ import { SNIPPET_TYPES, SNIPPET_TYPE_SCOPES } from '../../../../types/Snippet'
 import { isLicensed } from '../../../../utils/screen'
 import { SNIPPET_TYPE_LABELS, getSnippetType, isProType } from '../../../../utils/snippets/snippets'
 import { Badge } from '../../../common/Badge'
-import type { FormatOptionLabelContext } from 'react-select'
+import type { FormatOptionLabelContext, StylesConfig } from 'react-select'
 import type { Dispatch, SetStateAction } from 'react'
 import type { SnippetCodeType, SnippetType } from '../../../../types/Snippet'
 import type { SelectOption } from '../../../../types/SelectOption'
@@ -28,6 +28,16 @@ const OPTIONS: SelectOption<SnippetType>[] =
 	SNIPPET_TYPES.map(type =>
 		({ value: type, label: SNIPPET_TYPE_LABELS[type] }))
 
+const SELECT_STYLES: StylesConfig<SelectOption<SnippetType>> = {
+	menu: provided => ({
+		...provided,
+		zIndex: 9999,
+		width: 'max-content',
+		minWidth: '100%'
+	}),
+	input: provided => ({ ...provided, boxShadow: 'none' })
+}
+
 interface SnippetTypeOptionProps {
 	option: SelectOption<SnippetType>
 	context: FormatOptionLabelContext
@@ -66,22 +76,14 @@ export const SnippetTypeInput: React.FC<SnippetTypeInputProps> = ({ setIsUpgrade
 			<label htmlFor="snippet-type-select-input" className="screen-reader-text">
 				{__('Snippet Type', 'code-snippets')}
 			</label>
-			<Select
+			<Select<SelectOption<SnippetType>>
 				inputId="snippet-type-select-input"
 				className="code-snippets-select"
 				isSearchable={false}
 				isDisabled={isReadOnly || 0 !== snippet.id && 'cond' === snippetType}
 				options={0 === snippet.id ? OPTIONS : OPTIONS.filter(option => 'cond' !== option.value)}
 				menuPlacement="bottom"
-				styles={{
-					menu: provided => ({
-						...provided,
-						zIndex: 9999,
-						width: 'max-content',
-						minWidth: '100%'
-					}),
-					input: provided => ({ ...provided, boxShadow: 'none' })
-				}}
+				styles={SELECT_STYLES}
 				value={OPTIONS.find(option => option.value === snippetType)}
 				formatOptionLabel={(data, meta) =>
 					<SnippetTypeOption option={data} context={meta.context} />}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index f9b236e47..170c6ba87 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -1,98 +1,24 @@
-import { __, _x, sprintf } from '@wordpress/i18n'
-import React, { Fragment, useEffect, useMemo, useState } from 'react'
+import { __ } from '@wordpress/i18n'
+import React, { useEffect, useMemo, useState } from 'react'
 import classnames from 'classnames'
 import { createInterpolateElement } from '@wordpress/element'
-import { useRestAPI } from '../../../hooks/useRestAPI'
-import { useSnippetsList } from '../../../hooks/useSnippetsList'
-import { handleUnknownError } from '../../../utils/errors'
-import { REST_BASES } from '../../../utils/restAPI'
 import { getSnippetType, isSnippetActive } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { ListTable } from '../../common/ListTable'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
-import { SubmitButton } from '../../common/SubmitButton'
-import { INDEX_STATUS, useSnippetsFilters } from './WithSnippetsTableFilters'
-import { useFilteredSnippets } from './WithFilteredSnippetsContext'
 import { SnippetsCardGrid } from './SnippetsCardGrid'
-import { SearchArea, SearchResultsIndicator } from './SnippetsTableSearch'
-import { BULK_ACTIONS, TRASHED_BULK_ACTIONS, useApplyBulkAction } from './useApplyBulkAction'
+import { SnippetsTableNavigation, SnippetsTableToolbar } from './SnippetsTableControls'
+import { SearchResultsIndicator } from './SnippetsTableSearch'
 import { getTableColumns } from './TableColumns'
+import { useFilteredSnippets } from './WithFilteredSnippetsContext'
+import { INDEX_STATUS, useSnippetsFilters } from './WithSnippetsTableFilters'
+import { BULK_ACTIONS, TRASHED_BULK_ACTIONS, useApplyBulkAction } from './useApplyBulkAction'
 import type { ListTableAction } from '../../common/ListTable'
-import type { SnippetStatus } from './WithSnippetsTableFilters'
 import type { SnippetsTableAction } from './useApplyBulkAction'
 import type { Snippet } from '../../../types/Snippet'
 import type { SnippetView } from '../../../types/SnippetView'
 import type { ReactNode } from 'react'
 
-const STATUS_LABELS: [SnippetStatus, string][] = [
-	['all', __('All', 'code-snippets')],
-	['active', __('Active', 'code-snippets')],
-	['inactive', __('Inactive', 'code-snippets')],
-	['recently_active', __('Recently Active', 'code-snippets')],
-	['locked', __('Locked', 'code-snippets')],
-	['unlocked', __('Unlocked', 'code-snippets')],
-	['trashed', __('Trashed', 'code-snippets')]
-]
-
-const SnippetStatusCounts = () => {
-	const { currentStatus, setCurrentStatus } = useSnippetsFilters()
-	const { snippetsByStatus } = useFilteredSnippets()
-
-	const visibleStatuses = STATUS_LABELS.filter(([status]) =>
-		snippetsByStatus.has(status) && ('unlocked' !== status || snippetsByStatus.has('locked')))
-
-	return (
-		<ul className="subsubsub">
-			{visibleStatuses.map(([status, label]) =>
-				<Fragment key={status}>
-					<li className={status}>
-						<a
-							href={buildUrl(window.location.href, { status: INDEX_STATUS === status ? undefined : status })}
-							className={currentStatus === status ? 'current' : undefined}
-							aria-current={currentStatus === status ? 'page' : undefined}
-							onClick={event => {
-								event.preventDefault()
-								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)
-							}</span>
-						</a>
-					</li>
-				</Fragment>)}
-		</ul>
-	)
-}
-
-const ClearRecentlyActiveButton: React.FC = () => {
-	const { api } = useRestAPI()
-	const { refreshSnippetsList } = useSnippetsList()
-	const { currentStatus } = useSnippetsFilters()
-
-	return 'recently_active' === currentStatus
-		? <div className="alignleft actions">
-			<SubmitButton
-				secondary
-				name="clear-recent-list"
-				text={__('Clear List', 'code-snippets')}
-				onClick={event => {
-					event.preventDefault()
-					api.del(REST_BASES.recentlyActive)
-						.then(refreshSnippetsList)
-						.catch(handleUnknownError)
-				}}
-			/>
-		</div>
-		: null
-}
-
-interface ExtraTableNavProps {
-	visibleSnippets: Snippet[]
-}
-
 interface ManageTableSettings {
 	hiddenColumns: Set<string>
 	truncateRowValues: boolean
@@ -133,36 +59,6 @@ const useManageTableSettings = (): ManageTableSettings => {
 	return { hiddenColumns, truncateRowValues }
 }
 
-const FilterByTagControl: React.FC<ExtraTableNavProps> = ({ visibleSnippets }) => {
-	const { currentTag, setCurrentTag } = useSnippetsFilters()
-
-	const tagsList: Set<string> = useMemo(
-		() => visibleSnippets.reduce((tags, snippet) => {
-			snippet.tags.forEach(tag => tags.add(tag))
-			return tags
-		}, new Set<string>()),
-		[visibleSnippets])
-
-	return 0 < tagsList.size
-		? <div className="alignleft actions">
-			<label htmlFor="snippets-tag-filter" className="screen-reader-text">
-				{__('Filter snippets by tag', 'code-snippets')}
-			</label>
-			<select
-				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>
-				{[...tagsList].map(tag =>
-					<option key={tag} value={tag}>{tag}</option>)}
-			</select>
-		</div>
-		: null
-}
-
 const NoItemsMessage = () => {
 	const { currentType, currentTag, searchQuery } = useSnippetsFilters()
 
@@ -275,17 +171,11 @@ export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({ snippetVie
 	}, [currentStatus, setCurrentStatus, snippetsByStatus])
 
 	const extraTableNav = (which: 'top' | 'bottom') =>
-		<>
-			{'top' === which && <FilterByTagControl visibleSnippets={snippetsByStatus.get('all') ?? []} />}
-			<ClearRecentlyActiveButton />
-			{'top' === which && <SearchArea />}
-		</>
+		<SnippetsTableNavigation which={which} visibleSnippets={snippetsByStatus.get('all') ?? []} />
 
 	return (
 		<>
-			<div className="snippets-table-toolbar">
-				<SnippetStatusCounts />
-			</div>
+			<SnippetsTableToolbar />
 
 			<div className="snippets-list-view">
 				<SnippetsView
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
new file mode 100644
index 000000000..8511a2222
--- /dev/null
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
@@ -0,0 +1,129 @@
+import { __, _x, sprintf } from '@wordpress/i18n'
+import React, { Fragment, useMemo } from 'react'
+import { useRestAPI } from '../../../hooks/useRestAPI'
+import { useSnippetsList } from '../../../hooks/useSnippetsList'
+import { handleUnknownError } from '../../../utils/errors'
+import { REST_BASES } from '../../../utils/restAPI'
+import { buildUrl } from '../../../utils/urls'
+import { SubmitButton } from '../../common/SubmitButton'
+import { SearchArea } from './SnippetsTableSearch'
+import { useFilteredSnippets } from './WithFilteredSnippetsContext'
+import { INDEX_STATUS, useSnippetsFilters } from './WithSnippetsTableFilters'
+import type { Snippet } from '../../../types/Snippet'
+import type { SnippetStatus } from './WithSnippetsTableFilters'
+
+const STATUS_LABELS: [SnippetStatus, string][] = [
+	['all', __('All', 'code-snippets')],
+	['active', __('Active', 'code-snippets')],
+	['inactive', __('Inactive', 'code-snippets')],
+	['recently_active', __('Recently Active', 'code-snippets')],
+	['locked', __('Locked', 'code-snippets')],
+	['unlocked', __('Unlocked', 'code-snippets')],
+	['trashed', __('Trashed', 'code-snippets')]
+]
+
+const SnippetStatusCounts = () => {
+	const { currentStatus, setCurrentStatus } = useSnippetsFilters()
+	const { snippetsByStatus } = useFilteredSnippets()
+
+	const visibleStatuses = STATUS_LABELS.filter(([status]) =>
+		snippetsByStatus.has(status) && ('unlocked' !== status || snippetsByStatus.has('locked')))
+
+	return (
+		<ul className="subsubsub">
+			{visibleStatuses.map(([status, label]) =>
+				<Fragment key={status}>
+					<li className={status}>
+						<a
+							href={buildUrl(window.location.href, { status: INDEX_STATUS === status ? undefined : status })}
+							className={currentStatus === status ? 'current' : undefined}
+							aria-current={currentStatus === status ? 'page' : undefined}
+							onClick={event => {
+								event.preventDefault()
+								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)
+							}</span>
+						</a>
+					</li>
+				</Fragment>)}
+		</ul>
+	)
+}
+
+const ClearRecentlyActiveButton: React.FC = () => {
+	const { api } = useRestAPI()
+	const { refreshSnippetsList } = useSnippetsList()
+	const { currentStatus } = useSnippetsFilters()
+
+	return 'recently_active' === currentStatus
+		? <div className="alignleft actions">
+			<SubmitButton
+				secondary
+				name="clear-recent-list"
+				text={__('Clear List', 'code-snippets')}
+				onClick={event => {
+					event.preventDefault()
+					api.del(REST_BASES.recentlyActive)
+						.then(refreshSnippetsList)
+						.catch(handleUnknownError)
+				}}
+			/>
+		</div>
+		: null
+}
+
+interface FilterByTagControlProps {
+	visibleSnippets: Snippet[]
+}
+
+const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ visibleSnippets }) => {
+	const { currentTag, setCurrentTag } = useSnippetsFilters()
+
+	const tagsList: Set<string> = useMemo(
+		() => visibleSnippets.reduce((tags, snippet) => {
+			snippet.tags.forEach(tag => tags.add(tag))
+			return tags
+		}, new Set<string>()),
+		[visibleSnippets])
+
+	return 0 < tagsList.size
+		? <div className="alignleft actions">
+			<label htmlFor="snippets-tag-filter" className="screen-reader-text">
+				{__('Filter snippets by tag', 'code-snippets')}
+			</label>
+			<select
+				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>
+				{[...tagsList].map(tag =>
+					<option key={tag} value={tag}>{tag}</option>)}
+			</select>
+		</div>
+		: null
+}
+
+export interface SnippetsTableNavigationProps {
+	which: 'top' | 'bottom'
+	visibleSnippets: Snippet[]
+}
+
+export const SnippetsTableNavigation: React.FC<SnippetsTableNavigationProps> = ({ which, visibleSnippets }) =>
+	<>
+		{'top' === which && <FilterByTagControl visibleSnippets={visibleSnippets} />}
+		<ClearRecentlyActiveButton />
+		{'top' === which && <SearchArea />}
+	</>
+
+export const SnippetsTableToolbar = () =>
+	<div className="snippets-table-toolbar">
+		<SnippetStatusCounts />
+	</div>
diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
index 411cb8756..2d2c3ab5f 100644
--- a/src/js/components/common/KebabMenu.tsx
+++ b/src/js/components/common/KebabMenu.tsx
@@ -113,6 +113,52 @@ const usePopoverPlacement = ({ isOpen, triggerRef, popoverRef }: PopoverBehaviou
 	return isFlipped
 }
 
+const handlePopoverKeyDown = (
+	event: KeyboardEvent,
+	{ closeMenu, popoverRef }: Pick<PopoverBehaviourOptions, 'closeMenu' | 'popoverRef'>
+) => {
+	if ('Escape' === event.key) {
+		event.preventDefault()
+		closeMenu()
+		return
+	}
+
+	if (!popoverRef.current) {
+		return
+	}
+
+	const focusable = Array.from(popoverRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+	const active = document.activeElement
+	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()
+		}
+
+		return
+	}
+
+	if ('Tab' !== event.key) {
+		return
+	}
+
+	if (0 === focusable.length) {
+		event.preventDefault()
+	} else if (event.shiftKey && 0 >= currentIndex) {
+		event.preventDefault()
+		focusable[focusable.length - 1].focus()
+	} else if (!event.shiftKey && (-1 === currentIndex || currentIndex === focusable.length - 1)) {
+		event.preventDefault()
+		focusable[0].focus()
+	}
+}
+
 // Close the open popover on outside clicks or Escape, and trap Tab focus
 // within it while it remains open.
 const usePopoverDismissal = ({ isOpen, setIsOpen, closeMenu, containerRef, popoverRef }: PopoverBehaviourOptions) => {
@@ -127,48 +173,8 @@ const usePopoverDismissal = ({ isOpen, setIsOpen, closeMenu, containerRef, popov
 			}
 		}
 
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if ('Escape' === event.key) {
-				event.preventDefault()
-				closeMenu()
-				return
-			}
-
-			if (!popoverRef.current) {
-				return
-			}
-
-			const focusable = Array.from(popoverRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
-			const active = document.activeElement
-			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()
-				}
-
-				return
-			}
-
-			if ('Tab' !== event.key) {
-				return
-			}
-
-			if (0 === focusable.length) {
-				event.preventDefault()
-			} else if (event.shiftKey && 0 >= currentIndex) {
-				event.preventDefault()
-				focusable[focusable.length - 1].focus()
-			} else if (!event.shiftKey && (-1 === currentIndex || currentIndex === focusable.length - 1)) {
-				event.preventDefault()
-				focusable[0].focus()
-			}
-		}
+		const handleKeyDown = (event: KeyboardEvent) =>
+			handlePopoverKeyDown(event, { closeMenu, popoverRef })
 
 		document.addEventListener('mousedown', handlePointerDown)
 		document.addEventListener('keydown', handleKeyDown)
diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
index 3ab3b695d..a154bf444 100644
--- a/src/js/components/common/ListTable/ListTable.tsx
+++ b/src/js/components/common/ListTable/ListTable.tsx
@@ -5,7 +5,7 @@ import { ColumnHeadings } from './ColumnHeadings'
 import { TableRows } from './TableRows'
 import { TableNavigation } from './TableNavigation'
 import type { ColumnHeadingsProps } from './ColumnHeadings'
-import type { Key, ReactNode } from 'react'
+import type { Dispatch, Key, ReactNode, SetStateAction } from 'react'
 
 export interface ListTableColumn<T> {
 	id: Key
@@ -172,6 +172,53 @@ export interface PartialDataListTableProps<T, K extends Key, A extends string> e
 	setSortDirection: (direction: ListTableSortDirection) => void
 }
 
+interface PartialDataListTableContentProps<T, K extends Key> extends ListTableBorderProps, ListTableRowsProps<T, K> {
+	visibleItems: T[]
+	beforeTable?: ReactNode
+	selected: Set<K>
+	sortColumn: ListTableColumn<T> | undefined
+	setSelected: Dispatch<SetStateAction<Set<K>>>
+	sortDirection: ListTableSortDirection
+	setSortColumn: (column: ListTableColumn<T> | undefined) => void
+	setSortDirection: (direction: ListTableSortDirection) => void
+}
+
+const PartialDataListTableContent = <T, K extends Key>({
+	fixed,
+	getKey,
+	columns,
+	striped,
+	className,
+	selected,
+	sortColumn,
+	beforeTable,
+	visibleItems,
+	setSelected,
+	sortDirection,
+	setSortColumn,
+	setSortDirection,
+	...tableRowsProps
+}: PartialDataListTableContentProps<T, K>) =>
+	<>
+		{beforeTable}
+
+		<TableBorder
+			items={visibleItems}
+			fixed={fixed}
+			striped={striped}
+			className={className}
+			{...{ columns, getKey, selected, sortColumn, sortDirection, setSelected, setSortColumn, setSortDirection }}
+		>
+			<TableRows
+				items={visibleItems}
+				selected={selected}
+				setSelected={setSelected}
+				{...{ getKey, columns }}
+				{...tableRowsProps}
+			/>
+		</TableBorder>
+	</>
+
 export const PartialDataListTable = <T, K extends Key, A extends string>({
 	fixed,
 	getKey,
@@ -207,23 +254,11 @@ export const PartialDataListTable = <T, K extends Key, A extends string>({
 			{...{ actions, doAction, extraTableNav, endTableNav, disabled, currentPage, totalPages }}
 			{...{ pageSearchParam, setSelected, setCurrentPage }}
 		>
-			{beforeTable}
-
-			<TableBorder
-				items={visibleItems}
-				fixed={fixed}
-				striped={striped}
-				className={className}
-				{...{ columns, getKey, selected, sortColumn, sortDirection, setSelected, setSortColumn, setSortDirection }}
-			>
-				<TableRows
-					items={visibleItems}
-					selected={selected}
-					setSelected={setSelected}
-					{...{ getKey, columns }}
-					{...tableRowsProps}
-				/>
-			</TableBorder>
+			<PartialDataListTableContent
+				{...{ fixed, getKey, columns, striped, className, selected, sortColumn, beforeTable, visibleItems }}
+				{...{ setSelected, sortDirection, setSortColumn, setSortDirection }}
+				{...tableRowsProps}
+			/>
 		</TableNavigation>
 	)
 }
diff --git a/src/js/components/common/ListTable/TablePagination.tsx b/src/js/components/common/ListTable/TablePagination.tsx
index 7ecaafcd3..6da8c5b37 100644
--- a/src/js/components/common/ListTable/TablePagination.tsx
+++ b/src/js/components/common/ListTable/TablePagination.tsx
@@ -1,173 +1,8 @@
 import React, { useState } from 'react'
 import classnames from 'classnames'
-import { __, _n, _x, sprintf } from '@wordpress/i18n'
-import { buildUrl, updateQueryParams } from '../../../utils/urls'
-import { Button } from '../Button'
-import type { ReactNode } from 'react'
-
-interface NavigationButtonProps {
-	icon: ReactNode
-	newPage: number
-	className?: string
-	disabled?: boolean
-	helperText?: string
-	setCurrentPage: (page: number) => void
-	pageSearchParam?: string
-}
-
-const NavigationButton: React.FC<NavigationButtonProps> = ({
-	icon,
-	newPage,
-	disabled,
-	className,
-	helperText,
-	setCurrentPage,
-	pageSearchParam
-}) =>
-	pageSearchParam
-		? <>
-			<a
-				className={`${className} button`}
-				href={buildUrl(window.location.href, { [pageSearchParam]: 1 === newPage ? undefined : newPage })}
-				onClick={event => {
-					event.preventDefault()
-					setCurrentPage(newPage)
-				}}
-			>
-				<span className="screen-reader-text">{helperText}</span>
-				<span aria-hidden>{icon}</span>
-			</a>{'\n'}
-		</>
-		: <Button className={className} onClick={() => setCurrentPage(newPage)} disabled={disabled}>
-			<span className="screen-reader-text">{helperText}</span>
-			<span aria-hidden>{icon}</span>
-		</Button>
-
-interface NavigationButtonsProps {
-	currentPage: number
-	disabled?: boolean
-	pageSearchParam?: string
-	setCurrentPage: (page: number) => void
-}
-
-const BackwardNavigationButtons: React.FC<NavigationButtonsProps> = ({ currentPage, ...buttonProps }) =>
-	1 === currentPage
-		? <>
-			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>{'\n'}
-			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>{'\n'}
-		</>
-		: <>
-			<NavigationButton
-				icon={<>&laquo;</>}
-				newPage={1}
-				className="first-page"
-				/* translators: Hidden accessibility text. */
-				helperText={__('First page', 'code-snippets')}
-				{...buttonProps}
-			/>{'\n'}
-			<NavigationButton
-				icon={<>&lsaquo;</>}
-				newPage={Math.max(1, currentPage - 1)}
-				className="prev-page"
-				/* translators: Hidden accessibility text. */
-				helperText={__('Previous page', 'code-snippets')}
-				{...buttonProps}
-			/>{'\n'}
-		</>
-
-interface ForwardNavigationButtonsProps extends NavigationButtonsProps {
-	totalPages: number
-}
-
-const ForwardNavigationButtons: React.FC<ForwardNavigationButtonsProps> = ({ currentPage, totalPages, ...buttonProps }) =>
-	totalPages === currentPage
-		? <>
-			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>{'\n'}
-			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&raquo;</span>
-		</>
-		: <>
-			<NavigationButton
-				icon={<>&rsaquo;</>}
-				newPage={Math.min(totalPages, currentPage + 1)}
-				className="next-page"
-				/* translators: Hidden accessibility text. */
-				helperText={__('Next page', 'code-snippets')}
-				{...buttonProps}
-			/>{'\n'}
-			<NavigationButton
-				icon={<>&raquo;</>}
-				newPage={totalPages}
-				className="last-page"
-				/* translators: Hidden accessibility text. */
-				helperText={__('Last page', 'code-snippets')}
-				{...buttonProps}
-			/>{'\n'}
-		</>
-
-interface PagingInputProps {
-	which: 'top' | 'bottom'
-	totalPages: number
-	inputName?: string
-	disabled?: boolean
-	inputValue: number
-	setInputValue: (value: number) => void
-	confirmInputValue: VoidFunction
-}
-
-const PagingInput: React.FC<PagingInputProps> = ({
-	which,
-	disabled,
-	inputName,
-	inputValue,
-	totalPages,
-	setInputValue,
-	confirmInputValue
-}) =>
-	<input
-		className="current-page"
-		id={`current-page-selector-${which}`}
-		aria-label={__('Current Page', 'code-snippets')}
-		type="text"
-		name={inputName}
-		value={inputValue}
-		size={totalPages.toString().length}
-		disabled={disabled}
-		aria-describedby="table-paging"
-		onBlur={confirmInputValue}
-		onChange={event => {
-			const value = Number(event.target.value)
-
-			if (value) {
-				setInputValue(value)
-			}
-		}}
-	/>
-
-interface CurrentPageProps extends PagingInputProps {
-	currentPage: number
-}
-
-const CurrentPage: React.FC<CurrentPageProps> = ({ which, totalPages, currentPage, ...inputProps }) =>
-	'bottom' === which
-		? <>
-			{/* translators: Hidden accessibility text. */}
-			<span className="screen-reader-text">{__('Current Page', 'code-snippets')}</span>
-			<span className="paging-input">
-				<span className="tablenav-paging-text">
-					{/* translators: 1: Current page. */
-						sprintf(_x('%s of ', 'paging', 'code-snippets'), currentPage)}
-					<span className="total-pages">{totalPages}</span>
-				</span>
-			</span>
-		</>
-		: <span className="paging-input">
-			<PagingInput which={which} totalPages={totalPages} {...inputProps} />
-			<span className="tablenav-paging-text">
-				{/* translators: 1: Current page. */
-					_x(' of ', 'paging', 'code-snippets')}
-				<span className="total-pages">{totalPages}</span>
-			</span>
-		</span>
+import { __, _n, sprintf } from '@wordpress/i18n'
+import { updateQueryParams } from '../../../utils/urls'
+import { TablePaginationNavigation } from './TablePaginationNavigation'
 
 interface PaginationControlsProps {
 	which: 'top' | 'bottom'
@@ -181,45 +16,6 @@ interface PaginationControlsProps {
 	pageSearchParam?: string
 }
 
-type NavigationLinksProps = Omit<PaginationControlsProps, 'totalItems'>
-
-const NavigationLinks: React.FC<NavigationLinksProps> = ({
-	which,
-	disabled,
-	totalPages,
-	inputValue,
-	currentPage,
-	setCurrentPage,
-	setInputValue,
-	pageSearchParam
-}) => (
-	<span className="pagination-links">
-		<BackwardNavigationButtons
-			disabled={disabled}
-			currentPage={currentPage}
-			setCurrentPage={setCurrentPage}
-			pageSearchParam={pageSearchParam}
-		/>
-		<CurrentPage
-			which={which}
-			disabled={disabled}
-			totalPages={totalPages}
-			currentPage={currentPage}
-			inputName={pageSearchParam}
-			inputValue={inputValue}
-			setInputValue={setInputValue}
-			confirmInputValue={() => setCurrentPage(inputValue)}
-		/>{'\n'}
-		<ForwardNavigationButtons
-			disabled={disabled}
-			totalPages={totalPages}
-			currentPage={currentPage}
-			setCurrentPage={setCurrentPage}
-			pageSearchParam={pageSearchParam}
-		/>
-	</span>
-)
-
 const PaginationControls: React.FC<PaginationControlsProps> = ({
 	which,
 	disabled,
@@ -256,7 +52,7 @@ const PaginationControls: React.FC<PaginationControlsProps> = ({
 						)
 					}
 				</span>{'\n'}
-				<NavigationLinks
+				<TablePaginationNavigation
 					{...{ which, disabled, totalPages, inputValue, currentPage, pageSearchParam, setCurrentPage, setInputValue }}
 				/>
 			</form>
diff --git a/src/js/components/common/ListTable/TablePaginationNavigation.tsx b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
new file mode 100644
index 000000000..7d186cffb
--- /dev/null
+++ b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
@@ -0,0 +1,217 @@
+import React from 'react'
+import { __, _x, sprintf } from '@wordpress/i18n'
+import { buildUrl } from '../../../utils/urls'
+import { Button } from '../Button'
+import type { ReactNode } from 'react'
+
+interface NavigationButtonProps {
+	icon: ReactNode
+	newPage: number
+	className?: string
+	disabled?: boolean
+	helperText?: string
+	setCurrentPage: (page: number) => void
+	pageSearchParam?: string
+}
+
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+	icon,
+	newPage,
+	disabled,
+	className,
+	helperText,
+	setCurrentPage,
+	pageSearchParam
+}) =>
+	pageSearchParam
+		? <>
+			<a
+				className={`${className} button`}
+				href={buildUrl(window.location.href, { [pageSearchParam]: 1 === newPage ? undefined : newPage })}
+				onClick={event => {
+					event.preventDefault()
+					setCurrentPage(newPage)
+				}}
+			>
+				<span className="screen-reader-text">{helperText}</span>
+				<span aria-hidden>{icon}</span>
+			</a>{'\n'}
+		</>
+		: <Button className={className} onClick={() => setCurrentPage(newPage)} disabled={disabled}>
+			<span className="screen-reader-text">{helperText}</span>
+			<span aria-hidden>{icon}</span>
+		</Button>
+
+interface NavigationButtonsProps {
+	currentPage: number
+	disabled?: boolean
+	pageSearchParam?: string
+	setCurrentPage: (page: number) => void
+}
+
+const BackwardNavigationButtons: React.FC<NavigationButtonsProps> = ({ currentPage, ...buttonProps }) =>
+	1 === currentPage
+		? <>
+			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>{'\n'}
+			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>{'\n'}
+		</>
+		: <>
+			<NavigationButton
+				icon={<>&laquo;</>}
+				newPage={1}
+				className="first-page"
+				/* translators: Hidden accessibility text. */
+				helperText={__('First page', 'code-snippets')}
+				{...buttonProps}
+			/>{'\n'}
+			<NavigationButton
+				icon={<>&lsaquo;</>}
+				newPage={Math.max(1, currentPage - 1)}
+				className="prev-page"
+				/* translators: Hidden accessibility text. */
+				helperText={__('Previous page', 'code-snippets')}
+				{...buttonProps}
+			/>{'\n'}
+		</>
+
+interface ForwardNavigationButtonsProps extends NavigationButtonsProps {
+	totalPages: number
+}
+
+const ForwardNavigationButtons: React.FC<ForwardNavigationButtonsProps> = ({ currentPage, totalPages, ...buttonProps }) =>
+	totalPages === currentPage
+		? <>
+			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>{'\n'}
+			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&raquo;</span>
+		</>
+		: <>
+			<NavigationButton
+				icon={<>&rsaquo;</>}
+				newPage={Math.min(totalPages, currentPage + 1)}
+				className="next-page"
+				/* translators: Hidden accessibility text. */
+				helperText={__('Next page', 'code-snippets')}
+				{...buttonProps}
+			/>{'\n'}
+			<NavigationButton
+				icon={<>&raquo;</>}
+				newPage={totalPages}
+				className="last-page"
+				/* translators: Hidden accessibility text. */
+				helperText={__('Last page', 'code-snippets')}
+				{...buttonProps}
+			/>{'\n'}
+		</>
+
+interface PagingInputProps {
+	which: 'top' | 'bottom'
+	totalPages: number
+	inputName?: string
+	disabled?: boolean
+	inputValue: number
+	setInputValue: (value: number) => void
+	confirmInputValue: VoidFunction
+}
+
+const PagingInput: React.FC<PagingInputProps> = ({
+	which,
+	disabled,
+	inputName,
+	inputValue,
+	totalPages,
+	setInputValue,
+	confirmInputValue
+}) =>
+	<input
+		className="current-page"
+		id={`current-page-selector-${which}`}
+		aria-label={__('Current Page', 'code-snippets')}
+		type="text"
+		name={inputName}
+		value={inputValue}
+		size={totalPages.toString().length}
+		disabled={disabled}
+		aria-describedby="table-paging"
+		onBlur={confirmInputValue}
+		onChange={event => {
+			const value = Number(event.target.value)
+
+			if (value) {
+				setInputValue(value)
+			}
+		}}
+	/>
+
+interface CurrentPageProps extends PagingInputProps {
+	currentPage: number
+}
+
+const CurrentPage: React.FC<CurrentPageProps> = ({ which, totalPages, currentPage, ...inputProps }) =>
+	'bottom' === which
+		? <>
+			{/* translators: Hidden accessibility text. */}
+			<span className="screen-reader-text">{__('Current Page', 'code-snippets')}</span>
+			<span className="paging-input">
+				<span className="tablenav-paging-text">
+					{/* translators: 1: Current page. */
+						sprintf(_x('%s of ', 'paging', 'code-snippets'), currentPage)}
+					<span className="total-pages">{totalPages}</span>
+				</span>
+			</span>
+		</>
+		: <span className="paging-input">
+			<PagingInput which={which} totalPages={totalPages} {...inputProps} />
+			<span className="tablenav-paging-text">
+				{/* translators: 1: Current page. */
+					_x(' of ', 'paging', 'code-snippets')}
+				<span className="total-pages">{totalPages}</span>
+			</span>
+		</span>
+
+export interface TablePaginationNavigationProps {
+	which: 'top' | 'bottom'
+	inputValue: number
+	totalPages: number
+	currentPage: number
+	disabled?: boolean
+	setInputValue: (value: number) => void
+	setCurrentPage: (page: number) => void
+	pageSearchParam?: string
+}
+
+export const TablePaginationNavigation: React.FC<TablePaginationNavigationProps> = ({
+	which,
+	disabled,
+	totalPages,
+	inputValue,
+	currentPage,
+	setCurrentPage,
+	setInputValue,
+	pageSearchParam
+}) => (
+	<span className="pagination-links">
+		<BackwardNavigationButtons
+			disabled={disabled}
+			currentPage={currentPage}
+			setCurrentPage={setCurrentPage}
+			pageSearchParam={pageSearchParam}
+		/>
+		<CurrentPage
+			which={which}
+			disabled={disabled}
+			totalPages={totalPages}
+			currentPage={currentPage}
+			inputName={pageSearchParam}
+			inputValue={inputValue}
+			setInputValue={setInputValue}
+			confirmInputValue={() => setCurrentPage(inputValue)}
+		/>{'\n'}
+		<ForwardNavigationButtons
+			disabled={disabled}
+			totalPages={totalPages}
+			currentPage={currentPage}
+			setCurrentPage={setCurrentPage}
+			pageSearchParam={pageSearchParam}
+		/>
+	</span>
+)

From 143798926ea1f4d4e253828a84766fef15242449 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 22:12:37 +0300
Subject: [PATCH 85/91] chore: split manage menu responsibilities

---
 src/php/Admin/Menus/Manage_Menu.php           | 441 ++----------------
 src/php/Admin/Menus/Manage_Menu_Assets.php    |  95 ++++
 .../Admin/Menus/Manage_Menu_Bulk_Download.php | 162 +++++++
 .../Admin/Menus/Manage_Menu_Registration.php  | 126 +++++
 .../Menus/Manage_Menu_Screen_Options.php      | 169 +++++++
 .../Admin/Menus/Manage_Menu_Assets_Test.php   | 195 ++++++++
 .../Menus/Manage_Menu_Bulk_Download_Test.php  |  77 +++
 .../Menus/Manage_Menu_Registration_Test.php   |  24 +
 .../Menus/Manage_Menu_Screen_Options_Test.php | 149 ++++++
 tests/unit/Admin/Menus/Manage_Menu_Test.php   | 108 -----
 10 files changed, 1044 insertions(+), 502 deletions(-)
 create mode 100644 src/php/Admin/Menus/Manage_Menu_Assets.php
 create mode 100644 src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
 create mode 100644 src/php/Admin/Menus/Manage_Menu_Registration.php
 create mode 100644 src/php/Admin/Menus/Manage_Menu_Screen_Options.php
 create mode 100644 tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
 create mode 100644 tests/unit/Admin/Menus/Manage_Menu_Bulk_Download_Test.php
 create mode 100644 tests/unit/Admin/Menus/Manage_Menu_Registration_Test.php
 create mode 100644 tests/unit/Admin/Menus/Manage_Menu_Screen_Options_Test.php

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index 57229d95b..e8641cdf4 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -3,24 +3,10 @@
 namespace Code_Snippets\Admin\Menus;
 
 use Code_Snippets\Admin\Contextual_Help;
-use Code_Snippets\Integration\Evaluate_Functions;
-use Code_Snippets\Migration\Export\Download_Code;
-use Code_Snippets\Model\Snippet;
-use Code_Snippets\Utils\Code_Highlighter;
-use WP_Error;
 use function Code_Snippets\code_snippets;
-use function Code_Snippets\get_snippet;
-use function Code_Snippets\get_snippets;
-use function Code_Snippets\Settings\get_setting;
-use function Code_Snippets\Utils\enqueue_code_preview_editor;
-use const Code_Snippets\PLUGIN_FILE;
-use const Code_Snippets\PLUGIN_VERSION;
 
 /**
- * This class handles the manage snippets menu
- *
- * @since   2.4.0
- * @package Code_Snippets
+ * Provides the manage snippets admin menu.
  */
 class Manage_Menu extends Admin_Menu {
 
@@ -40,9 +26,42 @@ class Manage_Menu extends Admin_Menu {
 	public const DEFAULT_SNIPPETS_PER_PAGE = 100;
 
 	/**
-	 * Class constructor
+	 * Manage menu asset service.
+	 *
+	 * @var Manage_Menu_Assets
+	 */
+	private Manage_Menu_Assets $assets;
+
+	/**
+	 * Manage menu bulk download service.
+	 *
+	 * @var Manage_Menu_Bulk_Download
+	 */
+	private Manage_Menu_Bulk_Download $bulk_download;
+
+	/**
+	 * Manage menu registration service.
+	 *
+	 * @var Manage_Menu_Registration
+	 */
+	private Manage_Menu_Registration $registration;
+
+	/**
+	 * Manage menu Screen Options.
+	 *
+	 * @var Manage_Menu_Screen_Options
+	 */
+	private Manage_Menu_Screen_Options $screen_options;
+
+	/**
+	 * Class constructor.
 	 */
 	public function __construct() {
+		$this->screen_options = new Manage_Menu_Screen_Options();
+		$this->assets = new Manage_Menu_Assets( $this->screen_options );
+		$this->bulk_download = new Manage_Menu_Bulk_Download();
+		$this->registration = new Manage_Menu_Registration();
+
 		parent::__construct(
 			'manage',
 			_x( 'All Snippets', 'menu label', 'code-snippets' ),
@@ -67,17 +86,7 @@ public function __construct() {
 	 * Register the top-level 'Snippets' menu and associated 'Manage' subpage
 	 */
 	public function register() {
-		add_menu_page(
-			__( 'Snippets', 'code-snippets' ),
-			_x( 'Snippets', 'top-level menu label', 'code-snippets' ),
-			code_snippets()->get_cap(),
-			code_snippets()->get_menu_slug(),
-			array( $this, 'render' ),
-			'none', // Added through CSS as a mask to prevent loading 'blinking'.
-			apply_filters( 'code_snippets/admin/menu_position', is_network_admin() ? 21 : 67 )
-		);
-
-		// Register the sub-menu.
+		$this->registration->register_top_level( $this );
 		parent::register();
 	}
 
@@ -87,27 +96,7 @@ public function register() {
 	 * @return void
 	 */
 	public function register_upgrade_menu() {
-		if ( code_snippets()->licensing->is_licensed() || get_setting( 'general', 'hide_upgrade_menu' ) ) {
-			return;
-		}
-
-		$menu_title = sprintf(
-			'<span class="button button-primary code-snippets-upgrade-button">%s %s</span>',
-			_x( 'Go Pro', 'top-level menu label', 'code-snippets' ),
-			'<span class="dashicons dashicons-external" aria-hidden="true"></span>'
-		);
-
-		$hook = add_submenu_page(
-			code_snippets()->get_menu_slug(),
-			__( 'Upgrade to Pro', 'code-snippets' ),
-			$menu_title,
-			code_snippets()->get_cap(),
-			'code_snippets_upgrade',
-			'__return_empty_string',
-			100
-		);
-
-		add_action( "load-$hook", [ $this, 'load_upgrade_menu' ] );
+		$this->registration->register_upgrade_menu( $this );
 	}
 
 	/**
@@ -116,12 +105,7 @@ public function register_upgrade_menu() {
 	 * @return void
 	 */
 	public function enqueue_menu_css() {
-		wp_enqueue_style(
-			'code-snippets-menu',
-			plugins_url( 'dist/menu.css', PLUGIN_FILE ),
-			[],
-			PLUGIN_VERSION
-		);
+		$this->registration->enqueue_menu_css();
 	}
 
 	/**
@@ -130,44 +114,14 @@ public function enqueue_menu_css() {
 	 * @return void
 	 */
 	public function load_upgrade_menu() {
-		wp_safe_redirect( 'https://snipco.de/JE2f' );
-		exit;
+		$this->registration->load_upgrade_menu();
 	}
 
 	/**
 	 * Add menu pages for the compact menu
 	 */
 	public function register_compact_menu() {
-
-		if ( ! code_snippets()->is_compact_menu() ) {
-			return;
-		}
-
-		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Value is matched to known classes.
-		$sub = code_snippets()->get_menu_slug( isset( $_GET['sub'] ) ? sanitize_key( $_GET['sub'] ) : 'snippets' );
-
-		$classmap = array(
-			'snippets'             => 'manage',
-			'add-snippet'          => 'edit',
-			'edit-snippet'         => 'edit',
-			'import-code-snippets' => 'import',
-			'snippets-settings'    => 'settings',
-		);
-
-		$menus = code_snippets()->admin->menus;
-		$class = isset( $classmap[ $sub ], $menus[ $classmap[ $sub ] ] ) ? $menus[ $classmap[ $sub ] ] : $this;
-
-		/* Add a submenu to the Tools menu */
-		$hook = add_submenu_page(
-			'tools.php',
-			__( 'Snippets', 'code-snippets' ),
-			_x( 'Snippets', 'tools submenu label', 'code-snippets' ),
-			code_snippets()->get_cap(),
-			code_snippets()->get_menu_slug(),
-			array( $class, 'render' )
-		);
-
-		add_action( 'load-' . $hook, array( $class, 'load' ) );
+		$this->registration->register_compact_menu( $this );
 	}
 
 	/**
@@ -178,7 +132,7 @@ public function load() {
 
 		$screen = get_current_screen();
 
-		if ( $screen && ! $this->is_cloud_community_view() ) {
+		if ( $screen && ! $this->screen_options->is_cloud_community_view() ) {
 			add_filter( "manage_{$screen->id}_columns", [ $this, 'get_screen_columns' ] );
 			add_filter( 'screen_settings', [ $this, 'render_screen_settings' ] );
 		}
@@ -200,59 +154,7 @@ public function load() {
 	 * Enqueue scripts and stylesheets for the admin page.
 	 */
 	public function enqueue_assets() {
-		wp_enqueue_style(
-			self::CSS_HANDLE,
-			plugins_url( 'dist/manage.css', PLUGIN_FILE ),
-			self::$style_deps,
-			PLUGIN_VERSION
-		);
-
-		wp_enqueue_script(
-			self::JS_HANDLE,
-			plugins_url( 'dist/manage.js', PLUGIN_FILE ),
-			self::$script_deps,
-			PLUGIN_VERSION,
-			[ 'in_footer' => true ]
-		);
-
-		Code_Highlighter::enqueue_all_prism_themes();
-
-		enqueue_code_preview_editor( 'php' );
-
-		wp_set_script_translations( self::JS_HANDLE, 'code-snippets' );
-		code_snippets()->localize_script( self::JS_HANDLE );
-
-		$localized = [
-			'hasNetworkCap'        => current_user_can( code_snippets()->get_network_cap_name() ),
-			'hiddenColumns'        => $this->get_hidden_manage_columns(),
-			'truncateRowValues'    => (int) $this->truncate_row_values(),
-			'snippetsPerPage'      => self::get_snippets_per_page(),
-			'cloudSearchPerPage'   => $this->get_cloud_search_per_page(),
-			'isSafeModeActive'     => Evaluate_Functions::is_safe_mode_active(),
-			'bulkDownloadNonce'    => wp_create_nonce( 'code_snippets_bulk_download' ),
-			'supportsZipDownloads' => class_exists( 'ZipArchive' ),
-			'editorTheme'          => get_setting( 'editor', 'theme' ),
-		];
-
-		// Only the manage-table view consumes the full snippets list; skip the
-		// table scan and inline payload on subpages that don't render the table.
-		if ( $this->is_manage_table_view() ) {
-			$snippets = get_snippets();
-			$inline_limit = max( 0, intval( apply_filters( 'code_snippets/manage/inline_snippets_limit', 100 ) ) );
-
-			// The inline payload includes full code bodies, so its size grows with
-			// library content; larger libraries defer to the REST fetch instead.
-			if ( 0 < $inline_limit && count( $snippets ) <= $inline_limit ) {
-				$localized['snippetsList'] = array_map(
-					function ( $snippet ) {
-						return $snippet->get_fields();
-					},
-					$snippets
-				);
-			}
-		}
-
-		wp_localize_script( self::JS_HANDLE, 'CODE_SNIPPETS_MANAGE', $localized );
+		$this->assets->enqueue( self::$script_deps, self::$style_deps );
 	}
 
 	/**
@@ -310,68 +212,7 @@ public function render() {
 	 * @return string[]
 	 */
 	public function get_screen_columns( array $columns = array() ): array {
-		return array_merge(
-			$columns,
-			array(
-				'_title'   => __( 'Columns', 'code-snippets' ),
-				'activate' => __( 'Active', 'code-snippets' ),
-				'name'     => __( 'Name', 'code-snippets' ),
-				'type'     => __( 'Type', 'code-snippets' ),
-				'desc'     => __( 'Description', 'code-snippets' ),
-				'tags'     => __( 'Tags', 'code-snippets' ),
-				'date'     => __( 'Modified', 'code-snippets' ),
-				'priority' => __( 'Priority', 'code-snippets' ),
-			)
-		);
-	}
-
-	/**
-	 * Get the list of columns hidden for the current user on the snippets screen.
-	 *
-	 * @return string[]
-	 */
-	protected function get_hidden_manage_columns(): array {
-		$screen = get_current_screen();
-
-		return $screen ? get_hidden_columns( $screen ) : array();
-	}
-
-	/**
-	 * Whether to truncate long row values in the snippets table.
-	 *
-	 * @return bool
-	 */
-	protected function truncate_row_values(): bool {
-		$setting = get_user_option( 'snippets_table_truncate_row_values' );
-		return false === $setting || $setting;
-	}
-
-	/**
-	 * Read the current `subpage` routing parameter.
-	 *
-	 * @return string
-	 */
-	protected function get_current_subpage(): string {
-		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only routing parameter.
-		return isset( $_REQUEST['subpage'] ) ? sanitize_key( wp_unslash( $_REQUEST['subpage'] ) ) : '';
-	}
-
-	/**
-	 * Whether the current request renders the snippets-table view (the default subpage).
-	 *
-	 * @return bool
-	 */
-	protected function is_manage_table_view(): bool {
-		return ! $this->get_current_subpage();
-	}
-
-	/**
-	 * Whether the current manage subpage is the Community Cloud view.
-	 *
-	 * @return bool
-	 */
-	protected function is_cloud_community_view(): bool {
-		return 'cloud-community' === $this->get_current_subpage();
+		return $this->screen_options->get_columns( $columns );
 	}
 
 	/**
@@ -382,30 +223,7 @@ protected function is_cloud_community_view(): bool {
 	 * @return string
 	 */
 	public function render_screen_settings( string $screen_settings ): string {
-		if ( $this->is_cloud_community_view() ) {
-			return $screen_settings;
-		}
-
-		ob_start();
-		?>
-		<fieldset class="metabox-prefs table-options-prefs">
-			<legend><?php esc_html_e( 'Table Options', 'code-snippets' ); ?></legend>
-			<div class="metabox-prefs-container">
-				<label for="snippets-table-truncate-row-values">
-					<input
-						id="snippets-table-truncate-row-values"
-						name="snippets_table_truncate_row_values"
-						type="checkbox"
-						value="1"
-						<?php checked( $this->truncate_row_values() ); ?>
-					/>
-					<?php esc_html_e( 'Truncate long snippet names and descriptions', 'code-snippets' ); ?>
-				</label>
-			</div>
-		</fieldset>
-		<?php
-
-		return $screen_settings . ob_get_clean();
+		return $this->screen_options->render( $screen_settings );
 	}
 
 	/**
@@ -414,35 +232,7 @@ public function render_screen_settings( string $screen_settings ): string {
 	 * @return void
 	 */
 	public function save_truncation_preference(): void {
-		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified below before persisting the option.
-		if ( empty( $_POST['wp_screen_options'] ) || ! is_array( $_POST['wp_screen_options'] ) ) {
-			return;
-		}
-
-		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Sanitized and matched to a known admin page.
-		$page = isset( $_REQUEST['page'] ) ? sanitize_key( wp_unslash( $_REQUEST['page'] ) ) : '';
-
-		if ( code_snippets()->get_menu_slug() !== $page || ! current_user_can( code_snippets()->get_cap() ) ) {
-			return;
-		}
-
-		if ( $this->is_cloud_community_view() ) {
-			return;
-		}
-
-		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified here before persisting the option.
-		$nonce = isset( $_POST['screenoptionnonce'] ) ? sanitize_text_field( wp_unslash( $_POST['screenoptionnonce'] ) ) : '';
-
-		if ( ! wp_verify_nonce( $nonce, 'screen-options-nonce' ) ) {
-			return;
-		}
-
-		update_user_option(
-			get_current_user_id(),
-			'snippets_table_truncate_row_values',
-			// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified above before reading the checkbox state.
-			isset( $_POST['snippets_table_truncate_row_values'] ) ? 1 : 0
-		);
+		$this->screen_options->save_truncation_preference();
 	}
 
 	/**
@@ -455,7 +245,7 @@ public function save_truncation_preference(): void {
 	 * @return mixed
 	 */
 	public function save_screen_option( $status, string $option, $value ) {
-		return 'snippets_per_page' === $option ? $value : $status;
+		return $this->screen_options->save_per_page_option( $status, $option, $value );
 	}
 
 	/**
@@ -464,143 +254,6 @@ public function save_screen_option( $status, string $option, $value ) {
 	 * @return void
 	 */
 	public function handle_bulk_download_request(): void {
-		if ( ! $this->is_bulk_download_request() ) {
-			return;
-		}
-
-		if ( ! current_user_can( code_snippets()->get_cap() ) ) {
-			$this->send_download_error( __( 'You are not allowed to download these snippets.', 'code-snippets' ), 403 );
-		}
-
-		$nonce = filter_input( INPUT_POST, 'code_snippets_bulk_download_nonce', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) ?? '';
-
-		if ( ! wp_verify_nonce( $nonce, 'code_snippets_bulk_download' ) ) {
-			$this->send_download_error( __( 'The download request is no longer valid. Please refresh and try again.', 'code-snippets' ), 403 );
-		}
-
-		$snippets_json = wp_unslash( filter_input( INPUT_POST, 'snippets', FILTER_DEFAULT ) ?? '' );
-		$snippets = $this->get_requested_download_snippets( $snippets_json );
-
-		if ( $snippets instanceof WP_Error ) {
-			$status = $snippets->get_error_data( 'status' );
-			$this->send_download_error( $snippets->get_error_message(), is_numeric( $status ) ? (int) $status : 403 );
-		}
-
-		if ( empty( $snippets ) ) {
-			$this->send_download_error( __( 'No snippets were selected for download.', 'code-snippets' ) );
-		}
-
-		$download = 1 === count( $snippets )
-			? Download_Code::build_snippet_download( $snippets[0] )
-			: Download_Code::build_archive_download( $snippets );
-
-		if ( $download instanceof WP_Error ) {
-			$status = $download->get_error_data( 'status' );
-			$this->send_download_error( $download->get_error_message(), is_numeric( $status ) ? (int) $status : 500 );
-		}
-
-		$this->send_download_response( $download );
-	}
-
-	/**
-	 * Determine whether the current request is a bulk download request.
-	 *
-	 * @return bool
-	 */
-	private function is_bulk_download_request(): bool {
-		$page = sanitize_key( filter_input( INPUT_GET, 'page' ) ?? '' );
-		$action = sanitize_key( filter_input( INPUT_POST, 'code_snippets_action' ) ?? '' );
-
-		return code_snippets()->get_menu_slug() === $page && 'bulk-download' === $action;
-	}
-
-	/**
-	 * Resolve the snippets requested for download.
-	 *
-	 * @param string $snippets_json JSON-encoded list of requested snippets.
-	 *
-	 * @return Snippet[]|WP_Error
-	 */
-	private function get_requested_download_snippets( string $snippets_json ) {
-		$payload = '' === $snippets_json ? [] : json_decode( $snippets_json, true );
-
-		if ( ! is_array( $payload ) ) {
-			return [];
-		}
-
-		$snippets = [];
-
-		foreach ( $payload as $snippet_data ) {
-			if ( ! is_array( $snippet_data ) || empty( $snippet_data['id'] ) ) {
-				continue;
-			}
-
-			if ( ! empty( $snippet_data['network'] ) && ! current_user_can( code_snippets()->get_network_cap_name() ) ) {
-				return new WP_Error(
-					'code_snippets_forbidden_network_download',
-					__( 'You are not allowed to download network snippets.', 'code-snippets' ),
-					[ 'status' => 403 ]
-				);
-			}
-
-			$snippet = get_snippet(
-				absint( $snippet_data['id'] ),
-				! empty( $snippet_data['network'] )
-			);
-
-			if ( $snippet->id ) {
-				$snippets[] = $snippet;
-			}
-		}
-
-		return $snippets;
-	}
-
-	/**
-	 * Send a download file response and end execution.
-	 *
-	 * @param array{filename:string, content_type:string, content:string} $download Download data.
-	 *
-	 * @return void
-	 */
-	private function send_download_response( array $download ): void {
-		while ( ob_get_level() ) {
-			ob_end_clean();
-		}
-
-		nocache_headers();
-		send_nosniff_header();
-
-		header( 'Content-Description: File Transfer' );
-		header( 'Content-Type: ' . $download['content_type'] );
-		header( 'Content-Disposition: attachment; filename="' . $download['filename'] . '"' );
-		header( 'Content-Length: ' . strlen( $download['content'] ) );
-		header( 'X-Suggested-Filename: ' . $download['filename'] );
-
-		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Binary download payload.
-		echo $download['content'];
-		exit;
-	}
-
-	/**
-	 * Send a plain text download error response and end execution.
-	 *
-	 * @param string $message Error message.
-	 * @param int    $status  HTTP status code.
-	 *
-	 * @return void
-	 */
-	private function send_download_error( string $message, int $status = 400 ): void {
-		while ( ob_get_level() ) {
-			ob_end_clean();
-		}
-
-		status_header( $status );
-		nocache_headers();
-		send_nosniff_header();
-		header( 'Content-Type: text/plain; charset=' . get_option( 'blog_charset' ) );
-
-		echo esc_html( $message );
-		exit;
+		$this->bulk_download->handle();
 	}
 }
diff --git a/src/php/Admin/Menus/Manage_Menu_Assets.php b/src/php/Admin/Menus/Manage_Menu_Assets.php
new file mode 100644
index 000000000..ebbd0a3c4
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Assets.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Integration\Evaluate_Functions;
+use Code_Snippets\Utils\Code_Highlighter;
+use function Code_Snippets\code_snippets;
+use function Code_Snippets\get_snippets;
+use function Code_Snippets\Settings\get_setting;
+use function Code_Snippets\Utils\enqueue_code_preview_editor;
+use const Code_Snippets\PLUGIN_FILE;
+use const Code_Snippets\PLUGIN_VERSION;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Enqueues assets and builds localized data for the manage menu.
+ */
+class Manage_Menu_Assets {
+
+	/**
+	 * Manage menu Screen Options.
+	 *
+	 * @var Manage_Menu_Screen_Options
+	 */
+	private Manage_Menu_Screen_Options $screen_options;
+
+	/**
+	 * Class constructor.
+	 *
+	 * @param Manage_Menu_Screen_Options $screen_options Manage menu Screen Options.
+	 */
+	public function __construct( Manage_Menu_Screen_Options $screen_options ) {
+		$this->screen_options = $screen_options;
+	}
+
+	/**
+	 * Enqueue manage assets and localize their runtime data.
+	 *
+	 * @param string[] $script_dependencies JavaScript dependencies.
+	 * @param string[] $style_dependencies  CSS dependencies.
+	 *
+	 * @return void
+	 */
+	public function enqueue( array $script_dependencies, array $style_dependencies ): void {
+		wp_enqueue_style(
+			Manage_Menu::CSS_HANDLE,
+			plugins_url( 'dist/manage.css', PLUGIN_FILE ),
+			$style_dependencies,
+			PLUGIN_VERSION
+		);
+
+		wp_enqueue_script(
+			Manage_Menu::JS_HANDLE,
+			plugins_url( 'dist/manage.js', PLUGIN_FILE ),
+			$script_dependencies,
+			PLUGIN_VERSION,
+			[ 'in_footer' => true ]
+		);
+
+		Code_Highlighter::enqueue_all_prism_themes();
+		enqueue_code_preview_editor( 'php' );
+		wp_set_script_translations( Manage_Menu::JS_HANDLE, 'code-snippets' );
+		code_snippets()->localize_script( Manage_Menu::JS_HANDLE );
+
+		$localized = [
+			'hasNetworkCap'        => current_user_can( code_snippets()->get_network_cap_name() ),
+			'hiddenColumns'        => $this->screen_options->get_hidden_columns(),
+			'truncateRowValues'    => (int) $this->screen_options->should_truncate_rows(),
+			'snippetsPerPage'      => Manage_Menu::get_snippets_per_page(),
+			'cloudSearchPerPage'   => Manage_Menu::get_cloud_search_per_page(),
+			'isSafeModeActive'     => Evaluate_Functions::is_safe_mode_active(),
+			'bulkDownloadNonce'    => wp_create_nonce( 'code_snippets_bulk_download' ),
+			'supportsZipDownloads' => class_exists( 'ZipArchive' ),
+			'editorTheme'          => get_setting( 'editor', 'theme' ),
+		];
+
+		if ( $this->screen_options->is_manage_table_view() ) {
+			$snippets = get_snippets();
+			$inline_limit = max( 0, intval( apply_filters( 'code_snippets/manage/inline_snippets_limit', 100 ) ) );
+
+			// Full code bodies make this payload grow with the size of the snippet library.
+			if ( 0 < $inline_limit && count( $snippets ) <= $inline_limit ) {
+				$localized['snippetsList'] = array_map(
+					function ( $snippet ) {
+						return $snippet->get_fields();
+					},
+					$snippets
+				);
+			}
+		}
+
+		wp_localize_script( Manage_Menu::JS_HANDLE, 'CODE_SNIPPETS_MANAGE', $localized );
+	}
+}
diff --git a/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php b/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
new file mode 100644
index 000000000..e65e47813
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
@@ -0,0 +1,162 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Migration\Export\Download_Code;
+use Code_Snippets\Model\Snippet;
+use WP_Error;
+use function Code_Snippets\code_snippets;
+use function Code_Snippets\get_snippet;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Handles bulk snippet code downloads from the manage screen.
+ */
+class Manage_Menu_Bulk_Download {
+
+	/**
+	 * Handle a bulk download request.
+	 *
+	 * @return void
+	 */
+	public function handle(): void {
+		if ( ! $this->is_request() ) {
+			return;
+		}
+
+		if ( ! current_user_can( code_snippets()->get_cap() ) ) {
+			$this->send_error( __( 'You are not allowed to download these snippets.', 'code-snippets' ), 403 );
+		}
+
+		$nonce = filter_input( INPUT_POST, 'code_snippets_bulk_download_nonce', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) ?? '';
+
+		if ( ! wp_verify_nonce( $nonce, 'code_snippets_bulk_download' ) ) {
+			$this->send_error( __( 'The download request is no longer valid. Please refresh and try again.', 'code-snippets' ), 403 );
+		}
+
+		$snippets_json = wp_unslash( filter_input( INPUT_POST, 'snippets', FILTER_DEFAULT ) ?? '' );
+		$snippets = $this->resolve_snippets( $snippets_json );
+
+		if ( $snippets instanceof WP_Error ) {
+			$status = $snippets->get_error_data( 'status' );
+			$this->send_error( $snippets->get_error_message(), is_numeric( $status ) ? (int) $status : 403 );
+		}
+
+		if ( empty( $snippets ) ) {
+			$this->send_error( __( 'No snippets were selected for download.', 'code-snippets' ) );
+		}
+
+		$download = 1 === count( $snippets )
+			? Download_Code::build_snippet_download( $snippets[0] )
+			: Download_Code::build_archive_download( $snippets );
+
+		if ( $download instanceof WP_Error ) {
+			$status = $download->get_error_data( 'status' );
+			$this->send_error( $download->get_error_message(), is_numeric( $status ) ? (int) $status : 500 );
+		}
+
+		$this->send_response( $download );
+	}
+
+	/**
+	 * Resolve snippets from a JSON request payload.
+	 *
+	 * @param string $snippets_json JSON-encoded list of requested snippets.
+	 *
+	 * @return Snippet[]|WP_Error
+	 */
+	public function resolve_snippets( string $snippets_json ) {
+		$payload = '' === $snippets_json ? [] : json_decode( $snippets_json, true );
+
+		if ( ! is_array( $payload ) ) {
+			return [];
+		}
+
+		$snippets = [];
+
+		foreach ( $payload as $snippet_data ) {
+			if ( ! is_array( $snippet_data ) || empty( $snippet_data['id'] ) ) {
+				continue;
+			}
+
+			if ( ! empty( $snippet_data['network'] ) && ! current_user_can( code_snippets()->get_network_cap_name() ) ) {
+				return new WP_Error(
+					'code_snippets_forbidden_network_download',
+					__( 'You are not allowed to download network snippets.', 'code-snippets' ),
+					[ 'status' => 403 ]
+				);
+			}
+
+			$snippet = get_snippet(
+				absint( $snippet_data['id'] ),
+				! empty( $snippet_data['network'] )
+			);
+
+			if ( $snippet->id ) {
+				$snippets[] = $snippet;
+			}
+		}
+
+		return $snippets;
+	}
+
+	/**
+	 * Determine whether the current request is a bulk download request.
+	 *
+	 * @return bool
+	 */
+	private function is_request(): bool {
+		$page = sanitize_key( filter_input( INPUT_GET, 'page' ) ?? '' );
+		$action = sanitize_key( filter_input( INPUT_POST, 'code_snippets_action' ) ?? '' );
+
+		return code_snippets()->get_menu_slug() === $page && 'bulk-download' === $action;
+	}
+
+	/**
+	 * Send a download response and end execution.
+	 *
+	 * @param array{filename:string, content_type:string, content:string} $download Download data.
+	 *
+	 * @return void
+	 */
+	private function send_response( array $download ): void {
+		while ( ob_get_level() ) {
+			ob_end_clean();
+		}
+
+		nocache_headers();
+		send_nosniff_header();
+		header( 'Content-Description: File Transfer' );
+		header( 'Content-Type: ' . $download['content_type'] );
+		header( 'Content-Disposition: attachment; filename="' . $download['filename'] . '"' );
+		header( 'Content-Length: ' . strlen( $download['content'] ) );
+		header( 'X-Suggested-Filename: ' . $download['filename'] );
+
+		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Binary download payload.
+		echo $download['content'];
+		exit;
+	}
+
+	/**
+	 * Send a download error and end execution.
+	 *
+	 * @param string $message Error message.
+	 * @param int    $status  HTTP status code.
+	 *
+	 * @return void
+	 */
+	private function send_error( string $message, int $status = 400 ): void {
+		while ( ob_get_level() ) {
+			ob_end_clean();
+		}
+
+		status_header( $status );
+		nocache_headers();
+		send_nosniff_header();
+		header( 'Content-Type: text/plain; charset=' . get_option( 'blog_charset' ) );
+
+		echo esc_html( $message );
+		exit;
+	}
+}
diff --git a/src/php/Admin/Menus/Manage_Menu_Registration.php b/src/php/Admin/Menus/Manage_Menu_Registration.php
new file mode 100644
index 000000000..7ef816b13
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Registration.php
@@ -0,0 +1,126 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use function Code_Snippets\code_snippets;
+use function Code_Snippets\Settings\get_setting;
+use const Code_Snippets\PLUGIN_FILE;
+use const Code_Snippets\PLUGIN_VERSION;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Registers manage menu pages and their shared stylesheet.
+ */
+class Manage_Menu_Registration {
+
+	/**
+	 * Register the top-level Snippets menu.
+	 *
+	 * @param Manage_Menu $menu Manage menu instance.
+	 *
+	 * @return void
+	 */
+	public function register_top_level( Manage_Menu $menu ): void {
+		add_menu_page(
+			__( 'Snippets', 'code-snippets' ),
+			_x( 'Snippets', 'top-level menu label', 'code-snippets' ),
+			code_snippets()->get_cap(),
+			code_snippets()->get_menu_slug(),
+			[ $menu, 'render' ],
+			'none', // Added through CSS as a mask to prevent loading 'blinking'.
+			apply_filters( 'code_snippets/admin/menu_position', is_network_admin() ? 21 : 67 )
+		);
+	}
+
+	/**
+	 * Register the upgrade menu item.
+	 *
+	 * @param Manage_Menu $menu Manage menu instance.
+	 *
+	 * @return void
+	 */
+	public function register_upgrade_menu( Manage_Menu $menu ): void {
+		if ( code_snippets()->licensing->is_licensed() || get_setting( 'general', 'hide_upgrade_menu' ) ) {
+			return;
+		}
+
+		$menu_title = sprintf(
+			'<span class="button button-primary code-snippets-upgrade-button">%s %s</span>',
+			_x( 'Go Pro', 'top-level menu label', 'code-snippets' ),
+			'<span class="dashicons dashicons-external" aria-hidden="true"></span>'
+		);
+
+		$hook = add_submenu_page(
+			code_snippets()->get_menu_slug(),
+			__( 'Upgrade to Pro', 'code-snippets' ),
+			$menu_title,
+			code_snippets()->get_cap(),
+			'code_snippets_upgrade',
+			'__return_empty_string',
+			100
+		);
+
+		add_action( "load-$hook", [ $menu, 'load_upgrade_menu' ] );
+	}
+
+	/**
+	 * Enqueue the admin menu icon stylesheet.
+	 *
+	 * @return void
+	 */
+	public function enqueue_menu_css(): void {
+		wp_enqueue_style(
+			'code-snippets-menu',
+			plugins_url( 'dist/menu.css', PLUGIN_FILE ),
+			[],
+			PLUGIN_VERSION
+		);
+	}
+
+	/**
+	 * Redirect the upgrade menu to the product site.
+	 *
+	 * @return void
+	 */
+	public function load_upgrade_menu(): void {
+		wp_safe_redirect( 'https://snipco.de/JE2f' );
+		exit;
+	}
+
+	/**
+	 * Register the compact menu page under Tools.
+	 *
+	 * @param Manage_Menu $menu Manage menu instance.
+	 *
+	 * @return void
+	 */
+	public function register_compact_menu( Manage_Menu $menu ): void {
+		if ( ! code_snippets()->is_compact_menu() ) {
+			return;
+		}
+
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Value is matched to known classes.
+		$sub = code_snippets()->get_menu_slug( isset( $_GET['sub'] ) ? sanitize_key( $_GET['sub'] ) : 'snippets' );
+		$classmap = [
+			'snippets'             => 'manage',
+			'add-snippet'          => 'edit',
+			'edit-snippet'         => 'edit',
+			'import-code-snippets' => 'import',
+			'snippets-settings'    => 'settings',
+		];
+		$menus = code_snippets()->admin->menus;
+		$class = isset( $classmap[ $sub ], $menus[ $classmap[ $sub ] ] ) ? $menus[ $classmap[ $sub ] ] : $menu;
+
+		$hook = add_submenu_page(
+			'tools.php',
+			__( 'Snippets', 'code-snippets' ),
+			_x( 'Snippets', 'tools submenu label', 'code-snippets' ),
+			code_snippets()->get_cap(),
+			code_snippets()->get_menu_slug(),
+			[ $class, 'render' ]
+		);
+
+		add_action( 'load-' . $hook, [ $class, 'load' ] );
+	}
+}
diff --git a/src/php/Admin/Menus/Manage_Menu_Screen_Options.php b/src/php/Admin/Menus/Manage_Menu_Screen_Options.php
new file mode 100644
index 000000000..e6e1561ac
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Screen_Options.php
@@ -0,0 +1,169 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use function Code_Snippets\code_snippets;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Provides Screen Options for the manage snippets table.
+ */
+class Manage_Menu_Screen_Options {
+
+	/**
+	 * Add the snippets table columns.
+	 *
+	 * @param string[] $columns Existing columns.
+	 *
+	 * @return string[]
+	 */
+	public function get_columns( array $columns = [] ): array {
+		return array_merge(
+			$columns,
+			[
+				'_title'   => __( 'Columns', 'code-snippets' ),
+				'activate' => __( 'Active', 'code-snippets' ),
+				'name'     => __( 'Name', 'code-snippets' ),
+				'type'     => __( 'Type', 'code-snippets' ),
+				'desc'     => __( 'Description', 'code-snippets' ),
+				'tags'     => __( 'Tags', 'code-snippets' ),
+				'date'     => __( 'Modified', 'code-snippets' ),
+				'priority' => __( 'Priority', 'code-snippets' ),
+			]
+		);
+	}
+
+	/**
+	 * Get the columns hidden for the current user.
+	 *
+	 * @return string[]
+	 */
+	public function get_hidden_columns(): array {
+		$screen = get_current_screen();
+
+		return $screen ? get_hidden_columns( $screen ) : [];
+	}
+
+	/**
+	 * Whether long row values should be truncated.
+	 *
+	 * @return bool
+	 */
+	public function should_truncate_rows(): bool {
+		$setting = get_user_option( 'snippets_table_truncate_row_values' );
+		return false === $setting || $setting;
+	}
+
+	/**
+	 * Read the current manage subpage.
+	 *
+	 * @return string
+	 */
+	public function get_current_subpage(): string {
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only routing parameter.
+		return isset( $_REQUEST['subpage'] ) ? sanitize_key( wp_unslash( $_REQUEST['subpage'] ) ) : '';
+	}
+
+	/**
+	 * Whether the current request renders the snippets table.
+	 *
+	 * @return bool
+	 */
+	public function is_manage_table_view(): bool {
+		return ! $this->get_current_subpage();
+	}
+
+	/**
+	 * Whether the current request renders Community Cloud.
+	 *
+	 * @return bool
+	 */
+	public function is_cloud_community_view(): bool {
+		return 'cloud-community' === $this->get_current_subpage();
+	}
+
+	/**
+	 * Render the manage table controls.
+	 *
+	 * @param string $screen_settings Existing screen settings HTML.
+	 *
+	 * @return string
+	 */
+	public function render( string $screen_settings ): string {
+		if ( $this->is_cloud_community_view() ) {
+			return $screen_settings;
+		}
+
+		ob_start();
+		?>
+		<fieldset class="metabox-prefs table-options-prefs">
+			<legend><?php esc_html_e( 'Table Options', 'code-snippets' ); ?></legend>
+			<div class="metabox-prefs-container">
+				<label for="snippets-table-truncate-row-values">
+					<input
+						id="snippets-table-truncate-row-values"
+						name="snippets_table_truncate_row_values"
+						type="checkbox"
+						value="1"
+						<?php checked( $this->should_truncate_rows() ); ?>
+					/>
+					<?php esc_html_e( 'Truncate long snippet names and descriptions', 'code-snippets' ); ?>
+				</label>
+			</div>
+		</fieldset>
+		<?php
+
+		return $screen_settings . ob_get_clean();
+	}
+
+	/**
+	 * Persist the row truncation preference.
+	 *
+	 * @return void
+	 */
+	public function save_truncation_preference(): void {
+		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified below before persisting the option.
+		if ( empty( $_POST['wp_screen_options'] ) || ! is_array( $_POST['wp_screen_options'] ) ) {
+			return;
+		}
+
+		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Sanitized and matched to a known admin page.
+		$page = isset( $_REQUEST['page'] ) ? sanitize_key( wp_unslash( $_REQUEST['page'] ) ) : '';
+
+		if ( code_snippets()->get_menu_slug() !== $page || ! current_user_can( code_snippets()->get_cap() ) ) {
+			return;
+		}
+
+		if ( $this->is_cloud_community_view() ) {
+			return;
+		}
+
+		// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified here before persisting the option.
+		$nonce = isset( $_POST['screenoptionnonce'] ) ? sanitize_text_field( wp_unslash( $_POST['screenoptionnonce'] ) ) : '';
+
+		if ( ! wp_verify_nonce( $nonce, 'screen-options-nonce' ) ) {
+			return;
+		}
+
+		update_user_option(
+			get_current_user_id(),
+			'snippets_table_truncate_row_values',
+			// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Verified above before reading the checkbox state.
+			isset( $_POST['snippets_table_truncate_row_values'] ) ? 1 : 0
+		);
+	}
+
+	/**
+	 * Save only the snippets per-page Screen Option.
+	 *
+	 * @param mixed  $status Current screen option status.
+	 * @param string $option The screen option name.
+	 * @param mixed  $value  Screen option value.
+	 *
+	 * @return mixed
+	 */
+	public function save_per_page_option( $status, string $option, $value ) {
+		return 'snippets_per_page' === $option ? $value : $status;
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
new file mode 100644
index 000000000..3622d7ad5
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
@@ -0,0 +1,195 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Model\Snippet;
+use Code_Snippets\UnitTestCase;
+use WP_UnitTest_Factory;
+use function Code_Snippets\code_snippets;
+use function Code_Snippets\get_snippets;
+use function Code_Snippets\save_snippet;
+
+/**
+ * Tests for manage menu assets and localized data.
+ */
+class Manage_Menu_Assets_Test extends UnitTestCase {
+
+	/**
+	 * Administrator user ID.
+	 *
+	 * @var int
+	 */
+	protected static int $admin_user_id;
+
+	/**
+	 * Set up fixtures before any tests run.
+	 *
+	 * @param WP_UnitTest_Factory $factory Factory object.
+	 *
+	 * @return void
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$admin_user_id = $factory->user->create( [ 'role' => 'administrator' ] );
+	}
+
+	/**
+	 * Set up before each test.
+	 *
+	 * @return void
+	 */
+	public function set_up() {
+		parent::set_up();
+
+		wp_set_current_user( self::$admin_user_id );
+		set_current_screen( 'toplevel_page_' . code_snippets()->get_menu_slug() );
+		unset( $_REQUEST['subpage'] );
+	}
+
+	/**
+	 * Localized data retains the exact Task 2 keys.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_localizes_task_two_manage_data(): void {
+		$filter = static fn() => PHP_INT_MAX;
+		add_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$this->enqueue_assets();
+		$localized = $this->get_localized_data();
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$this->assertSame(
+			[
+				'hasNetworkCap',
+				'hiddenColumns',
+				'truncateRowValues',
+				'snippetsPerPage',
+				'cloudSearchPerPage',
+				'isSafeModeActive',
+				'bulkDownloadNonce',
+				'supportsZipDownloads',
+				'editorTheme',
+				'snippetsList',
+			],
+			array_keys( $localized )
+		);
+		$this->assertArrayNotHasKey( 'typeCounts', $localized );
+	}
+
+	/**
+	 * Preview assets exclude the full editing dependencies.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_loads_only_preview_editor_dependencies(): void {
+		foreach ( [ 'htmlhint', 'csslint', 'jshint', 'code-snippets-code-editor' ] as $handle ) {
+			wp_dequeue_script( $handle );
+		}
+
+		$this->enqueue_assets();
+
+		$this->assertTrue( wp_script_is( 'code-editor', 'enqueued' ) );
+		$this->assertTrue( wp_style_is( 'code-editor', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'htmlhint', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'csslint', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'jshint', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'code-snippets-code-editor', 'enqueued' ) );
+	}
+
+	/**
+	 * The inline snippets threshold can be disabled.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_applies_disabled_inline_snippets_limit(): void {
+		add_filter( 'code_snippets/manage/inline_snippets_limit', '__return_zero' );
+
+		$this->enqueue_assets();
+		$localized = $this->get_localized_data();
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', '__return_zero' );
+
+		$this->assertArrayNotHasKey( 'snippetsList', $localized );
+	}
+
+	/**
+	 * Snippet lists at or below the configured limit are localized inline.
+	 *
+	 * @dataProvider provide_inline_limit_offsets
+	 *
+	 * @param int $limit_offset Number added to the current snippet count.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_localizes_snippets_within_inline_limit( int $limit_offset ): void {
+		save_snippet( new Snippet( [ 'name' => 'Inline Snippet Fixture' ] ) );
+		$inline_limit = count( get_snippets() ) + $limit_offset;
+		$filter = static fn() => $inline_limit;
+		add_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$this->enqueue_assets();
+		$localized = $this->get_localized_data();
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$this->assertArrayHasKey( 'snippetsList', $localized );
+	}
+
+	/**
+	 * Provide offsets that place the snippet count at or below the inline limit.
+	 *
+	 * @return array<string,array{int}>
+	 */
+	public static function provide_inline_limit_offsets(): array {
+		return [
+			'at the limit' => [ 0 ],
+			'below the limit' => [ 1 ],
+		];
+	}
+
+	/**
+	 * Snippet lists above the configured limit are omitted.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_omits_snippets_above_inline_limit(): void {
+		save_snippet( new Snippet( [ 'name' => 'Oversized Inline Snippet Fixture' ] ) );
+		$inline_limit = count( get_snippets() ) - 1;
+		$filter = static fn() => $inline_limit;
+		add_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$this->enqueue_assets();
+		$localized = $this->get_localized_data();
+
+		remove_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
+
+		$this->assertArrayNotHasKey( 'snippetsList', $localized );
+	}
+
+	/**
+	 * Enqueue assets through the extracted service.
+	 *
+	 * @return void
+	 */
+	private function enqueue_assets(): void {
+		$assets = new Manage_Menu_Assets( new Manage_Menu_Screen_Options() );
+		$assets->enqueue( Admin_Menu::$script_deps, Admin_Menu::$style_deps );
+	}
+
+	/**
+	 * Decode the latest manage menu localization payload.
+	 *
+	 * @return array<string, mixed>
+	 */
+	private function get_localized_data(): array {
+		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
+		$prefix = 'var CODE_SNIPPETS_MANAGE = ';
+		$offset = is_string( $data ) ? strrpos( $data, $prefix ) : false;
+
+		$this->assertNotFalse( $offset );
+		$json = substr( $data, $offset + strlen( $prefix ) );
+
+		return json_decode( substr( $json, 0, strrpos( $json, ';' ) ), true );
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Bulk_Download_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Bulk_Download_Test.php
new file mode 100644
index 000000000..d60132a0e
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Bulk_Download_Test.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Model\Snippet;
+use Code_Snippets\UnitTestCase;
+use WP_Error;
+use function Code_Snippets\save_snippet;
+
+/**
+ * Tests for manage menu bulk downloads.
+ */
+class Manage_Menu_Bulk_Download_Test extends UnitTestCase {
+
+	/**
+	 * Malformed request data does not resolve any snippets.
+	 *
+	 * @return void
+	 */
+	public function test_resolve_snippets_ignores_malformed_payload(): void {
+		$bulk_download = new Manage_Menu_Bulk_Download();
+
+		$this->assertSame( [], $bulk_download->resolve_snippets( '{invalid' ) );
+	}
+
+	/**
+	 * Valid local snippet identifiers resolve to snippet models.
+	 *
+	 * @return void
+	 */
+	public function test_resolve_snippets_returns_requested_local_snippets(): void {
+		$snippet = save_snippet( new Snippet( [ 'name' => 'Bulk Download Fixture' ] ) );
+		$this->assertInstanceOf( Snippet::class, $snippet );
+
+		$payload = wp_json_encode( [ [ 'id' => $snippet->id ] ] );
+		$result = ( new Manage_Menu_Bulk_Download() )->resolve_snippets( $payload );
+
+		$this->assertCount( 1, $result );
+		$this->assertSame( $snippet->id, $result[0]->id );
+	}
+
+	/**
+	 * Subsite admins cannot resolve network snippets for download.
+	 *
+	 * @return void
+	 */
+	public function test_resolve_snippets_requires_network_cap(): void {
+		if ( ! is_multisite() ) {
+			$this->markTestSkipped( 'Network snippet downloads only apply on multisite.' );
+		}
+
+		$snippet = save_snippet(
+			new Snippet(
+				[
+					'name'    => 'Network Download Fixture',
+					'code'    => '<?php echo "network";',
+					'scope'   => 'global',
+					'network' => true,
+				]
+			)
+		);
+
+		$payload = wp_json_encode(
+			[
+				[
+					'id'      => $snippet->id,
+					'network' => true,
+				],
+			]
+		);
+
+		$result = ( new Manage_Menu_Bulk_Download() )->resolve_snippets( $payload );
+
+		$this->assertInstanceOf( WP_Error::class, $result );
+		$this->assertSame( 'code_snippets_forbidden_network_download', $result->get_error_code() );
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Registration_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Registration_Test.php
new file mode 100644
index 000000000..c96a42b2a
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Registration_Test.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\UnitTestCase;
+
+/**
+ * Tests for manage menu registration support.
+ */
+class Manage_Menu_Registration_Test extends UnitTestCase {
+
+	/**
+	 * The menu icon stylesheet is registered through the helper.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_menu_css_enqueues_menu_icon_stylesheet(): void {
+		wp_dequeue_style( 'code-snippets-menu' );
+
+		( new Manage_Menu_Registration() )->enqueue_menu_css();
+
+		$this->assertTrue( wp_style_is( 'code-snippets-menu', 'enqueued' ) );
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Screen_Options_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Screen_Options_Test.php
new file mode 100644
index 000000000..f2db78565
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Screen_Options_Test.php
@@ -0,0 +1,149 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\UnitTestCase;
+use WP_UnitTest_Factory;
+use function Code_Snippets\code_snippets;
+
+/**
+ * Tests for manage menu Screen Options.
+ */
+class Manage_Menu_Screen_Options_Test extends UnitTestCase {
+
+	/**
+	 * Administrator user ID.
+	 *
+	 * @var int
+	 */
+	protected static int $admin_user_id;
+
+	/**
+	 * Set up fixtures before any tests run.
+	 *
+	 * @param WP_UnitTest_Factory $factory Factory object.
+	 *
+	 * @return void
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$admin_user_id = $factory->user->create( [ 'role' => 'administrator' ] );
+	}
+
+	/**
+	 * Set up before each test.
+	 *
+	 * @return void
+	 */
+	public function set_up() {
+		parent::set_up();
+
+		wp_set_current_user( self::$admin_user_id );
+		set_current_screen( 'toplevel_page_' . code_snippets()->get_menu_slug() );
+		delete_user_option( self::$admin_user_id, 'snippets_table_truncate_row_values' );
+		unset(
+			$_POST['wp_screen_options'],
+			$_POST['screenoptionnonce'],
+			$_POST['snippets_table_truncate_row_values'],
+			$_REQUEST['page'],
+			$_REQUEST['subpage']
+		);
+	}
+
+	/**
+	 * Screen columns retain existing values and add the snippet fields.
+	 *
+	 * @return void
+	 */
+	public function test_get_columns_adds_snippet_columns(): void {
+		$options = new Manage_Menu_Screen_Options();
+
+		$columns = $options->get_columns( [ 'existing' => 'Existing' ] );
+
+		$this->assertSame( 'Existing', $columns['existing'] );
+		$this->assertSame( 'Columns', $columns['_title'] );
+		$this->assertSame( 'Description', $columns['desc'] );
+		$this->assertSame( 'Modified', $columns['date'] );
+	}
+
+	/**
+	 * The manage screen renders a truncation toggle.
+	 *
+	 * @return void
+	 */
+	public function test_render_adds_truncation_toggle(): void {
+		$options = new Manage_Menu_Screen_Options();
+
+		$output = $options->render( '' );
+
+		$this->assertStringContainsString( 'snippets-table-truncate-row-values', $output );
+		$this->assertStringContainsString( 'Truncate long snippet names and descriptions', $output );
+	}
+
+	/**
+	 * The Community Cloud view does not render snippet table controls.
+	 *
+	 * @return void
+	 */
+	public function test_render_skips_truncation_toggle_on_cloud_community_view(): void {
+		$_REQUEST['subpage'] = 'cloud-community';
+		$options = new Manage_Menu_Screen_Options();
+
+		$this->assertSame( '', $options->render( '' ) );
+		$this->assertTrue( $options->is_cloud_community_view() );
+		$this->assertFalse( $options->is_manage_table_view() );
+	}
+
+	/**
+	 * The truncation preference is saved from the Screen Options form.
+	 *
+	 * @return void
+	 */
+	public function test_save_truncation_preference_updates_user_option(): void {
+		$_REQUEST['page'] = code_snippets()->get_menu_slug();
+		$_POST['wp_screen_options'] = [
+			'option' => 'snippets_per_page',
+			'value'  => '20',
+		];
+		$_POST['screenoptionnonce'] = wp_create_nonce( 'screen-options-nonce' );
+		$options = new Manage_Menu_Screen_Options();
+
+		$options->save_truncation_preference();
+		$this->assertFalse( (bool) get_user_option( 'snippets_table_truncate_row_values', self::$admin_user_id ) );
+
+		$_POST['snippets_table_truncate_row_values'] = '1';
+		$options->save_truncation_preference();
+		$this->assertTrue( (bool) get_user_option( 'snippets_table_truncate_row_values', self::$admin_user_id ) );
+	}
+
+	/**
+	 * The Community Cloud screen does not overwrite the truncation preference.
+	 *
+	 * @return void
+	 */
+	public function test_save_truncation_preference_ignores_cloud_community_view(): void {
+		update_user_option( self::$admin_user_id, 'snippets_table_truncate_row_values', 1 );
+		$_REQUEST['page'] = code_snippets()->get_menu_slug();
+		$_REQUEST['subpage'] = 'cloud-community';
+		$_POST['wp_screen_options'] = [
+			'option' => 'snippets_per_page',
+			'value'  => '20',
+		];
+		$_POST['screenoptionnonce'] = wp_create_nonce( 'screen-options-nonce' );
+
+		( new Manage_Menu_Screen_Options() )->save_truncation_preference();
+
+		$this->assertTrue( (bool) get_user_option( 'snippets_table_truncate_row_values', self::$admin_user_id ) );
+	}
+
+	/**
+	 * Only the snippets per-page option is saved by the filter.
+	 *
+	 * @return void
+	 */
+	public function test_save_per_page_option_limits_the_filter_to_snippets(): void {
+		$options = new Manage_Menu_Screen_Options();
+
+		$this->assertSame( '25', $options->save_per_page_option( false, 'snippets_per_page', '25' ) );
+		$this->assertFalse( $options->save_per_page_option( false, 'other_option', '25' ) );
+	}
+}
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Test.php
index c2b6cedc9..8f08db959 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -2,14 +2,9 @@
 
 namespace Code_Snippets\Admin\Menus;
 
-use Code_Snippets\Model\Snippet;
 use Code_Snippets\UnitTestCase;
-use ReflectionException;
-use ReflectionMethod;
-use WP_Error;
 use WP_UnitTest_Factory;
 use function Code_Snippets\code_snippets;
-use function Code_Snippets\save_snippet;
 
 /**
  * Tests for the manage menu registration.
@@ -144,68 +139,6 @@ public function test_enqueue_assets_applies_inline_snippets_limit_filter(): void
 		$this->assertStringNotContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
 	}
 
-	/**
-	 * Snippet lists at or below the configured limit are localized inline.
-	 *
-	 * @dataProvider provide_inline_limit_offsets
-	 *
-	 * @param int $limit_offset Number added to the current snippet count.
-	 *
-	 * @return void
-	 */
-	public function test_enqueue_assets_localizes_snippets_within_inline_limit( int $limit_offset ): void {
-		save_snippet( new Snippet( array( 'name' => 'Inline Snippet Fixture' ) ) );
-		$inline_limit = count( \Code_Snippets\get_snippets() ) + $limit_offset;
-		$filter = static fn() => $inline_limit;
-		add_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
-
-		$menu = new Manage_Menu();
-		$menu->enqueue_assets();
-		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
-		$localized_offset = is_string( $data ) ? strrpos( $data, 'var CODE_SNIPPETS_MANAGE = ' ) : false;
-
-		remove_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
-
-		$this->assertIsString( $data );
-		$this->assertNotFalse( $localized_offset );
-		$this->assertStringContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
-	}
-
-	/**
-	 * Provide offsets that place the snippet count at or below the inline limit.
-	 *
-	 * @return array<string,array{int}>
-	 */
-	public static function provide_inline_limit_offsets(): array {
-		return [
-			'at the limit' => [ 0 ],
-			'below the limit' => [ 1 ],
-		];
-	}
-
-	/**
-	 * Snippet lists above the configured limit are omitted from localized data.
-	 *
-	 * @return void
-	 */
-	public function test_enqueue_assets_omits_snippets_above_inline_limit(): void {
-		save_snippet( new Snippet( array( 'name' => 'Oversized Inline Snippet Fixture' ) ) );
-		$inline_limit = count( \Code_Snippets\get_snippets() ) - 1;
-		$filter = static fn() => $inline_limit;
-		add_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
-
-		$menu = new Manage_Menu();
-		$menu->enqueue_assets();
-		$data = wp_scripts()->get_data( Manage_Menu::JS_HANDLE, 'data' );
-		$localized_offset = is_string( $data ) ? strrpos( $data, 'var CODE_SNIPPETS_MANAGE = ' ) : false;
-
-		remove_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
-
-		$this->assertIsString( $data );
-		$this->assertNotFalse( $localized_offset );
-		$this->assertStringNotContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
-	}
-
 	/**
 	 * The manage screen renders a truncation toggle in Screen Options.
 	 *
@@ -313,45 +246,4 @@ public function test_save_truncation_preference_ignores_cloud_community_view():
 
 		$this->assertTrue( (bool) get_user_option( 'snippets_table_truncate_row_values', self::$admin_user_id ) );
 	}
-
-	/**
-	 * Subsite admins cannot request downloads from the network snippets table.
-	 *
-	 * @return void
-	 *
-	 * @throws ReflectionException Creates instance of ReflectionMethod class.
-	 */
-	public function test_network_bulk_download_requires_network_cap(): void {
-		if ( ! is_multisite() ) {
-			$this->markTestSkipped( 'Network snippet downloads only apply on multisite.' );
-		}
-
-		$snippet = save_snippet(
-			new Snippet(
-				array(
-					'name'    => 'Network Download Fixture',
-					'code'    => '<?php echo "network";',
-					'scope'   => 'global',
-					'network' => true,
-				)
-			)
-		);
-
-		$snippets_json = wp_json_encode(
-			array(
-				array(
-					'id'      => $snippet->id,
-					'network' => true,
-				),
-			)
-		);
-
-		$menu = new Manage_Menu();
-		$method = new ReflectionMethod( $menu, 'get_requested_download_snippets' );
-		$method->setAccessible( true );
-		$result = $method->invoke( $menu, $snippets_json );
-
-		$this->assertInstanceOf( WP_Error::class, $result );
-		$this->assertSame( 'code_snippets_forbidden_network_download', $result->get_error_code() );
-	}
 }

From ae35d792880e117de86082251b79530bdb73d313 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 22:20:03 +0300
Subject: [PATCH 86/91] fix: cap cloud pagination before validation

---
 src/php/Admin/Menus/Manage_Menu.php         |  4 +++-
 tests/unit/Admin/Menus/Manage_Menu_Test.php | 24 +++++++++++++++++++++
 tests/unit/REST_API/REST_API_Cloud_Test.php | 18 ++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index e8641cdf4..63531a96d 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -3,6 +3,7 @@
 namespace Code_Snippets\Admin\Menus;
 
 use Code_Snippets\Admin\Contextual_Help;
+use Code_Snippets\Controller\Cloud_Search_Controller;
 use function Code_Snippets\code_snippets;
 
 /**
@@ -166,7 +167,8 @@ public function enqueue_assets() {
 	 * @return int
 	 */
 	public static function get_cloud_search_per_page(): int {
-		return intval( apply_filters( 'code_snippets/cloud_search/per_page', self::get_snippets_per_page() ) );
+		$per_page = intval( apply_filters( 'code_snippets/cloud_search/per_page', self::get_snippets_per_page() ) );
+		return min( Cloud_Search_Controller::MAX_RESULTS_PER_PAGE, max( 1, $per_page ) );
 	}
 
 	/**
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Test.php
index 8f08db959..5e32a94db 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -2,6 +2,7 @@
 
 namespace Code_Snippets\Admin\Menus;
 
+use Code_Snippets\Controller\Cloud_Search_Controller;
 use Code_Snippets\UnitTestCase;
 use WP_UnitTest_Factory;
 use function Code_Snippets\code_snippets;
@@ -139,6 +140,29 @@ public function test_enqueue_assets_applies_inline_snippets_limit_filter(): void
 		$this->assertStringNotContainsString( '"snippetsList":', substr( $data, $localized_offset ) );
 	}
 
+	/**
+	 * The cloud per-page filter is limited to values accepted by the REST API.
+	 *
+	 * @return void
+	 */
+	public function test_cloud_search_per_page_filter_is_clamped_to_rest_api_bounds(): void {
+		$filter = static function (): int {
+			return 0;
+		};
+
+		add_filter( 'code_snippets/cloud_search/per_page', $filter );
+		$this->assertSame( 1, Manage_Menu::get_cloud_search_per_page() );
+		remove_filter( 'code_snippets/cloud_search/per_page', $filter );
+
+		$filter = static function (): int {
+			return Cloud_Search_Controller::MAX_RESULTS_PER_PAGE + 1;
+		};
+
+		add_filter( 'code_snippets/cloud_search/per_page', $filter );
+		$this->assertSame( Cloud_Search_Controller::MAX_RESULTS_PER_PAGE, Manage_Menu::get_cloud_search_per_page() );
+		remove_filter( 'code_snippets/cloud_search/per_page', $filter );
+	}
+
 	/**
 	 * The manage screen renders a truncation toggle in Screen Options.
 	 *
diff --git a/tests/unit/REST_API/REST_API_Cloud_Test.php b/tests/unit/REST_API/REST_API_Cloud_Test.php
index 409a76dbd..eae7d0b47 100644
--- a/tests/unit/REST_API/REST_API_Cloud_Test.php
+++ b/tests/unit/REST_API/REST_API_Cloud_Test.php
@@ -5,6 +5,7 @@
 use Code_Snippets\UnitTestCase;
 use WP_REST_Request;
 use WP_REST_Response;
+use WP_REST_Server;
 use WP_UnitTest_Factory;
 
 /**
@@ -40,6 +41,13 @@ class REST_API_Cloud_Test extends UnitTestCase {
 	 */
 	private string $requested_url = '';
 
+	/**
+	 * REST server that was active before the current test.
+	 *
+	 * @var WP_REST_Server|null
+	 */
+	private ?WP_REST_Server $rest_server = null;
+
 	/**
 	 * Set up fixtures before any tests run.
 	 *
@@ -62,9 +70,11 @@ public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
 	 */
 	public function set_up() {
 		parent::set_up();
+		global $wp_rest_server;
 
 		wp_set_current_user( self::$admin_user_id );
 		$this->requested_url = '';
+		$this->rest_server = $wp_rest_server ?? null;
 		delete_user_option( self::$admin_user_id, 'snippets_per_page' );
 		add_filter( 'pre_http_request', [ $this, 'mock_cloud_search_request' ], 10, 3 );
 	}
@@ -75,8 +85,11 @@ public function set_up() {
 	 * @return void
 	 */
 	public function tear_down() {
+		global $wp_rest_server;
+
 		remove_filter( 'pre_http_request', [ $this, 'mock_cloud_search_request' ] );
 		delete_user_option( self::$admin_user_id, 'snippets_per_page' );
+		$wp_rest_server = $this->rest_server;
 
 		parent::tear_down();
 	}
@@ -150,6 +163,11 @@ public function mock_cloud_search_request( $preempt, array $parsed_args, string
 	 * @return WP_REST_Response
 	 */
 	private function make_request( array $params ): WP_REST_Response {
+		global $wp_rest_server;
+
+		$wp_rest_server = null;
+		rest_get_server();
+
 		$request = new WP_REST_Request( 'GET', $this->endpoint );
 		$request->add_header( 'Access-Control', $this->get_connection_token() );
 

From a00c61492c2d8b8d7778d7532021f15dda134c60 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 01:33:17 +0300
Subject: [PATCH 87/91] fix: prove live snippet filtering

---
 tests/e2e/code-snippets-list.spec.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts
index 83738ca39..5728f726f 100644
--- a/tests/e2e/code-snippets-list.spec.ts
+++ b/tests/e2e/code-snippets-list.spec.ts
@@ -29,10 +29,13 @@ test.describe('Code Snippets List Page Actions', () => {
 	test('Filters snippets as the search query changes without a submit control', async ({ page }) => {
 		const search = page.getByRole('search')
 		const searchInput = search.getByRole('searchbox', { name: 'Search Snippets:' })
+		const snippetRow = page.getByRole('row', { name: new RegExp(snippetName) })
 
 		await searchInput.fill(snippetName)
 
-		await expect(page.getByRole('row', { name: new RegExp(snippetName) })).toBeVisible()
+		await expect(snippetRow).toBeVisible()
+		await searchInput.fill(`${snippetName}-does-not-exist`)
+		await expect(snippetRow).toBeHidden()
 		await expect(search.getByRole('button', { name: 'Search' })).toHaveCount(0)
 	})
 

From c7d83eb620b27dc52373726013ed889b7abff466 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 02:06:50 +0300
Subject: [PATCH 88/91] chore: enforce UI foundation source limits

---
 .../SnippetForm/fields/SnippetTypeInput.tsx   | 14 +++-
 .../ManageMenu/CommunityCloud/CloudSearch.tsx | 40 ++++++---
 .../SnippetsTable/SnippetsListTable.tsx       | 40 +++++----
 .../SnippetsTable/SnippetsTableControls.tsx   | 14 +++-
 .../SnippetsTable/SnippetsTableSearch.tsx     |  8 +-
 src/js/components/common/KebabMenu.tsx        | 56 +++++++++++--
 .../components/common/ListTable/ListTable.tsx | 83 ++++++++++++++-----
 .../common/ListTable/TablePagination.tsx      | 11 ++-
 .../ListTable/TablePaginationNavigation.tsx   | 22 ++++-
 .../Admin/Menus/Manage_Menu_Bulk_Download.php |  5 +-
 10 files changed, 222 insertions(+), 71 deletions(-)

diff --git a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
index d0b406e41..dba44325b 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/SnippetTypeInput.tsx
@@ -43,8 +43,13 @@ interface SnippetTypeOptionProps {
 	context: FormatOptionLabelContext
 }
 
-const SnippetTypeOption: React.FC<SnippetTypeOptionProps> = ({ option: { value, label }, context }) =>
-	<div className={classnames('snippet-type-option', { 'inverted-badges': isProType(value) && !isLicensed() })}>
+const SnippetTypeOption: React.FC<SnippetTypeOptionProps> = ({
+	option: { value, label },
+	context
+}) =>
+	<div className={classnames('snippet-type-option', {
+		'inverted-badges': isProType(value) && !isLicensed()
+	})}>
 		<span className="snippet-type-option-main">
 			<Badge name={value} />
 			{'menu' === context ? label : null}
@@ -62,7 +67,10 @@ export const SnippetTypeInput: React.FC<SnippetTypeInputProps> = ({ setIsUpgrade
 		if (codeEditorInstance) {
 			const codeEditor = codeEditorInstance.codemirror
 
-			codeEditor.setOption('lint' as keyof EditorConfiguration, 'php' === snippetType || 'css' === snippetType)
+			codeEditor.setOption(
+				'lint' as keyof EditorConfiguration,
+				'php' === snippetType || 'css' === snippetType
+			)
 
 			if ('cond' !== snippetType && EDITOR_MODES[snippetType]) {
 				codeEditor.setOption('mode', EDITOR_MODES[snippetType])
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 7fbeefea4..825d9fc8b 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -106,25 +106,21 @@ const CLOUD_BULK_ACTIONS: ListTableAction<'download'>[] = [
 	{ key: 'download', label: __('Download', 'code-snippets') }
 ]
 
-const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, setSnippetView }) => {
+const useSearchResultsSelection = () => {
 	const { api } = useRestAPI()
 	const { searchResults, isSearching, doSearch } = useCloudSearch()
 	const [selected, setSelected] = useState<Set<CloudSnippetSchema['id']>>(new Set())
-
 	const snippets = searchResults?.snippets
 
 	useEffect(() => {
 		setSelected(new Set())
 	}, [snippets])
 
-	if (!searchResults) {
-		return null
-	}
-
-	const { totalItems, totalPages, page } = searchResults
-
-	const doAction = (_action: 'download', selectedIds: Set<CloudSnippetSchema['id']>): Promise<void> => {
-		const downloadable = searchResults.snippets
+	const doAction = (
+		_action: 'download',
+		selectedIds: Set<CloudSnippetSchema['id']>
+	): Promise<void> => {
+		const downloadable = (snippets ?? [])
 			.filter(snippet => selectedIds.has(snippet.id) && isSnippetDownloadable(snippet))
 
 		return Promise.all(downloadable.map(snippet =>
@@ -132,6 +128,19 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 			.then(() => doSearch())
 	}
 
+	return { doAction, doSearch, isSearching, searchResults, selected, setSelected }
+}
+
+const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, setSnippetView }) => {
+	const { doAction, doSearch, isSearching, searchResults, selected, setSelected } =
+		useSearchResultsSelection()
+
+	if (!searchResults) {
+		return null
+	}
+
+	const { totalItems, totalPages, page } = searchResults
+
 	// Shared across the top and bottom toolbars; the bottom toolbar omits the
 	// action and selection controls, showing only the pagination group.
 	const navProps = {
@@ -161,7 +170,11 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 			/>
 
 			{'card' === snippetView
-				? <SearchResultsGrid snippets={searchResults.snippets} selected={selected} setSelected={setSelected} />
+				? <SearchResultsGrid
+					snippets={searchResults.snippets}
+					selected={selected}
+					setSelected={setSelected}
+				/>
 				: <CloudSnippetsTable snippets={searchResults.snippets} />}
 
 			<TableNav which="bottom" {...navProps} />
@@ -175,7 +188,10 @@ const SearchResults: React.FC<SearchResultsViewProps> = ({ snippetView, setSnipp
 	if (isErrored) {
 		return (
 			<div className="banner banner-error">
-				<p>{__('An error occurred while fetching search results. Please try again.', 'code-snippets')}</p>
+				<p>{__(
+					'An error occurred while fetching search results. Please try again.',
+					'code-snippets'
+				)}</p>
 			</div>
 		)
 	}
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index 170c6ba87..d91d0e7ba 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -1,7 +1,6 @@
 import { __ } from '@wordpress/i18n'
 import React, { useEffect, useMemo, useState } from 'react'
 import classnames from 'classnames'
-import { createInterpolateElement } from '@wordpress/element'
 import { getSnippetType, isSnippetActive } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { ListTable } from '../../common/ListTable'
@@ -25,7 +24,9 @@ interface ManageTableSettings {
 }
 
 const useManageTableSettings = (): ManageTableSettings => {
-	const [hiddenColumns, setHiddenColumns] = useState(() => new Set(window.CODE_SNIPPETS_MANAGE?.hiddenColumns ?? []))
+	const [hiddenColumns, setHiddenColumns] = useState(
+		() => new Set(window.CODE_SNIPPETS_MANAGE?.hiddenColumns ?? [])
+	)
 	const [truncateRowValues, setTruncateRowValues] = useState(
 		() => 0 !== Number(window.CODE_SNIPPETS_MANAGE?.truncateRowValues ?? 1)
 	)
@@ -39,12 +40,16 @@ const useManageTableSettings = (): ManageTableSettings => {
 
 		const updateHiddenColumns = () => {
 			setHiddenColumns(
-				new Set(Array.from(screenOptions.querySelectorAll<HTMLInputElement>('.hide-column-tog:not(:checked)'))
+				new Set(Array.from(screenOptions.querySelectorAll<HTMLInputElement>(
+					'.hide-column-tog:not(:checked)'
+				))
 					.map(toggle => toggle.value))
 			)
 
 			setTruncateRowValues(
-				screenOptions.querySelector<HTMLInputElement>('#snippets-table-truncate-row-values')?.checked ?? true
+				screenOptions.querySelector<HTMLInputElement>(
+					'#snippets-table-truncate-row-values'
+				)?.checked ?? true
 			)
 		}
 
@@ -61,25 +66,27 @@ const useManageTableSettings = (): ManageTableSettings => {
 
 const NoItemsMessage = () => {
 	const { currentType, currentTag, searchQuery } = useSnippetsFilters()
+	const emptyMessage = currentType
+		? __("You don't have snippets of this type yet.", 'code-snippets')
+		: __("You don't have any snippets yet.", 'code-snippets')
 
 	return searchQuery || currentTag
 		? <>
 			{__('No snippets were found matching the current search query.', 'code-snippets')}
 			{__(' Please enter a new query or use the "Clear Filters" button above.', 'code-snippets')}
 		</>
-		: <>{createInterpolateElement(
-			currentType
-				? __("It looks like you don't have any snippets of this type. <a>Perhaps you would like to add a new one?</a>", 'code-snippets')
-				: __("It looks like you don't have any snippets. <a>Perhaps you would like to add a new one?</a>", 'code-snippets'),
-			{
-				// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-				a: <a href={buildUrl(window.CODE_SNIPPETS?.urls.addNew, { type: currentType })} />
-			}
-		)}
+		: <>
+			{emptyMessage}{' '}
+			<a href={buildUrl(window.CODE_SNIPPETS?.urls.addNew, { type: currentType })}>
+				{__('Add a new snippet.', 'code-snippets')}
+			</a>
 		</>
 }
 
-const getRowClassName = (snippet: Snippet, activeByCondition: Map<Snippet['id'], Snippet[]>): string =>
+const getRowClassName = (
+	snippet: Snippet,
+	activeByCondition: Map<Snippet['id'], Snippet[]>
+): string =>
 	classnames(
 		'snippet',
 		`snippet ${isSnippetActive(snippet, activeByCondition) ? 'active' : 'inactive'}-snippet`,
@@ -153,7 +160,10 @@ export interface SnippetsListTableProps {
 	setSnippetView: (view: SnippetView) => void
 }
 
-export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({ snippetView, setSnippetView }) => {
+export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({
+	snippetView,
+	setSnippetView
+}) => {
 	const { snippetsByStatus } = useFilteredSnippets()
 	const { currentStatus, setCurrentStatus } = useSnippetsFilters()
 	const { hiddenColumns, truncateRowValues } = useManageTableSettings()
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
index 8511a2222..07db89183 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
@@ -35,7 +35,9 @@ const SnippetStatusCounts = () => {
 				<Fragment key={status}>
 					<li className={status}>
 						<a
-							href={buildUrl(window.location.href, { status: INDEX_STATUS === status ? undefined : status })}
+							href={buildUrl(window.location.href, {
+								status: INDEX_STATUS === status ? undefined : status
+							})}
 							className={currentStatus === status ? 'current' : undefined}
 							aria-current={currentStatus === status ? 'page' : undefined}
 							onClick={event => {
@@ -46,7 +48,10 @@ const SnippetStatusCounts = () => {
 							{`${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)
+								sprintf(
+									_x('(%d)', 'table view count', 'code-snippets'),
+									snippetsByStatus.get(status)?.length ?? 0
+								)
 							}</span>
 						</a>
 					</li>
@@ -116,7 +121,10 @@ export interface SnippetsTableNavigationProps {
 	visibleSnippets: Snippet[]
 }
 
-export const SnippetsTableNavigation: React.FC<SnippetsTableNavigationProps> = ({ which, visibleSnippets }) =>
+export const SnippetsTableNavigation: React.FC<SnippetsTableNavigationProps> = ({
+	which,
+	visibleSnippets
+}) =>
 	<>
 		{'top' === which && <FilterByTagControl visibleSnippets={visibleSnippets} />}
 		<ClearRecentlyActiveButton />
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
index 469cba017..63785a8d9 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
@@ -27,7 +27,13 @@ export const SearchArea = () =>
 	</div>
 
 export const SearchResultsIndicator = () => {
-	const { searchQueryText, searchLineNumber, currentTag, setSearchQuery, setCurrentTag } = useSnippetsFilters()
+	const {
+		searchQueryText,
+		searchLineNumber,
+		currentTag,
+		setSearchQuery,
+		setCurrentTag
+	} = useSnippetsFilters()
 
 	return searchQueryText || currentTag
 		? <p className="snippets-search-subtitle">
diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
index 2d2c3ab5f..476fe4772 100644
--- a/src/js/components/common/KebabMenu.tsx
+++ b/src/js/components/common/KebabMenu.tsx
@@ -1,5 +1,14 @@
 import classnames from 'classnames'
-import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import React, {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useId,
+	useLayoutEffect,
+	useRef,
+	useState
+} from 'react'
 import type { Dispatch, PropsWithChildren, ReactNode, RefObject, SetStateAction } from 'react'
 
 const FOCUSABLE_SELECTOR = [
@@ -46,7 +55,11 @@ export const KebabMenuItem: React.FC<PropsWithChildren<KebabMenuItemProps>> = ({
 			<button
 				type="button"
 				role="menuitem"
-				className={classnames('kebab-menu-item', { 'kebab-menu-item-destructive': destructive }, className)}
+				className={classnames(
+					'kebab-menu-item',
+					{ 'kebab-menu-item-destructive': destructive },
+					className
+				)}
 				disabled={disabled}
 				onClick={() => {
 					onSelect?.()
@@ -69,13 +82,23 @@ export interface KebabMenuRowProps {
 	className?: string
 }
 
-export const KebabMenuRow: React.FC<PropsWithChildren<KebabMenuRowProps>> = ({ className, children }) =>
+export const KebabMenuRow: React.FC<PropsWithChildren<KebabMenuRowProps>> = ({
+	className,
+	children
+}) =>
 	<li role="presentation" className={classnames('kebab-menu-row', className)}>
 		{children}
 	</li>
 
 const KebabIcon: React.FC = () =>
-	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+	<svg
+		width="18"
+		height="18"
+		viewBox="0 0 18 18"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
 		<circle cx="9" cy="3.5" r="1.6" fill="currentColor" />
 		<circle cx="9" cy="9" r="1.6" fill="currentColor" />
 		<circle cx="9" cy="14.5" r="1.6" fill="currentColor" />
@@ -94,7 +117,11 @@ interface PopoverBehaviourOptions {
 // and move focus to its first menu item on open. Focus falls back to the
 // popover itself rather than the first focusable element, so embedded form
 // fields with blur handlers are never focused without user intent.
-const usePopoverPlacement = ({ isOpen, triggerRef, popoverRef }: PopoverBehaviourOptions): boolean => {
+const usePopoverPlacement = ({
+	isOpen,
+	triggerRef,
+	popoverRef
+}: PopoverBehaviourOptions): boolean => {
 	const [isFlipped, setIsFlipped] = useState(false)
 
 	useLayoutEffect(() => {
@@ -103,7 +130,9 @@ const usePopoverPlacement = ({ isOpen, triggerRef, popoverRef }: PopoverBehaviou
 			const trigger = triggerRef.current?.getBoundingClientRect()
 			setIsFlipped(popover.bottom > window.innerHeight && (trigger?.top ?? 0) > popover.height)
 
-			const firstItem = popoverRef.current.querySelector<HTMLElement>('[role="menuitem"]:not(:disabled)')
+			const firstItem = popoverRef.current.querySelector<HTMLElement>(
+				'[role="menuitem"]:not(:disabled)'
+			)
 			;(firstItem ?? popoverRef.current).focus()
 		} else {
 			setIsFlipped(false)
@@ -131,7 +160,12 @@ const handlePopoverKeyDown = (
 	const active = document.activeElement
 	const currentIndex = active instanceof HTMLElement ? focusable.indexOf(active) : -1
 
-	if ('ArrowDown' === event.key || 'ArrowUp' === event.key || 'Home' === event.key || 'End' === event.key) {
+	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
@@ -161,7 +195,13 @@ const handlePopoverKeyDown = (
 
 // Close the open popover on outside clicks or Escape, and trap Tab focus
 // within it while it remains open.
-const usePopoverDismissal = ({ isOpen, setIsOpen, closeMenu, containerRef, popoverRef }: PopoverBehaviourOptions) => {
+const usePopoverDismissal = ({
+	isOpen,
+	setIsOpen,
+	closeMenu,
+	containerRef,
+	popoverRef
+}: PopoverBehaviourOptions) => {
 	useEffect(() => {
 		if (!isOpen) {
 			return
diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
index a154bf444..df908dbd4 100644
--- a/src/js/components/common/ListTable/ListTable.tsx
+++ b/src/js/components/common/ListTable/ListTable.tsx
@@ -97,7 +97,8 @@ const getVisibleSelected = <T, K extends Key>(
 ): Set<K> =>
 	new Set(visibleItems.map(getKey).filter(key => selected.has(key)))
 
-interface TableBorderProps<T, K extends Key> extends ListTableBorderProps, Omit<ColumnHeadingsProps<T, K>, 'which'> {
+interface TableBorderProps<T, K extends Key>
+	extends ListTableBorderProps, Omit<ColumnHeadingsProps<T, K>, 'which'> {
 	children: ReactNode
 }
 
@@ -138,7 +139,9 @@ export const ListTable = <T, K extends Key, A extends string = never>({
 	...tableProps
 }: ListTableProps<T, K, A>) => {
 	const [sortColumn, setSortColumn] = useState<ListTableColumn<T>>()
-	const [currentPage, setCurrentPage] = useState(() => pageSearchParam && Number(fetchQueryParam(pageSearchParam)) || 1)
+	const [currentPage, setCurrentPage] = useState(
+		() => pageSearchParam && Number(fetchQueryParam(pageSearchParam)) || 1
+	)
 	const [sortDirection, setSortDirection] = useState<ListTableSortDirection>('asc')
 
 	const visibleItems: T[] = useMemo(
@@ -158,8 +161,11 @@ export const ListTable = <T, K extends Key, A extends string = never>({
 	)
 }
 
-export interface PartialDataListTableProps<T, K extends Key, A extends string> extends ListTablePaginationProps,
-	ListTableBorderProps, ListTableRowsProps<T, K>, ListTableNavProps<K, A> {
+export interface PartialDataListTableProps<T, K extends Key, A extends string>
+	extends ListTablePaginationProps,
+	ListTableBorderProps,
+	ListTableRowsProps<T, K>,
+	ListTableNavProps<K, A> {
 	sortColumn: ListTableColumn<T> | undefined
 	totalItems: number
 	currentPage: number
@@ -172,7 +178,8 @@ export interface PartialDataListTableProps<T, K extends Key, A extends string> e
 	setSortDirection: (direction: ListTableSortDirection) => void
 }
 
-interface PartialDataListTableContentProps<T, K extends Key> extends ListTableBorderProps, ListTableRowsProps<T, K> {
+interface PartialDataListTableContentProps<T, K extends Key>
+	extends ListTableBorderProps, ListTableRowsProps<T, K> {
 	visibleItems: T[]
 	beforeTable?: ReactNode
 	selected: Set<K>
@@ -207,7 +214,16 @@ const PartialDataListTableContent = <T, K extends Key>({
 			fixed={fixed}
 			striped={striped}
 			className={className}
-			{...{ columns, getKey, selected, sortColumn, sortDirection, setSelected, setSortColumn, setSortDirection }}
+			{...{
+				columns,
+				getKey,
+				selected,
+				sortColumn,
+				sortDirection,
+				setSelected,
+				setSortColumn,
+				setSortDirection
+			}}
 		>
 			<TableRows
 				items={visibleItems}
@@ -219,7 +235,13 @@ const PartialDataListTableContent = <T, K extends Key>({
 		</TableBorder>
 	</>
 
-export const PartialDataListTable = <T, K extends Key, A extends string>({
+interface PartialDataListTableViewProps<T, K extends Key, A extends string>
+	extends PartialDataListTableProps<T, K, A> {
+	selected: Set<K>
+	setSelected: Dispatch<SetStateAction<Set<K>>>
+}
+
+const PartialDataListTableView = <T, K extends Key, A extends string>({
 	fixed,
 	getKey,
 	columns,
@@ -240,25 +262,40 @@ export const PartialDataListTable = <T, K extends Key, A extends string>({
 	endTableNav,
 	selectAllControl,
 	setCurrentPage,
+	selected,
+	setSelected,
 	pageSearchParam,
 	setSortDirection,
 	...tableRowsProps
-}: PartialDataListTableProps<T, K, A>) => {
+}: PartialDataListTableViewProps<T, K, A>) =>
+	<TableNavigation
+		totalItems={totalItems}
+		selected={getVisibleSelected(visibleItems, getKey, selected)}
+		selectAllKeys={selectAllControl ? visibleItems.map(getKey) : undefined}
+		{...{ actions, doAction, extraTableNav, endTableNav, disabled, currentPage, totalPages }}
+		{...{ pageSearchParam, setSelected, setCurrentPage }}
+	>
+		<PartialDataListTableContent
+			{...{
+				fixed,
+				getKey,
+				columns,
+				striped,
+				className,
+				selected,
+				sortColumn,
+				beforeTable,
+				visibleItems
+			}}
+			{...{ setSelected, sortDirection, setSortColumn, setSortDirection }}
+			{...tableRowsProps}
+		/>
+	</TableNavigation>
+
+export const PartialDataListTable = <T, K extends Key, A extends string>(
+	props: PartialDataListTableProps<T, K, A>
+) => {
 	const [selected, setSelected] = useState(() => new Set<K>())
 
-	return (
-		<TableNavigation
-			totalItems={totalItems}
-			selected={getVisibleSelected(visibleItems, getKey, selected)}
-			selectAllKeys={selectAllControl ? visibleItems.map(getKey) : undefined}
-			{...{ actions, doAction, extraTableNav, endTableNav, disabled, currentPage, totalPages }}
-			{...{ pageSearchParam, setSelected, setCurrentPage }}
-		>
-			<PartialDataListTableContent
-				{...{ fixed, getKey, columns, striped, className, selected, sortColumn, beforeTable, visibleItems }}
-				{...{ setSelected, sortDirection, setSortColumn, setSortDirection }}
-				{...tableRowsProps}
-			/>
-		</TableNavigation>
-	)
+	return <PartialDataListTableView {...props} selected={selected} setSelected={setSelected} />
 }
diff --git a/src/js/components/common/ListTable/TablePagination.tsx b/src/js/components/common/ListTable/TablePagination.tsx
index 6da8c5b37..a6278999d 100644
--- a/src/js/components/common/ListTable/TablePagination.tsx
+++ b/src/js/components/common/ListTable/TablePagination.tsx
@@ -53,7 +53,16 @@ const PaginationControls: React.FC<PaginationControlsProps> = ({
 					}
 				</span>{'\n'}
 				<TablePaginationNavigation
-					{...{ which, disabled, totalPages, inputValue, currentPage, pageSearchParam, setCurrentPage, setInputValue }}
+					{...{
+						which,
+						disabled,
+						totalPages,
+						inputValue,
+						currentPage,
+						pageSearchParam,
+						setCurrentPage,
+						setInputValue
+					}}
 				/>
 			</form>
 		</nav>
diff --git a/src/js/components/common/ListTable/TablePaginationNavigation.tsx b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
index 7d186cffb..09770ca00 100644
--- a/src/js/components/common/ListTable/TablePaginationNavigation.tsx
+++ b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
@@ -27,7 +27,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 		? <>
 			<a
 				className={`${className} button`}
-				href={buildUrl(window.location.href, { [pageSearchParam]: 1 === newPage ? undefined : newPage })}
+				href={buildUrl(window.location.href, {
+					[pageSearchParam]: 1 === newPage ? undefined : newPage
+				})}
 				onClick={event => {
 					event.preventDefault()
 					setCurrentPage(newPage)
@@ -49,7 +51,10 @@ interface NavigationButtonsProps {
 	setCurrentPage: (page: number) => void
 }
 
-const BackwardNavigationButtons: React.FC<NavigationButtonsProps> = ({ currentPage, ...buttonProps }) =>
+const BackwardNavigationButtons: React.FC<NavigationButtonsProps> = ({
+	currentPage,
+	...buttonProps
+}) =>
 	1 === currentPage
 		? <>
 			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>{'\n'}
@@ -78,7 +83,11 @@ interface ForwardNavigationButtonsProps extends NavigationButtonsProps {
 	totalPages: number
 }
 
-const ForwardNavigationButtons: React.FC<ForwardNavigationButtonsProps> = ({ currentPage, totalPages, ...buttonProps }) =>
+const ForwardNavigationButtons: React.FC<ForwardNavigationButtonsProps> = ({
+	currentPage,
+	totalPages,
+	...buttonProps
+}) =>
 	totalPages === currentPage
 		? <>
 			<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>{'\n'}
@@ -146,7 +155,12 @@ interface CurrentPageProps extends PagingInputProps {
 	currentPage: number
 }
 
-const CurrentPage: React.FC<CurrentPageProps> = ({ which, totalPages, currentPage, ...inputProps }) =>
+const CurrentPage: React.FC<CurrentPageProps> = ({
+	which,
+	totalPages,
+	currentPage,
+	...inputProps
+}) =>
 	'bottom' === which
 		? <>
 			{/* translators: Hidden accessibility text. */}
diff --git a/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php b/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
index e65e47813..cff984729 100644
--- a/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
+++ b/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
@@ -32,7 +32,10 @@ public function handle(): void {
 		$nonce = filter_input( INPUT_POST, 'code_snippets_bulk_download_nonce', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) ?? '';
 
 		if ( ! wp_verify_nonce( $nonce, 'code_snippets_bulk_download' ) ) {
-			$this->send_error( __( 'The download request is no longer valid. Please refresh and try again.', 'code-snippets' ), 403 );
+			$this->send_error(
+				__( 'The download request is no longer valid. Please refresh and try again.', 'code-snippets' ),
+				403
+			);
 		}
 
 		$snippets_json = wp_unslash( filter_input( INPUT_POST, 'snippets', FILTER_DEFAULT ) ?? '' );

From fbd66562cf9940610129ddf9b3633a31f5851da9 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 02:21:18 +0300
Subject: [PATCH 89/91] chore: keep list table under source limit

---
 src/js/components/common/ListTable/ListTable.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
index df908dbd4..ccc8d8aff 100644
--- a/src/js/components/common/ListTable/ListTable.tsx
+++ b/src/js/components/common/ListTable/ListTable.tsx
@@ -17,7 +17,6 @@ export interface ListTableColumn<T> {
 	sortedValue?: (item: T) => Key
 	defaultSortDirection?: ListTableSortDirection
 }
-
 export type ListTableSortDirection = 'asc' | 'desc'
 
 export interface ListTableAction<A extends string> {
@@ -45,7 +44,6 @@ export interface ListTablePaginationProps {
 	totalPages?: number
 	pageSearchParam?: string
 }
-
 export interface ListTableBorderProps {
 	fixed?: boolean
 	striped?: boolean
@@ -130,7 +128,6 @@ export interface ListTableProps<T, K extends Key, A extends string> extends List
 	beforeTable?: ReactNode
 	selectAllControl?: boolean
 }
-
 export const ListTable = <T, K extends Key, A extends string = never>({
 	items,
 	getKey,

From 710476f05e49d8155a3595ce36882fd2835929a2 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Sat, 18 Jul 2026 02:45:26 +0300
Subject: [PATCH 90/91] chore: enforce UI foundation source standards

---
 .../ConditionModal/ConditionModalButton.tsx   |  5 +++-
 .../EditMenu/SnippetForm/SnippetForm.tsx      |  5 +---
 src/js/components/ImportMenu/ImportMenu.tsx   |  5 +++-
 .../ManageMenu/CommunityCloud/CloudSearch.tsx |  2 --
 .../CommunityCloud/CommunityCloud.tsx         |  5 +++-
 .../SnippetsTable/SnippetsCardGrid.tsx        | 16 +++++++++---
 .../SnippetsTable/SnippetsTable.tsx           | 12 +++++++--
 src/js/components/common/KebabMenu.tsx        | 16 ------------
 .../common/ListTable/TableNavigation.tsx      | 25 +++++++++++++------
 .../components/common/SnippetViewToggle.tsx   |  4 ---
 src/js/components/common/SubnavTabs.tsx       |  7 ------
 src/js/components/common/icons/ViewIcons.tsx  | 18 +++++++++++--
 src/js/hooks/useSnippetsList.tsx              |  4 ---
 13 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
index eaf83790f..38c3faab9 100644
--- a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
+++ b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
@@ -18,7 +18,10 @@ export const ConditionModalButton: React.FC<ConditionModalButtonProps> = ({ setI
 	const hasCondition = 0 !== snippet.conditionId
 
 	return (
-		<div className={classnames('conditions-editor-open block-form-field', hasCondition ? 'has-condition' : 'no-condition')}>
+		<div className={classnames(
+			'conditions-editor-open block-form-field',
+			hasCondition ? 'has-condition' : 'no-condition'
+		)}>
 			{isCondition(snippet) ? null
 				: <>
 					<div className="conditions-editor-header">
diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index 6ccede60f..67c82a9d2 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -146,10 +146,7 @@ const EditFormWrap: React.FC = () => {
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 
-	// The Add New link and the post-save transition swap the snippet in place via
-	// history.pushState (no reload). Without this, the browser Back/Forward buttons
-	// change the URL but leave the stale form mounted; reload so the server
-	// re-renders the snippet that matches the restored URL.
+	// Restoring history after pushState requires a reload to render the matching snippet.
 	useEffect(() => {
 		const handlePopState = () => window.location.reload()
 		window.addEventListener('popstate', handlePopState)
diff --git a/src/js/components/ImportMenu/ImportMenu.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
index c8d00da73..4941d3cbe 100644
--- a/src/js/components/ImportMenu/ImportMenu.tsx
+++ b/src/js/components/ImportMenu/ImportMenu.tsx
@@ -64,7 +64,10 @@ export const ImportMenu: React.FC = () => {
 
 			<WithRestAPIContext>
 				{TABS.map(tab =>
-					<div key={tab} className={classnames('import-snippets-section', { 'active-section': tab === activeTab })}>
+					<div
+						key={tab}
+						className={classnames('import-snippets-section', { 'active-section': tab === activeTab })}
+					>
 						{TAB_CONTENT[tab]}
 					</div>)}
 			</WithRestAPIContext>
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 825d9fc8b..da4994616 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -141,8 +141,6 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 
 	const { totalItems, totalPages, page } = searchResults
 
-	// Shared across the top and bottom toolbars; the bottom toolbar omits the
-	// action and selection controls, showing only the pagination group.
 	const navProps = {
 		totalItems,
 		totalPages,
diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index 07d3804d8..293a1aa1f 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -61,7 +61,10 @@ const CommunityCloudInner = () => {
 			<hr className="wp-header-end" />
 
 			<p className="snippets-page-description">
-				{__('Search the community cloud for snippets shared by other users, and download them directly to your site.', 'code-snippets')}
+				{__(
+					'Search the community cloud and download user-shared snippets directly to your site.',
+					'code-snippets'
+				)}
 			</p>
 
 			{'snippets' === currentTab &&
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
index fa1719b19..5f88e5cf2 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
@@ -60,7 +60,11 @@ interface PagedSnippets {
 	visibleSnippets: Snippet[]
 }
 
-const usePagedSnippets = ({ snippets, itemsPerPage, currentPage }: PagedSnippetsParams): PagedSnippets => {
+const usePagedSnippets = ({
+	snippets,
+	itemsPerPage,
+	currentPage
+}: PagedSnippetsParams): PagedSnippets => {
 	const totalPages = itemsPerPage ? Math.ceil(snippets.length / itemsPerPage) : 0
 	const safePage = totalPages ? Math.min(currentPage, totalPages) : 1
 
@@ -95,9 +99,15 @@ export const SnippetsCardGrid = <A extends string>({
 	beforeGrid
 }: SnippetsCardGridProps<A>) => {
 	const [selected, setSelected] = useState(() => new Set<Snippet['id']>())
-	const [currentPage, setCurrentPage] = useState(() => Number(fetchQueryParam(PAGE_SEARCH_PARAM)) || 1)
+	const [currentPage, setCurrentPage] = useState(
+		() => Number(fetchQueryParam(PAGE_SEARCH_PARAM)) || 1
+	)
 
-	const { totalPages, safePage, visibleSnippets } = usePagedSnippets({ snippets, itemsPerPage, currentPage })
+	const { totalPages, safePage, visibleSnippets } = usePagedSnippets({
+		snippets,
+		itemsPerPage,
+		currentPage
+	})
 
 	return (
 		<div className="snippets-card-grid-container">
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 793df6ce4..8abb09c9b 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -8,7 +8,12 @@ import { WithSnippetsAPIContext } from '../../../hooks/useSnippetsAPI'
 import { WithSnippetsListContext, useSnippetsList } from '../../../hooks/useSnippetsList'
 import { SNIPPET_TYPES } from '../../../types/Snippet'
 import { isLicensed } from '../../../utils/screen'
-import { SNIPPET_TYPE_LABELS, getSnippetAddNewUrl, getSnippetType, isProType } from '../../../utils/snippets/snippets'
+import {
+	SNIPPET_TYPE_LABELS,
+	getSnippetAddNewUrl,
+	getSnippetType,
+	isProType
+} from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { Badge } from '../../common/Badge'
 import { Notice } from '../../common/Notice'
@@ -117,7 +122,10 @@ const SnippetsTableInner = () => {
 				aria-label={__('Snippet types', 'code-snippets')}
 			>
 				<ul>
-					<SnippetTypeTab count={countedSnippets?.length} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
+					<SnippetTypeTab
+						count={countedSnippets?.length}
+						setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
+					/>
 					{SNIPPET_TYPES.map(type =>
 						<SnippetTypeTab
 							key={type}
diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
index 476fe4772..d2fd93f71 100644
--- a/src/js/components/common/KebabMenu.tsx
+++ b/src/js/components/common/KebabMenu.tsx
@@ -26,10 +26,6 @@ interface KebabMenuContextValue {
 
 const KebabMenuContext = createContext<KebabMenuContextValue>({ closeMenu: () => undefined })
 
-/**
- * Retrieve the close handler of the containing kebab menu, allowing custom
- * rows to dismiss the popover once their action has completed.
- */
 export const useKebabMenu = (): KebabMenuContextValue => useContext(KebabMenuContext)
 
 export interface KebabMenuItemProps {
@@ -113,10 +109,6 @@ interface PopoverBehaviourOptions {
 	popoverRef: RefObject<HTMLUListElement>
 }
 
-// Flip the popover above the trigger when it would overflow the viewport,
-// and move focus to its first menu item on open. Focus falls back to the
-// popover itself rather than the first focusable element, so embedded form
-// fields with blur handlers are never focused without user intent.
 const usePopoverPlacement = ({
 	isOpen,
 	triggerRef,
@@ -193,8 +185,6 @@ const handlePopoverKeyDown = (
 	}
 }
 
-// Close the open popover on outside clicks or Escape, and trap Tab focus
-// within it while it remains open.
 const usePopoverDismissal = ({
 	isOpen,
 	setIsOpen,
@@ -232,12 +222,6 @@ export interface KebabMenuProps {
 	children: ReactNode
 }
 
-/**
- * Generic "more actions" menu: a square trigger button that opens a popover
- * of actions anchored to its bottom-end corner, flipping above the trigger
- * when there is no room below. The popover stays open for clicks inside it
- * and closes on outside clicks, Escape, or when an item action completes.
- */
 export const KebabMenu: React.FC<KebabMenuProps> = ({ label, className, children }) => {
 	const [isOpen, setIsOpen] = useState(false)
 	const containerRef = useRef<HTMLDivElement>(null)
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index 5f0e58cec..41b9be3c8 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -52,7 +52,13 @@ interface BulkActionSelectProps<A extends string> {
 	label: string
 }
 
-const BulkActionSelect = <A extends string>({ which, actions, selectedAction, setSelectedAction, label }: BulkActionSelectProps<A>) =>
+const BulkActionSelect = <A extends string>({
+	which,
+	actions,
+	selectedAction,
+	setSelectedAction,
+	label
+}: BulkActionSelectProps<A>) =>
 	<select
 		name={`action${'bottom' === which ? '-2' : ''}`}
 		id={`bulk-action-selector-${which}`}
@@ -109,7 +115,10 @@ const BulkActions = function BulkActions<K extends Key, A extends string>({
 				{__('Select bulk action', 'code-snippets')}
 			</label>
 
-			<BulkActionSelect {...{ which, actions, selectedAction, setSelectedAction }} label={selectLabel ?? __('Bulk actions', 'code-snippets')} />
+			<BulkActionSelect
+				{...{ which, actions, selectedAction, setSelectedAction }}
+				label={selectLabel ?? __('Bulk actions', 'code-snippets')}
+			/>
 
 			<SubmitButton
 				id={`doaction${'bottom' === which ? '-2' : ''}`}
@@ -131,7 +140,11 @@ export interface SelectAllControlProps<K extends Key> {
 	setSelected: Dispatch<SetStateAction<Set<K>>>
 }
 
-export const SelectAllControl = <K extends Key>({ keys, selected, setSelected }: SelectAllControlProps<K>) =>
+export const SelectAllControl = <K extends Key>({
+	keys,
+	selected,
+	setSelected
+}: SelectAllControlProps<K>) =>
 	<label className="tablenav-select-all">
 		<input
 			type="checkbox"
@@ -169,9 +182,6 @@ export const TableNav = <K extends Key, A extends string>({
 	bulkSelectLabel,
 	...paginationProps
 }: TableNavProps<K, A>) => {
-	// Singular controls (select all, filters, search and the view toggle)
-	// render only in the top toolbar: the bottom toolbar repeats just the
-	// bulk actions and the pagination group.
 	const isTop = 'top' === which
 	const hasBulkActions = 0 < totalItems && Boolean(actions)
 
@@ -197,7 +207,8 @@ export const TableNav = <K extends Key, A extends string>({
 
 			{0 < totalPages || isTop && endTableNav
 				? <div className="tablenav-end-group">
-					{0 < totalPages && <TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
+					{0 < totalPages &&
+						<TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
 					{isTop ? endTableNav?.(which) : null}
 				</div>
 				: null}
diff --git a/src/js/components/common/SnippetViewToggle.tsx b/src/js/components/common/SnippetViewToggle.tsx
index e7232e94c..6ab371ad1 100644
--- a/src/js/components/common/SnippetViewToggle.tsx
+++ b/src/js/components/common/SnippetViewToggle.tsx
@@ -10,10 +10,6 @@ export interface SnippetViewToggleProps {
 	className?: string
 }
 
-/**
- * Switch between the card and table snippet views, presented as a
- * two-icon segmented pair with the active view shown as a filled tile.
- */
 export const SnippetViewToggle: React.FC<SnippetViewToggleProps> = ({ snippetView, setSnippetView, className }) =>
 	<div
 		className={classnames('snippet-view-toggle', className)}
diff --git a/src/js/components/common/SubnavTabs.tsx b/src/js/components/common/SubnavTabs.tsx
index 0ede77cbc..5906e3399 100644
--- a/src/js/components/common/SubnavTabs.tsx
+++ b/src/js/components/common/SubnavTabs.tsx
@@ -21,13 +21,6 @@ export interface SubnavTabsProps<T extends string> {
 	endContent?: ReactNode
 }
 
-/**
- * Toolbar-style subnavigation bar shared across manage pages: text tab
- * buttons, pro-gated tabs showing an upsell chip and dialog for unlicensed
- * users, and an optional end slot for extra items such as the card/table
- * view toggle. Uses the same design language as the snippet-type nav on the
- * manage snippets page.
- */
 export const SubnavTabs = <T extends string>({
 	tabs,
 	ariaLabel,
diff --git a/src/js/components/common/icons/ViewIcons.tsx b/src/js/components/common/icons/ViewIcons.tsx
index 74d8422cf..0cfaff9ae 100644
--- a/src/js/components/common/icons/ViewIcons.tsx
+++ b/src/js/components/common/icons/ViewIcons.tsx
@@ -2,7 +2,14 @@ import React from 'react'
 import type { SVGProps } from 'react'
 
 export const CardViewIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
-	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+	<svg
+		width="18"
+		height="18"
+		viewBox="0 0 18 18"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
 		<rect x="2" y="2" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
 		<rect x="10.5" y="2" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
 		<rect x="2" y="10.5" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
@@ -10,7 +17,14 @@ export const CardViewIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
 	</svg>
 
 export const TableViewIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
-	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+	<svg
+		width="18"
+		height="18"
+		viewBox="0 0 18 18"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		{...props}
+	>
 		<path
 			d="M2.5 4.5H15.5M2.5 9H15.5M2.5 13.5H15.5"
 			stroke="currentColor"
diff --git a/src/js/hooks/useSnippetsList.tsx b/src/js/hooks/useSnippetsList.tsx
index a95aa9f67..999004730 100644
--- a/src/js/hooks/useSnippetsList.tsx
+++ b/src/js/hooks/useSnippetsList.tsx
@@ -15,10 +15,6 @@ const [Context, useSnippetsList] = createContextHook<SnippetsListContext>('useSn
 
 export const WithSnippetsListContext: React.FC<PropsWithChildren> = ({ children }) => {
 	const { fetchAll } = useSnippetsAPI()
-	// Seed from the list localized with the page so counts and rows render
-	// immediately; the mount-time refresh below keeps the data fresh. Raw
-	// localized fields are parsed into full snippet objects, matching the
-	// shape the REST API responses are parsed into.
 	const [snippetsList, setSnippetsList] = useState<Snippet[] | undefined>(
 		() => window.CODE_SNIPPETS_MANAGE?.snippetsList?.map(parseSnippetObject)
 	)

From 4c5343c0acc200444573bfe09fa887f12926d2ef Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 21 Jul 2026 07:11:36 +0200
Subject: [PATCH 91/91] feat: implement finalized local snippet card design
 (#416)

Co-authored-by: Maisy <maisy@codesnippets.pro>
Co-authored-by: Shea Bunge <shea@sheabunge.com>
---
 src/css/common/_cards.scss                    |  74 ++++-
 src/css/common/_modal.scss                    |  99 ++++++-
 src/css/common/_subnav.scss                   |  14 +-
 src/css/manage.scss                           |   1 +
 src/css/manage/_cloud-community-cards.scss    | 179 ++++++++++++
 src/css/manage/_cloud-community.scss          | 109 +------
 src/css/manage/_snippets-table.scss           | 170 ++++++-----
 src/css/welcome.scss                          |   7 +-
 .../EditorSidebar/controls/LockControl.tsx    |  11 +-
 .../EditMenu/SnippetForm/SnippetForm.tsx      |  74 ++++-
 .../SnippetForm/WithSnippetFormContext.tsx    |  36 ++-
 .../ManageMenu/CommunityCloud/CloudSearch.tsx |  10 +-
 .../CommunityCloud/SearchResult.tsx           | 129 +++++---
 .../SnippetsTable/ManageSnippetCard.tsx       | 224 ++++++++------
 .../ManageMenu/SnippetsTable/RowActions.tsx   |   1 +
 .../SnippetsTable/SnippetsTable.tsx           |  21 +-
 .../ManageMenu/SnippetsTable/TableColumns.tsx |  53 +---
 src/js/components/common/DeleteButton.tsx     |  80 +++--
 src/js/components/common/KebabMenu.tsx        |  35 +--
 src/js/components/common/SnippetCard.tsx      |  44 +--
 .../components/common/SnippetPreviewModal.tsx | 276 ++++++++++++++++--
 .../common/SnippetPriorityInput.tsx           |  60 ++++
 .../cloud/CloudSnippetDownloadButton.tsx      |   2 +-
 src/js/hooks/useSubmitSnippet.tsx             |   6 +-
 src/js/types/Window.ts                        |   1 +
 src/php/Admin/Menus/Manage_Menu.php           |   2 +-
 src/php/Admin/Menus/Manage_Menu_Assets.php    |  15 +-
 src/php/Admin/Menus/Snippet_Type_Counter.php  |  41 +++
 tests/e2e/code-snippets-edit.spec.ts          |  60 ++++
 tests/e2e/code-snippets-list.spec.ts          | 109 ++++++-
 tests/e2e/code-snippets-preview.spec.ts       | 105 ++++---
 tests/e2e/helpers/SnippetsTestHelper.ts       |  13 +-
 tests/e2e/helpers/constants.ts                |   2 +-
 .../Admin/Menus/Manage_Menu_Assets_Test.php   |  35 ++-
 .../Admin/Menus/Snippet_Type_Counter_Test.php |  39 +++
 .../Frontend/Snippet_Form_Source_Test.php     |  30 ++
 36 files changed, 1600 insertions(+), 567 deletions(-)
 create mode 100644 src/css/manage/_cloud-community-cards.scss
 create mode 100644 src/js/components/common/SnippetPriorityInput.tsx
 create mode 100644 src/php/Admin/Menus/Snippet_Type_Counter.php
 create mode 100644 tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php
 create mode 100644 tests/unit/Frontend/Snippet_Form_Source_Test.php

diff --git a/src/css/common/_cards.scss b/src/css/common/_cards.scss
index f0b53c2c6..bb2d08469 100644
--- a/src/css/common/_cards.scss
+++ b/src/css/common/_cards.scss
@@ -8,7 +8,7 @@
 .code-snippets-card {
 	background: #fff;
 	border: 1px solid #c3c4c7;
-	border-radius: 6px;
+	border-radius: 5px;
 	margin: 0;
 	display: flex;
 	flex-flow: column;
@@ -25,19 +25,46 @@
 
 	footer {
 		display: flex;
+		align-items: center;
+		justify-content: space-between;
 		gap: 8px;
-		background: #f6f7f7;
+		background: #f7f7f8;
 		margin-block-start: auto;
 		border-block-start: 1px solid #c3c4c7;
 		padding-inline: 24px;
 		padding-block: 12px;
+		border-end-start-radius: 5px;
+		border-end-end-radius: 5px;
+	}
+
+	// The status label shrinks and clips away under pressure rather than
+	// pushing the action buttons onto a second line.
+	.snippet-card-footer-status {
+		display: flex;
 		align-items: center;
-		border-end-start-radius: 6px;
-		border-end-end-radius: 6px;
+		gap: 8px;
+		flex: 0 1 auto;
+		min-inline-size: 0;
+		overflow: hidden;
+		white-space: nowrap;
 	}
 
-	&.is-selectable,
-	&.has-corner-controls {
+	.snippet-card-footer-actions {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-wrap: nowrap;
+		gap: 8px;
+		flex: 0 0 auto;
+
+		.button:not(.kebab-menu-trigger) {
+			min-inline-size: 103px;
+			text-align: center;
+			justify-content: center;
+		}
+	}
+
+	&.is-selectable {
 		position: relative;
 	}
 
@@ -54,12 +81,39 @@
 		}
 	}
 
-	&.is-selectable .card-inner h3 {
-		margin-inline-end: 48px;
+	input[type='checkbox'].snippet-card-select {
+		appearance: none;
+		display: grid;
+		place-content: center;
+		inline-size: 20px;
+		block-size: 20px;
+		padding: 0;
+		box-sizing: border-box;
+		background: #fff;
+		border: 1.5px solid #2271b1;
+		border-radius: 5px;
+		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
+		cursor: pointer;
+
+		&::before {
+			content: none;
+		}
+
+		&:checked {
+			background: #2271b1;
+
+			&::before {
+				content: '';
+				inline-size: 14px;
+				block-size: 14px;
+				margin: 0;
+				background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat;
+			}
+		}
 	}
 
-	&.has-corner-controls .card-inner h3 {
-		margin-inline-end: 96px;
+	&.is-selectable .card-inner > h3 {
+		margin-inline-end: 48px;
 	}
 
 	&.is-selected {
diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index fad7a3835..3a90d67f8 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -55,15 +55,15 @@
 .components-modal__frame.code-snippets-preview-modal {
 	min-inline-size: 520px;
 	min-block-size: 240px;
-	max-inline-size: 80vw;
-	max-block-size: 80vh;
+	inline-size: min(900px, 90vw);
+	max-block-size: 85vh;
 
 	@media (width <= 600px) {
 		min-inline-size: 90vw;
 	}
 
-	.components-modal__content {
-		overflow: auto;
+	.components-modal__header {
+		border-block-end-color: #ddd;
 	}
 
 	// The badge lives in the modal content because the minimum-supported
@@ -75,12 +75,89 @@
 		inset-inline-end: 56px;
 	}
 
-	// Shown when the code editor is unavailable (syntax highlighting preference
-	// off): the raw read-only textarea is the functional fallback.
-	textarea {
-		inline-size: 100%;
-		min-block-size: 360px;
-		resize: none;
-		font-family: monospace;
+	// Header and footer stay pinned; the CodeMirror editor is the only
+	// scroll region, scrolling long code both vertically and horizontally.
+	.components-modal__content {
+		display: flex;
+		flex-flow: column;
+		min-block-size: 0;
+		padding: 0;
+		overflow: hidden;
+	}
+
+	// The modal component wraps its children in an unstyled focus container;
+	// it must join the flex chain or the editor grows to its content height.
+	.components-modal__header + div {
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		min-block-size: 0;
+		overflow: hidden;
+	}
+
+	.code-snippets-preview-modal__editor {
+		display: flex;
+		flex-flow: column;
+		flex: 1;
+		min-block-size: 0;
+
+		.CodeMirror {
+			flex: 1;
+			min-block-size: 0;
+			block-size: 100%;
+		}
+
+		textarea {
+			flex: 1;
+			min-block-size: 0;
+			inline-size: 100%;
+			resize: none;
+			font-family: monospace;
+		}
+	}
+
+	.code-snippets-preview-modal__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-shrink: 0;
+		gap: 16px;
+		padding: 11px 19px;
+		border-block-start: 1px solid #e2e2e4;
+		background: #f6f7f7;
+	}
+
+	.code-snippets-preview-modal__priority {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 14px;
+		color: #646970;
+
+		.code-snippets-preview-modal__priority-value {
+			font-weight: 600;
+			color: #2c3337;
+		}
+	}
+
+	.code-snippets-preview-modal__buttons {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		.button {
+			border-radius: 5px;
+			font-size: 14px;
+		}
+
+		.button-link.code-snippets-preview-modal__trash {
+			color: #b32d2e;
+			text-decoration: none;
+
+			&:hover,
+			&:focus {
+				color: #d63638;
+			}
+		}
 	}
 }
diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 6e77fc471..088efd410 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -134,10 +134,6 @@
 		}
 	}
 
-	.snippet-view-toggle-nav-item {
-		margin-inline-start: auto;
-		align-items: center;
-	}
 }
 
 // Card/table view toggle: a two-icon segmented pair of square tiles with
@@ -183,12 +179,6 @@
 	}
 }
 
-// Inset the toggle from the band edge when hosted inside a subnav bar.
-.snippet-type-nav .snippet-view-toggle-nav-item .snippet-view-toggle {
-	padding-inline-end: 16px;
-}
-
-
 // Slot that adopts the WordPress Screen Options / Help tabs so they appear
 // directly below the snippet-type nav instead of above the page content.
 .snippets-screen-meta-slot {
@@ -204,14 +194,12 @@
 	}
 }
 
-
 // Item count shown after a subnav tab's label, as muted text.
 .snippet-type-nav .subnav-count {
 	font-size: 14px;
 	font-weight: 600;
 	line-height: 1.5;
-	color: #2c3337;
-	opacity: 0.4;
+	color: #646970;
 }
 
 // The active tab's count adopts the accent alongside its label.
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 984ca3cc9..e8567542b 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -14,6 +14,7 @@
 @use 'common/kebab-menu';
 @use 'manage/snippets-table';
 @use 'manage/cloud-community';
+@use 'manage/cloud-community-cards';
 
 .tablenav .tablenav-pages {
 	margin-block-end: 0;
diff --git a/src/css/manage/_cloud-community-cards.scss b/src/css/manage/_cloud-community-cards.scss
new file mode 100644
index 000000000..f110dc700
--- /dev/null
+++ b/src/css/manage/_cloud-community-cards.scss
@@ -0,0 +1,179 @@
+@use 'sass:color';
+@use '../common/theme';
+@use '../common/cards';
+
+.cloud-search-result {
+	p:last-child {
+		margin-block-end: 0;
+	}
+
+	.card-inner {
+		display: flex;
+		flex-flow: column;
+		gap: 16px;
+	}
+
+	.snippet-card-header {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+
+		// Keep header content clear of the absolutely-positioned selection checkbox.
+		padding-inline-end: 32px;
+
+		h3 {
+			margin: 0;
+			font-size: 18px;
+			font-weight: 700;
+			line-height: 1.5;
+			min-inline-size: 0;
+		}
+
+		.cloud-snippet-title-button {
+			display: block;
+			max-inline-size: 100%;
+			margin: 0;
+			padding: 0;
+			border: none;
+			background: none;
+			font: inherit;
+			color: #2271b1;
+			cursor: pointer;
+			text-align: start;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+
+			&:hover, &:focus {
+				text-decoration: underline;
+			}
+
+			&:focus-visible {
+				outline: 2px solid #2271b1;
+				outline-offset: 2px;
+				border-radius: 2px;
+			}
+		}
+	}
+
+	.snippet-card-meta {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 16px;
+		font-size: 14px;
+
+		.cloud-snippet-tags {
+			color: #2271b1;
+		}
+
+		.snippet-card-modified {
+			color: #6c7e7e;
+			margin-inline-start: auto;
+		}
+	}
+
+	.snippet-description-content {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		overflow: hidden;
+		margin: 0;
+		font-size: 14px;
+		color: #646970;
+		border-block-start: 1px solid #dcdcde;
+		padding-block-start: 16px;
+	}
+
+	.cloud-snippet-author {
+		margin: 0;
+		font-size: 14px;
+		color: #646970;
+
+		a {
+			color: theme.$accent;
+		}
+	}
+
+	footer {
+		.dashicons-warning {
+			color: #b32d2e;
+		}
+
+		.cloud-snippet-update svg {
+			display: block;
+		}
+
+		.button {
+			font-size: 14px;
+			line-height: 2.5714;
+			border-radius: 5px;
+		}
+
+		.button:not(.button-primary, .cloud-pro-button) {
+			background: #fff;
+		}
+	}
+}
+
+.cloud-search-results .cloud-search-result footer .components-spinner {
+	margin: 0;
+}
+
+// Anchored to the card container so this keeps its brand-orange fill above the WP-admin
+// compatibility layer's secondary-button styling (equal specificity, resolved by source order).
+.cloud-search-result .cloud-pro-button.button {
+	background-color: theme.$secondary;
+	border-color: theme.$secondary;
+	color: #fff;
+
+	&:hover,
+	&:focus {
+		background-color: color.adjust(theme.$secondary, $lightness: -10%);
+		border-color: color.adjust(theme.$secondary, $lightness: -10%);
+		color: #fff;
+	}
+}
+
+// Three equal-height snippet cards per row, matching the manage snippets
+// grid. minmax(0, 1fr) lets columns shrink below their content width so
+// the grid never overflows the page.
+ul.cloud-search-results.code-snippets-cards {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+
+	@media screen and (width <= 1100px) {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@media screen and (width <= 782px) {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.code-snippets-card {
+		min-inline-size: 0;
+
+		footer {
+			flex-wrap: wrap;
+		}
+	}
+
+	// Reveal the bulk-select checkbox on hover or keyboard focus, and keep
+	// every checkbox visible while any card in the grid is selected so an
+	// in-progress selection is never hidden.
+	.snippet-card-select {
+		opacity: 0;
+		transition: opacity 0.15s ease;
+
+		@media (prefers-reduced-motion: reduce) {
+			transition-duration: 0.01s;
+		}
+	}
+
+	.snippet-card-select:checked,
+	&.has-selection .snippet-card-select,
+	.code-snippets-card:hover .snippet-card-select,
+	.code-snippets-card:focus-within .snippet-card-select {
+		opacity: 1;
+	}
+}
diff --git a/src/css/manage/_cloud-community.scss b/src/css/manage/_cloud-community.scss
index 9005ffe99..e24197863 100644
--- a/src/css/manage/_cloud-community.scss
+++ b/src/css/manage/_cloud-community.scss
@@ -1,13 +1,12 @@
-@use 'sass:color';
-@use '../common/theme';
 @use '../common/banners';
-@use '../common/cards';
 
 .cloud-snippet-status {
-	text-transform: uppercase;
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
 	color: #646970;
 	font-size: 12px;
-	font-weight: 700;
+	font-weight: 500;
 	white-space: nowrap;
 
 	&::before {
@@ -16,7 +15,6 @@
 		inline-size: 10px;
 		border-radius: 50%;
 		display: inline-block;
-		margin-inline-end: 8px;
 	}
 }
 
@@ -25,7 +23,7 @@ $status-colors: (
 	private #cc96fb,
 	unverified #ea835e,
 	ai-verified #1cabcf,
-	pro-verified #7cd68a,
+	pro-verified #41a269,
 );
 
 @each $status, $color in $status-colors {
@@ -90,108 +88,13 @@ $status-colors: (
 	max-inline-size: 60%;
 }
 
-.cloud-search-result {
-	p:last-child {
-		margin-block-end: 0;
-	}
-
-	.cloud-snippet {
-		h3 .cloud-snippet-title-button {
-			display: inline;
-			margin: 0;
-			padding: 0;
-			border: none;
-			background: none;
-			font: inherit;
-			color: #2271b1;
-			cursor: pointer;
-			text-align: start;
-
-			&:hover, &:focus {
-				text-decoration: underline;
-			}
-
-			&:focus-visible {
-				outline: 2px solid #2271b1;
-				outline-offset: 2px;
-				border-radius: 2px;
-			}
-		}
-	}
-
-	.cloud-snippet-meta {
-		display: flex;
-		gap: 16px;
-		margin-block-start: 16px;
-	}
-
-	footer {
-		.dashicons-warning {
-			color: #b32d2e;
-		}
-
-		.cloud-snippet-status {
-			margin-inline-end: auto;
-		}
-	}
-
-	.cloud-snippet-votes {
-		.dashicons {
-			color: theme.$accent;
-			padding-inline-end: 8px;
-		}
-	}
-}
-
-.cloud-search-results .cloud-search-result footer > .components-spinner {
-	margin: 0;
-}
-
-// Anchored to the card container so this keeps its brand-orange fill above the WP-admin
-// compatibility layer's secondary-button styling (equal specificity, resolved by source order).
-.cloud-search-result .cloud-pro-button.button {
-	background-color: theme.$secondary;
-	border-color: theme.$secondary;
-	color: #fff;
-
-	&:hover,
-	&:focus {
-		background-color: color.adjust(theme.$secondary, $lightness: -10%);
-		border-color: color.adjust(theme.$secondary, $lightness: -10%);
-		color: #fff;
-	}
-}
-
-// Three equal-height snippet cards per row, matching the manage snippets
-// grid. minmax(0, 1fr) lets columns shrink below their content width so
-// the grid never overflows the page.
-ul.cloud-search-results.code-snippets-cards {
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-
-	@media screen and (width <= 1100px) {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-
-	@media screen and (width <= 782px) {
-		grid-template-columns: minmax(0, 1fr);
-	}
-
-	.code-snippets-card {
-		min-inline-size: 0;
-
-		footer {
-			flex-wrap: wrap;
-		}
-	}
-}
-
 .cloud-snippet-action-buttons {
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
 	gap: 8px;
 
-	// Keep the Download / View / Pro Only button a consistent width so
+	// Keep the Download / Edit / Pro Only button a consistent width so
 	// rows line up regardless of which state the snippet is in.
 	.button-primary,
 	.cloud-pro-button {
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index b89b2c1cf..6c82a6a78 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -83,39 +83,71 @@
 
 	.code-snippets-card {
 		min-inline-size: 0;
+	}
+
+	// Reveal the bulk-select checkbox on hover or keyboard focus, and keep
+	// every checkbox visible while any card in the grid is selected so an
+	// in-progress selection is never hidden.
+	.snippet-card-select {
+		opacity: 0;
+		transition: opacity 0.15s ease;
 
-		footer {
-			flex-wrap: wrap;
-			justify-content: flex-end;
+		@media (prefers-reduced-motion: reduce) {
+			transition-duration: 0.01s;
 		}
 	}
 
-	// Match the light-blue tint that active snippet rows receive in the
-	// table view (.active-snippet td/th).
-	.code-snippets-card.active-snippet {
-		background-color: rgb(120 200 230 / 6%);
+	.snippet-card-select:checked,
+	&.has-selection .snippet-card-select,
+	.code-snippets-card:hover .snippet-card-select,
+	.code-snippets-card:focus-within .snippet-card-select {
+		opacity: 1;
 	}
 
-	.snippet-card-more-toggle {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
+	// Card body bands: header row, meta row, then a separated description.
+	.card-inner {
+		display: flex;
+		flex-flow: column;
+		gap: 16px;
+	}
 
-		.dashicons {
-			font-size: 16px;
-			block-size: 16px;
-			inline-size: 16px;
-			transition: transform 0.25s ease;
+	.snippet-card-header {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+
+		// Keep header content clear of the absolutely-positioned selection checkbox.
+		padding-inline-end: 32px;
+
+		h3 {
+			margin: 0;
+			font-size: 18px;
+			font-weight: 700;
+			line-height: 1.5;
+
+			// Let the heading shrink inside the flex row so long names
+			// truncate instead of pushing the header icons out of the card.
+			min-inline-size: 0;
+
+			.snippet-name {
+				display: block;
+				color: #2271b1;
+				text-decoration: none;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 		}
 
-		&[aria-expanded='true'] .dashicons {
-			transform: rotate(90deg);
+		.extra-icons:empty {
+			display: none;
 		}
-	}
 
-	.card-inner h3 {
-		margin: 0;
-		font-size: 1.1em;
+		// The accent pill styling lives in common/_switch.scss; keep the
+		// switch from shrinking inside the flex card header.
+		input[type='checkbox'].switch {
+			flex-shrink: 0;
+		}
 	}
 
 	.snippet-card-meta {
@@ -123,74 +155,66 @@
 		align-items: center;
 		flex-wrap: wrap;
 		gap: 16px;
-		margin-block-start: 16px;
+		font-size: 14px;
+
+		.snippet-card-tags-label {
+			color: #646970;
+		}
+
+		.snippet-card-tags a {
+			color: #2271b1;
+			text-decoration: none;
+		}
 
-		.snippet-card-tags .dashicons {
-			color: #787c82;
-			margin-inline-end: 2px;
+		.snippet-card-modified {
+			color: #646970;
+			margin-inline-start: auto;
 		}
 	}
 
 	.snippet-description-content {
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 3;
-		line-clamp: 3;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
 		overflow: hidden;
-		margin-block-start: 12px;
-	}
-
-	.snippet-card-priority {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-
-		input.snippet-priority {
-			inline-size: 4em;
-		}
+		font-size: 14px;
+		color: #646970;
+		border-block-start: 1px solid #dcdcde;
+		padding-block-start: 16px;
 	}
 
-	.snippet-card-actions {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 8px;
-		margin-inline-start: auto;
+	// Align the selection checkbox with the taller card header row.
+	.snippet-card-corner {
+		inset-block-start: 28px;
 	}
 
-	// Expanding actions row: animating grid-template-rows from 0fr to 1fr
-	// gives a smooth height transition without a hard-coded max height.
-	.snippet-card-more {
-		display: grid;
-		grid-template-rows: 0fr;
-		transition: grid-template-rows 0.25s ease;
-		background: #f6f7f7;
-
-		&.is-expanded {
-			grid-template-rows: 1fr;
+	.code-snippets-card footer {
+		.button {
+			font-size: 14px;
+			line-height: 2.5714;
+			border-radius: 5px;
 		}
-	}
 
-	.snippet-card-more-inner {
-		overflow: hidden;
-		min-block-size: 0;
+		.button:not(.button-primary) {
+			background: #fff;
+		}
 	}
 
-	.snippet-card-more-row {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 8px;
-		background: #f6f7f7;
-		border-block-start: 1px solid #dcdcde;
-		padding-inline: 24px;
-		padding-block: 12px;
-	}
+	.kebab-menu-priority {
+		justify-content: space-between;
 
-	@media (prefers-reduced-motion: reduce) {
-		.snippet-card-more,
-		.snippet-card-more-toggle .dashicons {
-			transition-duration: 0.01s;
+		input.snippet-priority {
+			inline-size: 52px;
+			block-size: 30px;
+			box-sizing: border-box;
+			margin: 0;
+			padding-block: 0;
+			padding-inline: 4px;
+			border: 1px solid #e2e2e4;
+			border-radius: 4px;
+			text-align: center;
+			color: #2c3337;
 		}
 	}
 }
diff --git a/src/css/welcome.scss b/src/css/welcome.scss
index 9d4c0702c..d15e7c3f8 100644
--- a/src/css/welcome.scss
+++ b/src/css/welcome.scss
@@ -8,9 +8,10 @@ $breakpoint: 1060px;
 
 .code-snippets-welcome {
 	h2 {
-		font-size: 1.5rem;
-		font-weight: 400;
-		line-height: 1.3;
+		font-size: 32px;
+		font-weight: 510;
+		line-height: 1.25;
+		color: #2c3337;
 		padding: 0;
 		margin-block: 50px 1rem;
 	}
diff --git a/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx b/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
index a6f929918..cab91695a 100644
--- a/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
+++ b/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx
@@ -6,7 +6,14 @@ import { TooltipButton } from '../../../common/TooltipButton'
 import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
 
 export const LockControl: React.FC = () => {
-	const { snippet, setSnippet, isWorking, setIsWorking, setCurrentNotice } = useSnippetForm()
+	const {
+		acceptSnippet,
+		snippet,
+		setSnippet,
+		isWorking,
+		setIsWorking,
+		setCurrentNotice
+	} = useSnippetForm()
 	const { update } = useSnippetsAPI()
 
 	const handleToggle = () => {
@@ -15,7 +22,7 @@ export const LockControl: React.FC = () => {
 
 		update({ id: snippet.id, network: snippet.network, locked: !snippet.locked })
 			.then(result => {
-				setSnippet(result)
+				acceptSnippet(result)
 
 				setCurrentNotice(['updated', result.locked
 					? __('Snippet <strong>locked</strong>.', 'code-snippets')
diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index 67c82a9d2..e2e80b392 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
@@ -6,7 +6,12 @@ import { WithSnippetsAPIContext } from '../../../hooks/useSnippetsAPI'
 import { WithSnippetsListContext, useSnippetsList } from '../../../hooks/useSnippetsList'
 import { SubmitSnippetAction, useSubmitSnippet } from '../../../hooks/useSubmitSnippet'
 import { handleUnknownError } from '../../../utils/errors'
-import { createSnippetObject, getSnippetType, isCondition, validateSnippet } from '../../../utils/snippets/snippets'
+import {
+	createSnippetObject,
+	getSnippetType,
+	isCondition,
+	validateSnippet
+} from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { ConfirmDialog } from '../../common/ConfirmDialog'
 import { Toolbar } from '../../common/Toolbar'
@@ -96,7 +101,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)
 					}
 				}
 			})
@@ -126,7 +131,9 @@ const EditForm: React.FC<EditFormProps> = ({ children, className }) => {
 				{children}
 			</form>
 
-			<ConfirmSubmitDialog {...{ doSubmit, submitAction, setSubmitAction, validationWarning, setValidationWarning }} />
+			<ConfirmSubmitDialog
+				{...{ doSubmit, submitAction, setSubmitAction, validationWarning, setValidationWarning }}
+			/>
 		</>
 	)
 }
@@ -141,17 +148,58 @@ const ConditionsEditor: React.FC = () => {
 		: null
 }
 
-const EditFormWrap: React.FC = () => {
-	const { snippet, isReadOnly } = useSnippetForm()
-	const [isExpanded, setIsExpanded] = useState(false)
-	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+const useReloadOnPopState = (isDirty: boolean) => {
+	const currentUrl = useRef(window.location.href)
+	const skipNextUnloadPrompt = useRef(false)
+
+	useEffect(() => {
+		currentUrl.current = window.location.href
+	})
 
-	// Restoring history after pushState requires a reload to render the matching snippet.
 	useEffect(() => {
-		const handlePopState = () => window.location.reload()
+		const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+			if (skipNextUnloadPrompt.current) {
+				skipNextUnloadPrompt.current = false
+				return
+			}
+
+			event.preventDefault()
+			// Required by Chrome and Edge versions before 119.
+			// eslint-disable-next-line @typescript-eslint/no-deprecated
+			event.returnValue = true
+		}
+
+		if (isDirty) {
+			window.addEventListener('beforeunload', handleBeforeUnload)
+		}
+
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+	}, [isDirty])
+
+	useEffect(() => {
+		const handlePopState = () => {
+			if (isDirty && !window.confirm(
+				__('You have unsaved changes. Leave this page and discard them?', 'code-snippets')
+			)) {
+				window.history.pushState({}, document.title, currentUrl.current)
+				return
+			}
+
+			skipNextUnloadPrompt.current = isDirty
+			window.location.reload()
+		}
+
 		window.addEventListener('popstate', handlePopState)
 		return () => window.removeEventListener('popstate', handlePopState)
-	}, [])
+	}, [isDirty])
+}
+
+const EditFormWrap: React.FC = () => {
+	const { snippet, isReadOnly, isDirty } = useSnippetForm()
+	const [isExpanded, setIsExpanded] = useState(false)
+	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+
+	useReloadOnPopState(isDirty)
 
 	return (
 		<>
@@ -187,7 +235,9 @@ export const SnippetForm: React.FC = () =>
 	<WithRestAPIContext>
 		<WithSnippetsAPIContext>
 			<WithSnippetsListContext>
-				<WithSnippetFormContext initialSnippet={() => createSnippetObject(window.CODE_SNIPPETS_EDIT?.snippet)}>
+				<WithSnippetFormContext
+					initialSnippet={() => createSnippetObject(window.CODE_SNIPPETS_EDIT?.snippet)}
+				>
 					<Toolbar />
 					<EditFormWrap />
 				</WithSnippetFormContext>
diff --git a/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx b/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
index 6c909dce3..a006df03f 100644
--- a/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
+++ b/src/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
@@ -12,7 +12,9 @@ export interface SnippetFormContext {
 	snippet: Snippet
 	isWorking: boolean
 	isReadOnly: boolean
+	isDirty: boolean
 	setSnippet: Dispatch<SetStateAction<Snippet>>
+	acceptSnippet: (snippet: Snippet) => void
 	updateSnippet: Dispatch<SetStateAction<Snippet>>
 	setIsWorking: Dispatch<SetStateAction<boolean>>
 	currentNotice: ScreenNotice | undefined
@@ -28,8 +30,30 @@ export interface WithSnippetFormContextProps extends PropsWithChildren {
 	initialSnippet: () => Snippet
 }
 
+const getSnippetDraftState = (snippet: Snippet) => ({
+	name: snippet.name,
+	desc: snippet.desc,
+	code: snippet.code,
+	tags: snippet.tags,
+	scope: snippet.scope,
+	priority: snippet.priority,
+	active: snippet.active,
+	locked: snippet.locked,
+	network: snippet.network,
+	sharedNetwork: snippet.shared_network,
+	conditionId: snippet.conditionId
+})
+
+const isSnippetDraftDirty = (snippet: Snippet, savedSnippet: Snippet): boolean => {
+	const draftState = JSON.stringify(getSnippetDraftState(snippet))
+	const savedDraftState = JSON.stringify(getSnippetDraftState(savedSnippet))
+	return draftState !== savedDraftState
+}
+
 export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({ children, initialSnippet }) => {
-	const [snippet, setSnippet] = useState<Snippet>(initialSnippet)
+	const [initialValue] = useState<Snippet>(initialSnippet)
+	const [snippet, setSnippet] = useState<Snippet>(initialValue)
+	const [savedSnippet, setSavedSnippet] = useState<Snippet>(initialValue)
 	const [isWorking, setIsWorking] = useState(false)
 	const [currentNotice, setCurrentNotice] = useState<ScreenNotice>()
 	const [codeEditorInstance, setCodeEditorInstance] = useState<CodeEditorInstance>()
@@ -38,6 +62,14 @@ export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({
 		() => snippet.locked || !isLicensed() && isProSnippet({ scope: snippet.scope }),
 		[snippet.locked, snippet.scope]
 	)
+	const isDirty = useMemo(
+		() => isSnippetDraftDirty(snippet, savedSnippet),
+		[snippet, savedSnippet]
+	)
+	const acceptSnippet = useCallback((value: Snippet) => {
+		setSnippet(value)
+		setSavedSnippet(value)
+	}, [])
 
 	const handleRequestError = useCallback((error: unknown, message?: string) => {
 		console.error('Request failed', error)
@@ -58,7 +90,9 @@ export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({
 		snippet,
 		isWorking,
 		isReadOnly,
+		isDirty,
 		setSnippet,
+		acceptSnippet,
 		setIsWorking,
 		updateSnippet,
 		currentNotice,
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index da4994616..8e68610b7 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n'
 import React, { useEffect, useState } from 'react'
+import classnames from 'classnames'
 import { Spinner } from '@wordpress/components'
 import { useRestAPI } from '../../../hooks/useRestAPI'
 import { REST_BASES } from '../../../utils/restAPI'
@@ -8,7 +9,7 @@ import { isProSnippet } from '../../../utils/snippets/snippets'
 import { TableNav } from '../../common/ListTable/TableNavigation'
 import { SnippetViewToggle } from '../../common/SnippetViewToggle'
 import { CloudSnippetsTable } from './CloudSnippetsTable'
-import { SearchResult } from './SearchResult'
+import { CloudSnippetAuthor, SearchResult } from './SearchResult'
 import { useCloudSearch } from './WithCloudSearchContext'
 import { SearchFilters } from './SearchFilters'
 import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema'
@@ -75,11 +76,16 @@ interface SearchResultsGridProps {
 }
 
 const SearchResultsGrid: React.FC<SearchResultsGridProps> = ({ snippets, selected, setSelected }) =>
-	<ul className="cloud-search-results code-snippets-cards">
+	<ul
+		className={classnames('cloud-search-results', 'code-snippets-cards', {
+			'has-selection': snippets.some(snippet => selected.has(snippet.id))
+		})}
+	>
 		{snippets.map(result =>
 			<SearchResult
 				key={result.id}
 				snippet={result}
+				author={<CloudSnippetAuthor snippet={result} />}
 				isSelected={selected.has(result.id)}
 				onSelectedChange={isSelected => {
 					setSelected(previous => {
diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
index deeecc067..07b01c189 100644
--- a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
+import { humanTimeDiff } from '@wordpress/date'
 import { __, _x, sprintf } from '@wordpress/i18n'
+import React, { useState } from 'react'
 import { getSnippetType } from '../../../utils/snippets/snippets'
 import { stripTags, truncateChars } from '../../../utils/text'
 import { Badge } from '../../common/Badge'
@@ -9,66 +10,97 @@ import { CloudSnippetPreviewModal } from '../../common/cloud/CloudSnippetPreview
 import { CloudStatusIndicator } from '../../common/cloud/CloudStatusBadge'
 import { CloudUpdateIcon } from '../../common/icons/CloudIcons'
 import { SnippetCard } from '../../common/SnippetCard'
+import type { ReactNode } from 'react'
 import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema'
 
+export interface CloudSnippetAuthorProps {
+	snippet: CloudSnippetSchema
+}
+
+export const CloudSnippetAuthor: React.FC<CloudSnippetAuthorProps> = ({ snippet }) =>
+	<p className="cloud-snippet-author">
+		<a
+			href={`${window.CODE_SNIPPETS?.urls.cloud}/codevault/${snippet.codevault}`}
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			{sprintf(
+				/* translators: %s: cloud library author name. */
+				_x('By %s', 'snippet author', 'code-snippets'),
+				snippet.codevault
+			)}
+		</a>
+	</p>
+
 interface CloudSnippetDetailsProps {
 	snippet: CloudSnippetSchema
+	author?: ReactNode
 	setIsPreviewOpen: (isOpen: boolean) => void
 }
 
-const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({ snippet, setIsPreviewOpen }) =>
+const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({
+	snippet,
+	author,
+	setIsPreviewOpen
+}) =>
 	<div className="cloud-snippet card-inner">
-		<h3>
-			<button
-				type="button"
-				className="cloud-snippet-title-button"
-				title={__('Preview this snippet', 'code-snippets')}
-				onClick={() => {
-					setIsPreviewOpen(true)
-				}}
-			>
-				{snippet.name}
-			</button>
-		</h3>
-
-		<div className="cloud-snippet-meta">
+		<div className="snippet-card-header">
 			<Badge name={getSnippetType(snippet)} />
-			<span className="cloud-snippet-votes">
-				<span className="dashicons dashicons-thumbs-up" aria-hidden="true"></span>
-				<span>
-					{snippet.vote_count}
-					<span className="screen-reader-text">{` ${__('votes', 'code-snippets')}`}</span>
-				</span>
-			</span>
-			{0 < snippet.tags.length
-				? <span className="cloud-snippet-category">
-					<strong>{__('Category: ', 'code-snippets')}</strong>
-					{snippet.tags[0]}
-				</span>
-				: null}
+
+			<h3>
+				<button
+					type="button"
+					className="cloud-snippet-title-button"
+					title={__('Preview this snippet', 'code-snippets')}
+					onClick={() => {
+						setIsPreviewOpen(true)
+					}}
+				>
+					{snippet.name}
+				</button>
+			</h3>
 		</div>
 
-		{snippet.description && (
-			<p className="cloud-snippet-description">
+		{0 < snippet.tags.length || snippet.updated
+			? <div className="snippet-card-meta">
+				{0 < snippet.tags.length
+					? <span className="cloud-snippet-tags">{snippet.tags.join(', ')}</span>
+					: null}
+
+				{snippet.updated
+					? <time className="snippet-card-modified" dateTime={snippet.updated} title={snippet.updated}>
+						{sprintf(
+							/* translators: %s: human-readable time difference, including "ago" suffix. */
+							__('Modified %s', 'code-snippets'),
+							humanTimeDiff(snippet.updated, undefined)
+						)}
+					</time>
+					: null}
+			</div>
+			: null}
+
+		{snippet.description
+			? <p className="snippet-description-content">
 				{truncateChars(stripTags(snippet.description))}
 			</p>
-		)}
+			: null}
 
-		<p className="cloud-snippet-author">
-			{_x('by ', 'snippet author', 'code-snippets')}
-			<a href={`${window.CODE_SNIPPETS?.urls.cloud}/codevault/${snippet.codevault}`} target="_blank" rel="noopener noreferrer">
-				{snippet.codevault}
-			</a>
-		</p>
+		{author}
 	</div>
 
 export interface SearchResultProps {
 	snippet: CloudSnippetSchema
+	author?: ReactNode
 	isSelected?: boolean
 	onSelectedChange?: (isSelected: boolean) => void
 }
 
-export const SearchResult: React.FC<SearchResultProps> = ({ snippet, isSelected = false, onSelectedChange }) => {
+export const SearchResult: React.FC<SearchResultProps> = ({
+	snippet,
+	author,
+	isSelected = false,
+	onSelectedChange
+}) => {
 	const [isPreviewOpen, setIsPreviewOpen] = useState(false)
 
 	return (
@@ -81,23 +113,30 @@ export const SearchResult: React.FC<SearchResultProps> = ({ snippet, isSelected
 				__('Select %s', 'code-snippets'),
 				snippet.name
 			)}
-			footer={<>
+			footerStatus={<>
+				<CloudStatusIndicator status={snippet.status} />
+
 				{snippet.update_available
 					? <span className="cloud-snippet-update" title={__('Update available', 'code-snippets')}>
 						<CloudUpdateIcon aria-label={__('Update available', 'code-snippets')} />
 					</span>
 					: null}
-				<CloudStatusIndicator status={snippet.status} />
-				<CloudSnippetDownloadButton snippet={snippet} />
-
+			</>}
+			footer={<>
 				<Button secondary onClick={() => setIsPreviewOpen(true)}>
 					{__('Preview', 'code-snippets')}
 				</Button>
+
+				<CloudSnippetDownloadButton snippet={snippet} />
 			</>}
 		>
-			<CloudSnippetDetails snippet={snippet} setIsPreviewOpen={setIsPreviewOpen} />
+			<CloudSnippetDetails snippet={snippet} author={author} setIsPreviewOpen={setIsPreviewOpen} />
 
-			<CloudSnippetPreviewModal snippet={snippet} isOpen={isPreviewOpen} setIsOpen={setIsPreviewOpen} />
+			<CloudSnippetPreviewModal
+				snippet={snippet}
+				isOpen={isPreviewOpen}
+				setIsOpen={setIsPreviewOpen}
+			/>
 		</SnippetCard>
 	)
 }
diff --git a/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx b/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
index 950e62d05..690b003b3 100644
--- a/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx
@@ -1,19 +1,34 @@
-import React, { useState } from 'react'
-import classnames from 'classnames'
-import { __, sprintf } from '@wordpress/i18n'
+import { humanTimeDiff } from '@wordpress/date'
 import { RawHTML } from '@wordpress/element'
+import { __, sprintf } from '@wordpress/i18n'
+import React, { useState } from 'react'
 import { useSnippetsAPI } from '../../../hooks/useSnippetsAPI'
 import { useSnippetsList } from '../../../hooks/useSnippetsList'
 import { handleUnknownError } from '../../../utils/errors'
 import { downloadSnippetExportFile } from '../../../utils/files'
-import { isNetworkAdmin } from '../../../utils/screen'
-import { cloneSnippetObject, getSnippetDisplayName, getSnippetEditUrl, getSnippetType, isSnippetActive } from '../../../utils/snippets/snippets'
+import {
+	canModifySnippet,
+	cloneSnippetObject,
+	getSnippetDisplayName,
+	getSnippetEditUrl,
+	getSnippetType,
+	isNetworkOnlySnippet,
+	isSnippetActive
+} from '../../../utils/snippets/snippets'
 import { Button } from '../../common/Button'
-import { DeleteButton } from '../../common/DeleteButton'
+import { useDeleteSnippet } from '../../common/DeleteButton'
+import { KebabMenu, KebabMenuDivider, KebabMenuItem, KebabMenuRow } from '../../common/KebabMenu'
 import { SnippetCard } from '../../common/SnippetCard'
 import { SnippetPreviewModal } from '../../common/SnippetPreviewModal'
 import { useFilteredSnippets } from './WithFilteredSnippetsContext'
-import { ActivateColumn, DateColumn, PriorityColumn, SnippetExtraIcons, SnippetName, TagsColumn, TypeColumn } from './TableColumns'
+import {
+	ActivateColumn,
+	PriorityColumn,
+	SnippetExtraIcons,
+	SnippetName,
+	TagsColumn,
+	TypeColumn
+} from './TableColumns'
 import type { Snippet } from '../../../types/Snippet'
 
 interface SnippetCardActionsProps {
@@ -35,128 +50,153 @@ const CardPreviewButton: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
 				type={getSnippetType(snippet)}
 				isOpen={isPreviewOpen}
 				setIsOpen={setIsPreviewOpen}
+				snippet={snippet}
 			/>
 		</>
 	)
 }
 
-const EditCloneExportButtons: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
+const CloneExportMenuItems: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
 	const api = useSnippetsAPI()
 	const { refreshSnippetsList } = useSnippetsList()
 
 	return (
 		<>
-			<a className="button button-primary" href={getSnippetEditUrl(snippet)}>
-				{snippet.locked ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
-			</a>
-
-			<Button
-				secondary
-				onClick={() => {
+			<KebabMenuItem
+				onSelect={() => {
 					api.create(cloneSnippetObject(snippet))
 						.then(refreshSnippetsList)
 						.catch(handleUnknownError)
 				}}
 			>
 				{__('Clone', 'code-snippets')}
-			</Button>
+			</KebabMenuItem>
 
-			<Button
-				secondary
-				onClick={() => {
+			<KebabMenuItem
+				onSelect={() => {
 					api.export(snippet)
 						.then(response => downloadSnippetExportFile(response, snippet))
 						.catch(handleUnknownError)
 				}}
 			>
 				{__('Export', 'code-snippets')}
-			</Button>
+			</KebabMenuItem>
+
+			<KebabMenuDivider />
 		</>
 	)
 }
 
-const SnippetCardActions: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
+interface RestoreDeleteMenuItemsProps extends SnippetCardActionsProps {
+	requestDelete: () => void
+}
+
+const RestoreDeleteMenuItems: React.FC<RestoreDeleteMenuItemsProps> = ({
+	snippet,
+	requestDelete
+}) => {
 	const api = useSnippetsAPI()
 	const { refreshSnippetsList } = useSnippetsList()
 
-	if (!isNetworkAdmin() && snippet.network && !snippet.shared_network) {
-		return (
-			<span className="snippet-card-actions">
-				{snippet.active
-					? <span className="network-active">{__('Network Active', 'code-snippets')}</span>
-					: <span className="network-only">{__('Network Only', 'code-snippets')}</span>}
-			</span>
-		)
-	}
-
-	if (snippet.shared_network && !window.CODE_SNIPPETS_MANAGE?.hasNetworkCap) {
-		return null
-	}
-
 	return (
-		<span className="snippet-card-actions">
-			{!snippet.trashed && <EditCloneExportButtons snippet={snippet} />}
+		<>
+			<KebabMenuDivider />
 
-			{snippet.trashed && (
-				<Button
-					secondary
-					onClick={() => {
+			{snippet.trashed
+				? <KebabMenuItem
+					onSelect={() => {
 						api.restore(snippet)
 							.then(refreshSnippetsList)
 							.catch(handleUnknownError)
 					}}
 				>
 					{__('Restore', 'code-snippets')}
-				</Button>)}
+				</KebabMenuItem>
+				: null}
 
-			{(!snippet.locked || snippet.trashed) && (
-				<DeleteButton secondary className="snippet-card-delete" snippet={snippet} onSuccess={refreshSnippetsList} />)}
-		</span>
+			<KebabMenuItem destructive onSelect={requestDelete}>
+				{snippet.trashed ? __('Delete Permanently', 'code-snippets') : __('Trash', 'code-snippets')}
+			</KebabMenuItem>
+		</>
 	)
 }
 
-const CardActionsArea: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
-	const [isExpanded, setIsExpanded] = useState(false)
+const CardActionsMenu: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
+	const { refreshSnippetsList } = useSnippetsList()
+	const canModify = canModifySnippet(snippet)
+	const { requestDelete, confirmDialog } = useDeleteSnippet({
+		snippet,
+		onSuccess: refreshSnippetsList,
+		onError: handleUnknownError
+	})
 
 	return (
 		<>
-			<footer>
-				<CardPreviewButton snippet={snippet} />
-
-				<Button
-					primary
-					className="snippet-card-more-toggle"
-					aria-expanded={isExpanded}
-					onClick={() => setIsExpanded(previous => !previous)}
-				>
-					{isExpanded ? __('Show less', 'code-snippets') : __('Show more', 'code-snippets')}
-					<span className="dashicons dashicons-arrow-right-alt2" aria-hidden="true"></span>
-				</Button>
-			</footer>
-
-			<div className={classnames('snippet-card-more', { 'is-expanded': isExpanded })}>
-				<div className="snippet-card-more-inner">
-					<div className="snippet-card-more-row">
-						<span className="snippet-card-priority">
-							<span aria-hidden="true">{__('Priority', 'code-snippets')}</span>
-							<PriorityColumn snippet={snippet} />
-						</span>
-
-						<SnippetCardActions snippet={snippet} />
-					</div>
-				</div>
-			</div>
+			<KebabMenu
+				label={sprintf(
+					/* translators: %s: name of the snippet. */
+					__('Actions for %s', 'code-snippets'),
+					getSnippetDisplayName(snippet)
+				)}
+			>
+				{canModify && !snippet.trashed ? <CloneExportMenuItems snippet={snippet} /> : null}
+
+				<KebabMenuRow className="kebab-menu-priority">
+					<label htmlFor={`snippet-${snippet.id}-priority`}>{__('Priority', 'code-snippets')}</label>
+					<PriorityColumn snippet={snippet} />
+				</KebabMenuRow>
+
+				{canModify && (snippet.trashed || !snippet.locked)
+					? <RestoreDeleteMenuItems snippet={snippet} requestDelete={requestDelete} />
+					: null}
+			</KebabMenu>
+
+			{confirmDialog}
 		</>
 	)
 }
 
+const CardFooterActions: React.FC<SnippetCardActionsProps> = ({ snippet }) =>
+	<>
+		{isNetworkOnlySnippet(snippet)
+			? snippet.active
+				? <span className="network-active">{__('Network Active', 'code-snippets')}</span>
+				: <span className="network-only">{__('Network Only', 'code-snippets')}</span>
+			: null}
+
+		{!snippet.trashed ? <CardPreviewButton snippet={snippet} /> : null}
+
+		{!snippet.trashed && canModifySnippet(snippet)
+			? <a className="button button-primary" href={getSnippetEditUrl(snippet)}>
+				{snippet.locked ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
+			</a>
+			: null}
+
+		<CardActionsMenu snippet={snippet} />
+	</>
+
+const CardModifiedDate: React.FC<SnippetCardActionsProps> = ({ snippet }) =>
+	snippet.modified
+		? <time className="snippet-card-modified" dateTime={snippet.modified} title={snippet.modified}>
+			{sprintf(
+				/* translators: %s: human-readable time difference, including "ago" suffix. */
+				__('Modified %s', 'code-snippets'),
+				humanTimeDiff(snippet.modified, undefined)
+			)}
+		</time>
+		: null
+
 export interface ManageSnippetCardProps {
 	snippet: Snippet
 	isSelected: boolean
 	onSelectedChange: (isSelected: boolean) => void
 }
 
-export const ManageSnippetCard: React.FC<ManageSnippetCardProps> = ({ snippet, isSelected, onSelectedChange }) => {
+export const ManageSnippetCard: React.FC<ManageSnippetCardProps> = ({
+	snippet,
+	isSelected,
+	onSelectedChange
+}) => {
 	const { activeByCondition } = useFilteredSnippets()
 
 	return (
@@ -174,34 +214,34 @@ export const ManageSnippetCard: React.FC<ManageSnippetCardProps> = ({ snippet, i
 				__('Select %s', 'code-snippets'),
 				getSnippetDisplayName(snippet)
 			)}
-			cornerControls={<ActivateColumn snippet={snippet} />}
+			footer={<CardFooterActions snippet={snippet} />}
 		>
 			<div className="card-inner">
-				<h3><SnippetName snippet={snippet} /></h3>
-
-				<div className="snippet-card-meta">
+				<div className="snippet-card-header">
+					<ActivateColumn snippet={snippet} />
 					<TypeColumn snippet={snippet} />
-
-					<span className="snippet-card-modified">
-						<em>{__('Last Modified: ', 'code-snippets')}</em>
-						<DateColumn snippet={snippet} />
-					</span>
-
-					{0 < snippet.tags.length && (
-						<span className="snippet-card-tags">
-							<span className="dashicons dashicons-tag" aria-hidden="true"></span>
-							<TagsColumn snippet={snippet} />
-						</span>)}
-
+					<h3><SnippetName snippet={snippet} /></h3>
 					<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}
+
+						<CardModifiedDate snippet={snippet} />
+					</div>
+					: null}
+
 				{snippet.desc
 					? <div className="snippet-description-content"><RawHTML>{snippet.desc}</RawHTML></div>
 					: null}
 			</div>
-
-			<CardActionsArea snippet={snippet} />
 		</SnippetCard>
 	)
 }
diff --git a/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx b/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
index f55ce5689..9bf2d4298 100644
--- a/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/RowActions.tsx
@@ -32,6 +32,7 @@ const PreviewLink: React.FC<RowActionsProps> = ({ snippet }) => {
 				type={getSnippetType(snippet)}
 				isOpen={isPreviewOpen}
 				setIsOpen={setIsPreviewOpen}
+				snippet={snippet}
 			/>
 		</>
 	)
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
index 8abb09c9b..7a9d80cbd 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -1,6 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n'
 import { createInterpolateElement } from '@wordpress/element'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import classnames from 'classnames'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
 import { useSnippetView } from '../../../hooks/useSnippetView'
@@ -90,6 +90,8 @@ const SafeModeNotice = () =>
 		</Notice>
 		: null
 
+// Counts render immediately from the values localized with the page, then
+// switch to live values derived from the snippets list once it has loaded.
 const useSnippetTypeCounts = () => {
 	const { snippetsList } = useSnippetsList()
 
@@ -106,14 +108,23 @@ const useSnippetTypeCounts = () => {
 		[countedSnippets]
 	)
 
-	return { countedSnippets, typeCounts }
+	const localized = window.CODE_SNIPPETS_MANAGE?.typeCounts
+
+	const getCount = useCallback(
+		(type?: SnippetType) => countedSnippets
+			? type ? typeCounts?.get(type) ?? 0 : countedSnippets.length
+			: localized?.[type ?? 'all'],
+		[countedSnippets, typeCounts, localized]
+	)
+
+	return { getCount }
 }
 
 const SnippetsTableInner = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 	const { snippetView, setSnippetView } = useSnippetView()
 	const { currentType } = useSnippetsFilters()
-	const { countedSnippets, typeCounts } = useSnippetTypeCounts()
+	const { getCount } = useSnippetTypeCounts()
 
 	return (
 		<>
@@ -123,14 +134,14 @@ const SnippetsTableInner = () => {
 			>
 				<ul>
 					<SnippetTypeTab
-						count={countedSnippets?.length}
+						count={getCount()}
 						setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
 					/>
 					{SNIPPET_TYPES.map(type =>
 						<SnippetTypeTab
 							key={type}
 							type={type}
-							count={countedSnippets && (typeCounts?.get(type) ?? 0)}
+							count={getCount(type)}
 							setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
 						/>)}
 				</ul>
diff --git a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
index a509d2058..b53f91039 100644
--- a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
@@ -1,7 +1,7 @@
 import { humanTimeDiff } from '@wordpress/date'
 import { RawHTML } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
-import React, { Fragment, useState } from 'react'
+import React, { Fragment } from 'react'
 import { useSnippetsAPI } from '../../../hooks/useSnippetsAPI'
 import { useSnippetsList } from '../../../hooks/useSnippetsList'
 import { handleUnknownError } from '../../../utils/errors'
@@ -9,6 +9,7 @@ import { isNetworkAdmin } from '../../../utils/screen'
 import { getSnippetDisplayName, getSnippetEditUrl, getSnippetType } from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { Badge } from '../../common/Badge'
+import { SnippetPriorityInput } from '../../common/SnippetPriorityInput'
 import { Tooltip } from '../../common/Tooltip'
 import { RowActions } from './RowActions'
 import { useFilteredSnippets } from './WithFilteredSnippetsContext'
@@ -97,8 +98,16 @@ export const SnippetExtraIcons: React.FC<ColumnProps> = ({ snippet }) =>
 export const SnippetName: React.FC<ColumnProps> = ({ snippet }) =>
 	<>
 		{!snippet.trashed && (isNetworkAdmin() || !snippet.network || window.CODE_SNIPPETS_MANAGE?.hasNetworkCap)
-			? <a href={getSnippetEditUrl(snippet)} className="snippet-name">{getSnippetDisplayName(snippet)}</a>
-			: getSnippetDisplayName(snippet)}
+			? <a
+				href={getSnippetEditUrl(snippet)}
+				className="snippet-name"
+				title={getSnippetDisplayName(snippet)}
+			>
+				{getSnippetDisplayName(snippet)}
+			</a>
+			: <span className="snippet-name" title={getSnippetDisplayName(snippet)}>
+				{getSnippetDisplayName(snippet)}
+			</span>}
 
 		{snippet.shared_network && <span className="badge">{__('Shared on Network', 'code-snippets')}</span>}
 	</>
@@ -145,42 +154,8 @@ export const DateColumn: React.FC<ColumnProps> = ({ snippet }) =>
 		</span>
 		: <>&#8212;</>
 
-export const PriorityColumn: React.FC<ColumnProps> = ({ snippet }) => {
-	const [value, setValue] = useState(snippet.priority)
-	const snippetsAPI = useSnippetsAPI()
-	const { refreshSnippetsList } = useSnippetsList()
-	const id = `snippet-${snippet.id}-priority`
-
-	const handleUpdate = () => {
-		snippetsAPI.update({ ...snippet, priority: value })
-			.then(response => {
-				if (response.id === snippet.id) {
-					setValue(response.priority)
-				}
-			})
-			.then(refreshSnippetsList)
-			.catch(handleUnknownError)
-	}
-
-	return (
-		<form onSubmit={event => {
-			event.preventDefault()
-			handleUpdate()
-		}}>
-			<input
-				id={id}
-				type="number"
-				className="snippet-priority"
-				value={value}
-				step="1"
-				onBlur={handleUpdate}
-				aria-label={__('Snippet priority', 'code-snippets')}
-				onChange={event => setValue(Number(event.target.value))}
-				disabled={snippet.locked || snippet.trashed}
-			/>
-		</form>
-	)
-}
+export const PriorityColumn: React.FC<ColumnProps> = ({ snippet }) =>
+	<SnippetPriorityInput snippet={snippet} />
 
 const baseTableColumns: ListTableColumn<Snippet>[] = [
 	{
diff --git a/src/js/components/common/DeleteButton.tsx b/src/js/components/common/DeleteButton.tsx
index 61f893706..2339ca3c3 100644
--- a/src/js/components/common/DeleteButton.tsx
+++ b/src/js/components/common/DeleteButton.tsx
@@ -4,6 +4,7 @@ import { createInterpolateElement } from '@wordpress/element'
 import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
 import { Button } from './Button'
 import { ConfirmDialog } from './ConfirmDialog'
+import type { ReactNode } from 'react'
 import type { Snippet } from '../../types/Snippet'
 import type { ButtonProps } from './Button'
 
@@ -31,21 +32,30 @@ const PermanentDeleteConfirmMessage = () =>
 		<p>{__('This action cannot be undone.', 'code-snippets')}</p>
 	</>
 
-export interface DeleteButtonProps extends ButtonProps {
+export interface UseDeleteSnippetOptions {
 	snippet: Snippet
 	setIsWorking?: (isWorking: boolean) => void
 	onSuccess?: () => Promise<void> | void
 	onError?: (error: unknown) => void
 }
 
-export const DeleteButton: React.FC<DeleteButtonProps> = ({
+export interface UseDeleteSnippetResult {
+	requestDelete: () => void
+	confirmDialog: ReactNode
+}
+
+/**
+ * Deletion flow shared by every control that removes a snippet: active and
+ * trashed snippets prompt for confirmation before the API call, while
+ * inactive snippets are trashed immediately. Callers must render the returned
+ * dialog somewhere that stays mounted while the confirmation is open.
+ */
+export const useDeleteSnippet = ({
 	snippet,
-	onSuccess,
-	onError,
-	className = 'delete-button',
 	setIsWorking,
-	...buttonProps
-}) => {
+	onSuccess,
+	onError
+}: UseDeleteSnippetOptions): UseDeleteSnippetResult => {
 	const snippetsAPI = useSnippetsAPI()
 	const [isDialogOpen, setIsDialogOpen] = useState(false)
 
@@ -58,7 +68,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
 			.finally(() => setIsWorking?.(false))
 	}
 
-	const handleButtonClick = () => {
+	const requestDelete = () => {
 		if (snippet.active || snippet.trashed) {
 			setIsDialogOpen(true)
 		} else {
@@ -66,25 +76,51 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
 		}
 	}
 
+	const confirmDialog =
+		<ConfirmDialog
+			open={isDialogOpen}
+			title={__('Are you sure?', 'code-snippets')}
+			confirmLabel={snippet.trashed ? __('Delete', 'code-snippets') : __('Trash', 'code-snippets')}
+			confirmButtonClassName="is-destructive"
+			onCancel={() => setIsDialogOpen(false)}
+			onConfirm={() => {
+				setIsDialogOpen(false)
+				handleDelete()
+			}}
+		>
+			{snippet.trashed ? <PermanentDeleteConfirmMessage /> : <TrashActiveConfirmMessage />}
+		</ConfirmDialog>
+
+	return { requestDelete, confirmDialog }
+}
+
+export interface DeleteButtonProps
+	extends Omit<ButtonProps, 'onError'>, Omit<UseDeleteSnippetOptions, 'snippet'> {
+	snippet: Snippet
+}
+
+export const DeleteButton: React.FC<DeleteButtonProps> = ({
+	snippet,
+	onSuccess,
+	onError,
+	className = 'delete-button',
+	setIsWorking,
+	...buttonProps
+}) => {
+	const { requestDelete, confirmDialog } = useDeleteSnippet({
+		snippet,
+		setIsWorking,
+		onSuccess,
+		onError
+	})
+
 	return (
 		<>
-			<Button className={className} {...buttonProps} onClick={handleButtonClick}>
+			<Button className={className} {...buttonProps} onClick={requestDelete}>
 				{snippet.trashed ? __('Delete Permanently', 'code-snippets') : __('Trash', 'code-snippets')}
 			</Button>
 
-			<ConfirmDialog
-				open={isDialogOpen}
-				title={__('Are you sure?', 'code-snippets')}
-				confirmLabel={snippet.trashed ? __('Delete', 'code-snippets') : __('Trash', 'code-snippets')}
-				confirmButtonClassName="is-destructive"
-				onCancel={() => setIsDialogOpen(false)}
-				onConfirm={() => {
-					setIsDialogOpen(false)
-					handleDelete()
-				}}
-			>
-				{snippet.trashed ? <PermanentDeleteConfirmMessage /> : <TrashActiveConfirmMessage />}
-			</ConfirmDialog>
+			{confirmDialog}
 		</>
 	)
 }
diff --git a/src/js/components/common/KebabMenu.tsx b/src/js/components/common/KebabMenu.tsx
index d2fd93f71..6fc8ce4ef 100644
--- a/src/js/components/common/KebabMenu.tsx
+++ b/src/js/components/common/KebabMenu.tsx
@@ -47,10 +47,9 @@ export const KebabMenuItem: React.FC<PropsWithChildren<KebabMenuItemProps>> = ({
 	const { closeMenu } = useKebabMenu()
 
 	return (
-		<li role="presentation">
+		<li>
 			<button
 				type="button"
-				role="menuitem"
 				className={classnames(
 					'kebab-menu-item',
 					{ 'kebab-menu-item-destructive': destructive },
@@ -72,7 +71,7 @@ export const KebabMenuItem: React.FC<PropsWithChildren<KebabMenuItemProps>> = ({
 }
 
 export const KebabMenuDivider: React.FC = () =>
-	<li role="separator" aria-orientation="horizontal" className="kebab-menu-divider" />
+	<li aria-hidden="true" className="kebab-menu-divider" />
 
 export interface KebabMenuRowProps {
 	className?: string
@@ -82,7 +81,7 @@ export const KebabMenuRow: React.FC<PropsWithChildren<KebabMenuRowProps>> = ({
 	className,
 	children
 }) =>
-	<li role="presentation" className={classnames('kebab-menu-row', className)}>
+	<li className={classnames('kebab-menu-row', className)}>
 		{children}
 	</li>
 
@@ -122,9 +121,7 @@ const usePopoverPlacement = ({
 			const trigger = triggerRef.current?.getBoundingClientRect()
 			setIsFlipped(popover.bottom > window.innerHeight && (trigger?.top ?? 0) > popover.height)
 
-			const firstItem = popoverRef.current.querySelector<HTMLElement>(
-				'[role="menuitem"]:not(:disabled)'
-			)
+			const firstItem = popoverRef.current.querySelector<HTMLElement>('button:not(:disabled)')
 			;(firstItem ?? popoverRef.current).focus()
 		} else {
 			setIsFlipped(false)
@@ -169,20 +166,6 @@ const handlePopoverKeyDown = (
 
 		return
 	}
-
-	if ('Tab' !== event.key) {
-		return
-	}
-
-	if (0 === focusable.length) {
-		event.preventDefault()
-	} else if (event.shiftKey && 0 >= currentIndex) {
-		event.preventDefault()
-		focusable[focusable.length - 1].focus()
-	} else if (!event.shiftKey && (-1 === currentIndex || currentIndex === focusable.length - 1)) {
-		event.preventDefault()
-		focusable[0].focus()
-	}
 }
 
 const usePopoverDismissal = ({
@@ -203,14 +186,22 @@ const usePopoverDismissal = ({
 			}
 		}
 
+		const handleFocusIn = (event: FocusEvent) => {
+			if (event.target instanceof Node && !containerRef.current?.contains(event.target)) {
+				setIsOpen(false)
+			}
+		}
+
 		const handleKeyDown = (event: KeyboardEvent) =>
 			handlePopoverKeyDown(event, { closeMenu, popoverRef })
 
 		document.addEventListener('mousedown', handlePointerDown)
+		document.addEventListener('focusin', handleFocusIn)
 		document.addEventListener('keydown', handleKeyDown)
 
 		return () => {
 			document.removeEventListener('mousedown', handlePointerDown)
+			document.removeEventListener('focusin', handleFocusIn)
 			document.removeEventListener('keydown', handleKeyDown)
 		}
 	}, [isOpen, setIsOpen, closeMenu, containerRef, popoverRef])
@@ -245,7 +236,6 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ label, className, children
 				type="button"
 				className="kebab-menu-trigger"
 				aria-label={label}
-				aria-haspopup="true"
 				aria-expanded={isOpen}
 				aria-controls={menuId}
 				onClick={() => setIsOpen(open => !open)}
@@ -258,7 +248,6 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ label, className, children
 					<ul
 						ref={popoverRef}
 						id={menuId}
-						role="menu"
 						tabIndex={-1}
 						aria-label={label}
 						className={classnames('kebab-menu-popover', { 'kebab-menu-popover-top': isFlipped })}
diff --git a/src/js/components/common/SnippetCard.tsx b/src/js/components/common/SnippetCard.tsx
index e00748325..4ce2a6210 100644
--- a/src/js/components/common/SnippetCard.tsx
+++ b/src/js/components/common/SnippetCard.tsx
@@ -7,50 +7,54 @@ export interface SnippetCardProps {
 	isSelected?: boolean
 	onSelectedChange?: (isSelected: boolean) => void
 	selectionLabel?: string
-	cornerControls?: ReactNode
 	footer?: ReactNode
+	footerStatus?: ReactNode
 	children: ReactNode
 }
 
 /**
  * Shared card chrome for displaying a snippet in a card grid: border, inner
- * padding, footer strip, and a top corner holding optional extra controls
- * (such as an activation toggle) plus a selection checkbox for bulk actions.
- * Both cloud search results and local snippet cards render inside this shell
- * so the two views stay visually consistent.
+ * padding, footer strip, and a top corner holding a selection checkbox for
+ * bulk actions.
+ * The footer is split into a status region at the inline start and an actions
+ * region at the inline end; the status region is always rendered so actions
+ * stay end-aligned even when no status is provided. Both cloud search results
+ * and local snippet cards render inside this shell so the two views stay
+ * visually consistent.
  */
 export const SnippetCard: React.FC<SnippetCardProps> = ({
 	className,
 	isSelected = false,
 	onSelectedChange,
 	selectionLabel,
-	cornerControls,
 	footer,
+	footerStatus,
 	children
 }) =>
 	<li
 		className={classnames('code-snippets-card', className, {
 			'is-selectable': undefined !== onSelectedChange,
-			'is-selected': undefined !== onSelectedChange && isSelected,
-			'has-corner-controls': undefined !== cornerControls
+			'is-selected': undefined !== onSelectedChange && isSelected
 		})}
 	>
-		{undefined !== onSelectedChange || undefined !== cornerControls
+		{undefined !== onSelectedChange
 			? <div className="snippet-card-corner">
-				{cornerControls}
-				{onSelectedChange
-					? <input
-						type="checkbox"
-						className="snippet-card-select"
-						checked={isSelected}
-						aria-label={selectionLabel}
-						onChange={event => onSelectedChange(event.target.checked)}
-					/>
-					: null}
+				<input
+					type="checkbox"
+					className="snippet-card-select"
+					checked={isSelected}
+					aria-label={selectionLabel}
+					onChange={event => onSelectedChange(event.target.checked)}
+				/>
 			</div>
 			: null}
 
 		{children}
 
-		{footer ? <footer>{footer}</footer> : null}
+		{undefined !== footer || undefined !== footerStatus
+			? <footer>
+				<div className="snippet-card-footer-status">{footerStatus}</div>
+				<div className="snippet-card-footer-actions">{footer}</div>
+			</footer>
+			: null}
 	</li>
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 4f0ed20a9..dc5b4c5e8 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -1,9 +1,31 @@
-import React, { useEffect, useRef } from 'react'
 import { Modal } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
+import React, { useEffect, useRef, useState } from 'react'
+import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
+import { useSnippetsList } from '../../hooks/useSnippetsList'
+import { handleUnknownError } from '../../utils/errors'
+import { downloadSnippetExportFile } from '../../utils/files'
+import {
+	canModifySnippet,
+	cloneSnippetObject,
+	getSnippetEditUrl
+} from '../../utils/snippets/snippets'
 import { Badge } from './Badge'
-import type { EditorFromTextArea } from 'codemirror'
-import type { SnippetType } from '../../types/Snippet'
+import { Button } from './Button'
+import { useDeleteSnippet } from './DeleteButton'
+import type { EditorConfiguration, EditorFromTextArea } from 'codemirror'
+import type { ReactNode } from 'react'
+import type { Snippet, SnippetType } from '../../types/Snippet'
+
+export interface PreviewWorkingState {
+	isWorking: boolean
+	beginWorking: () => boolean
+	finishWorking: () => void
+}
+
+type PreviewExtraActions = ReactNode | ((working: PreviewWorkingState) => ReactNode)
+
+const CODE_PREVIEW_LABEL = __('Snippet code preview', 'code-snippets')
 
 export interface SnippetPreviewModalProps {
 	title: string
@@ -11,9 +33,10 @@ export interface SnippetPreviewModalProps {
 	type: SnippetType
 	isOpen: boolean
 	setIsOpen: (isOpen: boolean) => void
+	snippet?: Snippet
+	extraActions?: PreviewExtraActions
 }
 
-// Mirrors the type-to-mode mapping used by the live editor in SnippetTypeInput.
 const EDITOR_MODES: Record<string, string> = {
 	css: 'text/css',
 	js: 'javascript',
@@ -21,17 +44,214 @@ const EDITOR_MODES: Record<string, string> = {
 	html: 'application/x-httpd-php'
 }
 
+const getPreviewEditorSettings = (type: string): EditorConfiguration => ({
+	extraKeys: {
+		'Tab': false,
+		'Shift-Tab': false
+	},
+	readOnly: true,
+	lineNumbers: true,
+	theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
+	mode: EDITOR_MODES[type] ?? EDITOR_MODES.php,
+	screenReaderLabel: CODE_PREVIEW_LABEL
+})
+
+interface SnippetPreviewActionsProps {
+	snippet: Snippet
+	closeModal: () => void
+	extraActions?: PreviewExtraActions
+}
+
+interface SnippetPreviewButtonsProps extends SnippetPreviewActionsProps {
+	requestDelete: () => void
+	isWorking: boolean
+	beginWorking: () => boolean
+	finishWorking: () => void
+}
+
+const usePreviewActionHandlers = ({
+	snippet,
+	closeModal,
+	beginWorking,
+	finishWorking
+}: Omit<SnippetPreviewButtonsProps, 'requestDelete' | 'isWorking'>) => {
+	const api = useSnippetsAPI()
+	const { refreshSnippetsList } = useSnippetsList()
+	const handleClone = () => {
+		if (!beginWorking()) {
+			return
+		}
+
+		api.create(cloneSnippetObject(snippet))
+			.then(refreshSnippetsList)
+			.then(() => {
+				finishWorking()
+				closeModal()
+			})
+			.catch((error: unknown) => {
+				finishWorking()
+				handleUnknownError(error)
+			})
+	}
+	const handleExport = () => {
+		if (!beginWorking()) {
+			return
+		}
+
+		api.export(snippet)
+			.then(response => downloadSnippetExportFile(response, snippet))
+			.catch(handleUnknownError)
+			.finally(finishWorking)
+	}
+
+	return { handleClone, handleExport }
+}
+
+const SnippetPreviewButtons: React.FC<SnippetPreviewButtonsProps> = ({
+	snippet,
+	closeModal,
+	requestDelete,
+	isWorking,
+	beginWorking,
+	finishWorking,
+	extraActions
+}) => {
+	const canModify = canModifySnippet(snippet)
+	const actionOptions = { snippet, closeModal, beginWorking, finishWorking }
+	const { handleClone, handleExport } = usePreviewActionHandlers(actionOptions)
+
+	return (
+		<div className="code-snippets-preview-modal__buttons">
+			<a className="button button-primary" href={getSnippetEditUrl(snippet)}>
+				{snippet.locked || !canModify ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
+			</a>
+
+			{canModify
+				? <Button
+					secondary
+					disabled={isWorking}
+					onClick={handleClone}
+				>
+					{__('Clone', 'code-snippets')}
+				</Button>
+				: null}
+
+			{'function' === typeof extraActions
+				? extraActions({ isWorking, beginWorking, finishWorking })
+				: extraActions}
+			<Button
+				secondary
+				disabled={isWorking}
+				onClick={handleExport}
+			>
+				{__('Export', 'code-snippets')}
+			</Button>
+
+			{snippet.locked || !canModify
+				? null
+				: <Button
+					link
+					className="code-snippets-preview-modal__trash"
+					disabled={isWorking}
+					onClick={requestDelete}
+				>
+					{__('Trash', 'code-snippets')}
+				</Button>}
+		</div>
+	)
+}
+
+const useWorkingState = () => {
+	const [isWorking, setIsWorking] = useState(false)
+	const isWorkingRef = useRef(false)
+	const updateWorking = (value: boolean) => {
+		isWorkingRef.current = value
+		setIsWorking(value)
+	}
+	const beginWorking = () => {
+		if (isWorkingRef.current) {
+			return false
+		}
+
+		updateWorking(true)
+		return true
+	}
+
+	return {
+		isWorking,
+		beginWorking,
+		finishWorking: () => updateWorking(false),
+		setIsWorking: updateWorking
+	}
+}
+
+/**
+ * Footer action bar for previews of local snippets. Requires the snippets API
+ * and snippets list contexts, so it is only rendered when the modal receives a
+ * full snippet object rather than bare title/code/type values.
+ */
+const SnippetPreviewActions: React.FC<SnippetPreviewActionsProps> = ({
+	snippet,
+	closeModal,
+	extraActions
+}) => {
+	const { refreshSnippetsList } = useSnippetsList()
+	const { isWorking, beginWorking, finishWorking, setIsWorking } = useWorkingState()
+	const { requestDelete, confirmDialog } = useDeleteSnippet({
+		snippet,
+		setIsWorking,
+		onSuccess: () => {
+			closeModal()
+			return refreshSnippetsList()
+		},
+		onError: handleUnknownError
+	})
+
+	return (
+		<div className="code-snippets-preview-modal__footer">
+			<SnippetPreviewButtons
+				snippet={snippet}
+				closeModal={closeModal}
+				requestDelete={requestDelete}
+				isWorking={isWorking}
+				beginWorking={beginWorking}
+				finishWorking={finishWorking}
+				extraActions={extraActions}
+			/>
+
+			<div className="code-snippets-preview-modal__priority">
+				<span>{__('Priority', 'code-snippets')}</span>
+				<span className="code-snippets-preview-modal__priority-value">{snippet.priority}</span>
+			</div>
+
+			{confirmDialog}
+		</div>
+	)
+}
+
+/**
+ * The minimum-supported WordPress Modal (5.5–6.3) has no headerActions prop,
+ * so the badge renders in the content and CSS moves it into the header area.
+ */
+const PreviewTypeBadge: React.FC<{ type: SnippetType }> = ({ type }) =>
+	<div className="code-snippets-preview-modal__badge">
+		<Badge name={type} />
+	</div>
+
 /**
  * Modal for quickly viewing a snippet's code in a read-only CodeMirror editor,
  * without navigating to the edit page. Shared between local snippets and cloud
- * snippet previews.
+ * snippet previews. Passing a full snippet object adds a footer of snippet
+ * actions, which requires the snippets API and snippets list contexts.
  */
 export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 	title,
 	code,
 	type,
 	isOpen,
-	setIsOpen
+	setIsOpen,
+	snippet,
+	extraActions
 }) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
 
@@ -40,22 +260,15 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			return undefined
 		}
 
-		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
-			codemirror: {
-				readOnly: true,
-				lineNumbers: true,
-				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
-				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
-			}
-		})
+		const instance = window.wp.codeEditor.initialize(
+			textareaRef.current,
+			{ codemirror: getPreviewEditorSettings(type) }
+		)
 
 		// CodeMirror hides the labelled source textarea and creates an unlabelled
 		// internal input. The screenReaderLabel option only exists from CodeMirror
 		// 5.59, while WordPress 5.5 ships 5.29, so label the input directly.
-		instance.codemirror.getInputField().setAttribute(
-			'aria-label',
-			__('Snippet code preview', 'code-snippets')
-		)
+		instance.codemirror.getInputField().setAttribute('aria-label', CODE_PREVIEW_LABEL)
 
 		return () => {
 			(instance.codemirror as EditorFromTextArea).toTextArea()
@@ -68,18 +281,23 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			onRequestClose={() => setIsOpen(false)}
 			title={title}
 		>
-			{/* The minimum-supported WordPress Modal (5.5–6.3) has no headerActions
-			  * prop, so the badge renders in the content and CSS moves it into the
-			  * header area. */}
-			<div className="code-snippets-preview-modal__badge">
-				<Badge name={type} />
+			<PreviewTypeBadge type={type} />
+			<div className="code-snippets-preview-modal__editor">
+				<textarea
+					ref={textareaRef}
+					readOnly
+					aria-label={CODE_PREVIEW_LABEL}
+					defaultValue={`${'php' === type ? '<?php\n\n' : ''}${code}`}
+				/>
 			</div>
-			<textarea
-				ref={textareaRef}
-				readOnly
-				aria-label={__('Snippet code preview', 'code-snippets')}
-				defaultValue={`${'php' === type ? '<?php\n\n' : ''}${code}`}
-			/>
+
+			{snippet
+				? <SnippetPreviewActions
+					snippet={snippet}
+					extraActions={extraActions}
+					closeModal={() => setIsOpen(false)}
+				/>
+				: null}
 		</Modal>
 		: null
 }
diff --git a/src/js/components/common/SnippetPriorityInput.tsx b/src/js/components/common/SnippetPriorityInput.tsx
new file mode 100644
index 000000000..110b240a7
--- /dev/null
+++ b/src/js/components/common/SnippetPriorityInput.tsx
@@ -0,0 +1,60 @@
+import { __ } from '@wordpress/i18n'
+import React, { useState } from 'react'
+import { useSnippetsAPI } from '../../hooks/useSnippetsAPI'
+import { useSnippetsList } from '../../hooks/useSnippetsList'
+import { handleUnknownError } from '../../utils/errors'
+import type { Snippet } from '../../types/Snippet'
+
+export interface SnippetPriorityInputProps {
+	snippet: Snippet
+	inputId?: string
+}
+
+/**
+ * Inline number field for updating a snippet's priority, saving on blur or
+ * form submission. Shared between the snippets list table, card kebab menu,
+ * and preview modal. Pass `inputId` to keep element IDs unique when the same
+ * snippet is rendered in more than one place at once.
+ */
+export const SnippetPriorityInput: React.FC<SnippetPriorityInputProps> = ({ snippet, inputId }) => {
+	const [value, setValue] = useState(snippet.priority)
+	const snippetsAPI = useSnippetsAPI()
+	const { refreshSnippetsList } = useSnippetsList()
+
+	const handleUpdate = () => {
+		// The kebab menu can focus this input on open, so a blur without a
+		// real change must not trigger a write.
+		if (Number.isNaN(value) || value === snippet.priority) {
+			setValue(snippet.priority)
+			return
+		}
+
+		snippetsAPI.update({ ...snippet, priority: value })
+			.then(response => {
+				if (response.id === snippet.id) {
+					setValue(response.priority)
+				}
+			})
+			.then(refreshSnippetsList)
+			.catch(handleUnknownError)
+	}
+
+	return (
+		<form onSubmit={event => {
+			event.preventDefault()
+			handleUpdate()
+		}}>
+			<input
+				id={inputId ?? `snippet-${snippet.id}-priority`}
+				type="number"
+				className="snippet-priority"
+				value={value}
+				step="1"
+				onBlur={handleUpdate}
+				aria-label={__('Snippet priority', 'code-snippets')}
+				onChange={event => setValue(Number(event.target.value))}
+				disabled={snippet.locked || snippet.trashed}
+			/>
+		</form>
+	)
+}
diff --git a/src/js/components/common/cloud/CloudSnippetDownloadButton.tsx b/src/js/components/common/cloud/CloudSnippetDownloadButton.tsx
index b6a4a64b4..d3e9110fd 100644
--- a/src/js/components/common/cloud/CloudSnippetDownloadButton.tsx
+++ b/src/js/components/common/cloud/CloudSnippetDownloadButton.tsx
@@ -30,7 +30,7 @@ export const CloudSnippetDownloadButton: React.FC<CloudSnippetDownloadButtonProp
 	if (localSnippetId) {
 		return (
 			<a className="button button-primary" href={getSnippetEditUrl({ id: localSnippetId })} target="_blank" rel="noopener noreferrer">
-				{__('View', 'code-snippets')}
+				{__('Edit', 'code-snippets')}
 			</a>
 		)
 	}
diff --git a/src/js/hooks/useSubmitSnippet.tsx b/src/js/hooks/useSubmitSnippet.tsx
index 448f04bbd..827ec36d5 100644
--- a/src/js/hooks/useSubmitSnippet.tsx
+++ b/src/js/hooks/useSubmitSnippet.tsx
@@ -90,7 +90,7 @@ export interface UseSubmitSnippet {
 
 export const useSubmitSnippet = (): UseSubmitSnippet => {
 	const api = useSnippetsAPI()
-	const { setIsWorking, setCurrentNotice, setSnippet } = useSnippetForm()
+	const { acceptSnippet, setIsWorking, setCurrentNotice } = useSnippetForm()
 
 	const submitSnippet: UseSubmitSnippet['submitSnippet'] = useCallback(async (snippet, action) => {
 		setCurrentNotice(undefined)
@@ -132,7 +132,7 @@ export const useSubmitSnippet = (): UseSubmitSnippet => {
 			return undefined
 		}
 
-		setSnippet(result)
+		acceptSnippet(result)
 
 		if (result.code_error && SubmitSnippetAction.SAVE_AND_ACTIVATE === action) {
 			setCurrentNotice(getActivationErrorNotice(result))
@@ -146,7 +146,7 @@ export const useSubmitSnippet = (): UseSubmitSnippet => {
 		}
 
 		return result
-	}, [api, setIsWorking, setCurrentNotice, setSnippet])
+	}, [acceptSnippet, api, setIsWorking, setCurrentNotice])
 
 	return { submitSnippet }
 }
diff --git a/src/js/types/Window.ts b/src/js/types/Window.ts
index 01f9220ac..2c0eb5986 100644
--- a/src/js/types/Window.ts
+++ b/src/js/types/Window.ts
@@ -66,6 +66,7 @@ declare global {
 			hiddenColumns: string[]
 			truncateRowValues: number | string
 			snippetsPerPage: number
+			typeCounts?: Record<string, number>
 			cloudSearchPerPage: number
 			isSafeModeActive: boolean
 			bulkDownloadNonce: string
diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index d88325027..4fba66697 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -59,7 +59,7 @@ class Manage_Menu extends Admin_Menu {
 	 */
 	public function __construct() {
 		$this->screen_options = new Manage_Menu_Screen_Options();
-		$this->assets = new Manage_Menu_Assets( $this->screen_options );
+		$this->assets = new Manage_Menu_Assets( $this->screen_options, new Snippet_Type_Counter() );
 		$this->bulk_download = new Manage_Menu_Bulk_Download();
 		$this->registration = new Manage_Menu_Registration();
 
diff --git a/src/php/Admin/Menus/Manage_Menu_Assets.php b/src/php/Admin/Menus/Manage_Menu_Assets.php
index 7c76349ff..098674c53 100644
--- a/src/php/Admin/Menus/Manage_Menu_Assets.php
+++ b/src/php/Admin/Menus/Manage_Menu_Assets.php
@@ -24,13 +24,25 @@ class Manage_Menu_Assets {
 	 */
 	private Manage_Menu_Screen_Options $screen_options;
 
+	/**
+	 * Snippet type counter.
+	 *
+	 * @var Snippet_Type_Counter
+	 */
+	private Snippet_Type_Counter $type_counter;
+
 	/**
 	 * Class constructor.
 	 *
 	 * @param Manage_Menu_Screen_Options $screen_options Manage menu Screen Options.
+	 * @param Snippet_Type_Counter       $type_counter   Snippet type counter.
 	 */
-	public function __construct( Manage_Menu_Screen_Options $screen_options ) {
+	public function __construct(
+		Manage_Menu_Screen_Options $screen_options,
+		Snippet_Type_Counter $type_counter
+	) {
 		$this->screen_options = $screen_options;
+		$this->type_counter = $type_counter;
 	}
 
 	/**
@@ -71,6 +83,7 @@ public function enqueue( array $script_dependencies, array $style_dependencies )
 			'bulkDownloadNonce'    => wp_create_nonce( 'code_snippets_bulk_download' ),
 			'supportsZipDownloads' => class_exists( 'ZipArchive' ),
 			'editorTheme'          => get_setting( 'editor', 'theme' ),
+			'typeCounts'           => $this->type_counter->count(),
 		];
 
 		if ( $this->screen_options->is_manage_table_view() ) {
diff --git a/src/php/Admin/Menus/Snippet_Type_Counter.php b/src/php/Admin/Menus/Snippet_Type_Counter.php
new file mode 100644
index 000000000..6dbbc892c
--- /dev/null
+++ b/src/php/Admin/Menus/Snippet_Type_Counter.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Model\Snippet;
+use function Code_Snippets\code_snippets;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Counts stored snippets by their editor type.
+ */
+class Snippet_Type_Counter {
+
+	/**
+	 * Count non-trashed snippets by type.
+	 *
+	 * @return array<string, int> Map of type name to snippet count, including 'all'.
+	 */
+	public function count(): array {
+		global $wpdb;
+		$table = code_snippets()->db->get_table_name();
+
+		// The table name comes from the plugin database service and cannot be parameterized.
+		// phpcs:disable WordPress.DB.DirectDatabaseQuery.DirectQuery
+		// phpcs:disable WordPress.DB.DirectDatabaseQuery.NoCaching
+		// phpcs:disable WordPress.DB.PreparedSQL.InterpolatedNotSafe
+		$results = $wpdb->get_results( "SELECT scope, COUNT(*) AS count FROM $table WHERE active >= 0 GROUP BY scope" );
+		// phpcs:enable
+
+		$counts = [ 'all' => 0 ];
+
+		foreach ( $results as $row ) {
+			$type = Snippet::get_type_from_scope( $row->scope );
+			$counts[ $type ] = ( $counts[ $type ] ?? 0 ) + (int) $row->count;
+			$counts['all'] += (int) $row->count;
+		}
+
+		return $counts;
+	}
+}
diff --git a/tests/e2e/code-snippets-edit.spec.ts b/tests/e2e/code-snippets-edit.spec.ts
index 389b85c9d..1f48840b5 100644
--- a/tests/e2e/code-snippets-edit.spec.ts
+++ b/tests/e2e/code-snippets-edit.spec.ts
@@ -83,6 +83,66 @@ test.describe('Code Snippets Admin', () => {
 		await helper.cleanupSnippet(snippetName)
 	})
 
+	test('Back navigation confirms before discarding unsaved changes', async ({ page }) => {
+		const snippetName = SnippetsTestHelper.makeUniqueSnippetName()
+		await helper.clickAddNewSnippet()
+		await helper.fillSnippetForm({
+			name: snippetName,
+			code: "add_filter('show_admin_bar', '__return_false');"
+		})
+		await helper.saveSnippet()
+		await expect(page).toHaveURL(/page=edit-snippet/)
+
+		const editedName = `${snippetName} edited`
+		await page.locator('#title').fill(editedName)
+		page.once('dialog', async dialog => {
+			expect(dialog.type()).toBe('beforeunload')
+			await dialog.dismiss()
+		})
+		await page.evaluate(() => window.history.back())
+
+		await expect(page).toHaveURL(/page=edit-snippet/)
+		await expect(page.locator('#title')).toHaveValue(editedName)
+
+		page.once('dialog', async dialog => {
+			expect(dialog.type()).toBe('beforeunload')
+			await dialog.accept()
+		})
+		await page.evaluate(() => window.history.back())
+		await expect(page).toHaveURL(/page=snippets/)
+
+		await helper.cleanupSnippet(snippetName)
+	})
+
+	test('Accepted in-page Back navigation shows one confirmation', async ({ page }) => {
+		const snippetName = SnippetsTestHelper.makeUniqueSnippetName()
+		await helper.createSnippet({
+			name: snippetName,
+			code: "add_filter('show_admin_bar', '__return_false');"
+		})
+		await helper.openSnippet(snippetName)
+
+		await page.locator('a.page-title-action').filter({ hasText: 'Add New' }).click()
+		await expect(page).toHaveURL(/page=add-snippet/)
+		await page.locator('#title').fill(`${snippetName} draft`)
+
+		const dialogs: { message: string, type: string }[] = []
+		page.on('dialog', async dialog => {
+			dialogs.push({ message: dialog.message(), type: dialog.type() })
+			await dialog.accept()
+		})
+
+		await page.evaluate(() => window.history.back())
+		await expect(page).toHaveURL(/page=edit-snippet/)
+		await expect(page.locator('#title')).toHaveValue(snippetName)
+
+		expect(dialogs).toHaveLength(1)
+		expect(dialogs[0].type).toBe('confirm')
+		expect(dialogs[0].message).toContain('unsaved changes')
+
+		await helper.cleanupSnippet(snippetName)
+	})
+
 	test('Shows an error notice when activation fails after saving', async ({ page }) => {
 		const snippetName = SnippetsTestHelper.makeUniqueSnippetName()
 		await helper.clickAddNewSnippet()
diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts
index 5728f726f..ed8bd5f12 100644
--- a/tests/e2e/code-snippets-list.spec.ts
+++ b/tests/e2e/code-snippets-list.spec.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'fs'
 import { expect, test } from '@playwright/test'
 import { DEFAULT_E2E_SNIPPET_BASE_NAME, SnippetsTestHelper } from './helpers/SnippetsTestHelper'
 import { SELECTORS } from './helpers/constants'
-import type { Page } from '@playwright/test'
+import type { Page, Route } from '@playwright/test'
 
 test.describe('Code Snippets List Page Actions', () => {
 	let helper: SnippetsTestHelper
@@ -39,6 +39,39 @@ test.describe('Code Snippets List Page Actions', () => {
 		await expect(search.getByRole('button', { name: 'Search' })).toHaveCount(0)
 	})
 
+	test('Card action popovers let keyboard focus continue through the document', async ({ page }) => {
+		await page.getByRole('button', { name: 'Card view' }).click()
+
+		try {
+			const card = page.locator('.snippets-card-grid .code-snippets-card').filter({ hasText: snippetName })
+			const trigger = card.getByRole('button', { name: `Actions for ${snippetName}` })
+			const popover = card.locator('.kebab-menu-popover')
+
+			await expect(card).toBeVisible()
+			await trigger.click()
+			await expect(popover).toBeVisible()
+			await popover.getByRole('button').last().focus()
+			await page.keyboard.press('Tab')
+
+			await expect(page.locator('#bulk-action-selector-bottom')).toBeFocused()
+			await expect(popover).toHaveCount(0)
+
+			await trigger.click()
+			await expect(popover).toBeVisible()
+			await popover.getByRole('button').first().focus()
+			await page.keyboard.press('Shift+Tab')
+
+			await expect(trigger).toBeFocused()
+			await expect(popover).toBeVisible()
+			await page.keyboard.press('Shift+Tab')
+
+			await expect(card.getByRole('link', { name: 'Edit' })).toBeFocused()
+			await expect(popover).toHaveCount(0)
+		} finally {
+			await page.getByRole('button', { name: 'Table view' }).click().catch(() => undefined)
+		}
+	})
+
 	test('Can toggle snippet activation from list page', async ({ page }) => {
 		const snippetRow = page
 			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
@@ -100,6 +133,63 @@ test.describe('Code Snippets List Page Actions', () => {
 		await expect(page.locator(SELECTORS.SNIPPETS_TABLE)).toBeVisible()
 	})
 
+	test('Can clone a snippet once from the preview modal', async ({ page }) => {
+		let createRequests = 0
+
+		const trackCreateRequest = async (route: Route) => {
+			const request = route.request()
+			const requestUrl = new URL(request.url())
+			const restRoute = requestUrl.searchParams.get('rest_route')
+			const isCreateRequest = 'POST' === request.method() && (
+				requestUrl.pathname.endsWith('/code-snippets/v1/snippets') ||
+				'/code-snippets/v1/snippets' === restRoute
+			)
+
+			if (isCreateRequest) {
+				createRequests += 1
+				await new Promise(resolve => setTimeout(resolve, 500))
+			}
+
+			await route.continue()
+		}
+
+		await page.route('**/wp-json/code-snippets/v1/snippets*', trackCreateRequest)
+		await page.route(/\/index\.php\?rest_route=/, trackCreateRequest)
+
+		const snippetRow = page
+			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
+			.first()
+		await snippetRow.getByRole('button', { name: 'Preview' }).click()
+
+		const previewModal = page.getByRole('dialog', { name: snippetName })
+		const cloneButton = previewModal.getByRole('button', { name: 'Clone' })
+		await cloneButton.click()
+		await expect(cloneButton).toBeDisabled()
+		await cloneButton.click({ force: true })
+
+		await expect(previewModal).toBeHidden()
+		expect(createRequests).toBe(1)
+		await helper.cleanupSnippet(`${snippetName} [CLONE]`)
+	})
+
+	test('Can trash a snippet from the preview modal', async ({ page }) => {
+		const snippetRow = page
+			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
+			.first()
+		await snippetRow.getByRole('button', { name: 'Preview' }).click()
+
+		const previewModal = page.getByRole('dialog', { name: snippetName })
+		await previewModal.getByRole('button', { name: 'Trash' }).click()
+
+		const confirmDialog = page.getByRole('dialog', { name: 'Are you sure?' })
+		await confirmDialog.getByRole('button', { name: 'Trash' }).click()
+		await expect(previewModal).toBeHidden()
+
+		await page.locator('a[href*="status=trashed"]').first().click()
+		await expect(page).toHaveURL(/status=trashed/)
+		await expect(page.locator(`${SELECTORS.SNIPPET_ROW}:has-text("${snippetName}")`).first()).toBeVisible()
+	})
+
 	test('Can delete snippet from list page', async ({ page }) => {
 		const snippetRow = page
 			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
@@ -361,6 +451,23 @@ test.describe('Manage table Screen Options', () => {
 		}
 	}
 
+	test('Card pagination initializes from the page URL', async ({ page }) => {
+		await SnippetsTestHelper.setSnippetsPerPage(1)
+
+		try {
+			await helper.navigateToSnippetsAdmin()
+			await page.getByRole('button', { name: 'Card view' }).click()
+			await expect(page.locator('.snippets-card-grid')).toBeVisible()
+
+			await page.goto('/wp-admin/admin.php?page=snippets&paged=2')
+			await expect(page.locator('.tablenav.top .current-page')).toHaveValue('2')
+			await expect(page.locator('.snippets-card-grid .code-snippets-card')).toHaveCount(1)
+		} finally {
+			await page.getByRole('button', { name: 'Table view' }).click().catch(() => undefined)
+			await SnippetsTestHelper.resetSnippetsPerPage()
+		}
+	})
+
 	test('Column visibility toggle hides and shows columns in real time', async ({ page }) => {
 		await openScreenOptions(page)
 
diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index 80c8b81f0..eed05a74a 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test'
 import { DEFAULT_E2E_SNIPPET_BASE_NAME, SnippetsTestHelper } from './helpers/SnippetsTestHelper'
 import { SELECTORS, TIMEOUTS } from './helpers/constants'
 import { wpCli } from './helpers/wpCli'
+import type { Locator, Page } from '@playwright/test'
 
 const MAXIMUM_FOCUS_ATTEMPTS = 10
 
@@ -24,6 +25,45 @@ const setSyntaxHighlighting = (enabled: boolean): Promise<string> => {
 test.describe('Code Snippets Preview Modal', () => {
 	let helper: SnippetsTestHelper
 	let snippetName: string
+	const openPreviewEditor = async (page: Page): Promise<Locator> => {
+		await setSyntaxHighlighting(true)
+		await helper.navigateToSnippetsAdmin()
+		await helper.filterSnippetsByName(snippetName)
+
+		const row = page
+			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
+			.first()
+		await expect(row).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+
+		await row.hover()
+		await row.locator(SELECTORS.PREVIEW_ACTION).first().click()
+
+		const editor = page.locator('.code-snippets-preview-modal .CodeMirror')
+		await expect(editor).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+		return editor
+	}
+	const focusPreviewEditor = async (page: Page, editor: Locator): Promise<void> => {
+		for (let attempt = 0; attempt < MAXIMUM_FOCUS_ATTEMPTS; attempt++) {
+			if (await editor.evaluate(element => element.classList.contains('CodeMirror-focused'))) {
+				break
+			}
+
+			await page.keyboard.press('Tab')
+		}
+
+		await expect(editor).toHaveClass(/CodeMirror-focused/)
+	}
+	// The CodeMirror input differs by inputStyle ('textarea' or 'contenteditable'
+	// depending on the WordPress version), so read the document and selection
+	// through the editor instance instead of locating the input element.
+	const readPreviewEditor = (editor: Locator, method: 'getSelection' | 'getValue'): Promise<string> =>
+		editor.evaluate((element, editorMethod) => {
+			const codeMirror = (<HTMLElement & {
+				CodeMirror?: Partial<Record<'getSelection' | 'getValue', () => string>>
+			}>element).CodeMirror
+
+			return codeMirror?.[editorMethod]?.() ?? ''
+		}, method)
 
 	test.beforeEach(async ({ page }) => {
 		helper = new SnippetsTestHelper(page)
@@ -74,53 +114,32 @@ test.describe('Code Snippets Preview Modal', () => {
 		})
 
 	test('Preview code can be selected with the keyboard without being changed', async ({ page }) => {
-		await setSyntaxHighlighting(true)
-		await helper.navigateToSnippetsAdmin()
-		await helper.filterSnippetsByName(snippetName)
-
-		const row = page
-			.locator(
-				`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`
-			)
-			.first()
-		await expect(row).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
-
-		await row.hover()
-		await row.locator(SELECTORS.PREVIEW_ACTION).first().click()
-
-		const preview = page.locator('.code-snippets-preview-modal')
-		const editor = preview.locator('.CodeMirror')
-
-		// The source textarea always precedes CodeMirror's injected wrapper in
-		// DOM order; CodeMirror's live input (labelled below) would also match
-		// a getByLabel lookup.
-		const codeArea = preview.locator('textarea').first()
-		const initialValue = await codeArea.inputValue()
-		await expect(editor).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+		const editor = await openPreviewEditor(page)
+		const initialValue = await readPreviewEditor(editor, 'getValue')
+		expect(initialValue).not.toBe('')
+		await focusPreviewEditor(page, editor)
+		await page.keyboard.press('Shift+ArrowRight')
 
-		// CodeMirror hides the labelled source textarea and focuses its own
-		// internal input; that input must carry its own accessible name.
-		await expect(editor.locator('[aria-label="Snippet code preview"]').first())
-			.toBeAttached()
+		await expect.poll(() => readPreviewEditor(editor, 'getSelection')).not.toBe('')
+		await expect.poll(() => readPreviewEditor(editor, 'getValue')).toBe(initialValue)
+	})
 
-		for (let attempt = 0; attempt < MAXIMUM_FOCUS_ATTEMPTS; attempt++) {
-			if (await editor.evaluate(element => element.classList.contains('CodeMirror-focused'))) {
-				break
-			}
+	test('Preview editor exposes its accessible label', async ({ page }) => {
+		const editor = await openPreviewEditor(page)
 
-			await page.keyboard.press('Tab')
-		}
+		await expect(editor.locator('[aria-label="Snippet code preview"]')).toBeAttached()
+	})
 
-		await expect(editor).toHaveClass(/CodeMirror-focused/)
-		await page.keyboard.press('Shift+ArrowRight')
+	for (const keypress of <const> ['Tab', 'Shift+Tab']) {
+		test(`${keypress} leaves the preview editor`, async ({ page }) => {
+			const editor = await openPreviewEditor(page)
+			await focusPreviewEditor(page, editor)
 
-		await expect.poll(() => editor.evaluate(element => {
-			const codeMirror = (<HTMLElement & {
-				CodeMirror?: { getSelection?: () => string }
-			}>element).CodeMirror
+			await page.keyboard.press(keypress)
 
-			return codeMirror?.getSelection?.() ?? ''
-		})).not.toBe('')
-		await expect(codeArea).toHaveValue(initialValue)
-	})
+			await expect.poll(
+				() => editor.evaluate(element => element.contains(document.activeElement))
+			).toBe(false)
+		})
+	}
 })
diff --git a/tests/e2e/helpers/SnippetsTestHelper.ts b/tests/e2e/helpers/SnippetsTestHelper.ts
index 24690e41b..4a3493122 100644
--- a/tests/e2e/helpers/SnippetsTestHelper.ts
+++ b/tests/e2e/helpers/SnippetsTestHelper.ts
@@ -212,9 +212,9 @@ export class SnippetsTestHelper {
 	private async selectSnippetLocation(location: keyof typeof SNIPPET_LOCATIONS): Promise<void> {
 		const locationLabel = SNIPPET_LOCATIONS[location]
 
-		const combobox = this.page.getByRole('combobox', { name: /location/i }).first()
-		await expect(combobox).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
-		await combobox.click()
+		const locationSelect = this.page.locator(SELECTORS.LOCATION_SELECT)
+		await expect(locationSelect).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+		await locationSelect.click()
 
 		const listbox = this.page.getByRole('listbox').first()
 		await expect(listbox).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
@@ -264,13 +264,12 @@ export class SnippetsTestHelper {
 		await this.page.fill(SELECTORS.TITLE_INPUT, options.name)
 
 		if (options.type && 'PHP' !== options.type) {
-			const snippetTypeInput = this.page.locator(SELECTORS.SNIPPET_TYPE_SELECT)
-			await snippetTypeInput.click()
+			const snippetTypeSelect = this.page.locator(SELECTORS.SNIPPET_TYPE_SELECT)
+			await snippetTypeSelect.click()
 
 			// React Select renders options in a listbox; scope the click to options to avoid matching
 			// other UI strings like "Skip to main content".
-			const listboxId = await snippetTypeInput.getAttribute('aria-controls')
-			const listbox = listboxId ? this.page.locator(`#${listboxId}`) : this.page.getByRole('listbox')
+			const listbox = this.page.getByRole('listbox')
 			const optionLabel = SNIPPET_TYPES[options.type]
 
 			await listbox.getByRole('option', { name: new RegExp(escapeRegExp(optionLabel), 'i') }).click()
diff --git a/tests/e2e/helpers/constants.ts b/tests/e2e/helpers/constants.ts
index d87b53b89..be716a87c 100644
--- a/tests/e2e/helpers/constants.ts
+++ b/tests/e2e/helpers/constants.ts
@@ -1,7 +1,7 @@
 export const SELECTORS = <const> {
 	TITLE_INPUT: '#title',
 	CODE_MIRROR_TEXTAREA: '.CodeMirror textarea',
-	SNIPPET_TYPE_SELECT: '#snippet-type-select-input',
+	SNIPPET_TYPE_SELECT: '.snippet-type-container .code-snippets-select',
 	LOCATION_SELECT: '.code-snippets-select-location',
 
 	SUCCESS_MESSAGE: '.snippet-editor-sidebar .notice.updated',
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
index 3622d7ad5..a36bcf66f 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
@@ -8,6 +8,7 @@
 use function Code_Snippets\code_snippets;
 use function Code_Snippets\get_snippets;
 use function Code_Snippets\save_snippet;
+use function Code_Snippets\trash_snippet;
 
 /**
  * Tests for manage menu assets and localized data.
@@ -46,11 +47,11 @@ public function set_up() {
 	}
 
 	/**
-	 * Localized data retains the exact Task 2 keys.
+	 * Localized data retains the expected manage data keys.
 	 *
 	 * @return void
 	 */
-	public function test_enqueue_localizes_task_two_manage_data(): void {
+	public function test_enqueue_localizes_manage_data(): void {
 		$filter = static fn() => PHP_INT_MAX;
 		add_filter( 'code_snippets/manage/inline_snippets_limit', $filter );
 
@@ -70,11 +71,11 @@ public function test_enqueue_localizes_task_two_manage_data(): void {
 				'bulkDownloadNonce',
 				'supportsZipDownloads',
 				'editorTheme',
+				'typeCounts',
 				'snippetsList',
 			],
 			array_keys( $localized )
 		);
-		$this->assertArrayNotHasKey( 'typeCounts', $localized );
 	}
 
 	/**
@@ -167,13 +168,39 @@ public function test_enqueue_omits_snippets_above_inline_limit(): void {
 		$this->assertArrayNotHasKey( 'snippetsList', $localized );
 	}
 
+	/**
+	 * Localized type counts retain their grouped, non-trashed shape.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_localizes_grouped_non_trashed_type_counts(): void {
+		$counter = new Snippet_Type_Counter();
+		$before = $counter->count();
+
+		save_snippet( new Snippet( [ 'scope' => 'global' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'admin' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'content' ] ) );
+		$trashed = save_snippet( new Snippet( [ 'scope' => 'site-css' ] ) );
+
+		$this->assertInstanceOf( Snippet::class, $trashed );
+		trash_snippet( $trashed->id );
+
+		$this->enqueue_assets();
+		$localized = $this->get_localized_data();
+
+		$this->assertSame( ( $before['all'] ?? 0 ) + 3, $localized['typeCounts']['all'] );
+		$this->assertSame( ( $before['php'] ?? 0 ) + 2, $localized['typeCounts']['php'] );
+		$this->assertSame( ( $before['html'] ?? 0 ) + 1, $localized['typeCounts']['html'] );
+		$this->assertSame( $before['css'] ?? 0, $localized['typeCounts']['css'] ?? 0 );
+	}
+
 	/**
 	 * Enqueue assets through the extracted service.
 	 *
 	 * @return void
 	 */
 	private function enqueue_assets(): void {
-		$assets = new Manage_Menu_Assets( new Manage_Menu_Screen_Options() );
+		$assets = new Manage_Menu_Assets( new Manage_Menu_Screen_Options(), new Snippet_Type_Counter() );
 		$assets->enqueue( Admin_Menu::$script_deps, Admin_Menu::$style_deps );
 	}
 
diff --git a/tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php b/tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php
new file mode 100644
index 000000000..0dff03fd3
--- /dev/null
+++ b/tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Model\Snippet;
+use Code_Snippets\UnitTestCase;
+use function Code_Snippets\save_snippet;
+use function Code_Snippets\trash_snippet;
+
+/**
+ * Tests for snippet type counts used by the manage menu.
+ */
+class Snippet_Type_Counter_Test extends UnitTestCase {
+
+	/**
+	 * Compatible scopes are combined and trashed snippets are excluded.
+	 *
+	 * @return void
+	 */
+	public function test_count_returns_non_trashed_counts_by_snippet_type(): void {
+		$counter = new Snippet_Type_Counter();
+		$before = $counter->count();
+
+		save_snippet( new Snippet( [ 'scope' => 'global' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'admin' ] ) );
+		save_snippet( new Snippet( [ 'scope' => 'content' ] ) );
+		$trashed = save_snippet( new Snippet( [ 'scope' => 'site-css' ] ) );
+
+		$this->assertInstanceOf( Snippet::class, $trashed );
+		trash_snippet( $trashed->id );
+
+		$counts = $counter->count();
+
+		$this->assertSame( ( $before['all'] ?? 0 ) + 3, $counts['all'] );
+		$this->assertSame( ( $before['php'] ?? 0 ) + 2, $counts['php'] );
+		$this->assertSame( ( $before['html'] ?? 0 ) + 1, $counts['html'] );
+		$this->assertSame( $before['css'] ?? 0, $counts['css'] ?? 0 );
+	}
+}
diff --git a/tests/unit/Frontend/Snippet_Form_Source_Test.php b/tests/unit/Frontend/Snippet_Form_Source_Test.php
new file mode 100644
index 000000000..246d8f544
--- /dev/null
+++ b/tests/unit/Frontend/Snippet_Form_Source_Test.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Code_Snippets\Frontend;
+
+use Code_Snippets\UnitTestCase;
+use WP_Filesystem_Direct;
+
+/**
+ * Source contracts for the snippet editor form.
+ */
+class Snippet_Form_Source_Test extends UnitTestCase {
+
+	/**
+	 * Dirty navigation supports browsers that require the legacy return value.
+	 *
+	 * @return void
+	 */
+	public function test_dirty_beforeunload_handler_sets_legacy_return_value(): void {
+		$filesystem = new WP_Filesystem_Direct( null );
+		$source = $filesystem->get_contents(
+			dirname( __DIR__, 3 ) . '/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx'
+		);
+
+		$this->assertIsString( $source );
+		$this->assertMatchesRegularExpression(
+			'/event\.preventDefault\(\)\s+(?:(?:\/\/[^\n]*)\s+)*event\.returnValue = true/',
+			$source
+		);
+	}
+}