From 56fc6bdc3065016c12b0bb9cabcd52d597baeac5 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 13:14:38 +0300
Subject: [PATCH 01/47] fix: strip html tags from cloud snippet descriptions

---
 .../ManageMenu/CommunityCloud/CloudSnippetsTable.tsx          | 4 ++--
 src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
index 57a4939bc..e2d3f75ef 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n'
 import React, { useState } from 'react'
 import { getSnippetType } from '../../../utils/snippets/snippets'
-import { truncateChars } from '../../../utils/text'
+import { stripTags, truncateChars } from '../../../utils/text'
 import { Badge } from '../../common/Badge'
 import { Button } from '../../common/Button'
 import { CloudSnippetDownloadButton } from '../../common/cloud/CloudSnippetDownloadButton'
@@ -36,7 +36,7 @@ const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet }) => {
 			<td className="column-status"><CloudStatusBadge status={snippet.status} /></td>
 
 			<td className="column-desc">
-				<div className="cloud-table-description">{truncateChars(snippet.description)}</div>
+				<div className="cloud-table-description">{truncateChars(stripTags(snippet.description))}</div>
 			</td>
 
 			<td className="column-actions">
diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
index c2f040029..deeecc067 100644
--- a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { __, _x, sprintf } from '@wordpress/i18n'
 import { getSnippetType } from '../../../utils/snippets/snippets'
-import { truncateChars } from '../../../utils/text'
+import { stripTags, truncateChars } from '../../../utils/text'
 import { Badge } from '../../common/Badge'
 import { Button } from '../../common/Button'
 import { CloudSnippetDownloadButton } from '../../common/cloud/CloudSnippetDownloadButton'
@@ -50,7 +50,7 @@ const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({ snippet, setI
 
 		{snippet.description && (
 			<p className="cloud-snippet-description">
-				{truncateChars(snippet.description)}
+				{truncateChars(stripTags(snippet.description))}
 			</p>
 		)}
 

From fb378a7462eef5b87d17021b5dc5f5694a381c58 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 13:14:47 +0300
Subject: [PATCH 02/47] fix: filter foreign admin notices on code snippets
 screens

---
 src/css/common/_subnav.scss             |   6 -
 src/php/Admin/Bootstrap_Admin.php       |   8 ++
 src/php/Admin/Menus/Admin_Menu.php      |   9 ++
 src/php/Admin/Notice_Filter.php         | 157 ++++++++++++++++++++++++
 tests/unit/Admin/Notice_Filter_Test.php | 119 ++++++++++++++++++
 5 files changed, 293 insertions(+), 6 deletions(-)
 create mode 100644 src/php/Admin/Notice_Filter.php
 create mode 100644 tests/unit/Admin/Notice_Filter_Test.php

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index d29852ca8..e3416243a 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -150,9 +150,3 @@
 	background: #dbebf7;
 	color: #2271b1;
 }
-
-// Add a proper separation between the navigation and any admin notices that are displayed above it.
-.notice + .wrap .snippet-type-nav {
-	margin-block-start: 20px;
-	border-block-start: 1px solid #c3c4c7;
-}
diff --git a/src/php/Admin/Bootstrap_Admin.php b/src/php/Admin/Bootstrap_Admin.php
index 2e4168ee9..194cabab4 100644
--- a/src/php/Admin/Bootstrap_Admin.php
+++ b/src/php/Admin/Bootstrap_Admin.php
@@ -38,6 +38,13 @@ class Bootstrap_Admin {
 	 */
 	public Welcome_Client $welcome_client;
 
+	/**
+	 * Notice_Filter class instance.
+	 *
+	 * @var Notice_Filter
+	 */
+	public Notice_Filter $notice_filter;
+
 	/**
 	 * Class constructor.
 	 */
@@ -47,6 +54,7 @@ public function __construct() {
 		}
 
 		$this->welcome_client = new Welcome_Client();
+		$this->notice_filter = new Notice_Filter();
 
 		add_action( 'init', array( $this, 'load_classes' ), 11 );
 
diff --git a/src/php/Admin/Menus/Admin_Menu.php b/src/php/Admin/Menus/Admin_Menu.php
index dc96c1219..e5a20db13 100644
--- a/src/php/Admin/Menus/Admin_Menu.php
+++ b/src/php/Admin/Menus/Admin_Menu.php
@@ -119,6 +119,15 @@ public function register() {
 		$this->add_menu( $this->slug, $this->label, $this->title );
 	}
 
+	/**
+	 * Retrieve the WordPress hookname computed for this menu's admin page.
+	 *
+	 * @return string
+	 */
+	public function get_hookname(): string {
+		return get_plugin_page_hookname( $this->slug, $this->base_slug );
+	}
+
 	/**
 	 * Render the navigation bar at the top of the admin page.
 	 */
diff --git a/src/php/Admin/Notice_Filter.php b/src/php/Admin/Notice_Filter.php
new file mode 100644
index 000000000..010377cab
--- /dev/null
+++ b/src/php/Admin/Notice_Filter.php
@@ -0,0 +1,157 @@
+<?php
+
+namespace Code_Snippets\Admin;
+
+use ReflectionFunction;
+use ReflectionMethod;
+use Throwable;
+use WP_Screen;
+use function Code_Snippets\code_snippets;
+use const Code_Snippets\PLUGIN_FILE;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Filters out admin notices that do not originate from Code Snippets while on a Code Snippets admin screen,
+ * preventing foreign notices from disrupting the plugin's navigation and sub-tab layout.
+ *
+ * @package Code_Snippets
+ */
+class Notice_Filter {
+
+	/**
+	 * Notice hooks cleared of foreign callbacks on Code Snippets screens.
+	 *
+	 * @var string[]
+	 */
+	private const NOTICE_HOOKS = [
+		'admin_notices',
+		'all_admin_notices',
+		'user_admin_notices',
+		'network_admin_notices',
+	];
+
+	/**
+	 * Class constructor.
+	 */
+	public function __construct() {
+		add_action( 'current_screen', [ $this, 'register_filtering' ] );
+	}
+
+	/**
+	 * Activate notice filtering when the current screen belongs to Code Snippets.
+	 *
+	 * @param WP_Screen $screen Current admin screen.
+	 *
+	 * @return void
+	 */
+	public function register_filtering( WP_Screen $screen ) {
+		if ( ! $this->is_code_snippets_screen( $screen ) ) {
+			return;
+		}
+
+		if ( ! apply_filters( 'code_snippets/admin/filter_foreign_notices', true ) ) {
+			return;
+		}
+
+		add_action( 'admin_head', [ $this, 'filter_foreign_notices' ], 0 );
+		add_action( 'admin_head', [ $this, 'print_fallback_styles' ] );
+	}
+
+	/**
+	 * Remove every notice callback that is not defined within the Code Snippets plugin directory.
+	 *
+	 * @return void
+	 */
+	public function filter_foreign_notices() {
+		global $wp_filter;
+
+		foreach ( self::NOTICE_HOOKS as $hook ) {
+			if ( empty( $wp_filter[ $hook ] ) ) {
+				continue;
+			}
+
+			foreach ( $wp_filter[ $hook ]->callbacks as $priority => $callbacks ) {
+				foreach ( $callbacks as $callback ) {
+					if ( ! $this->is_code_snippets_callback( $callback['function'] ) ) {
+						remove_action( $hook, $callback['function'], $priority );
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * Print inline styles that hide any residual foreign notices left in the notice region.
+	 *
+	 * @return void
+	 */
+	public function print_fallback_styles() {
+		?>
+		<style>
+			#wpbody-content > .notice:not(.code-snippets-notice):not(.code-snippets-promotion),
+			#wpbody-content > .update-nag,
+			#wpbody-content > .updated:not(.code-snippets-notice),
+			#wpbody-content > .error:not(.code-snippets-notice) {
+				display: none !important;
+			}
+		</style>
+		<?php
+	}
+
+	/**
+	 * Determine whether a screen is one of the plugin's own admin screens.
+	 *
+	 * @param WP_Screen $screen Current admin screen.
+	 *
+	 * @return bool
+	 */
+	private function is_code_snippets_screen( WP_Screen $screen ): bool {
+		if ( ! isset( code_snippets()->admin ) ) {
+			return false;
+		}
+
+		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;
+				}
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Determine whether a callback is defined within the Code Snippets plugin directory.
+	 *
+	 * Ownership is resolved from the callback's defining file. Reflection failures are treated as
+	 * Code Snippets-owned so unknown callbacks are never removed.
+	 *
+	 * @param callable|string|array $callback Hook callback as stored in the filter registry.
+	 *
+	 * @return bool
+	 */
+	private function is_code_snippets_callback( $callback ): bool {
+		try {
+			if ( is_array( $callback ) ) {
+				$file = ( new ReflectionMethod( $callback[0], $callback[1] ) )->getFileName();
+			} elseif ( is_string( $callback ) && false !== strpos( $callback, '::' ) ) {
+				[ $class, $method ] = explode( '::', $callback, 2 );
+				$file = ( new ReflectionMethod( $class, $method ) )->getFileName();
+			} else {
+				$file = ( new ReflectionFunction( $callback ) )->getFileName();
+			}
+		} catch ( Throwable $error ) {
+			return true;
+		}
+
+		if ( ! $file ) {
+			return true;
+		}
+
+		return 0 === strpos( $file, dirname( PLUGIN_FILE ) );
+	}
+}
diff --git a/tests/unit/Admin/Notice_Filter_Test.php b/tests/unit/Admin/Notice_Filter_Test.php
new file mode 100644
index 000000000..0d2455678
--- /dev/null
+++ b/tests/unit/Admin/Notice_Filter_Test.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace Code_Snippets\Admin;
+
+use Code_Snippets\UnitTestCase;
+use WP_UnitTest_Factory;
+use function Code_Snippets\code_snippets;
+
+/**
+ * Tests for foreign admin notice filtering on Code Snippets screens.
+ *
+ * Callback ownership is resolved from a callback's defining file: closures declared in this test file
+ * live outside the plugin directory and therefore stand in for foreign notices, while methods of real
+ * plugin classes stand in for Code Snippets-owned notices.
+ *
+ * @group admin-notices
+ */
+class Notice_Filter_Test extends UnitTestCase {
+
+	/**
+	 * Administrator user ID.
+	 *
+	 * @var int
+	 */
+	protected static int $admin_user_id;
+
+	/**
+	 * Notice filter under test.
+	 *
+	 * @var Notice_Filter
+	 */
+	private Notice_Filter $notice_filter;
+
+	/**
+	 * 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() );
+
+		if ( ! isset( code_snippets()->admin ) ) {
+			code_snippets()->admin = new Bootstrap_Admin();
+			code_snippets()->admin->load_classes();
+		}
+
+		$this->notice_filter = new Notice_Filter();
+	}
+
+	/**
+	 * Filtering removes foreign notice callbacks while keeping Code Snippets-owned callbacks.
+	 *
+	 * @return void
+	 */
+	public function test_filtering_removes_foreign_notices_and_keeps_code_snippets_notices(): void {
+		$foreign = static function () {};
+		$owned = [ code_snippets()->admin, 'print_notices' ];
+
+		add_action( 'admin_notices', $foreign );
+		add_action( 'admin_notices', $owned );
+
+		$this->notice_filter->filter_foreign_notices();
+
+		$this->assertFalse( has_action( 'admin_notices', $foreign ) );
+		$this->assertNotFalse( has_action( 'admin_notices', $owned ) );
+	}
+
+	/**
+	 * A Code Snippets screen registers the filtering hooks by default.
+	 *
+	 * @return void
+	 */
+	public function test_registers_filtering_on_code_snippets_screen(): void {
+		$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.
+	 *
+	 * @return void
+	 */
+	public function test_filter_disables_filtering(): void {
+		add_filter( 'code_snippets/admin/filter_foreign_notices', '__return_false' );
+
+		$this->notice_filter->register_filtering( get_current_screen() );
+
+		$this->assertFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
+	}
+
+	/**
+	 * Non-Code Snippets screens do not register filtering hooks.
+	 *
+	 * @return void
+	 */
+	public function test_does_not_register_on_foreign_screen(): void {
+		set_current_screen( 'dashboard' );
+
+		$this->notice_filter->register_filtering( get_current_screen() );
+
+		$this->assertFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
+	}
+}

From d3b8440444adf85eb1ae6ad386a24ec63c90a7b2 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 13:14:57 +0300
Subject: [PATCH 03/47] fix: improve snippet preview modal sizing and theme

---
 src/css/common/_modal.scss                    | 15 +++++
 src/css/manage.scss                           |  1 +
 .../components/common/SnippetPreviewModal.tsx | 65 ++++++++++++++-----
 src/js/types/Window.ts                        |  1 +
 src/php/Admin/Menus/Manage_Menu.php           |  6 ++
 5 files changed, 72 insertions(+), 16 deletions(-)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index dab7cca7b..2c65bc274 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -51,3 +51,18 @@
 		}
 	}
 }
+
+.components-modal__frame.code-snippets-preview-modal {
+	min-inline-size: 520px;
+	min-block-size: 240px;
+	max-inline-size: 80vw;
+	max-block-size: 80vh;
+
+	@media (width <= 600px) {
+		min-inline-size: 90vw;
+	}
+
+	.components-modal__content {
+		overflow: auto;
+	}
+}
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 8b7183fc0..163624485 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -4,6 +4,7 @@
 @use 'common/tooltips';
 @use 'common/direction';
 @use 'common/select';
+@use 'common/modal';
 @use 'common/notices';
 @use 'common/upsell';
 @use 'common/toolbar';
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index fa8369912..d208a5c60 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Modal } from '@wordpress/components'
-import { Prism } from '../../utils/Prism'
+import { __ } from '@wordpress/i18n'
+import type { EditorFromTextArea } from 'codemirror'
 
 export interface SnippetPreviewModalProps {
 	title: string
@@ -10,26 +11,58 @@ export interface SnippetPreviewModalProps {
 	setIsOpen: (isOpen: boolean) => void
 }
 
+// Mirrors the type-to-mode mapping used by the live editor in SnippetTypeInput.
+const EDITOR_MODES: Record<string, string> = {
+	css: 'text/css',
+	js: 'javascript',
+	php: 'text/x-php',
+	html: 'application/x-httpd-php'
+}
+
 /**
- * Modal for quickly viewing a snippet's code with syntax highlighting,
- * without navigating to the edit page. Shared between local snippets and
- * cloud snippet previews.
+ * 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.
  */
-export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({ title, code, type, isOpen, setIsOpen }) => {
+export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
+	title,
+	code,
+	type,
+	isOpen,
+	setIsOpen
+}) => {
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+
 	useEffect(() => {
-		if (isOpen) {
-			Prism.highlightAll()
+		if (!isOpen || !textareaRef.current) {
+			return undefined
+		}
+
+		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
+			codemirror: {
+				readOnly: true,
+				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
+				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
+			}
+		})
+
+		return () => {
+			(instance.codemirror as EditorFromTextArea).toTextArea()
 		}
-	}, [isOpen])
+	}, [isOpen, type])
 
 	return isOpen
-		? <Modal onRequestClose={() => setIsOpen(false)} title={title}>
-			<pre className="line-numbers">
-				<code className={`language-${type}`}>
-					{'php' === type ? '<?php\n\n' : ''}
-					{code}
-				</code>
-			</pre>
+		? <Modal
+			className="code-snippets-preview-modal"
+			onRequestClose={() => setIsOpen(false)}
+			title={title}
+		>
+			<textarea
+				ref={textareaRef}
+				readOnly
+				aria-label={__('Snippet code preview', 'code-snippets')}
+				defaultValue={`${'php' === type ? '<?php\n\n' : ''}${code}`}
+			/>
 		</Modal>
 		: null
 }
diff --git a/src/js/types/Window.ts b/src/js/types/Window.ts
index 5d0ea14e7..f29630376 100644
--- a/src/js/types/Window.ts
+++ b/src/js/types/Window.ts
@@ -70,6 +70,7 @@ declare global {
 			isSafeModeActive: boolean
 			bulkDownloadNonce: string
 			supportsZipDownloads: boolean
+			editorTheme: string
 		}
 		readonly CODE_SNIPPETS_EDIT?: {
 			snippet: SnippetSchema
diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index cbcfca1f3..bc89312b0 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -12,6 +12,7 @@
 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_editor;
 use const Code_Snippets\PLUGIN_FILE;
 use const Code_Snippets\PLUGIN_VERSION;
 
@@ -216,6 +217,10 @@ public function enqueue_assets() {
 
 		Code_Highlighter::enqueue_all_prism_themes();
 
+		// Load the CodeMirror library so the snippet preview modal can render a
+		// read-only editor that honours the configured editor theme.
+		enqueue_code_editor( 'php' );
+
 		wp_set_script_translations( self::JS_HANDLE, 'code-snippets' );
 		code_snippets()->localize_script( self::JS_HANDLE );
 
@@ -228,6 +233,7 @@ public function enqueue_assets() {
 			'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

From 1d26a352ee6439bff956c1cde68e5212725f7861 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 13:27:33 +0300
Subject: [PATCH 04/47] feat: show line numbers and language badge in snippet
 preview

---
 src/css/common/_modal.scss                       | 14 ++++++++++++++
 src/js/components/common/SnippetPreviewModal.tsx | 10 +++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index 2c65bc274..719a1d53b 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -62,6 +62,20 @@
 		min-inline-size: 90vw;
 	}
 
+	.components-modal__header-heading {
+		flex-grow: 1;
+	}
+
+	.code-snippets-preview-modal__title {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		.badge {
+			margin-inline-start: auto;
+		}
+	}
+
 	.components-modal__content {
 		overflow: auto;
 	}
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index d208a5c60..27570d8e2 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 import { Modal } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
+import { Badge } from './Badge'
+import type { BadgeName } from './Badge'
 import type { EditorFromTextArea } from 'codemirror'
 
 export interface SnippetPreviewModalProps {
@@ -41,6 +43,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 		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
 			}
@@ -55,7 +58,12 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 		? <Modal
 			className="code-snippets-preview-modal"
 			onRequestClose={() => setIsOpen(false)}
-			title={title}
+			title={
+				<span className="code-snippets-preview-modal__title">
+					{title}
+					<Badge small name={type as BadgeName} />
+				</span>
+			}
 		>
 			<textarea
 				ref={textareaRef}

From db95f8d91662f632b2b16fbc03998d7af185eede Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 18:19:02 +0300
Subject: [PATCH 05/47] fix: use full-size badge in snippet preview modal title

---
 src/css/common/_modal.scss                       | 4 ----
 src/js/components/common/SnippetPreviewModal.tsx | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index 719a1d53b..d03c607ea 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -62,10 +62,6 @@
 		min-inline-size: 90vw;
 	}
 
-	.components-modal__header-heading {
-		flex-grow: 1;
-	}
-
 	.code-snippets-preview-modal__title {
 		display: flex;
 		align-items: center;
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 27570d8e2..751236a93 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -61,7 +61,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			title={
 				<span className="code-snippets-preview-modal__title">
 					{title}
-					<Badge small name={type as BadgeName} />
+					<Badge name={type as BadgeName} />
 				</span>
 			}
 		>

From ae62c8c864f681f36838d92c8130ab09bdd66d56 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 14 Jul 2026 20:22:19 +0300
Subject: [PATCH 06/47] fix: register rest collection args with named keys

---
 .../REST_API/Cloud/Cloud_Snippets_REST_Controller.php | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php b/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
index 07e746731..effa5549d 100644
--- a/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
+++ b/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
@@ -130,8 +130,8 @@ public function register_routes() {
 								'type'        => 'boolean',
 								'default'     => false,
 							],
-							$collection_args['page'],
-							$collection_args['per_page'],
+							'page'              => $collection_args['page'],
+							'per_page'          => $collection_args['per_page'],
 						],
 						$filter_args
 					),
@@ -148,7 +148,7 @@ public function register_routes() {
 					'methods'             => WP_REST_Server::READABLE,
 					'callback'            => [ $this, 'get_codevault_items' ],
 					'permission_callback' => [ $this, 'get_items_permissions_check' ],
-					'args'                => [ $collection_args['page'] ],
+					'args'                => [ 'page' => $collection_args['page'] ],
 					'schema'              => [ $this, 'get_item_schema' ],
 				],
 			]
@@ -164,7 +164,10 @@ public function register_routes() {
 					'permission_callback' => [ $this, 'get_items_permissions_check' ],
 					'args'                => array_merge(
 						$filter_args,
-						[ $collection_args['page'], $collection_args['per_page'] ]
+						[
+							'page'     => $collection_args['page'],
+							'per_page' => $collection_args['per_page'],
+						]
 					),
 				],
 				'schema' => [ $this, 'get_item_schema' ],

From 3a5ddfe7871fec76abf60af1598bc46e3381d6c3 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 17:25:43 +0300
Subject: [PATCH 07/47] fix: convert zero-based cloud api page numbers for
 display

---
 .../ManageMenu/CommunityCloud/WithCloudSearchContext.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx b/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx
index 20a541284..2550608a1 100644
--- a/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx
@@ -120,7 +120,8 @@ const processSearchParams = (params: CloudSearchParams, previous: CloudSearchPar
 }
 
 const unpackSearchResponse = ({ data }: AxiosResponse<CloudSnippetsSchema>, baseUrl: string) => ({
-	page: data.page,
+	// The cloud API reports zero-based page numbers.
+	page: data.page + 1,
 	isFeatured: baseUrl === SEARCH_URLS.FEATURED,
 	snippets: data.snippets,
 	totalItems: data.total_snippets,

From d7625fc15fa0b7fc403f10a67d4174b203d1e9de Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Wed, 15 Jul 2026 17:52:16 +0300
Subject: [PATCH 08/47] fix: report one-based page number for featured cloud
 results

---
 .../ManageMenu/CommunityCloud/WithCloudSearchContext.tsx       | 3 +--
 src/php/Client/Cloud_Public_Client.php                         | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx b/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx
index 2550608a1..20a541284 100644
--- a/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/WithCloudSearchContext.tsx
@@ -120,8 +120,7 @@ const processSearchParams = (params: CloudSearchParams, previous: CloudSearchPar
 }
 
 const unpackSearchResponse = ({ data }: AxiosResponse<CloudSnippetsSchema>, baseUrl: string) => ({
-	// The cloud API reports zero-based page numbers.
-	page: data.page + 1,
+	page: data.page,
 	isFeatured: baseUrl === SEARCH_URLS.FEATURED,
 	snippets: data.snippets,
 	totalItems: data.total_snippets,
diff --git a/src/php/Client/Cloud_Public_Client.php b/src/php/Client/Cloud_Public_Client.php
index 47652f9eb..c47ddbd63 100644
--- a/src/php/Client/Cloud_Public_Client.php
+++ b/src/php/Client/Cloud_Public_Client.php
@@ -151,6 +151,6 @@ public function get_featured_snippets( int $page, int $per_page, array $filters
 			[ 'headers' => $this->connection->get_request_headers() ]
 		);
 
-		return Cloud_Snippets::unpack_api_response( unpack_response_body( $response ) );
+		return Cloud_Snippets::unpack_api_response( unpack_response_body( $response ), $page );
 	}
 }

From 9c6703979529fb39757e8271efca908f52c0186c Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 01:10:02 +0300
Subject: [PATCH 09/47] fix: preserve the preview modal title contract

---
 src/css/common/_modal.scss                       | 10 ----------
 src/js/components/common/SnippetPreviewModal.tsx |  8 ++------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index d03c607ea..2c65bc274 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -62,16 +62,6 @@
 		min-inline-size: 90vw;
 	}
 
-	.code-snippets-preview-modal__title {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-
-		.badge {
-			margin-inline-start: auto;
-		}
-	}
-
 	.components-modal__content {
 		overflow: auto;
 	}
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 751236a93..1f0bd23f0 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -58,12 +58,8 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 		? <Modal
 			className="code-snippets-preview-modal"
 			onRequestClose={() => setIsOpen(false)}
-			title={
-				<span className="code-snippets-preview-modal__title">
-					{title}
-					<Badge name={type as BadgeName} />
-				</span>
-			}
+			title={title}
+			headerActions={<Badge name={type as BadgeName} />}
 		>
 			<textarea
 				ref={textareaRef}

From cade6de858b373e46e1fac07a71b63b49c65e433 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 01:10:10 +0300
Subject: [PATCH 10/47] fix: load only preview editor assets

---
 src/php/Admin/Menus/Manage_Menu.php         |  6 ++--
 src/php/Utils/editor.php                    | 38 ++++++++++++++++++++-
 tests/unit/Admin/Menus/Manage_Menu_Test.php | 21 ++++++++++++
 3 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index bc89312b0..6a64d62e1 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -12,7 +12,7 @@
 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_editor;
+use function Code_Snippets\Utils\enqueue_code_preview_editor;
 use const Code_Snippets\PLUGIN_FILE;
 use const Code_Snippets\PLUGIN_VERSION;
 
@@ -217,9 +217,7 @@ public function enqueue_assets() {
 
 		Code_Highlighter::enqueue_all_prism_themes();
 
-		// Load the CodeMirror library so the snippet preview modal can render a
-		// read-only editor that honours the configured editor theme.
-		enqueue_code_editor( 'php' );
+		enqueue_code_preview_editor( 'php' );
 
 		wp_set_script_translations( self::JS_HANDLE, 'code-snippets' );
 		code_snippets()->localize_script( self::JS_HANDLE );
diff --git a/src/php/Utils/editor.php b/src/php/Utils/editor.php
index e8861f6dc..c082eb76e 100644
--- a/src/php/Utils/editor.php
+++ b/src/php/Utils/editor.php
@@ -94,7 +94,43 @@ function enqueue_code_editor( string $type, array $extra_atts = [] ) {
 		[ 'in_footer' => true ]
 	);
 
-	// CodeMirror Theme.
+	enqueue_code_editor_theme();
+}
+
+/**
+ * Load the CodeMirror assets required for read-only code previews.
+ *
+ * @param string $type Type of code editor – either 'php', 'css', 'js', or 'html'.
+ *
+ * @return void
+ */
+function enqueue_code_preview_editor( string $type ): void {
+	$modes = [
+		'css'  => 'text/css',
+		'php'  => 'text/x-php',
+		'js'   => 'javascript',
+		'html' => 'application/x-httpd-php',
+	];
+
+	wp_enqueue_code_editor(
+		[
+			'type'       => $modes[ $type ] ?? $modes['php'],
+			'codemirror' => [
+				'lint'     => false,
+				'readOnly' => true,
+			],
+		]
+	);
+
+	enqueue_code_editor_theme();
+}
+
+/**
+ * Load the configured CodeMirror theme.
+ *
+ * @return void
+ */
+function enqueue_code_editor_theme(): void {
 	$theme = get_setting( 'editor', 'theme' );
 
 	if ( 'default' !== $theme ) {
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Test.php
index d46a82ce1..7c945fcad 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -103,6 +103,27 @@ public function test_enqueue_assets_localizes_hidden_columns(): void {
 		$this->assertStringContainsString( '"supportsZipDownloads":', $data );
 	}
 
+	/**
+	 * The manage screen loads only the assets required for read-only code previews.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_assets_loads_preview_editor_without_full_editor_dependencies(): void {
+		foreach ( [ 'htmlhint', 'csslint', 'jshint', 'code-snippets-code-editor' ] as $handle ) {
+			wp_dequeue_script( $handle );
+		}
+
+		$menu = new Manage_Menu();
+		$menu->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 manage screen renders a truncation toggle in Screen Options.
 	 *

From 69ba8cbf184c80d43f099360240b83bef3489ab3 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 16 Jul 2026 14:33:50 +0300
Subject: [PATCH 11/47] fix: degrade snippet preview gracefully when the code
 editor is unavailable

---
 src/css/common/_modal.scss                               | 9 +++++++++
 .../EditMenu/SnippetForm/fields/CodeEditor.tsx           | 2 +-
 src/js/components/common/SnippetPreviewModal.tsx         | 4 ++--
 src/js/services/settings/editor-preview.ts               | 2 +-
 src/js/types/Window.ts                                   | 2 +-
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index 2c65bc274..457c8debd 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -65,4 +65,13 @@
 	.components-modal__content {
 		overflow: auto;
 	}
+
+	// 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;
+	}
 }
diff --git a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
index c816b93a6..b09c2cacb 100644
--- a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
+++ b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx
@@ -80,7 +80,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({ isExpanded, setIsExpande
 
 	useEffect(() => {
 		setCodeEditorInstance(editorInstance => {
-			if (textareaRef.current && !editorInstance) {
+			if (textareaRef.current && !editorInstance && window.wp.codeEditor) {
 				editorInstance = window.wp.codeEditor.initialize(textareaRef.current)
 
 				editorInstance.codemirror.on('changes', instance => {
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 1f0bd23f0..bd8c911e7 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -36,13 +36,13 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
 
 	useEffect(() => {
-		if (!isOpen || !textareaRef.current) {
+		if (!isOpen || !textareaRef.current || !window.wp.codeEditor) {
 			return undefined
 		}
 
 		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
 			codemirror: {
-				readOnly: true,
+				readOnly: 'nocursor',
 				lineNumbers: true,
 				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
 				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
diff --git a/src/js/services/settings/editor-preview.ts b/src/js/services/settings/editor-preview.ts
index 7e3ac9f5b..637b30fb6 100644
--- a/src/js/services/settings/editor-preview.ts
+++ b/src/js/services/settings/editor-preview.ts
@@ -8,7 +8,7 @@ const initialiseCodeMirror = () => {
 	const { codeEditor } = window.wp
 	const textarea = document.getElementById('code_snippets_editor_preview')
 
-	if (textarea) {
+	if (textarea && codeEditor) {
 		window.code_snippets_editor_preview = codeEditor.initialize(textarea)
 		return window.code_snippets_editor_preview.codemirror
 	}
diff --git a/src/js/types/Window.ts b/src/js/types/Window.ts
index f29630376..01f9220ac 100644
--- a/src/js/types/Window.ts
+++ b/src/js/types/Window.ts
@@ -11,7 +11,7 @@ declare global {
 	interface Window {
 		readonly wp: {
 			readonly editor?: WordPressEditor
-			readonly codeEditor: WordPressCodeEditor
+			readonly codeEditor?: WordPressCodeEditor
 		}
 		readonly pagenow: string
 		readonly ajaxurl: string

From c2ca74e34ad7352ce37bed6860d8ce95ccc51615 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 09:06:38 +0300
Subject: [PATCH 12/47] fix: cover preview fallback without the code editor

---
 tests/e2e/code-snippets-preview.spec.ts | 63 +++++++++++++++++++++++++
 tests/e2e/helpers/constants.ts          |  1 +
 2 files changed, 64 insertions(+)
 create mode 100644 tests/e2e/code-snippets-preview.spec.ts

diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
new file mode 100644
index 000000000..4ca61090d
--- /dev/null
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -0,0 +1,63 @@
+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'
+
+// Disabling the admin's "Syntax Highlighting" preference makes
+// wp_enqueue_code_editor() a no-op, so window.wp.codeEditor is undefined when
+// the preview modal opens. The modal must fall back to the read-only textarea
+// instead of throwing.
+const setSyntaxHighlighting = (enabled: boolean): Promise<string> => {
+	const value = enabled ? "'true'" : "'false'"
+	const php = `
+		$user = get_user_by('login', 'admin');
+		if ($user) {
+			update_user_meta($user->ID, 'syntax_highlighting', ${value});
+		}
+	`
+
+	return wpCli(['eval', php])
+}
+
+test.describe('Code Snippets Preview Modal', () => {
+	let helper: SnippetsTestHelper
+	let snippetName: string
+
+	test.beforeEach(async ({ page }) => {
+		helper = new SnippetsTestHelper(page)
+		snippetName = SnippetsTestHelper.makeUniqueSnippetName()
+		await SnippetsTestHelper.cleanupSnippetsByPrefix(DEFAULT_E2E_SNIPPET_BASE_NAME)
+		await setSyntaxHighlighting(false)
+		await SnippetsTestHelper.createSnippetViaCli({ name: snippetName, type: 'php', active: false })
+	})
+
+	test.afterEach(async () => {
+		await setSyntaxHighlighting(true)
+		await helper.cleanupSnippet(snippetName)
+	})
+
+	test('Preview falls back to a readable textarea when the code editor is unavailable', async ({ page }) => {
+		const pageErrors: string[] = []
+		page.on('pageerror', error => pageErrors.push(error.message))
+
+		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')
+		await expect(preview).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+
+		const codeArea = preview.getByLabel('Snippet code preview')
+		await expect(codeArea).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+		await expect(codeArea).toHaveValue(new RegExp(snippetName))
+
+		expect(pageErrors).toEqual([])
+	})
+})
diff --git a/tests/e2e/helpers/constants.ts b/tests/e2e/helpers/constants.ts
index d6d2e64c0..d87b53b89 100644
--- a/tests/e2e/helpers/constants.ts
+++ b/tests/e2e/helpers/constants.ts
@@ -13,6 +13,7 @@ export const SELECTORS = <const> {
 	SNIPPET_NAME_LINK: '.snippet-name',
 	SNIPPET_SEARCH_INPUT: '#snippets_search',
 
+	PREVIEW_ACTION: '.row-actions button:has-text("Preview")',
 	CLONE_ACTION: '.row-actions button:has-text("Clone")',
 	DELETE_ACTION: '.row-actions button:has-text("Trash")',
 	EXPORT_ACTION: '.row-actions button:has-text("Export")',

From af3a8ef2b844a41c2eb122217c495a3b33c5ddde Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Fri, 17 Jul 2026 19:32:16 +0300
Subject: [PATCH 13/47] fix: harden preview fallback and notice ownership

---
 src/php/Admin/Notice_Filter.php         | 14 +++++++++++++-
 tests/e2e/code-snippets-preview.spec.ts |  2 ++
 tests/unit/Admin/Notice_Filter_Test.php | 21 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/php/Admin/Notice_Filter.php b/src/php/Admin/Notice_Filter.php
index 010377cab..d7ecabee3 100644
--- a/src/php/Admin/Notice_Filter.php
+++ b/src/php/Admin/Notice_Filter.php
@@ -152,6 +152,18 @@ private function is_code_snippets_callback( $callback ): bool {
 			return true;
 		}
 
-		return 0 === strpos( $file, dirname( PLUGIN_FILE ) );
+		return $this->is_code_snippets_file( $file );
+	}
+
+	/**
+	 * Determine whether a file is beneath the Code Snippets plugin directory.
+	 *
+	 * @param string $file File path to inspect.
+	 *
+	 * @return bool
+	 */
+	private function is_code_snippets_file( string $file ): bool {
+		$plugin_directory = trailingslashit( wp_normalize_path( dirname( PLUGIN_FILE ) ) );
+		return 0 === strpos( wp_normalize_path( $file ), $plugin_directory );
 	}
 }
diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index 4ca61090d..80d4daf69 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -33,6 +33,7 @@ test.describe('Code Snippets Preview Modal', () => {
 
 	test.afterEach(async () => {
 		await setSyntaxHighlighting(true)
+		await wpCli(['eval', "delete_option( 'code_snippets_snippet_view' );"])
 		await helper.cleanupSnippet(snippetName)
 	})
 
@@ -40,6 +41,7 @@ test.describe('Code Snippets Preview Modal', () => {
 		const pageErrors: string[] = []
 		page.on('pageerror', error => pageErrors.push(error.message))
 
+		await wpCli(['eval', "update_option( 'code_snippets_snippet_view', 'table' );"])
 		await helper.navigateToSnippetsAdmin()
 		await helper.filterSnippetsByName(snippetName)
 
diff --git a/tests/unit/Admin/Notice_Filter_Test.php b/tests/unit/Admin/Notice_Filter_Test.php
index 0d2455678..1c604d15c 100644
--- a/tests/unit/Admin/Notice_Filter_Test.php
+++ b/tests/unit/Admin/Notice_Filter_Test.php
@@ -3,8 +3,10 @@
 namespace Code_Snippets\Admin;
 
 use Code_Snippets\UnitTestCase;
+use ReflectionMethod;
 use WP_UnitTest_Factory;
 use function Code_Snippets\code_snippets;
+use const Code_Snippets\PLUGIN_FILE;
 
 /**
  * Tests for foreign admin notice filtering on Code Snippets screens.
@@ -58,6 +60,10 @@ public function set_up() {
 			code_snippets()->admin->load_classes();
 		}
 
+		$manage_menu = code_snippets()->admin->menus['manage'];
+		$manage_menu->register();
+		set_current_screen( $manage_menu->get_hookname() );
+
 		$this->notice_filter = new Notice_Filter();
 	}
 
@@ -79,6 +85,21 @@ public function test_filtering_removes_foreign_notices_and_keeps_code_snippets_n
 		$this->assertNotFalse( has_action( 'admin_notices', $owned ) );
 	}
 
+	/**
+	 * Callback ownership requires a complete plugin directory boundary.
+	 *
+	 * @return void
+	 */
+	public function test_callback_ownership_requires_plugin_directory_boundary(): void {
+		$method = new ReflectionMethod( $this->notice_filter, 'is_code_snippets_file' );
+		$method->setAccessible( true );
+
+		$this->assertTrue( $method->invoke( $this->notice_filter, PLUGIN_FILE ) );
+		$this->assertFalse(
+			$method->invoke( $this->notice_filter, dirname( PLUGIN_FILE ) . '-extra/callback.php' )
+		);
+	}
+
 	/**
 	 * A Code Snippets screen registers the filtering hooks by default.
 	 *

From 21870667a23799649d2fa8b6a8ceb9e49c988eab Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 10:51:52 +0000
Subject: [PATCH 14/47] fix: include Add New hook in notice filtering and allow
 keyboard focus in preview

---
 .../components/common/SnippetPreviewModal.tsx |  2 +-
 src/php/Admin/Menus/Admin_Menu.php            | 10 +++++
 src/php/Admin/Menus/Edit_Menu.php             | 13 ++++++
 src/php/Admin/Notice_Filter.php               | 10 ++---
 tests/e2e/code-snippets-preview.spec.ts       | 42 +++++++++++++++++++
 tests/unit/Admin/Notice_Filter_Test.php       | 28 +++++++++----
 6 files changed, 91 insertions(+), 14 deletions(-)

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index bd8c911e7..7d1e61a81 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -42,7 +42,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 
 		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
 			codemirror: {
-				readOnly: 'nocursor',
+				readOnly: true,
 				lineNumbers: true,
 				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
 				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
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 d7ecabee3..55051484b 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;
+					}
 				}
 			}
 		}
diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index 80d4daf69..c2154d4d1 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -3,6 +3,8 @@ import { DEFAULT_E2E_SNIPPET_BASE_NAME, SnippetsTestHelper } from './helpers/Sni
 import { SELECTORS, TIMEOUTS } from './helpers/constants'
 import { wpCli } from './helpers/wpCli'
 
+const MAXIMUM_FOCUS_ATTEMPTS = 10
+
 // Disabling the admin's "Syntax Highlighting" preference makes
 // wp_enqueue_code_editor() a no-op, so window.wp.codeEditor is undefined when
 // the preview modal opens. The modal must fall back to the read-only textarea
@@ -62,4 +64,44 @@ test.describe('Code Snippets Preview Modal', () => {
 
 		expect(pageErrors).toEqual([])
 	})
+
+	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')
+		const codeArea = preview.getByLabel('Snippet code preview')
+		const initialValue = await codeArea.inputValue()
+		await expect(editor).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+
+		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/)
+		await page.keyboard.press('Shift+ArrowRight')
+
+		await expect.poll(() => editor.evaluate(element => {
+			const codeMirror = (<HTMLElement & {
+				CodeMirror?: { getSelection?: () => string }
+			}>element).CodeMirror
+
+			return codeMirror?.getSelection?.() ?? ''
+		})).not.toBe('')
+		await expect(codeArea).toHaveValue(initialValue)
+	})
 })
diff --git a/tests/unit/Admin/Notice_Filter_Test.php b/tests/unit/Admin/Notice_Filter_Test.php
index 1c604d15c..357eacdfa 100644
--- a/tests/unit/Admin/Notice_Filter_Test.php
+++ b/tests/unit/Admin/Notice_Filter_Test.php
@@ -53,16 +53,12 @@ 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() );
+		set_current_screen( 'dashboard' );
 
-		if ( ! isset( code_snippets()->admin ) ) {
-			code_snippets()->admin = new Bootstrap_Admin();
-			code_snippets()->admin->load_classes();
-		}
+		code_snippets()->admin = new Bootstrap_Admin();
+		code_snippets()->admin->load_classes();
 
-		$manage_menu = code_snippets()->admin->menus['manage'];
-		$manage_menu->register();
-		set_current_screen( $manage_menu->get_hookname() );
+		set_current_screen( code_snippets()->admin->menus['manage']->get_hookname() );
 
 		$this->notice_filter = new Notice_Filter();
 	}
@@ -112,6 +108,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.
 	 *

From e3529527710a34cdbb3c6e4136aeaf52dbe4de3f Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 11:12:04 +0000
Subject: [PATCH 15/47] fix: wrap long lines in preview E2E spec to respect
 100-char limit

---
 tests/e2e/code-snippets-preview.spec.ts | 45 ++++++++++++++-----------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index c2154d4d1..55e829015 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -39,31 +39,34 @@ test.describe('Code Snippets Preview Modal', () => {
 		await helper.cleanupSnippet(snippetName)
 	})
 
-	test('Preview falls back to a readable textarea when the code editor is unavailable', async ({ page }) => {
-		const pageErrors: string[] = []
-		page.on('pageerror', error => pageErrors.push(error.message))
+	test('Preview falls back to a readable textarea when the code editor is unavailable',
+		async ({ page }) => {
+			const pageErrors: string[] = []
+			page.on('pageerror', error => pageErrors.push(error.message))
 
-		await wpCli(['eval', "update_option( 'code_snippets_snippet_view', 'table' );"])
-		await helper.navigateToSnippetsAdmin()
-		await helper.filterSnippetsByName(snippetName)
+			await wpCli(['eval', "update_option( 'code_snippets_snippet_view', 'table' );"])
+			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 })
+			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()
+			await row.hover()
+			await row.locator(SELECTORS.PREVIEW_ACTION).first().click()
 
-		const preview = page.locator('.code-snippets-preview-modal')
-		await expect(preview).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+			const preview = page.locator('.code-snippets-preview-modal')
+			await expect(preview).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
 
-		const codeArea = preview.getByLabel('Snippet code preview')
-		await expect(codeArea).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
-		await expect(codeArea).toHaveValue(new RegExp(snippetName))
+			const codeArea = preview.getByLabel('Snippet code preview')
+			await expect(codeArea).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+			await expect(codeArea).toHaveValue(new RegExp(snippetName))
 
-		expect(pageErrors).toEqual([])
-	})
+			expect(pageErrors).toEqual([])
+		})
 
 	test('Preview code can be selected with the keyboard without being changed', async ({ page }) => {
 		await setSyntaxHighlighting(true)
@@ -71,7 +74,9 @@ test.describe('Code Snippets Preview Modal', () => {
 		await helper.filterSnippetsByName(snippetName)
 
 		const row = page
-			.locator(`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`)
+			.locator(
+				`${SELECTORS.SNIPPET_ROW}:has(a${SELECTORS.SNIPPET_NAME_LINK}:has-text("${snippetName}"))`
+			)
 			.first()
 		await expect(row).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
 

From 88c517bde8bb15309324954a70f1762d56a440da Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 11:45:18 +0000
Subject: [PATCH 16/47] fix: include compact-menu hookname in notice filter
 screen check

---
 src/php/Admin/Menus/Manage_Menu.php     | 16 ++++++++++++++++
 tests/unit/Admin/Notice_Filter_Test.php | 22 ++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index 6a64d62e1..299e83248 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -134,6 +134,22 @@ public function load_upgrade_menu() {
 		exit;
 	}
 
+	/**
+	 * Retrieve every hookname registered by this menu, including the compact
+	 * Tools submenu hookname when compact mode is active.
+	 *
+	 * @return string[]
+	 */
+	public function get_hooknames(): array {
+		$hooknames = parent::get_hooknames();
+
+		if ( code_snippets()->is_compact_menu() ) {
+			$hooknames[] = get_plugin_page_hookname( $this->base_slug, 'tools.php' );
+		}
+
+		return $hooknames;
+	}
+
 	/**
 	 * Add menu pages for the compact menu
 	 */
diff --git a/tests/unit/Admin/Notice_Filter_Test.php b/tests/unit/Admin/Notice_Filter_Test.php
index 357eacdfa..fc5e16734 100644
--- a/tests/unit/Admin/Notice_Filter_Test.php
+++ b/tests/unit/Admin/Notice_Filter_Test.php
@@ -149,4 +149,26 @@ public function test_does_not_register_on_foreign_screen(): void {
 
 		$this->assertFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
 	}
+
+	/**
+	 * The compact-mode Tools submenu hookname activates notice filtering.
+	 *
+	 * @return void
+	 */
+	public function test_registers_filtering_on_compact_menu_screen(): void {
+		add_filter( 'code_snippets_compact_menu', '__return_true' );
+
+		$manage_menu = code_snippets()->admin->menus['manage'];
+		$hooknames = $manage_menu->get_hooknames();
+		$compact_hookname = get_plugin_page_hookname( code_snippets()->get_menu_slug(), 'tools.php' );
+
+		$this->assertContains( $compact_hookname, $hooknames );
+
+		set_current_screen( $compact_hookname );
+		$this->notice_filter->register_filtering( get_current_screen() );
+
+		$this->assertNotFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
+
+		remove_filter( 'code_snippets_compact_menu', '__return_true' );
+	}
 }

From 5a56b145ee66c9db0a488f27198576d4abe302d4 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 12:33:58 +0000
Subject: [PATCH 17/47] fix: restore notice separator spacing rule for
 filter-disable path

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

diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index e3416243a..08ea58f78 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -150,3 +150,8 @@
 	background: #dbebf7;
 	color: #2271b1;
 }
+
+.notice + .wrap .snippet-type-nav {
+	margin-block-start: 20px;
+	border-block-start: 1px solid #c3c4c7;
+}

From 0cd08d8647e364da6b6ef0605dac11b639371a52 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 13:27:47 +0000
Subject: [PATCH 18/47] fix: handle invokable-object reflection, narrow modal
 type prop, delete orphaned Prism wrapper

---
 .../components/common/SnippetPreviewModal.tsx |  6 ++---
 src/js/utils/Prism.ts                         | 17 --------------
 src/php/Admin/Notice_Filter.php               |  2 ++
 tests/unit/Admin/Notice_Filter_Test.php       | 22 +++++++++++++++++++
 4 files changed, 27 insertions(+), 20 deletions(-)
 delete mode 100644 src/js/utils/Prism.ts

diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 7d1e61a81..2d2b95b16 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -2,13 +2,13 @@ import React, { useEffect, useRef } from 'react'
 import { Modal } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 import { Badge } from './Badge'
-import type { BadgeName } from './Badge'
 import type { EditorFromTextArea } from 'codemirror'
+import type { SnippetType } from '../../types/Snippet'
 
 export interface SnippetPreviewModalProps {
 	title: string
 	code: string
-	type: string
+	type: SnippetType
 	isOpen: boolean
 	setIsOpen: (isOpen: boolean) => void
 }
@@ -59,7 +59,7 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			className="code-snippets-preview-modal"
 			onRequestClose={() => setIsOpen(false)}
 			title={title}
-			headerActions={<Badge name={type as BadgeName} />}
+			headerActions={<Badge name={type} />}
 		>
 			<textarea
 				ref={textareaRef}
diff --git a/src/js/utils/Prism.ts b/src/js/utils/Prism.ts
deleted file mode 100644
index 1acf0b307..000000000
--- a/src/js/utils/Prism.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import Prism from 'prismjs'
-import 'prismjs/components/prism-markup'
-import 'prismjs/components/prism-markup-templating'
-import 'prismjs/components/prism-clike'
-import 'prismjs/components/prism-css'
-import 'prismjs/components/prism-php'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/plugins/line-highlight/prism-line-highlight'
-import 'prismjs/plugins/line-numbers/prism-line-numbers'
-import 'prismjs/plugins/toolbar/prism-toolbar'
-import 'prismjs/plugins/show-language/prism-show-language'
-import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
-import 'prismjs/plugins/inline-color/prism-inline-color'
-import 'prismjs/plugins/previewers/prism-previewers'
-import 'prismjs/plugins/autolinker/prism-autolinker'
-
-export { Prism }
diff --git a/src/php/Admin/Notice_Filter.php b/src/php/Admin/Notice_Filter.php
index 55051484b..99cf42787 100644
--- a/src/php/Admin/Notice_Filter.php
+++ b/src/php/Admin/Notice_Filter.php
@@ -141,6 +141,8 @@ private function is_code_snippets_callback( $callback ): bool {
 			} elseif ( is_string( $callback ) && false !== strpos( $callback, '::' ) ) {
 				[ $class, $method ] = explode( '::', $callback, 2 );
 				$file = ( new ReflectionMethod( $class, $method ) )->getFileName();
+			} elseif ( is_object( $callback ) && ! $callback instanceof \Closure ) {
+				$file = ( new ReflectionMethod( $callback, '__invoke' ) )->getFileName();
 			} else {
 				$file = ( new ReflectionFunction( $callback ) )->getFileName();
 			}
diff --git a/tests/unit/Admin/Notice_Filter_Test.php b/tests/unit/Admin/Notice_Filter_Test.php
index fc5e16734..236173a15 100644
--- a/tests/unit/Admin/Notice_Filter_Test.php
+++ b/tests/unit/Admin/Notice_Filter_Test.php
@@ -150,6 +150,28 @@ public function test_does_not_register_on_foreign_screen(): void {
 		$this->assertFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
 	}
 
+	/**
+	 * Filtering removes foreign invokable-object callbacks.
+	 *
+	 * @return void
+	 */
+	public function test_filtering_removes_foreign_invokable_object(): void {
+		$foreign_invokable = new class() {
+			/**
+			 * Emit a foreign notice.
+			 */
+			public function __invoke() {
+				echo 'foreign notice';
+			}
+		};
+
+		add_action( 'admin_notices', $foreign_invokable );
+
+		$this->notice_filter->filter_foreign_notices();
+
+		$this->assertFalse( has_action( 'admin_notices', $foreign_invokable ) );
+	}
+
 	/**
 	 * The compact-mode Tools submenu hookname activates notice filtering.
 	 *

From 1bf989ff69d4602f65bd2872f6d13abe59260017 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 14:32:43 +0000
Subject: [PATCH 19/47] fix: restore table view as default

---
 src/js/types/SnippetView.ts                   |  2 +-
 .../Snippets/Preferences_REST_Controller.php  |  2 +-
 .../REST_API/REST_API_Preferences_Test.php    | 20 +++++++++----------
 3 files changed, 12 insertions(+), 12 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
diff --git a/tests/unit/REST_API/REST_API_Preferences_Test.php b/tests/unit/REST_API/REST_API_Preferences_Test.php
index 806632204..5d398a43c 100644
--- a/tests/unit/REST_API/REST_API_Preferences_Test.php
+++ b/tests/unit/REST_API/REST_API_Preferences_Test.php
@@ -12,7 +12,7 @@
  * Tests for the interface preferences REST API endpoint.
  *
  * Verifies that the snippet view preference (cards or table) defaults to
- * cards, persists through the plugin-wide option, rejects invalid values,
+ * the table, persists through the plugin-wide option, rejects invalid values,
  * and is only writable by users with snippet capabilities.
  *
  * @group rest-api
@@ -83,29 +83,29 @@ 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() );
 	}
 
 	/**
 	 * Updating the preference persists it for subsequent reads.
 	 */
 	public function test_snippet_view_update_persists() {
-		$response = $this->dispatch( 'POST', [ 'view' => 'table' ] );
+		$response = $this->dispatch( 'POST', [ 'view' => 'card' ] );
 
 		$this->assertSame( 200, $response->get_status() );
-		$this->assertSame( [ 'view' => 'table' ], $response->get_data() );
-		$this->assertSame( 'table', get_option( Preferences_REST_Controller::SNIPPET_VIEW_OPTION ) );
+		$this->assertSame( [ 'view' => 'card' ], $response->get_data() );
+		$this->assertSame( 'card', get_option( Preferences_REST_Controller::SNIPPET_VIEW_OPTION ) );
 
 		$response = $this->dispatch( 'GET' );
-		$this->assertSame( [ 'view' => 'table' ], $response->get_data() );
+		$this->assertSame( [ 'view' => 'card' ], $response->get_data() );
 
-		$this->assertSame( 'table', Preferences_REST_Controller::get_snippet_view() );
+		$this->assertSame( 'card', Preferences_REST_Controller::get_snippet_view() );
 	}
 
 	/**
@@ -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 c7c5930476aa0a499585357c7b546aba76990508 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 15:31:43 +0000
Subject: [PATCH 20/47] fix: make preview modal 5.5-compatible, normalize cloud
 descriptions, drop stale manage Prism assets

---
 src/css/common/_modal.scss                    |  9 +++++++
 src/css/manage.scss                           |  1 -
 .../components/common/SnippetPreviewModal.tsx | 15 ++++++++++-
 src/js/utils/text.ts                          | 13 ++++++++++
 src/php/Admin/Menus/Manage_Menu.php           |  3 ---
 src/php/Core/deactivation-notice.php          |  6 +++--
 src/php/Model/Cloud_Snippet.php               |  4 ++-
 tests/e2e/code-snippets-preview.spec.ts       | 16 +++++++++++-
 tests/e2e/text-utils.spec.ts                  | 26 +++++++++++++++++++
 tests/unit/Admin/Menus/Manage_Menu_Test.php   | 17 ++++++++++++
 tests/unit/Model/Cloud_Snippets_Test.php      | 13 ++++++++++
 11 files changed, 114 insertions(+), 9 deletions(-)
 create mode 100644 tests/e2e/text-utils.spec.ts

diff --git a/src/css/common/_modal.scss b/src/css/common/_modal.scss
index 457c8debd..fad7a3835 100644
--- a/src/css/common/_modal.scss
+++ b/src/css/common/_modal.scss
@@ -66,6 +66,15 @@
 		overflow: auto;
 	}
 
+	// The badge lives in the modal content because the minimum-supported
+	// WordPress Modal (5.5–6.3) has no headerActions prop; shift it up into
+	// the header area, clear of the close button.
+	.code-snippets-preview-modal__badge {
+		position: absolute;
+		inset-block-start: 18px;
+		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 {
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 163624485..6aab50913 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -10,7 +10,6 @@
 @use 'common/toolbar';
 @use 'common/subnav';
 @use 'common/wp-admin';
-@use 'prism';
 @use 'manage/snippets-table';
 @use 'manage/cloud-community';
 
diff --git a/src/js/components/common/SnippetPreviewModal.tsx b/src/js/components/common/SnippetPreviewModal.tsx
index 2d2b95b16..4f0ed20a9 100644
--- a/src/js/components/common/SnippetPreviewModal.tsx
+++ b/src/js/components/common/SnippetPreviewModal.tsx
@@ -49,6 +49,14 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			}
 		})
 
+		// 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')
+		)
+
 		return () => {
 			(instance.codemirror as EditorFromTextArea).toTextArea()
 		}
@@ -59,8 +67,13 @@ export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
 			className="code-snippets-preview-modal"
 			onRequestClose={() => setIsOpen(false)}
 			title={title}
-			headerActions={<Badge name={type} />}
 		>
+			{/* 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} />
+			</div>
 			<textarea
 				ref={textareaRef}
 				readOnly
diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 065737d02..f9508e6ba 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -24,7 +24,20 @@ export const truncateWords = (text: string, wordCount: number): string => {
 		: text
 }
 
+// Tags implying a visual break become whitespace so `<p>A</p><p>B</p>`
+// yields 'A B' rather than 'AB'; inline tags are removed without separators.
+const BLOCK_TAGS = [
+	'address', 'article', 'aside', 'blockquote', 'br', 'dd', 'div', 'dl', 'dt', 'fieldset',
+	'figcaption', 'figure', 'footer', 'form', 'h[1-6]', 'header', 'hr', 'li', 'main', 'nav',
+	'ol', 'p', 'pre', 'section', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul'
+]
+
+const BLOCK_TAG_PATTERN = new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b[^>]*>`, 'gi')
+
 export const stripTags = (text: string): string =>
 	text
 		.replace(/<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi, '')
+		.replace(BLOCK_TAG_PATTERN, ' ')
 		.replace(/<\/?[a-z][a-z0-9]*\b[^>]*>/gi, '')
+		.replace(/\s+/g, ' ')
+		.trim()
diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index 299e83248..b1c1fe9ec 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -6,7 +6,6 @@
 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;
@@ -231,8 +230,6 @@ public function enqueue_assets() {
 			[ 'in_footer' => true ]
 		);
 
-		Code_Highlighter::enqueue_all_prism_themes();
-
 		enqueue_code_preview_editor( 'php' );
 
 		wp_set_script_translations( self::JS_HANDLE, 'code-snippets' );
diff --git a/src/php/Core/deactivation-notice.php b/src/php/Core/deactivation-notice.php
index 6003a02eb..3a7f77684 100644
--- a/src/php/Core/deactivation-notice.php
+++ b/src/php/Core/deactivation-notice.php
@@ -27,7 +27,9 @@ function code_snippets_deactivation_notice() {
 	$required_php_version = '7.4';
 
 	if ( version_compare( phpversion(), $required_php_version, '<' ) ) {
-		echo '<div class="error fade"><p><strong>';
+		// The code-snippets-notice class exempts this notice from the plugin's
+		// own admin notice filtering on Code Snippets screens.
+		echo '<div class="code-snippets-notice error fade"><p><strong>';
 		// translators: %s: required PHP version number.
 		echo esc_html( sprintf( __( 'Code Snippets requires PHP %s or later.', 'code-snippets' ), $required_php_version ) );
 		echo '</strong><br>';
@@ -46,7 +48,7 @@ function code_snippets_deactivation_notice() {
 	}
 
 	if ( defined( 'CODE_SNIPPETS_FILE' ) ) {
-		echo '<div class="error fade"><p>';
+		echo '<div class="code-snippets-notice error fade"><p>';
 		esc_html_e( 'Another version of Code Snippets appears to be installed. Deactivating this version.', 'code-snippets' );
 		echo '</p></div>';
 
diff --git a/src/php/Model/Cloud_Snippet.php b/src/php/Model/Cloud_Snippet.php
index 2b027f413..8e40103c6 100644
--- a/src/php/Model/Cloud_Snippet.php
+++ b/src/php/Model/Cloud_Snippet.php
@@ -76,7 +76,9 @@ protected function prepare_field( $value, string $field ) {
 			case 'is_owner':
 				return (bool) $value;
 			case 'description':
-				return ( null === $value ) ? '' : $value;
+				// Remote payloads occasionally carry non-string descriptions;
+				// normalise at the boundary so consumers can assume a string.
+				return is_scalar( $value ) ? (string) $value : '';
 			case 'tags':
 				return code_snippets_build_tags_array( $value );
 
diff --git a/tests/e2e/code-snippets-preview.spec.ts b/tests/e2e/code-snippets-preview.spec.ts
index 55e829015..80c8b81f0 100644
--- a/tests/e2e/code-snippets-preview.spec.ts
+++ b/tests/e2e/code-snippets-preview.spec.ts
@@ -65,6 +65,11 @@ test.describe('Code Snippets Preview Modal', () => {
 			await expect(codeArea).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
 			await expect(codeArea).toHaveValue(new RegExp(snippetName))
 
+			// The type badge renders in the modal content (the minimum-supported
+			// WordPress Modal has no headerActions prop).
+			await expect(preview.locator('.code-snippets-preview-modal__badge .badge'))
+				.toBeVisible()
+
 			expect(pageErrors).toEqual([])
 		})
 
@@ -85,10 +90,19 @@ test.describe('Code Snippets Preview Modal', () => {
 
 		const preview = page.locator('.code-snippets-preview-modal')
 		const editor = preview.locator('.CodeMirror')
-		const codeArea = preview.getByLabel('Snippet code preview')
+
+		// 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 })
 
+		// 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()
+
 		for (let attempt = 0; attempt < MAXIMUM_FOCUS_ATTEMPTS; attempt++) {
 			if (await editor.evaluate(element => element.classList.contains('CodeMirror-focused'))) {
 				break
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
new file mode 100644
index 000000000..af465cb6a
--- /dev/null
+++ b/tests/e2e/text-utils.spec.ts
@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test'
+import { stripTags } from '../../src/js/utils/text'
+
+// Pure unit coverage for the text utilities used to render remote cloud
+// descriptions; runs in the Playwright runner without a browser page.
+test.describe('stripTags', () => {
+	test('preserves separation between block elements', () => {
+		expect(stripTags('<p>First</p><p>Second</p>')).toBe('First Second')
+		expect(stripTags('Line one<br>Line two')).toBe('Line one Line two')
+		expect(stripTags('<ul><li>One</li><li>Two</li></ul>')).toBe('One Two')
+	})
+
+	test('removes inline tags without adding separators', () => {
+		expect(stripTags('Co<strong>de</strong> <em>snippets</em>')).toBe('Code snippets')
+		expect(stripTags('<a href="https://example.com">link</a>')).toBe('link')
+	})
+
+	test('strips comments and PHP blocks', () => {
+		expect(stripTags('A<!-- hidden --><?php evil(); ?>B')).toBe('AB')
+	})
+
+	test('normalises whitespace', () => {
+		expect(stripTags('  <div> spaced\n\nout </div> ')).toBe('spaced out')
+		expect(stripTags('plain text')).toBe('plain text')
+	})
+})
diff --git a/tests/unit/Admin/Menus/Manage_Menu_Test.php b/tests/unit/Admin/Menus/Manage_Menu_Test.php
index 7c945fcad..7f189f4b1 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -3,6 +3,7 @@
 namespace Code_Snippets\Admin\Menus;
 
 use Code_Snippets\Model\Snippet;
+use Code_Snippets\Utils\Code_Highlighter;
 use Code_Snippets\UnitTestCase;
 use ReflectionException;
 use ReflectionMethod;
@@ -272,4 +273,20 @@ public function test_network_bulk_download_requires_network_cap(): void {
 		$this->assertInstanceOf( WP_Error::class, $result );
 		$this->assertSame( 'code_snippets_forbidden_network_download', $result->get_error_code() );
 	}
+
+	/**
+	 * The manage page no longer loads the Prism assets: CodeMirror renders the
+	 * preview modal, and Prism remains registered for the front-end shortcode.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_assets_does_not_enqueue_prism(): void {
+		$menu = new Manage_Menu();
+		$menu->enqueue_assets();
+
+		$this->assertTrue( wp_style_is( Manage_Menu::CSS_HANDLE ) );
+		$this->assertTrue( wp_script_is( Manage_Menu::JS_HANDLE ) );
+		$this->assertFalse( wp_style_is( Code_Highlighter::PRISM_HANDLE ) );
+		$this->assertFalse( wp_script_is( Code_Highlighter::PRISM_HANDLE ) );
+	}
 }
diff --git a/tests/unit/Model/Cloud_Snippets_Test.php b/tests/unit/Model/Cloud_Snippets_Test.php
index a29425f1b..c80a69e54 100644
--- a/tests/unit/Model/Cloud_Snippets_Test.php
+++ b/tests/unit/Model/Cloud_Snippets_Test.php
@@ -177,4 +177,17 @@ public function test_missing_meta_keeps_default_totals(): void {
 		$this->assertSame( 0, $result->page );
 		$this->assertSame( [], $result->available_filters );
 	}
+
+	/**
+	 * Malformed remote description values are normalised to strings at the model boundary.
+	 *
+	 * @return void
+	 */
+	public function test_malformed_description_is_normalised_to_string(): void {
+		$this->assertSame( 'ok', ( new Cloud_Snippet( [ 'description' => 'ok' ] ) )->description );
+		$this->assertSame( '123', ( new Cloud_Snippet( [ 'description' => 123 ] ) )->description );
+		$this->assertSame( '', ( new Cloud_Snippet( [ 'description' => null ] ) )->description );
+		$this->assertSame( '', ( new Cloud_Snippet( [ 'description' => [ 'nested' ] ] ) )->description );
+		$this->assertSame( '', ( new Cloud_Snippet() )->description );
+	}
 }

From c7ba43d9a7be48741235db062b9db8432c992d08 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 17:03:34 +0000
Subject: [PATCH 21/47] fix: correct cloud snippet preview output

---
 src/css/common/_theme.scss       |  8 +++--
 src/js/utils/text.ts             | 10 ++++--
 tests/e2e/badge-contrast.spec.ts | 61 ++++++++++++++++++++++++++++++++
 tests/e2e/text-utils.spec.ts     |  5 +++
 4 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 tests/e2e/badge-contrast.spec.ts

diff --git a/src/css/common/_theme.scss b/src/css/common/_theme.scss
index f15af1ec9..9f376cede 100644
--- a/src/css/common/_theme.scss
+++ b/src/css/common/_theme.scss
@@ -19,11 +19,13 @@ $control-height: 30px;
 
 /* format: background-color [color] */
 $badges: (
-	php: #1d97c6,
-	html: #ef6a36,
+	// php/html/cond darkened for WCAG AA — at least 4.5:1 against white 12px
+	// bold text; php reuses $accent, html/cond keep hue at reduced lightness.
+	php: $accent,
+	html: #cd4510,
 	css: #9b59b6,
 	js: #ffeb3b #1c1f20,
-	cond: #2eae95,
+	cond: #22826f,
 	core: #61c5cb,
 	pro: #f7e8e3 #df9279,
 	cloud: $cloud,
diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index f9508e6ba..00510a2c8 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -32,12 +32,18 @@ const BLOCK_TAGS = [
 	'ol', 'p', 'pre', 'section', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul'
 ]
 
-const BLOCK_TAG_PATTERN = new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b[^>]*>`, 'gi')
+// Quote-aware attribute matcher so `>` inside quoted attribute values does
+// not end the tag early, e.g. `<p title="1 > 0">`.
+const TAG_ATTRIBUTES = '(?:[^>"\']|"[^"]*"|\'[^\']*\')*'
+
+const BLOCK_TAG_PATTERN = new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b${TAG_ATTRIBUTES}>`, 'gi')
+
+const GENERIC_TAG_PATTERN = new RegExp(`</?[a-z][a-z0-9]*\\b${TAG_ATTRIBUTES}>`, 'gi')
 
 export const stripTags = (text: string): string =>
 	text
 		.replace(/<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi, '')
 		.replace(BLOCK_TAG_PATTERN, ' ')
-		.replace(/<\/?[a-z][a-z0-9]*\b[^>]*>/gi, '')
+		.replace(GENERIC_TAG_PATTERN, '')
 		.replace(/\s+/g, ' ')
 		.trim()
diff --git a/tests/e2e/badge-contrast.spec.ts b/tests/e2e/badge-contrast.spec.ts
new file mode 100644
index 000000000..b5b84081e
--- /dev/null
+++ b/tests/e2e/badge-contrast.spec.ts
@@ -0,0 +1,61 @@
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { expect, test } from '@playwright/test'
+
+// WCAG AA contrast coverage for snippet type badges (12px bold = normal text,
+// 4.5:1 minimum). Reads the palette straight from the SCSS theme so palette
+// edits cannot silently regress accessibility; runs without a browser page.
+
+const SNIPPET_TYPES = ['php', 'html', 'css', 'js', 'cond']
+const AA_NORMAL_TEXT = 4.5
+const DEFAULT_TEXT_COLOR = '#fff'
+
+const themeScss = readFileSync(
+	join(__dirname, '..', '..', 'src', 'css', 'common', '_theme.scss'),
+	'utf8'
+)
+
+const scssVariable = (name: string): string => {
+	const match = new RegExp(`^\\$${name}:\\s*(#[0-9a-fA-F]{3,8});`, 'm').exec(themeScss)
+	if (!match) {
+		throw new Error(`could not resolve $${name} in _theme.scss`)
+	}
+	return match[1]
+}
+
+const badgeColors = (name: string): [string, string] => {
+	const badgesMap = /\$badges:\s*\((?<entries>[\s\S]*?)\);/.exec(themeScss)?.groups?.entries
+	const entry = badgesMap
+		? new RegExp(`^\\s*${name}:\\s*([^,\\n]+)`, 'm').exec(badgesMap)?.[1].trim()
+		: undefined
+	if (!entry) {
+		throw new Error(`no $badges entry for ${name}`)
+	}
+	const [background, text = DEFAULT_TEXT_COLOR] = entry
+		.split(/\s+/)
+		.map(value => value.startsWith('$') ? scssVariable(value.slice(1)) : value)
+	return [background, text]
+}
+
+const luminance = (hex: string): number => {
+	const digits = hex.replace('#', '')
+	const expanded = 3 === digits.length ? digits.replace(/./g, c => c + c) : digits
+	const [r, g, b] = [0, 2, 4]
+		.map(i => parseInt(expanded.slice(i, i + 2), 16) / 255)
+		.map(v => 0.03928 >= v ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4)
+	return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+const contrastRatio = (a: string, b: string): number => {
+	const [lighter, darker] = [luminance(a), luminance(b)].sort((x, y) => y - x)
+	return (lighter + 0.05) / (darker + 0.05)
+}
+
+test.describe('badge contrast', () => {
+	for (const type of SNIPPET_TYPES) {
+		test(`${type} badge meets WCAG AA for normal text`, () => {
+			const [background, text] = badgeColors(type)
+			expect(contrastRatio(background, text)).toBeGreaterThanOrEqual(AA_NORMAL_TEXT)
+		})
+	}
+})
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index af465cb6a..35b21c9ce 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -10,6 +10,11 @@ test.describe('stripTags', () => {
 		expect(stripTags('<ul><li>One</li><li>Two</li></ul>')).toBe('One Two')
 	})
 
+	test('handles ">" inside quoted attribute values', () => {
+		expect(stripTags('<p title="1 > 0">First</p><p>Second</p>')).toBe('First Second')
+		expect(stripTags("<span title='a > b'>inline</span>")).toBe('inline')
+	})
+
 	test('removes inline tags without adding separators', () => {
 		expect(stripTags('Co<strong>de</strong> <em>snippets</em>')).toBe('Code snippets')
 		expect(stripTags('<a href="https://example.com">link</a>')).toBe('link')

From 5cc1582740778ac3f2866c71826e600e7f61fbcd Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 17:38:25 +0000
Subject: [PATCH 22/47] fix: strip malformed tags with unbalanced quotes in
 stripTags

---
 src/js/utils/text.ts         | 9 +++++++++
 tests/e2e/text-utils.spec.ts | 7 +++++++
 2 files changed, 16 insertions(+)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 00510a2c8..5c237c86f 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -40,10 +40,19 @@ const BLOCK_TAG_PATTERN = new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b${TAG_ATT
 
 const GENERIC_TAG_PATTERN = new RegExp(`</?[a-z][a-z0-9]*\\b${TAG_ATTRIBUTES}>`, 'gi')
 
+// Malformed tags with unbalanced quotes never satisfy the quote-aware
+// patterns above, e.g. `<p title="unterminated>`, so anything still looking
+// like a tag afterwards is stripped up to the nearest `>` (or end of input).
+const BLOCK_TAG_FALLBACK_PATTERN = new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b[^>]*(?:>|$)`, 'gi')
+
+const GENERIC_TAG_FALLBACK_PATTERN = /<\/?[a-z][a-z0-9]*\b[^>]*(?:>|$)/gi
+
 export const stripTags = (text: string): string =>
 	text
 		.replace(/<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi, '')
 		.replace(BLOCK_TAG_PATTERN, ' ')
 		.replace(GENERIC_TAG_PATTERN, '')
+		.replace(BLOCK_TAG_FALLBACK_PATTERN, ' ')
+		.replace(GENERIC_TAG_FALLBACK_PATTERN, '')
 		.replace(/\s+/g, ' ')
 		.trim()
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index 35b21c9ce..d90dc9c1f 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -15,6 +15,13 @@ test.describe('stripTags', () => {
 		expect(stripTags("<span title='a > b'>inline</span>")).toBe('inline')
 	})
 
+	test('handles malformed tags with unbalanced quotes', () => {
+		expect(stripTags('<p title="unterminated>Visible</p>')).toBe('Visible')
+		expect(stripTags("<p title='unterminated>Visible</p>")).toBe('Visible')
+		expect(stripTags('<div class="a>One</div><p>Two</p>')).toBe('One Two')
+		expect(stripTags('<span data-x="broken>inline</span> text')).toBe('inline text')
+	})
+
 	test('removes inline tags without adding separators', () => {
 		expect(stripTags('Co<strong>de</strong> <em>snippets</em>')).toBe('Code snippets')
 		expect(stripTags('<a href="https://example.com">link</a>')).toBe('link')

From 87467c30800226ae4626866a90a4cdd3e870a950 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 17:38:45 +0000
Subject: [PATCH 23/47] fix: raise locked badge contrast to WCAG AA

---
 src/css/common/_badges.scss      |  4 +++-
 tests/e2e/badge-contrast.spec.ts | 33 ++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/css/common/_badges.scss b/src/css/common/_badges.scss
index 5dcaaf0b8..a2ad6bd90 100644
--- a/src/css/common/_badges.scss
+++ b/src/css/common/_badges.scss
@@ -89,10 +89,12 @@
 	}
 }
 
+// #646970 (WP gray-50) keeps white badge text at 5.5:1 so locked/unlicensed
+// states stay WCAG AA without hover; #a7aaad was 2.3:1.
 .nav-tab-inactive .badge,
 .inverted-badges .badge {
 	color: #fff;
-	background-color: #a7aaad;
+	background-color: #646970;
 	border-color: #fff !important;
 
 	.dashicons {
diff --git a/tests/e2e/badge-contrast.spec.ts b/tests/e2e/badge-contrast.spec.ts
index b5b84081e..4064240d2 100644
--- a/tests/e2e/badge-contrast.spec.ts
+++ b/tests/e2e/badge-contrast.spec.ts
@@ -8,6 +8,7 @@ import { expect, test } from '@playwright/test'
 
 const SNIPPET_TYPES = ['php', 'html', 'css', 'js', 'cond']
 const AA_NORMAL_TEXT = 4.5
+const AA_GRAPHICAL = 3
 const DEFAULT_TEXT_COLOR = '#fff'
 
 const themeScss = readFileSync(
@@ -59,3 +60,35 @@ test.describe('badge contrast', () => {
 		})
 	}
 })
+
+// The unlicensed snippet type picker renders through the `.inverted-badges
+// .badge` override in _badges.scss rather than the theme palette, so read
+// that consumer rule directly — this test must fail if the override regresses
+// even while every $badges entry passes.
+test.describe('locked-state badge contrast', () => {
+	const badgesScss = readFileSync(
+		join(__dirname, '..', '..', 'src', 'css', 'common', '_badges.scss'),
+		'utf8'
+	)
+
+	const lockedRule =
+		/\.inverted-badges \.badge \{\s*color:\s*(?<text>#[0-9a-fA-F]{3,8});\s*background-color:\s*(?<background>#[0-9a-fA-F]{3,8});/
+			.exec(badgesScss)?.groups
+
+	const lockedIcon = /\.inverted-badges \.badge \{[\s\S]*?\.dashicons \{\s*color:\s*(?<icon>#[0-9a-fA-F]{3,8});/
+		.exec(badgesScss)?.groups
+
+	test('locked badge text meets WCAG AA for normal text', () => {
+		if (!lockedRule) {
+			throw new Error('could not resolve .inverted-badges .badge colors in _badges.scss')
+		}
+		expect(contrastRatio(lockedRule.background, lockedRule.text)).toBeGreaterThanOrEqual(AA_NORMAL_TEXT)
+	})
+
+	test('locked badge icon meets WCAG AA for graphical objects', () => {
+		if (!lockedRule || !lockedIcon) {
+			throw new Error('could not resolve .inverted-badges .badge dashicons color in _badges.scss')
+		}
+		expect(contrastRatio(lockedRule.background, lockedIcon.icon)).toBeGreaterThanOrEqual(AA_GRAPHICAL)
+	})
+})

From 790f7412b7d61b208358f1bd0d90e0be8bfa8ace Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 17:54:16 +0000
Subject: [PATCH 24/47] fix: preserve plain comparison text in stripTags
 fallback

---
 src/js/utils/text.ts         | 12 +++++++++---
 tests/e2e/text-utils.spec.ts | 11 +++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 5c237c86f..695effd10 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -42,10 +42,16 @@ const GENERIC_TAG_PATTERN = new RegExp(`</?[a-z][a-z0-9]*\\b${TAG_ATTRIBUTES}>`,
 
 // Malformed tags with unbalanced quotes never satisfy the quote-aware
 // patterns above, e.g. `<p title="unterminated>`, so anything still looking
-// like a tag afterwards is stripped up to the nearest `>` (or end of input).
-const BLOCK_TAG_FALLBACK_PATTERN = new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b[^>]*(?:>|$)`, 'gi')
+// like a tag afterwards is stripped up to the nearest `>`. Without a `>`, the
+// remnant is only stripped to end of input when it contains an unterminated
+// quote, so plain comparison text such as `x<y` is preserved.
+const UNTERMINATED_QUOTE_TO_END = '(?:[^>"\']|"[^">]*"|\'[^\'>]*\')*(?:"[^">]*|\'[^\'>]*)$'
 
-const GENERIC_TAG_FALLBACK_PATTERN = /<\/?[a-z][a-z0-9]*\b[^>]*(?:>|$)/gi
+const BLOCK_TAG_FALLBACK_PATTERN =
+	new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b(?:[^>]*>|${UNTERMINATED_QUOTE_TO_END})`, 'gi')
+
+const GENERIC_TAG_FALLBACK_PATTERN =
+	new RegExp(`</?[a-z][a-z0-9]*\\b(?:[^>]*>|${UNTERMINATED_QUOTE_TO_END})`, 'gi')
 
 export const stripTags = (text: string): string =>
 	text
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index d90dc9c1f..64e937fb7 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -22,6 +22,17 @@ test.describe('stripTags', () => {
 		expect(stripTags('<span data-x="broken>inline</span> text')).toBe('inline text')
 	})
 
+	test('preserves plain comparison text at end of input', () => {
+		expect(stripTags('x<y')).toBe('x<y')
+		expect(stripTags('x<y and z')).toBe('x<y and z')
+		expect(stripTags('x<p')).toBe('x<p')
+	})
+
+	test('strips unterminated-quote tag remnant at end of input', () => {
+		expect(stripTags('Visible <p title="broken')).toBe('Visible')
+		expect(stripTags("Visible <span data-x='broken")).toBe('Visible')
+	})
+
 	test('removes inline tags without adding separators', () => {
 		expect(stripTags('Co<strong>de</strong> <em>snippets</em>')).toBe('Code snippets')
 		expect(stripTags('<a href="https://example.com">link</a>')).toBe('link')

From eac9b3557238584c4472c95a90bf7c79a4d7abc0 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 18:26:19 +0000
Subject: [PATCH 25/47] fix: make stripTags fallback linear

---
 src/js/utils/text.ts         | 168 +++++++++++++++++++++++++++--------
 tests/e2e/text-utils.spec.ts |  14 +++
 2 files changed, 147 insertions(+), 35 deletions(-)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 695effd10..6d5c134f8 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -26,39 +26,137 @@ export const truncateWords = (text: string, wordCount: number): string => {
 
 // Tags implying a visual break become whitespace so `<p>A</p><p>B</p>`
 // yields 'A B' rather than 'AB'; inline tags are removed without separators.
-const BLOCK_TAGS = [
+const BLOCK_TAG_NAMES = new Set([
 	'address', 'article', 'aside', 'blockquote', 'br', 'dd', 'div', 'dl', 'dt', 'fieldset',
-	'figcaption', 'figure', 'footer', 'form', 'h[1-6]', 'header', 'hr', 'li', 'main', 'nav',
-	'ol', 'p', 'pre', 'section', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul'
-]
-
-// Quote-aware attribute matcher so `>` inside quoted attribute values does
-// not end the tag early, e.g. `<p title="1 > 0">`.
-const TAG_ATTRIBUTES = '(?:[^>"\']|"[^"]*"|\'[^\']*\')*'
-
-const BLOCK_TAG_PATTERN = new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b${TAG_ATTRIBUTES}>`, 'gi')
-
-const GENERIC_TAG_PATTERN = new RegExp(`</?[a-z][a-z0-9]*\\b${TAG_ATTRIBUTES}>`, 'gi')
-
-// Malformed tags with unbalanced quotes never satisfy the quote-aware
-// patterns above, e.g. `<p title="unterminated>`, so anything still looking
-// like a tag afterwards is stripped up to the nearest `>`. Without a `>`, the
-// remnant is only stripped to end of input when it contains an unterminated
-// quote, so plain comparison text such as `x<y` is preserved.
-const UNTERMINATED_QUOTE_TO_END = '(?:[^>"\']|"[^">]*"|\'[^\'>]*\')*(?:"[^">]*|\'[^\'>]*)$'
-
-const BLOCK_TAG_FALLBACK_PATTERN =
-	new RegExp(`</?(?:${BLOCK_TAGS.join('|')})\\b(?:[^>]*>|${UNTERMINATED_QUOTE_TO_END})`, 'gi')
-
-const GENERIC_TAG_FALLBACK_PATTERN =
-	new RegExp(`</?[a-z][a-z0-9]*\\b(?:[^>]*>|${UNTERMINATED_QUOTE_TO_END})`, 'gi')
-
-export const stripTags = (text: string): string =>
-	text
-		.replace(/<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi, '')
-		.replace(BLOCK_TAG_PATTERN, ' ')
-		.replace(GENERIC_TAG_PATTERN, '')
-		.replace(BLOCK_TAG_FALLBACK_PATTERN, ' ')
-		.replace(GENERIC_TAG_FALLBACK_PATTERN, '')
-		.replace(/\s+/g, ' ')
-		.trim()
+	'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header',
+	'hr', 'li', 'main', 'nav', 'ol', 'p', 'pre', 'section', 'table', 'tbody', 'td', 'tfoot',
+	'th', 'thead', 'tr', 'ul'
+])
+
+const TAG_START = /<\/?(?<name>[a-z][a-z0-9]*)/iy
+
+// Tag stripping is manual scanning rather than regexes because the regex
+// equivalents rescanned to end of input at every failed tag-like start,
+// going quadratic on repeated comparison text such as `a<b ... c<d ...`.
+// The suffix memos below make every check constant-time after one linear
+// reverse pass per input.
+
+// memo[position] is the index of the first `>` at or after `position` that
+// is not inside a quoted attribute value, or -1. Quote-aware so `>` inside
+// quoted values, e.g. `<p title="1 > 0">`, does not end a tag early.
+const buildUnquotedGtMemo = (text: string): number[] => {
+	const memo = new Array<number>(text.length + 1)
+	memo[text.length] = -1
+	let nextDouble = -1
+	let nextSingle = -1
+
+	for (let position = text.length - 1; 0 <= position; position--) {
+		const character = text.charAt(position)
+
+		if ('>' === character) {
+			memo[position] = position
+		} else if ('"' === character) {
+			memo[position] = -1 === nextDouble ? -1 : memo[nextDouble + 1]
+			nextDouble = position
+		} else if ("'" === character) {
+			memo[position] = -1 === nextSingle ? -1 : memo[nextSingle + 1]
+			nextSingle = position
+		} else {
+			memo[position] = memo[position + 1]
+		}
+	}
+
+	return memo
+}
+
+// Memo[position - from] is true when a quote-state scan of text from
+// `position` ends inside an unterminated quote. Used on the remnant after
+// the last `>`: a tag-like start there is only stripped to end of input when
+// it contains an unterminated quote, e.g. `<p title="broken`, so plain
+// comparison text such as `x<y` is preserved.
+const buildOpenQuoteMemo = (text: string, from: number): boolean[] => {
+	const memo = new Array<boolean>(text.length + 1 - from)
+	memo[text.length - from] = false
+	let nextDouble = -1
+	let nextSingle = -1
+
+	for (let position = text.length - 1; position >= from; position--) {
+		const character = text.charAt(position)
+
+		if ('"' === character) {
+			memo[position - from] = -1 === nextDouble || memo[nextDouble + 1 - from]
+			nextDouble = position
+		} else if ("'" === character) {
+			memo[position - from] = -1 === nextSingle || memo[nextSingle + 1 - from]
+			nextSingle = position
+		} else {
+			memo[position - from] = memo[position + 1 - from]
+		}
+	}
+
+	return memo
+}
+
+// One stripping pass. Quote-aware passes remove well-formed tags, ending at
+// the first `>` outside quoted attribute values. Fallback passes then remove
+// malformed remnants that never satisfy the quote-aware parse, stripping to
+// the nearest `>` regardless of quotes, or to end of input when the remnant
+// after the last `>` contains an unterminated quote.
+const stripTagsPass = (text: string, tagNames: Set<string> | undefined, replacement: string, quoteAware: boolean): string => {
+	const lastGt = text.lastIndexOf('>')
+	let unquotedGtMemo: number[] | undefined
+	let openQuoteMemo: boolean[] | undefined
+	let result = ''
+	let copied = 0
+	let position = text.indexOf('<')
+
+	while (-1 !== position) {
+		TAG_START.lastIndex = position
+		const name = TAG_START.exec(text)?.groups?.name
+		const nameEnd = TAG_START.lastIndex
+
+		if (!name || tagNames && !tagNames.has(name.toLowerCase()) || /\w/.test(text.charAt(nameEnd))) {
+			position = text.indexOf('<', position + 1)
+			continue
+		}
+
+		let end: number
+
+		if (quoteAware) {
+			unquotedGtMemo ??= buildUnquotedGtMemo(text)
+			const unquotedGt = unquotedGtMemo[nameEnd]
+
+			if (-1 === unquotedGt) {
+				position = text.indexOf('<', position + 1)
+				continue
+			}
+
+			end = unquotedGt + 1
+		} else if (position <= lastGt) {
+			end = text.indexOf('>', nameEnd) + 1
+		} else {
+			openQuoteMemo ??= buildOpenQuoteMemo(text, lastGt + 1)
+
+			if (!openQuoteMemo[nameEnd - lastGt - 1]) {
+				position = text.indexOf('<', nameEnd)
+				continue
+			}
+
+			end = text.length
+		}
+
+		result += text.slice(copied, position) + replacement
+		copied = end
+		position = text.indexOf('<', end)
+	}
+
+	return 0 === copied ? text : result + text.slice(copied)
+}
+
+export const stripTags = (text: string): string => {
+	const withoutComments = text.replace(/<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi, '')
+	const withoutTags = stripTagsPass(stripTagsPass(withoutComments, BLOCK_TAG_NAMES, ' ', true), undefined, '', true)
+	const withoutRemnants = stripTagsPass(stripTagsPass(withoutTags, BLOCK_TAG_NAMES, ' ', false), undefined, '', false)
+
+	return withoutRemnants.replace(/\s+/g, ' ').trim()
+}
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index 64e937fb7..f5e9b585d 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -31,6 +31,20 @@ test.describe('stripTags', () => {
 	test('strips unterminated-quote tag remnant at end of input', () => {
 		expect(stripTags('Visible <p title="broken')).toBe('Visible')
 		expect(stripTags("Visible <span data-x='broken")).toBe('Visible')
+		expect(stripTags('keep <x till <p title="broken')).toBe('keep <x till')
+		expect(stripTags('a <x"m<z"')).toBe('a <x"m')
+		expect(stripTags('a <x "q" ok')).toBe('a <x "q" ok')
+	})
+
+	test('strips block remnants before generic remnants', () => {
+		expect(stripTags('<span <div x> y')).toBe('<span y')
+	})
+
+	test('scales linearly on repeated comparison text', () => {
+		const input = 'if (a<b && c<d) run(); '.repeat(16000)
+		const started = performance.now()
+		expect(stripTags(input)).toBe(input.trim())
+		expect(performance.now() - started).toBeLessThan(2000)
 	})
 
 	test('removes inline tags without adding separators', () => {

From 308dc5e33d4325ce50cdb12637b9ff31f7014531 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 18:49:44 +0000
Subject: [PATCH 26/47] fix: make stripTags comment removal linear

---
 src/js/utils/text.ts         | 39 +++++++++++++++++++++++++++++++++++-
 tests/e2e/text-utils.spec.ts | 12 +++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 6d5c134f8..3e57a3009 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -97,6 +97,43 @@ const buildOpenQuoteMemo = (text: string, from: number): boolean[] => {
 	return memo
 }
 
+// Comment and PHP removal is a manual scan for the same reason: the regex
+// alternation rescanned to end of input at every unmatched `<!--` or `<?`
+// opener, going quadratic on repeated unmatched openers. The lastIndexOf
+// guards make unmatched openers constant-time, and closer searches for
+// matched spans cover disjoint ranges, so the scan is linear.
+const stripCommentsAndPhp = (text: string): string => {
+	const lastCommentClose = text.lastIndexOf('-->')
+	const lastPhpClose = text.lastIndexOf('?>')
+	let result = ''
+	let copied = 0
+	let position = text.indexOf('<')
+
+	while (-1 !== position) {
+		let close = -1
+		let closeLength = 0
+
+		if (text.startsWith('<!--', position)) {
+			close = lastCommentClose >= position + '<!--'.length ? text.indexOf('-->', position + '<!--'.length) : -1
+			closeLength = '-->'.length
+		} else if (text.startsWith('<?', position)) {
+			close = lastPhpClose >= position + '<?'.length ? text.indexOf('?>', position + '<?'.length) : -1
+			closeLength = '?>'.length
+		}
+
+		if (-1 === close) {
+			position = text.indexOf('<', position + 1)
+			continue
+		}
+
+		result += text.slice(copied, position)
+		copied = close + closeLength
+		position = text.indexOf('<', copied)
+	}
+
+	return 0 === copied ? text : result + text.slice(copied)
+}
+
 // One stripping pass. Quote-aware passes remove well-formed tags, ending at
 // the first `>` outside quoted attribute values. Fallback passes then remove
 // malformed remnants that never satisfy the quote-aware parse, stripping to
@@ -154,7 +191,7 @@ const stripTagsPass = (text: string, tagNames: Set<string> | undefined, replacem
 }
 
 export const stripTags = (text: string): string => {
-	const withoutComments = text.replace(/<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi, '')
+	const withoutComments = stripCommentsAndPhp(text)
 	const withoutTags = stripTagsPass(stripTagsPass(withoutComments, BLOCK_TAG_NAMES, ' ', true), undefined, '', true)
 	const withoutRemnants = stripTagsPass(stripTagsPass(withoutTags, BLOCK_TAG_NAMES, ' ', false), undefined, '', false)
 
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index f5e9b585d..5bad788bc 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -54,6 +54,18 @@ test.describe('stripTags', () => {
 
 	test('strips comments and PHP blocks', () => {
 		expect(stripTags('A<!-- hidden --><?php evil(); ?>B')).toBe('AB')
+		expect(stripTags('<!--a--><!--b-->C<??><?PHP d?>')).toBe('C')
+		expect(stripTags('A<!-- unterminated')).toBe('A<!-- unterminated')
+		expect(stripTags('B<?php unterminated')).toBe('B<?php unterminated')
+	})
+
+	test('scales linearly on repeated unmatched comment and PHP openers', () => {
+		for (const opener of ['<!--x', '<?php x']) {
+			const input = opener.repeat(16000)
+			const started = performance.now()
+			expect(stripTags(input)).toBe(input)
+			expect(performance.now() - started).toBeLessThan(2000)
+		}
 	})
 
 	test('normalises whitespace', () => {

From 1013055c4284c2a6eb1e05c2596dd53ffd963cb5 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 19:15:08 +0000
Subject: [PATCH 27/47] fix: strengthen stripTags performance regression test

---
 tests/e2e/text-utils.spec.ts | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index 5bad788bc..602be79f7 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -60,11 +60,30 @@ test.describe('stripTags', () => {
 	})
 
 	test('scales linearly on repeated unmatched comment and PHP openers', () => {
+		// Growth-ratio check: time the same workload at 4x the input size and
+		// bound the growth. A linear scan grows ~4x; the previous regex
+		// alternation rescanned to end of input at every unmatched opener,
+		// growing ~16x and failing this bound. The best-of-three timing and
+		// the absolute floor absorb timer noise on near-instant runs without
+		// letting quadratic growth back under an absolute threshold.
+		const timeStrip = (opener: string, repeats: number): number => {
+			const input = opener.repeat(repeats)
+			let best = Infinity
+
+			for (let attempt = 0; 3 > attempt; attempt++) {
+				const started = performance.now()
+				expect(stripTags(input)).toBe(input)
+				best = Math.min(best, performance.now() - started)
+			}
+
+			return best
+		}
+
 		for (const opener of ['<!--x', '<?php x']) {
-			const input = opener.repeat(16000)
-			const started = performance.now()
-			expect(stripTags(input)).toBe(input)
-			expect(performance.now() - started).toBeLessThan(2000)
+			const base = timeStrip(opener, 4000)
+			const scaled = timeStrip(opener, 16000)
+
+			expect(scaled).toBeLessThan(Math.max(8 * base, 50))
 		}
 	})
 

From 12acf1204b7e9f1c0dbf87a164c4a8ef2caf77d4 Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 19:37:56 +0000
Subject: [PATCH 28/47] fix: remove historical test comment

---
 tests/e2e/text-utils.spec.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index 602be79f7..0f5b5fbe2 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -60,12 +60,6 @@ test.describe('stripTags', () => {
 	})
 
 	test('scales linearly on repeated unmatched comment and PHP openers', () => {
-		// Growth-ratio check: time the same workload at 4x the input size and
-		// bound the growth. A linear scan grows ~4x; the previous regex
-		// alternation rescanned to end of input at every unmatched opener,
-		// growing ~16x and failing this bound. The best-of-three timing and
-		// the absolute floor absorb timer noise on near-instant runs without
-		// letting quadratic growth back under an absolute threshold.
 		const timeStrip = (opener: string, repeats: number): number => {
 			const input = opener.repeat(repeats)
 			let best = Infinity

From fa2d4e7a6d28db75f47ba7c899e9c2f89d5b63ef Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 20:43:49 +0000
Subject: [PATCH 29/47] fix: decode cloud description entities

---
 src/js/utils/text.ts         | 49 +++++++++++++++++++++++++++++++++++-
 tests/e2e/text-utils.spec.ts | 34 ++++++++++++++++++++++++-
 2 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 3e57a3009..43ad9dd3e 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -190,10 +190,57 @@ const stripTagsPass = (text: string, tagNames: Set<string> | undefined, replacem
 	return 0 === copied ? text : result + text.slice(copied)
 }
 
+const NAMED_ENTITIES: Record<string, string> = {
+	amp: '&',
+	apos: "'",
+	copy: '©',
+	gt: '>',
+	hellip: '…',
+	laquo: '«',
+	ldquo: '“',
+	lsquo: '‘',
+	lt: '<',
+	mdash: '—',
+	nbsp: '\u00a0',
+	ndash: '–',
+	quot: '"',
+	raquo: '»',
+	rdquo: '”',
+	reg: '®',
+	rsquo: '’',
+	trade: '™'
+}
+
+const DECIMAL_RADIX = 10
+const HEX_RADIX = 16
+const MAX_CODE_POINT = 0x10ffff
+const SURROGATE_RANGE_START = 0xd800
+const SURROGATE_RANGE_END = 0xdfff
+
+// A single left-to-right pass never rescans replacement output, so
+// double-encoded input such as `&amp;lt;` decodes to `&lt;` and not `<`.
+export const decodeEntities = (text: string): string =>
+	text.replace(
+		/&(?:#(?<decimal>\d{1,7})|#x(?<hex>[\da-f]{1,6})|(?<named>[a-z]+));/gi,
+		(match, decimal: string | undefined, hex: string | undefined, named: string | undefined) => {
+			if (undefined !== named) {
+				return NAMED_ENTITIES[named.toLowerCase()] ?? match
+			}
+
+			const code = parseInt(decimal ?? hex ?? '', undefined === decimal ? HEX_RADIX : DECIMAL_RADIX)
+
+			return 0 < code && MAX_CODE_POINT >= code && (SURROGATE_RANGE_START > code || SURROGATE_RANGE_END < code)
+				? String.fromCodePoint(code)
+				: match
+		}
+	)
+
 export const stripTags = (text: string): string => {
 	const withoutComments = stripCommentsAndPhp(text)
 	const withoutTags = stripTagsPass(stripTagsPass(withoutComments, BLOCK_TAG_NAMES, ' ', true), undefined, '', true)
 	const withoutRemnants = stripTagsPass(stripTagsPass(withoutTags, BLOCK_TAG_NAMES, ' ', false), undefined, '', false)
 
-	return withoutRemnants.replace(/\s+/g, ' ').trim()
+	// Decoding after stripping turns entities such as `&lt;` into literal text
+	// characters; the result is a plain-text value, never parsed as markup.
+	return decodeEntities(withoutRemnants).replace(/\s+/g, ' ').trim()
 }
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index 0f5b5fbe2..0dca6545b 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { stripTags } from '../../src/js/utils/text'
+import { decodeEntities, stripTags } from '../../src/js/utils/text'
 
 // Pure unit coverage for the text utilities used to render remote cloud
 // descriptions; runs in the Playwright runner without a browser page.
@@ -85,4 +85,36 @@ test.describe('stripTags', () => {
 		expect(stripTags('  <div> spaced\n\nout </div> ')).toBe('spaced out')
 		expect(stripTags('plain text')).toBe('plain text')
 	})
+
+	test('decodes HTML entities after stripping tags', () => {
+		expect(stripTags('<p>A &amp; B</p>')).toBe('A & B')
+		expect(stripTags('Fish&nbsp;&amp;&nbsp;chips')).toBe('Fish & chips')
+		expect(stripTags('It&#039;s &quot;quoted&quot;')).toBe('It\'s "quoted"')
+		expect(stripTags('one&hellip; <b>two</b>')).toBe('one… two')
+	})
+
+	test('decoded entities stay literal text, not markup', () => {
+		expect(stripTags('&lt;script&gt;alert(1)&lt;/script&gt;')).toBe('<script>alert(1)</script>')
+		expect(stripTags('<p>&lt;b&gt;not bold&lt;/b&gt;</p>')).toBe('<b>not bold</b>')
+	})
+})
+
+test.describe('decodeEntities', () => {
+	test('decodes named, decimal, and hexadecimal entities', () => {
+		expect(decodeEntities('A &amp; B')).toBe('A & B')
+		expect(decodeEntities('&#65;&#x42;&#X43;')).toBe('ABC')
+		expect(decodeEntities('&copy; &trade; &rsquo;')).toBe('© ™ ’')
+	})
+
+	test('does not double-decode', () => {
+		expect(decodeEntities('&amp;lt;')).toBe('&lt;')
+		expect(decodeEntities('&amp;amp;')).toBe('&amp;')
+	})
+
+	test('leaves unknown and malformed sequences untouched', () => {
+		expect(decodeEntities('&unknownentity;')).toBe('&unknownentity;')
+		expect(decodeEntities('a && b')).toBe('a && b')
+		expect(decodeEntities('&amp')).toBe('&amp')
+		expect(decodeEntities('&#0;&#x110000;&#xd800;')).toBe('&#0;&#x110000;&#xd800;')
+	})
 })

From 346d28ea726e380e03e9b92330f98ec18b5f86da Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sat, 18 Jul 2026 21:03:01 +0000
Subject: [PATCH 30/47] fix: correct entity decoding comment

---
 src/js/utils/text.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 43ad9dd3e..9cff90de6 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -240,7 +240,7 @@ export const stripTags = (text: string): string => {
 	const withoutTags = stripTagsPass(stripTagsPass(withoutComments, BLOCK_TAG_NAMES, ' ', true), undefined, '', true)
 	const withoutRemnants = stripTagsPass(stripTagsPass(withoutTags, BLOCK_TAG_NAMES, ' ', false), undefined, '', false)
 
-	// Decoding after stripping turns entities such as `&lt;` into literal text
-	// characters; the result is a plain-text value, never parsed as markup.
+	// Callers must render the returned value as text: decoded entities such as
+	// `&lt;` can contain literal markup characters.
 	return decodeEntities(withoutRemnants).replace(/\s+/g, ' ').trim()
 }

From 3264d44e7cd7a2b29faa173bb0812d8be6a1f5fd Mon Sep 17 00:00:00 2001
From: Maisy <maisy@codesnippets.pro>
Date: Sun, 19 Jul 2026 16:03:22 +0000
Subject: [PATCH 31/47] fix: resolve cloud per-page default at request time

---
 src/php/Admin/Menus/Manage_Menu.php                       | 4 +++-
 src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index b1c1fe9ec..f7028a7ff 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -266,11 +266,13 @@ function ( $snippet ) {
 	 *
 	 * The value defaults to the user's local snippets-per-page preference but can
 	 * be overridden independently via the `code_snippets/cloud_search/per_page` filter.
+	 * The result is clamped to the REST API's per_page maximum of 100.
 	 *
 	 * @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( 100, max( 1, $per_page ) );
 	}
 
 	/**
diff --git a/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php b/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
index effa5549d..b28818597 100644
--- a/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
+++ b/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
@@ -195,13 +195,17 @@ public function register_routes() {
 	}
 
 	/**
-	 * Augment the standard controller collection query params with the correct per_page default value.
+	 * Augment the standard controller collection query params for cloud searches.
+	 *
+	 * The per_page default is intentionally removed rather than set here: routes are
+	 * registered once, so a schema default would capture a single user's Screen
+	 * Options value. Callbacks resolve the per-user default at request time instead.
 	 *
 	 * @return array Query parameters for the collection.
 	 */
 	public function get_collection_params(): array {
 		$params = parent::get_collection_params();
-		$params['per_page']['default'] = Manage_Menu::get_cloud_search_per_page();
+		unset( $params['per_page']['default'] );
 		return $params;
 	}
 

From ebf92d887e7792eedc9cb99b310ab84dfdaeccc3 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Tue, 21 Jul 2026 07:12:57 +0200
Subject: [PATCH 32/47] feat: new admin UI foundation (#415)

Co-authored-by: Maisy <maisy@codesnippets.pro>
Co-authored-by: Shea Bunge <shea@sheabunge.com>
---
 src/css/common/_badges.scss                   |  28 ++
 src/css/common/_cards.scss                    |  74 ++-
 src/css/common/_kebab-menu.scss               | 104 +++++
 src/css/common/_list-table.scss               | 317 +------------
 src/css/common/_modal.scss                    |  99 +++-
 src/css/common/_page-header.scss              |  45 ++
 src/css/common/_subnav.scss                   | 175 +++++--
 src/css/common/_switch.scss                   |  26 +-
 src/css/common/_theme.scss                    |  12 +-
 src/css/common/_toolbar.scss                  | 101 +++-
 src/css/common/_wp-admin.scss                 |  61 +--
 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 ++++++++
 src/css/edit/_form.scss                       |  47 +-
 src/css/edit/_sidebar.scss                    |  28 +-
 src/css/import.scss                           |   2 +
 src/css/import/_page.scss                     |  13 +-
 src/css/manage.scss                           |   3 +
 src/css/manage/_cloud-community-cards.scss    | 179 ++++++++
 src/css/manage/_cloud-community.scss          | 131 +-----
 src/css/manage/_snippets-table.scss           | 247 +++++-----
 src/css/menu.scss                             |   8 +-
 src/css/settings.scss                         |  23 +-
 src/css/welcome.scss                          |   7 +-
 .../ConditionModal/ConditionModalButton.tsx   |  14 +-
 .../EditMenu/EditorSidebar/EditorSidebar.tsx  |  11 +-
 .../EditorSidebar/controls/LockControl.tsx    |  11 +-
 .../EditMenu/SnippetForm/SnippetForm.tsx      |  69 ++-
 .../SnippetForm/WithSnippetFormContext.tsx    |  36 +-
 .../fields/SnippetLocationInput.tsx           |   1 +
 .../SnippetForm/fields/SnippetTypeInput.tsx   |  53 ++-
 src/js/components/ImportMenu/ImportMenu.tsx   |  61 +--
 .../ManageMenu/CommunityCloud/CloudSearch.tsx | 144 ++++--
 .../CommunityCloud/CommunityCloud.tsx         |  42 +-
 .../CommunityCloud/SearchFilters.tsx          |  43 +-
 .../CommunityCloud/SearchResult.tsx           | 129 ++++--
 .../SnippetsTable/ManageSnippetCard.tsx       | 224 +++++----
 .../ManageMenu/SnippetsTable/RowActions.tsx   |   1 +
 .../SnippetsTable/SnippetsCardGrid.tsx        | 157 ++-----
 .../SnippetsTable/SnippetsListTable.tsx       | 189 ++------
 .../SnippetsTable/SnippetsTable.tsx           |  96 +++-
 .../SnippetsTable/SnippetsTableControls.tsx   | 137 ++++++
 .../SnippetsTable/SnippetsTableSearch.tsx     |  31 +-
 .../ManageMenu/SnippetsTable/TableColumns.tsx |  53 +--
 src/js/components/common/DeleteButton.tsx     |  80 +++-
 src/js/components/common/KebabMenu.tsx        | 261 +++++++++++
 .../components/common/ListTable/ListTable.tsx | 146 ++++--
 .../common/ListTable/TableNavigation.tsx      |  79 +++-
 .../common/ListTable/TablePagination.tsx      | 227 +--------
 .../ListTable/TablePaginationNavigation.tsx   | 231 ++++++++++
 src/js/components/common/SnippetCard.tsx      |  44 +-
 .../components/common/SnippetPreviewModal.tsx | 276 +++++++++--
 .../common/SnippetPriorityInput.tsx           |  60 +++
 .../components/common/SnippetViewToggle.tsx   |  51 +-
 src/js/components/common/SubnavTabs.tsx       |  13 +-
 src/js/components/common/Toolbar.tsx          |  22 +-
 .../cloud/CloudSnippetDownloadButton.tsx      |   2 +-
 src/js/components/common/icons/ViewIcons.tsx  |  34 ++
 src/js/hooks/useSnippetsList.tsx              |   5 +-
 src/js/hooks/useSubmitSnippet.tsx             |   6 +-
 src/js/types/Window.ts                        |   1 +
 src/js/utils/snippets/snippets.ts             |  21 +
 src/php/Admin/Menus/Manage_Menu.php           | 434 ++----------------
 src/php/Admin/Menus/Manage_Menu_Assets.php    | 106 +++++
 .../Admin/Menus/Manage_Menu_Bulk_Download.php | 165 +++++++
 .../Admin/Menus/Manage_Menu_Registration.php  | 126 +++++
 .../Menus/Manage_Menu_Screen_Options.php      | 169 +++++++
 src/php/Admin/Menus/Settings_Menu.php         |  15 +-
 src/php/Admin/Menus/Snippet_Type_Counter.php  |  41 ++
 src/php/Model/Snippet.php                     |   5 +
 tests/e2e/code-snippets-edit.spec.ts          |  60 +++
 tests/e2e/code-snippets-list.spec.ts          | 122 ++++-
 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   | 222 +++++++++
 .../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   |  90 ++--
 .../Admin/Menus/Snippet_Type_Counter_Test.php |  39 ++
 .../Frontend/Snippet_Form_Source_Test.php     |  30 ++
 tests/unit/Model/Snippet_Test.php             |  27 ++
 tests/unit/REST_API/REST_API_Cloud_Test.php   |  18 +
 86 files changed, 5220 insertions(+), 2222 deletions(-)
 create mode 100644 src/css/common/_kebab-menu.scss
 create mode 100644 src/css/common/_page-header.scss
 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/css/manage/_cloud-community-cards.scss
 create mode 100644 src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
 create mode 100644 src/js/components/common/KebabMenu.tsx
 create mode 100644 src/js/components/common/ListTable/TablePaginationNavigation.tsx
 create mode 100644 src/js/components/common/SnippetPriorityInput.tsx
 create mode 100644 src/js/components/common/icons/ViewIcons.tsx
 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 src/php/Admin/Menus/Snippet_Type_Counter.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
 create mode 100644 tests/unit/Admin/Menus/Snippet_Type_Counter_Test.php
 create mode 100644 tests/unit/Frontend/Snippet_Form_Source_Test.php
 create mode 100644 tests/unit/Model/Snippet_Test.php

diff --git a/src/css/common/_badges.scss b/src/css/common/_badges.scss
index a2ad6bd90..0ccdbf5e2 100644
--- a/src/css/common/_badges.scss
+++ b/src/css/common/_badges.scss
@@ -125,3 +125,31 @@
 		}
 	}
 }
+
+// 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;
+}
+
+
+// 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: normal;
+}
+/* stylelint-enable no-descending-specificity */
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/_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/common/_list-table.scss b/src/css/common/_list-table.scss
index 341cc2e1c..89c5eb866 100644
--- a/src/css/common/_list-table.scss
+++ b/src/css/common/_list-table.scss
@@ -1,313 +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;
-	}
-
-	&.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);
-		}
-
-		td.column-desc .snippet-description-content {
-			max-inline-size: min(25rem, 45vw);
-			overflow: clip;
-		}
-	}
-}
-
-.snippets-table-toolbar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin: 12px 0;
-
-	.subsubsub {
-		display: flex;
-		gap: 5px;
-		margin: 0;
-		padding: 0;
-	}
-}
-
-.tablenav {
-	margin: 20px 0;
-	display: flex;
-	align-items: center;
-}
-
-/* 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 | …): WP 7.0 recolours these with the modern blue. Restore the classic
-   accent for non-current links; the current one keeps its own colour. */
-/* stylelint-disable-next-line no-descending-specificity -- unrelated element; ordering is fine. */
-.subsubsub a:not(.current) {
-	color: theme.$accent;
-
-	&:hover,
-	&:focus {
-		color: theme.$accent-hover;
-	}
-}
-
-.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;
-}
-
-.snippets-search-area,
-.tablenav .displaying-num {
-	margin-inline-start: auto;
-}
-
-.snippets-search-area {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-
-	.search-box {
-		float: none;
-		margin: 0;
-
-		input[type='search'] {
-			inline-size: 260px;
-			min-block-size: 32px;
-		}
-	}
-}
-
-@media (width <= 782px) {
-	p.search-box {
-		float: inline-start;
-		position: initial;
-		margin-block: 1em 0;
-		margin-inline: 0;
-		block-size: auto;
-	}
-}
+@use 'list-table/layout';
+@use 'list-table/navigation';
+@use 'list-table/pagination';
+@use 'list-table/responsive';
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/_page-header.scss b/src/css/common/_page-header.scss
new file mode 100644
index 000000000..81a8c10e0
--- /dev/null
+++ b/src/css/common/_page-header.scss
@@ -0,0 +1,45 @@
+@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.
+.snippets-page-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	gap: 16px 24px;
+	margin-block: 8px 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;
+}
+
+// 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;
+
+	a {
+		color: theme.$accent;
+		text-decoration: underline;
+	}
+}
diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 08ea58f78..088efd410 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -1,10 +1,16 @@
-// 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 white band, with
+// each tab separated by a vertical rule and the active tab shown as a
+// filled tile.
 .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 #c3c4c7;
+
+	// 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;
 
 	// Bleed across the full admin content width, flush against the plugin
 	// toolbar above: counteract the .wrap top margin (10px) plus its 2px /
@@ -16,16 +22,32 @@
 
 	// 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 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: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		ul {
+			flex-wrap: nowrap;
+		}
+
+		.snippet-type-link {
+			white-space: nowrap;
+		}
 	}
 
 	ul {
 		display: flex;
 		align-items: stretch;
-		flex-wrap: wrap;
+		flex-wrap: nowrap;
+		min-block-size: 52px;
 		margin: 0;
 		padding: 0;
 		list-style: none;
@@ -38,11 +60,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 +74,25 @@
 	.snippet-type-link {
 		display: flex;
 		align-items: center;
-		gap: 10px;
-		padding: 18px 20px 14px;
+		justify-content: center;
+		gap: 8px;
+		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-size: 14px;
 		font-weight: 600;
-		color: #1d2327;
+		line-height: 1.5;
+		color: #646970;
 		text-decoration: none;
 		box-sizing: border-box;
-		border-block-end: 4px solid transparent;
+		border-inline-end: 1px solid #e2e2e4;
+
+		// 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;
+		}
 
 		svg {
 			display: block;
@@ -76,10 +102,18 @@
 
 		&:hover,
 		&:focus,
-		&:active,
+		&:active {
+			color: #2c3337;
+		}
+
 		&.active-type {
+			background: #f0f0f1;
+			border-color: #f0f0f1;
 			color: #2271b1;
-			border-block-end-color: currentcolor;
+
+			// 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;
@@ -100,19 +134,51 @@
 		}
 	}
 
-	.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
+// the active view filled in the accent colour.
+.snippet-view-toggle {
+	display: flex;
+	align-items: center;
+	gap: 4px;
 
-	.create-snippet-nav-item {
-		margin-inline-start: 24px;
-		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.
 .snippets-screen-meta-slot {
@@ -128,29 +194,46 @@
 	}
 }
 
-
-// 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, as muted 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-size: 14px;
 	font-weight: 600;
-	line-height: 1;
-	box-sizing: border-box;
+	line-height: 1.5;
+	color: #646970;
 }
 
-.snippet-type-nav .snippet-type-link:not(.active-type) .subnav-count {
-	background: #dbebf7;
+// The active tab's count adopts the accent alongside its label.
+.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;
+}
+
+// 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;
+	}
+
+	.snippet-type-nav .all-type-link .snippet-type-name-full {
+		display: none;
+	}
+
+	.snippet-type-nav .all-type-link .snippet-type-name-short {
+		display: inline;
+	}
+}
+
+// When an admin notice pushes the page content down, restore the gap and top
+// border above the subnav bar.
 .notice + .wrap .snippet-type-nav {
 	margin-block-start: 20px;
 	border-block-start: 1px solid #c3c4c7;
diff --git a/src/css/common/_switch.scss b/src/css/common/_switch.scss
index 3d47ad39b..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)));
 	}
 }
 
@@ -112,14 +113,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/css/common/_theme.scss b/src/css/common/_theme.scss
index 9f376cede..a836dce51 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: (
@@ -24,7 +24,7 @@ $badges: (
 	php: $accent,
 	html: #cd4510,
 	css: #9b59b6,
-	js: #ffeb3b #1c1f20,
+	js: #f7d67a #1c1f20,
 	cond: #22826f,
 	core: #61c5cb,
 	pro: #f7e8e3 #df9279,
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index b05cd0699..7b1abaa5d 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,37 +65,102 @@ $wpcontent-inline-start-indent: 20px;
 }
 
 .code-snippets-toolbar-lower {
-	border-block: 1px solid #c3c4c7;
+	border-block-end: 1px solid #e2e2e4;
+	block-size: 60px;
+	box-sizing: border-box;
+
+	nav,
+	ul {
+		block-size: 100%;
+	}
 
 	ul {
 		display: flex;
-		align-items: end;
+		align-items: stretch;
+	}
+
+	li {
+		display: flex;
 	}
 
+	// 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;
-		padding: 24px 24px 20px;
-		color: inherit;
+		block-size: 100%;
+		padding-block: 0;
+		padding-inline: 24px;
+		color: #2c3337;
 		gap: 12px;
 		align-items: center;
 		font-size: 16px;
+		font-weight: 600;
+		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;
 	}
+
+	// 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. Below 782px the row scrolls
+	// sideways (see the mobile block below) rather than wrapping.
+	@media (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: 7px;
+				inset-inline-end: 4px;
+				padding-block: 1px;
+				padding-inline: 5px;
+				font-size: 8px;
+				line-height: normal;
+			}
+		}
+	}
+
+	// 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: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		ul {
+			flex-wrap: nowrap;
+		}
+
+		li a {
+			white-space: nowrap;
+		}
+	}
 }
 
 .code-snippets-toolbar-upper li a.active-link,
@@ -105,16 +173,18 @@ $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: #eff5f9;
+	border: 1px solid rgb(34 113 177 / 10%);
 	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;
+	padding: 5px 12px;
+	font-weight: 700;
+	line-height: 1;
 }
 
 
@@ -125,7 +195,6 @@ $wpcontent-inline-start-indent: 20px;
 .nav-tab .pro-chip,
 .snippet-type-link .pro-chip {
 	font-size: 10px;
-	padding: 0 6px;
 }
 
 .code-snippets-return-link {
diff --git a/src/css/common/_wp-admin.scss b/src/css/common/_wp-admin.scss
index f511cef57..b94f57a6d 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,17 +72,18 @@
 		}
 	}
 
-	// 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;
-		font-size: 13px;
+		border-radius: theme.$control-radius;
+		line-height: 2.5715;
+		font-size: 14px;
 		font-weight: 400;
 		background: #f6f7f7;
 		border-color: theme.$accent;
@@ -104,15 +103,17 @@
 	}
 
 	// 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;
-		border-radius: 3px;
-		line-height: 2.3077;
-		font-size: 13px;
-		font-weight: 400;
+		border-radius: theme.$control-radius;
+		line-height: 2.5715;
+		font-size: 14px;
+		font-weight: 700;
 		background: theme.$accent;
 		border-color: theme.$accent;
 		color: #fff;
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/css/edit/_form.scss b/src/css/edit/_form.scss
index f11387dad..59a97a24f 100644
--- a/src/css/edit/_form.scss
+++ b/src/css/edit/_form.scss
@@ -9,6 +9,28 @@ $sidebar-gap: 30px;
 	block-size: 45px
 }
 
+// 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%;
+
+	// 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:first-of-type > div:first-child {
+		display: flex;
+		align-items: center;
+		block-size: 45px;
+		padding-block: 0;
+	}
+}
+
 .snippet-type-option {
 	display: flex;
 	align-items: center;
@@ -16,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;
 	}
@@ -23,12 +51,18 @@ $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;
 		gap: 8px;
-		flex: 1;
+		inline-size: 100%;
 		border-color: #ccc;
 		padding-block: 6px;
 		padding-inline: 12px;
@@ -117,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;
+}
diff --git a/src/css/edit/_sidebar.scss b/src/css/edit/_sidebar.scss
index a964a38cc..888307702 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: 12px;
+			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;
@@ -106,11 +120,21 @@
 			&:not(.snippet-lock-button) {
 				border: 0;
 				border-radius: 0;
+				padding-inline: 0;
 				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;
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 428016bcf..885701a62 100644
--- a/src/css/import/_page.scss
+++ b/src/css/import/_page.scss
@@ -1,15 +1,12 @@
 .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;
 }
 
-.nav-tab-wrapper {
-	margin-block-end: 20px;
-}
-
 .import-snippets-section {
 	padding-block-start: 0;
 	display: none;
diff --git a/src/css/manage.scss b/src/css/manage.scss
index 6aab50913..e8567542b 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -10,8 +10,11 @@
 @use 'common/toolbar';
 @use 'common/subnav';
 @use 'common/wp-admin';
+@use 'common/page-header';
+@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 c23c88d34..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 {
@@ -84,136 +82,19 @@ $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 {
 	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 c3c900e5a..6c82a6a78 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,
@@ -15,16 +14,18 @@
 	}
 }
 
-// `.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.
+// `.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: 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
@@ -35,7 +36,7 @@
 	margin-block: 0;
 	margin-inline: 1px;
 	line-height: 2;
-	color: #666;
+	color: #2c3337;
 	text-align: center;
 
 	&:disabled {
@@ -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
@@ -97,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 {
@@ -137,107 +155,77 @@
 		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;
+		font-size: 14px;
+		color: #646970;
+		border-block-start: 1px solid #dcdcde;
+		padding-block-start: 16px;
 	}
 
-	// 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;
-		}
+	// Align the selection checkbox with the taller card header row.
+	.snippet-card-corner {
+		inset-block-start: 28px;
 	}
 
-	.snippet-card-priority {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-
-		input.snippet-priority {
-			inline-size: 4em;
+	.code-snippets-card footer {
+		.button {
+			font-size: 14px;
+			line-height: 2.5714;
+			border-radius: 5px;
 		}
-	}
-
-	.snippet-card-actions {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 8px;
-		margin-inline-start: auto;
-	}
-
-	// 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;
+		.button:not(.button-primary) {
+			background: #fff;
 		}
 	}
 
-	.snippet-card-more-inner {
-		overflow: hidden;
-		min-block-size: 0;
-	}
-
-	.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;
 		}
 	}
 }
 
-// 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.
-.snippets-list-view .tablenav.top {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
+// 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 {
 	block-size: auto;
-	margin-block-end: 20px;
-
-}
-
-.tablenav-pages {
-	.displaying-num {
-		color: #646970;
-		white-space: nowrap;
-	}
+	margin-block-end: 16px;
 }
 
 .snippets-search-subtitle {
@@ -252,12 +240,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.
 .snippets-list-view .wp-list-table td.column-desc .snippet-description-content {
@@ -267,10 +249,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/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;
diff --git a/src/css/settings.scss b/src/css/settings.scss
index df3285f11..43567de82 100644
--- a/src/css/settings.scss
+++ b/src/css/settings.scss
@@ -2,20 +2,29 @@
 @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;
 }
 
 p.submit {
 	display: flex;
-	justify-content: space-between;
+	justify-content: flex-start;
+	gap: 14px;
+
+	.button-secondary {
+		background: transparent;
+	}
+}
+
+.settings-section .form-table th {
+	inline-size: 261px;
+	font-size: 14px;
+	font-weight: 700;
+	color: #2c3337;
 }
 
 .settings-section,
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/ConditionModal/ConditionModalButton.tsx b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
index 7d1eaaa49..38c3faab9 100644
--- a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
+++ b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx
@@ -18,14 +18,16 @@ 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>
-
-					<Badge name="beta" small>{__('beta', 'code-snippets')}</Badge>
-
-					{!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 />
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">
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 bd337e7b6..e2e80b392 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, 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,11 +148,59 @@ const ConditionsEditor: React.FC = () => {
 		: null
 }
 
+const useReloadOnPopState = (isDirty: boolean) => {
+	const currentUrl = useRef(window.location.href)
+	const skipNextUnloadPrompt = useRef(false)
+
+	useEffect(() => {
+		currentUrl.current = window.location.href
+	})
+
+	useEffect(() => {
+		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 } = useSnippetForm()
+	const { snippet, isReadOnly, isDirty } = useSnippetForm()
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 
+	useReloadOnPopState(isDirty)
+
 	return (
 		<>
 			<PageHeading />
@@ -180,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/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..dba44325b 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,22 +28,35 @@ 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
 }
 
-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>
+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}
+		</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 }) => {
@@ -54,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])
@@ -68,21 +84,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/ImportMenu/ImportMenu.tsx b/src/js/components/ImportMenu/ImportMenu.tsx
index f78a8654f..4941d3cbe 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,39 @@ 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>
 		</>
 	)
 }
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 50e233c9c..8e68610b7 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -1,14 +1,21 @@
 import { __ } from '@wordpress/i18n'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import classnames from 'classnames'
 import { Spinner } from '@wordpress/components'
-import { TablePagination } from '../../common/ListTable/TablePagination'
+import { useRestAPI } from '../../../hooks/useRestAPI'
+import { REST_BASES } from '../../../utils/restAPI'
+import { isLicensed } from '../../../utils/screen'
+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'
 import type { SnippetView } from '../../../types/SnippetView'
-import type { TablePaginationProps } from '../../common/ListTable/TablePagination'
-import type { FormEventHandler } from 'react'
+import type { ListTableAction } from '../../common/ListTable/ListTable'
+import type { Dispatch, FormEventHandler, SetStateAction } from 'react'
 
 const SearchBox = () => {
 	const { searchParams, updateSearchParams, isSearching, doSearch } = useCloudSearch()
@@ -59,12 +66,80 @@ const SearchBox = () => {
 	)
 }
 
+const isSnippetDownloadable = (snippet: CloudSnippetSchema): boolean =>
+	!snippet.local_id && (isLicensed() || !isProSnippet(snippet))
+
+interface SearchResultsGridProps {
+	snippets: CloudSnippetSchema[]
+	selected: Set<CloudSnippetSchema['id']>
+	setSelected: Dispatch<SetStateAction<Set<CloudSnippetSchema['id']>>>
+}
+
+const SearchResultsGrid: React.FC<SearchResultsGridProps> = ({ snippets, selected, setSelected }) =>
+	<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 => {
+						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 CLOUD_BULK_ACTIONS: ListTableAction<'download'>[] = [
+	{ key: 'download', label: __('Download', 'code-snippets') }
+]
+
+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])
+
+	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 =>
+			api.post(`${REST_BASES.cloud.snippets}/${snippet.id}/download`)))
+			.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
@@ -72,43 +147,55 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView }) =
 
 	const { totalItems, totalPages, page } = searchResults
 
-	const paginationProps: Omit<TablePaginationProps, 'which'> = {
+	const navProps = {
 		totalItems,
 		totalPages,
+		selected,
+		setSelected,
 		disabled: isSearching,
 		currentPage: page,
-		setCurrentPage: newPage => doSearch({ page: newPage })
+		setCurrentPage: (newPage: number) => doSearch({ page: newPage })
 	}
 
 	return (
-		<>
-			<div className="tablenav top">
-				<SearchFilters />
-
-				<TablePagination which="top" {...paginationProps} />
-			</div>
+		<div className="snippets-list-view">
+			<TableNav
+				which="top"
+				actions={CLOUD_BULK_ACTIONS}
+				doAction={doAction}
+				bulkSelectLabel={__('Bulk actions', 'code-snippets')}
+				selectAllKeys={searchResults.snippets.map(snippet => snippet.id)}
+				extraTableNav={() => <SearchFilters />}
+				endTableNav={which =>
+					'top' === which
+						? <SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
+						: null}
+				{...navProps}
+			/>
 
 			{'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>
-		</>
+			<TableNav which="bottom" {...navProps} />
+		</div>
 	)
 }
 
-const SearchResults: React.FC<SearchResultsViewProps> = ({ snippetView }) => {
+const SearchResults: React.FC<SearchResultsViewProps> = ({ snippetView, setSnippetView }) => {
 	const { searchResults, searchParams, isErrored } = useCloudSearch()
 
 	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>
 		)
 	}
@@ -133,19 +220,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/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index 871abb48a..293a1aa1f 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -1,11 +1,9 @@
 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 +13,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,18 +32,12 @@ const CommunityCloudInner = () => {
 				tabs={[
 					{
 						name: 'snippets',
-						label: __('Code Snippets', 'code-snippets'),
-						icon: <SnippetsIcon aria-hidden="true" />,
+						label: TAB_LABELS.snippets,
 						count: searchResults?.totalItems
 					},
 					{
 						name: 'bundles',
-						label: __('Bundles', 'code-snippets'),
-						icon:
-							<span
-								className="dashicons dashicons-screenoptions snippet-type-icon"
-								aria-hidden="true"
-							></span>,
+						label: TAB_LABELS.bundles,
 						pro: true
 					}
 				]}
@@ -49,18 +46,29 @@ 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>{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 and download user-shared snippets directly to your site.',
+					'code-snippets'
+				)}
+			</p>
+
+			{'snippets' === currentTab &&
+				<CloudSearch snippetView={snippetView} setSnippetView={setSnippetView} />}
 		</>
 	)
 }
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
 }
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/SnippetsCardGrid.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
index 989d59af4..5f88e5cf2 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsCardGrid.tsx
@@ -1,66 +1,13 @@
+import classnames from 'classnames'
 import React, { useMemo, useState } from 'react'
-import { __ } from '@wordpress/i18n'
-import { getSnippetDisplayName, getSnippetType } 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'
 
-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 PAGE_SEARCH_PARAM = 'paged'
 
 interface CardGridProps {
 	snippets: Snippet[]
@@ -71,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}
@@ -94,75 +45,41 @@ 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 {
+interface PagedSnippetsParams {
 	snippets: Snippet[]
-	sortKey: SortKey
 	itemsPerPage: number | undefined
 	currentPage: number
 }
 
 interface PagedSnippets {
-	sortedSnippets: Snippet[]
 	totalPages: number
 	safePage: number
 	visibleSnippets: Snippet[]
 }
 
-const useSortedPagedSnippets = ({ snippets, sortKey, itemsPerPage, currentPage }: SortedPagedSnippetsParams): PagedSnippets => {
-	const sortedSnippets = useMemo(
-		() => snippets.toSorted(SORT_COMPARATORS[sortKey]),
-		[snippets, sortKey]
-	)
-
-	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'> {
+	extends Pick<ListTableNavProps<Snippet['id'], A>, 'extraTableNav' | 'endTableNav'> {
 	snippets: Snippet[]
 	actions: ListTableAction<A>[]
 	doAction: (action: A, selected: Set<Snippet['id']>) => Promise<void>
@@ -176,41 +93,37 @@ export const SnippetsCardGrid = <A extends string>({
 	actions,
 	doAction,
 	extraTableNav,
+	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 [currentPage, setCurrentPage] = useState(
+		() => Number(fetchQueryParam(PAGE_SEARCH_PARAM)) || 1
+	)
 
-	const { sortedSnippets, totalPages, safePage, visibleSnippets } =
-		useSortedPagedSnippets({ snippets, sortKey, itemsPerPage, currentPage })
-	const allSelected = 0 < visibleSnippets.length && visibleSnippets.every(snippet => selected.has(snippet.id))
+	const { totalPages, safePage, visibleSnippets } = usePagedSnippets({
+		snippets,
+		itemsPerPage,
+		currentPage
+	})
 
 	return (
 		<div className="snippets-card-grid-container">
 			<TableNavigation
-				totalItems={sortedSnippets.length}
-				totalPages={1 < 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={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}
+				endTableNav={endTableNav}
 			>
 				{beforeGrid}
 
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index 39c9f9fe0..d91d0e7ba 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -1,105 +1,32 @@
-import { __, _n, _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 { SubmitButton } from '../../common/SubmitButton'
-import { INDEX_STATUS, useSnippetsFilters } from './WithSnippetsTableFilters'
-import { useFilteredSnippets } from './WithFilteredSnippetsContext'
+import { SnippetViewToggle } from '../../common/SnippetViewToggle'
 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], index) =>
-				<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>
-						{index < visibleStatuses.length - 1 && ' | '}
-					</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
 }
 
 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)
 	)
@@ -113,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
 			)
 		}
 
@@ -133,57 +64,29 @@ 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="">{__('Show 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()
+	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`,
@@ -196,6 +99,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>
@@ -206,6 +110,7 @@ interface SnippetsViewProps {
 
 const SnippetsView: React.FC<SnippetsViewProps> = ({
 	snippetView,
+	setSnippetView,
 	snippets,
 	actions,
 	doAction,
@@ -217,6 +122,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 endTableNav = (which: 'top' | 'bottom') =>
+		'top' === which
+			? <SnippetViewToggle snippetView={snippetView} setSnippetView={setSnippetView} />
+			: null
 
 	return 'card' === snippetView
 		? <SnippetsCardGrid
@@ -225,6 +134,7 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 			doAction={doAction}
 			itemsPerPage={itemsPerPage}
 			extraTableNav={extraTableNav}
+			endTableNav={endTableNav}
 			noItems={<NoItemsMessage />}
 			beforeGrid={<SearchResultsIndicator />}
 		/>
@@ -237,6 +147,8 @@ const SnippetsView: React.FC<SnippetsViewProps> = ({
 			doAction={doAction}
 			totalPages={pageCount}
 			extraTableNav={extraTableNav}
+			selectAllControl
+			endTableNav={endTableNav}
 			rowClassName={snippet => getRowClassName(snippet, activeByCondition)}
 			noItems={<NoItemsMessage />}
 			beforeTable={<SearchResultsIndicator />}
@@ -245,9 +157,13 @@ 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()
@@ -265,29 +181,16 @@ export const SnippetsListTable: React.FC<SnippetsListTableProps> = ({ snippetVie
 	}, [currentStatus, setCurrentStatus, snippetsByStatus])
 
 	const extraTableNav = (which: 'top' | 'bottom') =>
-		<>
-			{'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>
-		</>
+		<SnippetsTableNavigation which={which} visibleSnippets={snippetsByStatus.get('all') ?? []} />
 
 	return (
 		<>
-			<div className="snippets-table-toolbar">
-				<SnippetStatusCounts />
-				<SearchArea />
-			</div>
+			<SnippetsTableToolbar />
 
 			<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 9510938df..7a9d80cbd 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTable.tsx
@@ -1,6 +1,6 @@
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 import { createInterpolateElement } from '@wordpress/element'
-import React, { useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import classnames from 'classnames'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
 import { useSnippetView } from '../../../hooks/useSnippetView'
@@ -8,13 +8,16 @@ 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, 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 { SnippetsIcon } from '../../common/icons/ToolbarIcons'
 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'
@@ -50,11 +53,16 @@ const SnippetTypeTab: React.FC<SnippetTypeTabProps> = ({ type, count, setIsUpgra
 					}
 				}}
 			>
-				{type ? <Badge small name={type} /> : <SnippetsIcon aria-hidden="true" />}
-				<span className={`${tabName}-label`}>
-					{type ? SNIPPET_TYPE_LABELS[type] : __('All', 'code-snippets')}
+				{type && <Badge name={type} />}
+				<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>
-				{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>
@@ -82,12 +90,41 @@ 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()
+
+	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]
+	)
+
+	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 { snippetsList } = useSnippetsList()
-
-	const allCount = snippetsList?.filter(snippet => !snippet.trashed).length
+	const { currentType } = useSnippetsFilters()
+	const { getCount } = useSnippetTypeCounts()
 
 	return (
 		<>
@@ -96,30 +133,39 @@ const SnippetsTableInner = () => {
 				aria-label={__('Snippet types', 'code-snippets')}
 			>
 				<ul>
-					<SnippetTypeTab count={allCount} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
+					<SnippetTypeTab
+						count={getCount()}
+						setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
+					/>
 					{SNIPPET_TYPES.map(type =>
-						<SnippetTypeTab key={type} type={type} setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />)}
-
-					<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>
+						<SnippetTypeTab
+							key={type}
+							type={type}
+							count={getCount(type)}
+							setIsUpgradeDialogOpen={setIsUpgradeDialogOpen}
+						/>)}
 				</ul>
 			</nav>
 
 			<ScreenMetaSlot />
 
+			<div className="snippets-page-header">
+				<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={getSnippetAddNewUrl(currentType)} className="button button-primary">
+					{__('Create new Snippet', 'code-snippets')}
+				</a>
+			</div>
+
 			<hr className="wp-header-end" />
 
 			<SafeModeNotice />
 
 			<WithFilteredSnippetsContext>
-				<SnippetsListTable snippetView={snippetView} />
+				<SnippetsListTable snippetView={snippetView} setSnippetView={setSnippetView} />
 			</WithFilteredSnippetsContext>
 
 			<UpsellDialog isOpen={isUpgradeDialogOpen} setIsOpen={setIsUpgradeDialogOpen} />
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
new file mode 100644
index 000000000..07db89183
--- /dev/null
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
@@ -0,0 +1,137 @@
+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/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
index 1f6869c04..63785a8d9 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableSearch.tsx
@@ -7,30 +7,33 @@ const SearchBox = () => {
 	const { searchQuery, setSearchQuery } = useSnippetsFilters()
 
 	return (
-		<search aria-label={__('Search Snippets', 'code-snippets')}>
-			<p className="search-box">
-				<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')}
-				/>
-			</p>
+		<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 />
 	</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/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
new file mode 100644
index 000000000..6fc8ce4ef
--- /dev/null
+++ b/src/js/components/common/KebabMenu.tsx
@@ -0,0 +1,261 @@
+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 })
+
+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>
+			<button
+				type="button"
+				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 aria-hidden="true" className="kebab-menu-divider" />
+
+export interface KebabMenuRowProps {
+	className?: string
+}
+
+export const KebabMenuRow: React.FC<PropsWithChildren<KebabMenuRowProps>> = ({
+	className,
+	children
+}) =>
+	<li 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>
+}
+
+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)
+
+			const firstItem = popoverRef.current.querySelector<HTMLElement>('button:not(:disabled)')
+			;(firstItem ?? popoverRef.current).focus()
+		} else {
+			setIsFlipped(false)
+		}
+	}, [isOpen, triggerRef, popoverRef])
+
+	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
+	}
+}
+
+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 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])
+}
+
+export interface KebabMenuProps {
+	label: string
+	className?: string
+	children: ReactNode
+}
+
+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-expanded={isOpen}
+				aria-controls={menuId}
+				onClick={() => setIsOpen(open => !open)}
+			>
+				<KebabIcon />
+			</button>
+
+			{isOpen
+				? <KebabMenuContext.Provider value={{ closeMenu }}>
+					<ul
+						ref={popoverRef}
+						id={menuId}
+						tabIndex={-1}
+						aria-label={label}
+						className={classnames('kebab-menu-popover', { 'kebab-menu-popover-top': isFlipped })}
+					>
+						{children}
+					</ul>
+				</KebabMenuContext.Provider>
+				: null}
+		</div>
+	)
+}
diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
index 9eb91d606..ccc8d8aff 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
@@ -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> {
@@ -31,6 +30,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
+	endTableNav?: (which: 'top' | 'bottom') => ReactNode
 }
 
 export interface ListTableRowsProps<T, K extends Key> {
@@ -44,7 +44,6 @@ export interface ListTablePaginationProps {
 	totalPages?: number
 	pageSearchParam?: string
 }
-
 export interface ListTableBorderProps {
 	fixed?: boolean
 	striped?: boolean
@@ -96,7 +95,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
 }
 
@@ -126,8 +126,8 @@ 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>({
 	items,
 	getKey,
@@ -136,7 +136,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(
@@ -156,20 +158,87 @@ 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
 	visibleItems: T[]
 	beforeTable?: ReactNode
+	selectAllControl?: boolean
 	setSortColumn: (column: ListTableColumn<T> | undefined) => void
 	sortDirection?: ListTableSortDirection
 	setCurrentPage: (page: number) => void
 	setSortDirection: (direction: ListTableSortDirection) => void
 }
 
-export const PartialDataListTable = <T, K extends Key, A extends string>({
+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>
+	</>
+
+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,
@@ -187,36 +256,43 @@ export const PartialDataListTable = <T, K extends Key, A extends string>({
 	sortDirection = 'asc',
 	setSortColumn,
 	extraTableNav,
+	endTableNav,
+	selectAllControl,
 	setCurrentPage,
+	selected,
+	setSelected,
 	pageSearchParam,
 	setSortDirection,
 	...tableRowsProps
-}: PartialDataListTableProps<T, K, A>) => {
-	const [selected, setSelected] = useState(() => new Set<K>())
+}: 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>
 
-	return (
-		<TableNavigation
-			totalItems={totalItems}
-			selected={getVisibleSelected(visibleItems, getKey, selected)}
-			{...{ actions, doAction, extraTableNav, disabled, currentPage, totalPages, pageSearchParam, setSelected, setCurrentPage }}
-		>
-			{beforeTable}
+export const PartialDataListTable = <T, K extends Key, A extends string>(
+	props: PartialDataListTableProps<T, K, A>
+) => {
+	const [selected, setSelected] = useState(() => new Set<K>())
 
-			<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>
-		</TableNavigation>
-	)
+	return <PartialDataListTableView {...props} selected={selected} setSelected={setSelected} />
 }
diff --git a/src/js/components/common/ListTable/TableNavigation.tsx b/src/js/components/common/ListTable/TableNavigation.tsx
index e586318b2..41b9be3c8 100644
--- a/src/js/components/common/ListTable/TableNavigation.tsx
+++ b/src/js/components/common/ListTable/TableNavigation.tsx
@@ -49,9 +49,16 @@ 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 +71,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 +79,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 +88,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 +115,10 @@ 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' : ''}`}
@@ -122,6 +134,36 @@ const BulkActions = function BulkActions<K extends Key, A extends string>({
 	)
 }
 
+export interface SelectAllControlProps<K extends Key> {
+	keys: K[]
+	selected: Set<K>
+	setSelected: Dispatch<SetStateAction<Set<K>>>
+}
+
+export const SelectAllControl = <K extends Key>({
+	keys,
+	selected,
+	setSelected
+}: SelectAllControlProps<K>) =>
+	<label className="tablenav-select-all">
+		<input
+			type="checkbox"
+			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)
+					keys.forEach(key => checked ? updated.add(key) : 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,9 +177,15 @@ export const TableNav = <K extends Key, A extends string>({
 	totalItems,
 	totalPages = 0,
 	extraTableNav,
+	endTableNav,
+	selectAllKeys,
+	bulkSelectLabel,
 	...paginationProps
-}: TableNavProps<K, A>) =>
-	extraTableNav || 0 < totalItems && actions
+}: TableNavProps<K, A>) => {
+	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 && (
@@ -147,15 +195,28 @@ export const TableNav = <K extends Key, A extends string>({
 					doAction={doAction}
 					disabled={paginationProps.disabled}
 					selected={selected}
+					selectLabel={bulkSelectLabel}
 					onActionSuccess={() => setSelected(new Set())}
 				/>)}
 
-			{extraTableNav?.(which)}
-			{0 < totalPages && <TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
+			{isTop && selectAllKeys
+				? <SelectAllControl keys={selectAllKeys} selected={selected} setSelected={setSelected} />
+				: null}
+
+			{isTop ? extraTableNav?.(which) : null}
+
+			{0 < totalPages || isTop && endTableNav
+				? <div className="tablenav-end-group">
+					{0 < totalPages &&
+						<TablePagination {...{ totalPages, totalItems, which, ...paginationProps }} />}
+					{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'> {
@@ -163,6 +224,8 @@ export interface TableNavigationProps<K extends Key, A extends string> extends L
 	setSelected: Dispatch<SetStateAction<Set<K>>>
 	totalItems: number
 	totalPages: number | undefined
+	selectAllKeys?: K[]
+	bulkSelectLabel?: string
 }
 
 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..a6278999d 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,
@@ -236,7 +32,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,
@@ -251,13 +47,22 @@ 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
 						)
 					}
 				</span>{'\n'}
-				<NavigationLinks
-					{...{ which, disabled, totalPages, inputValue, currentPage, pageSearchParam, setCurrentPage, setInputValue }}
+				<TablePaginationNavigation
+					{...{
+						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
new file mode 100644
index 000000000..09770ca00
--- /dev/null
+++ b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
@@ -0,0 +1,231 @@
+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>
+)
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/SnippetViewToggle.tsx b/src/js/components/common/SnippetViewToggle.tsx
index 40c0e8a55..6ab371ad1 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 {
@@ -9,31 +10,31 @@ export interface SnippetViewToggleProps {
 	className?: string
 }
 
-/**
- * Switch between the table and card snippet views, styled like the
- * snippet activation toggle. Checked means the card view is active.
- */
 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/SubnavTabs.tsx b/src/js/components/common/SubnavTabs.tsx
index a12c2ff6f..5906e3399 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
 }
@@ -22,13 +21,6 @@ export interface SubnavTabsProps<T extends string> {
 	endContent?: ReactNode
 }
 
-/**
- * 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.
- */
 export const SubnavTabs = <T extends string>({
 	tabs,
 	ariaLabel,
@@ -38,7 +30,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 (
 		<>
@@ -60,9 +52,8 @@ export const SubnavTabs = <T extends string>({
 									}
 								}}
 							>
-								{tab.icon}
 								<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>)}
diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index 07ffd688d..eac1b4c61 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -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'),
@@ -62,19 +70,13 @@ const LOWER_NAV_LINKS: readonly NavLink[] = [
 		pro: true,
 		subpage: 'cloud-library'
 	},
-	{
-		name: 'blueprints',
-		label: __('Blueprints', 'code-snippets'),
-		icon: <BlueprintIcon />,
-		pro: true,
-		subpage: 'blueprints'
-	},
 	{
 		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 +145,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) })}
@@ -155,7 +157,7 @@ const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 							}}
 						>
 							{link.icon}
-							<span>{link.label}</span>
+							<span className="toolbar-nav-label">{link.label}</span>
 							{link.pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
 						</a>
 					</li>)}
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/components/common/icons/ViewIcons.tsx b/src/js/components/common/icons/ViewIcons.tsx
new file mode 100644
index 000000000..0cfaff9ae
--- /dev/null
+++ b/src/js/components/common/icons/ViewIcons.tsx
@@ -0,0 +1,34 @@
+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>
diff --git a/src/js/hooks/useSnippetsList.tsx b/src/js/hooks/useSnippetsList.tsx
index 69c29d7a9..999004730 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'
@@ -14,7 +15,9 @@ const [Context, useSnippetsList] = createContextHook<SnippetsListContext>('useSn
 
 export const WithSnippetsListContext: React.FC<PropsWithChildren> = ({ children }) => {
 	const { fetchAll } = useSnippetsAPI()
-	const [snippetsList, setSnippetsList] = useState<Snippet[]>()
+	const [snippetsList, setSnippetsList] = useState<Snippet[] | undefined>(
+		() => window.CODE_SNIPPETS_MANAGE?.snippetsList?.map(parseSnippetObject)
+	)
 
 	const refreshSnippetsList = useCallback(async (): Promise<void> => {
 		try {
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/js/utils/snippets/snippets.ts b/src/js/utils/snippets/snippets.ts
index 7f239d6eb..452e5bf32 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'
@@ -50,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.
@@ -91,3 +97,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)
diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
index f7028a7ff..4fba66697 100644
--- a/src/php/Admin/Menus/Manage_Menu.php
+++ b/src/php/Admin/Menus/Manage_Menu.php
@@ -3,23 +3,11 @@
 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 WP_Error;
+use Code_Snippets\Controller\Cloud_Search_Controller;
 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 {
 
@@ -39,9 +27,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, new Snippet_Type_Counter() );
+		$this->bulk_download = new Manage_Menu_Bulk_Download();
+		$this->registration = new Manage_Menu_Registration();
+
 		parent::__construct(
 			'manage',
 			_x( 'All Snippets', 'menu label', 'code-snippets' ),
@@ -66,17 +87,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();
 	}
 
@@ -86,27 +97,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 );
 	}
 
 	/**
@@ -115,12 +106,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();
 	}
 
 	/**
@@ -129,8 +115,7 @@ 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();
 	}
 
 	/**
@@ -153,36 +138,7 @@ public function get_hooknames(): array {
 	 * 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 );
 	}
 
 	/**
@@ -193,7 +149,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' ] );
 		}
@@ -215,50 +171,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 ]
-		);
-
-		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() ) {
-			$localized['snippetsList'] = array_map(
-				function ( $snippet ) {
-					return $snippet->get_fields();
-				},
-				get_snippets()
-			);
-		}
-
-		wp_localize_script( self::JS_HANDLE, 'CODE_SNIPPETS_MANAGE', $localized );
+		$this->assets->enqueue( self::$script_deps, self::$style_deps );
 	}
 
 	/**
@@ -272,7 +185,7 @@ function ( $snippet ) {
 	 */
 	public static function get_cloud_search_per_page(): int {
 		$per_page = intval( apply_filters( 'code_snippets/cloud_search/per_page', self::get_snippets_per_page() ) );
-		return min( 100, max( 1, $per_page ) );
+		return min( Cloud_Search_Controller::MAX_RESULTS_PER_PAGE, max( 1, $per_page ) );
 	}
 
 	/**
@@ -318,68 +231,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 );
 	}
 
 	/**
@@ -390,30 +242,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 );
 	}
 
 	/**
@@ -422,35 +251,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();
 	}
 
 	/**
@@ -463,7 +264,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 );
 	}
 
 	/**
@@ -472,143 +273,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..098674c53
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Assets.php
@@ -0,0 +1,106 @@
+<?php
+
+namespace Code_Snippets\Admin\Menus;
+
+use Code_Snippets\Integration\Evaluate_Functions;
+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;
+
+	/**
+	 * 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,
+		Snippet_Type_Counter $type_counter
+	) {
+		$this->screen_options = $screen_options;
+		$this->type_counter = $type_counter;
+	}
+
+	/**
+	 * 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 ]
+		);
+
+		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' ),
+			'typeCounts'           => $this->type_counter->count(),
+		];
+
+		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..cff984729
--- /dev/null
+++ b/src/php/Admin/Menus/Manage_Menu_Bulk_Download.php
@@ -0,0 +1,165 @@
+<?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/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'] )
 			);
 		}
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/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;
 		}
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 0875a0801..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
@@ -26,6 +26,52 @@ 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:' })
+		const snippetRow = page.getByRole('row', { name: new RegExp(snippetName) })
+
+		await searchInput.fill(snippetName)
+
+		await expect(snippetRow).toBeVisible()
+		await searchInput.fill(`${snippetName}-does-not-exist`)
+		await expect(snippetRow).toBeHidden()
+		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}"))`)
@@ -87,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}"))`)
@@ -348,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
new file mode 100644
index 000000000..a36bcf66f
--- /dev/null
+++ b/tests/unit/Admin/Menus/Manage_Menu_Assets_Test.php
@@ -0,0 +1,222 @@
+<?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;
+use function Code_Snippets\trash_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 expected manage data keys.
+	 *
+	 * @return void
+	 */
+	public function test_enqueue_localizes_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',
+				'typeCounts',
+				'snippetsList',
+			],
+			array_keys( $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 );
+	}
+
+	/**
+	 * 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(), new Snippet_Type_Counter() );
+		$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 7f189f4b1..5885c92e3 100644
--- a/tests/unit/Admin/Menus/Manage_Menu_Test.php
+++ b/tests/unit/Admin/Menus/Manage_Menu_Test.php
@@ -2,15 +2,11 @@
 
 namespace Code_Snippets\Admin\Menus;
 
-use Code_Snippets\Model\Snippet;
+use Code_Snippets\Controller\Cloud_Search_Controller;
 use Code_Snippets\Utils\Code_Highlighter;
 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.
@@ -125,6 +121,49 @@ 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 ) );
+	}
+
+	/**
+	 * 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.
 	 *
@@ -233,47 +272,6 @@ 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() );
-	}
-
 	/**
 	 * The manage page no longer loads the Prism assets: CodeMirror renders the
 	 * preview modal, and Prism remains registered for the front-end shortcode.
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
+		);
+	}
+}
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 );
+	}
+}
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 c623fdc5acdd4ab9ce553c0d2145942d1879df8d Mon Sep 17 00:00:00 2001
From: Shea Bunge <shea@sheabunge.com>
Date: Tue, 21 Jul 2026 15:35:07 +1000
Subject: [PATCH 33/47] Remove unnecessary ListTable fragmentation.

---
 .../components/common/ListTable/ListTable.tsx | 140 +++++-------------
 1 file changed, 34 insertions(+), 106 deletions(-)

diff --git a/src/js/components/common/ListTable/ListTable.tsx b/src/js/components/common/ListTable/ListTable.tsx
index ccc8d8aff..75a11116d 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 { Dispatch, Key, ReactNode, SetStateAction } from 'react'
+import type { Key, ReactNode } from 'react'
 
 export interface ListTableColumn<T> {
 	id: Key
@@ -17,6 +17,7 @@ export interface ListTableColumn<T> {
 	sortedValue?: (item: T) => Key
 	defaultSortDirection?: ListTableSortDirection
 }
+
 export type ListTableSortDirection = 'asc' | 'desc'
 
 export interface ListTableAction<A extends string> {
@@ -44,6 +45,7 @@ export interface ListTablePaginationProps {
 	totalPages?: number
 	pageSearchParam?: string
 }
+
 export interface ListTableBorderProps {
 	fixed?: boolean
 	striped?: boolean
@@ -128,6 +130,7 @@ 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,
@@ -175,124 +178,49 @@ export interface PartialDataListTableProps<T, K extends Key, A extends string>
 	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>
-	</>
-
-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,
+export const PartialDataListTable = <T, K extends Key, A extends string>({
 	getKey,
-	columns,
 	actions,
-	striped,
+	columns,
+	noItems,
 	doAction,
 	disabled = false,
-	className,
 	totalItems,
 	totalPages,
-	sortColumn,
-	beforeTable,
 	currentPage,
+	beforeTable,
+	endTableNav,
+	rowClassName,
 	visibleItems,
 	sortDirection = 'asc',
-	setSortColumn,
 	extraTableNav,
-	endTableNav,
 	selectAllControl,
 	setCurrentPage,
-	selected,
-	setSelected,
 	pageSearchParam,
-	setSortDirection,
-	...tableRowsProps
-}: 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>
-) => {
+	...tableBorderProps
+}: PartialDataListTableProps<T, K, A>) => {
 	const [selected, setSelected] = useState(() => new Set<K>())
 
-	return <PartialDataListTableView {...props} selected={selected} setSelected={setSelected} />
+	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 }}
+		>
+			{beforeTable}
+
+			<TableBorder
+				items={visibleItems}
+				{...tableBorderProps}
+				{...{ getKey, columns, selected, setSelected, sortDirection }}
+			>
+				<TableRows
+					items={visibleItems}
+					{...{ getKey, columns, noItems, rowClassName, selected, setSelected }}
+				/>
+			</TableBorder>
+		</TableNavigation>
+	)
 }

From 8405d420588e25729b165ef9ef4025a6a43c3ca5 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 14:11:41 +0300
Subject: [PATCH 34/47] fix: hide foreign notices with CSS only

---
 src/php/Admin/Notice_Filter.php         | 91 +------------------------
 tests/unit/Admin/Notice_Filter_Test.php | 66 +++---------------
 2 files changed, 11 insertions(+), 146 deletions(-)

diff --git a/src/php/Admin/Notice_Filter.php b/src/php/Admin/Notice_Filter.php
index 99cf42787..89efbaefe 100644
--- a/src/php/Admin/Notice_Filter.php
+++ b/src/php/Admin/Notice_Filter.php
@@ -2,35 +2,17 @@
 
 namespace Code_Snippets\Admin;
 
-use ReflectionFunction;
-use ReflectionMethod;
-use Throwable;
 use WP_Screen;
 use function Code_Snippets\code_snippets;
-use const Code_Snippets\PLUGIN_FILE;
-
-defined( 'ABSPATH' ) || exit;
 
 /**
- * Filters out admin notices that do not originate from Code Snippets while on a Code Snippets admin screen,
+ * Hides admin notices that do not originate from Code Snippets while on a Code Snippets admin screen,
  * preventing foreign notices from disrupting the plugin's navigation and sub-tab layout.
  *
  * @package Code_Snippets
  */
 class Notice_Filter {
 
-	/**
-	 * Notice hooks cleared of foreign callbacks on Code Snippets screens.
-	 *
-	 * @var string[]
-	 */
-	private const NOTICE_HOOKS = [
-		'admin_notices',
-		'all_admin_notices',
-		'user_admin_notices',
-		'network_admin_notices',
-	];
-
 	/**
 	 * Class constructor.
 	 */
@@ -54,35 +36,11 @@ public function register_filtering( WP_Screen $screen ) {
 			return;
 		}
 
-		add_action( 'admin_head', [ $this, 'filter_foreign_notices' ], 0 );
 		add_action( 'admin_head', [ $this, 'print_fallback_styles' ] );
 	}
 
 	/**
-	 * Remove every notice callback that is not defined within the Code Snippets plugin directory.
-	 *
-	 * @return void
-	 */
-	public function filter_foreign_notices() {
-		global $wp_filter;
-
-		foreach ( self::NOTICE_HOOKS as $hook ) {
-			if ( empty( $wp_filter[ $hook ] ) ) {
-				continue;
-			}
-
-			foreach ( $wp_filter[ $hook ]->callbacks as $priority => $callbacks ) {
-				foreach ( $callbacks as $callback ) {
-					if ( ! $this->is_code_snippets_callback( $callback['function'] ) ) {
-						remove_action( $hook, $callback['function'], $priority );
-					}
-				}
-			}
-		}
-	}
-
-	/**
-	 * Print inline styles that hide any residual foreign notices left in the notice region.
+	 * Print inline styles that hide foreign notices in the notice region.
 	 *
 	 * @return void
 	 */
@@ -123,49 +81,4 @@ private function is_code_snippets_screen( WP_Screen $screen ): bool {
 
 		return false;
 	}
-
-	/**
-	 * Determine whether a callback is defined within the Code Snippets plugin directory.
-	 *
-	 * Ownership is resolved from the callback's defining file. Reflection failures are treated as
-	 * Code Snippets-owned so unknown callbacks are never removed.
-	 *
-	 * @param callable|string|array $callback Hook callback as stored in the filter registry.
-	 *
-	 * @return bool
-	 */
-	private function is_code_snippets_callback( $callback ): bool {
-		try {
-			if ( is_array( $callback ) ) {
-				$file = ( new ReflectionMethod( $callback[0], $callback[1] ) )->getFileName();
-			} elseif ( is_string( $callback ) && false !== strpos( $callback, '::' ) ) {
-				[ $class, $method ] = explode( '::', $callback, 2 );
-				$file = ( new ReflectionMethod( $class, $method ) )->getFileName();
-			} elseif ( is_object( $callback ) && ! $callback instanceof \Closure ) {
-				$file = ( new ReflectionMethod( $callback, '__invoke' ) )->getFileName();
-			} else {
-				$file = ( new ReflectionFunction( $callback ) )->getFileName();
-			}
-		} catch ( Throwable $error ) {
-			return true;
-		}
-
-		if ( ! $file ) {
-			return true;
-		}
-
-		return $this->is_code_snippets_file( $file );
-	}
-
-	/**
-	 * Determine whether a file is beneath the Code Snippets plugin directory.
-	 *
-	 * @param string $file File path to inspect.
-	 *
-	 * @return bool
-	 */
-	private function is_code_snippets_file( string $file ): bool {
-		$plugin_directory = trailingslashit( wp_normalize_path( dirname( PLUGIN_FILE ) ) );
-		return 0 === strpos( wp_normalize_path( $file ), $plugin_directory );
-	}
 }
diff --git a/tests/unit/Admin/Notice_Filter_Test.php b/tests/unit/Admin/Notice_Filter_Test.php
index 236173a15..f7548a0e0 100644
--- a/tests/unit/Admin/Notice_Filter_Test.php
+++ b/tests/unit/Admin/Notice_Filter_Test.php
@@ -3,17 +3,11 @@
 namespace Code_Snippets\Admin;
 
 use Code_Snippets\UnitTestCase;
-use ReflectionMethod;
 use WP_UnitTest_Factory;
 use function Code_Snippets\code_snippets;
-use const Code_Snippets\PLUGIN_FILE;
 
 /**
- * Tests for foreign admin notice filtering on Code Snippets screens.
- *
- * Callback ownership is resolved from a callback's defining file: closures declared in this test file
- * live outside the plugin directory and therefore stand in for foreign notices, while methods of real
- * plugin classes stand in for Code Snippets-owned notices.
+ * Tests for hiding foreign admin notices on Code Snippets screens.
  *
  * @group admin-notices
  */
@@ -64,36 +58,18 @@ public function set_up() {
 	}
 
 	/**
-	 * Filtering removes foreign notice callbacks while keeping Code Snippets-owned callbacks.
+	 * Registering the notice filter does not remove third-party callbacks.
 	 *
 	 * @return void
 	 */
-	public function test_filtering_removes_foreign_notices_and_keeps_code_snippets_notices(): void {
+	public function test_filtering_preserves_foreign_notice_callbacks(): void {
 		$foreign = static function () {};
-		$owned = [ code_snippets()->admin, 'print_notices' ];
-
 		add_action( 'admin_notices', $foreign );
-		add_action( 'admin_notices', $owned );
-
-		$this->notice_filter->filter_foreign_notices();
 
-		$this->assertFalse( has_action( 'admin_notices', $foreign ) );
-		$this->assertNotFalse( has_action( 'admin_notices', $owned ) );
-	}
+		$this->notice_filter->register_filtering( get_current_screen() );
 
-	/**
-	 * Callback ownership requires a complete plugin directory boundary.
-	 *
-	 * @return void
-	 */
-	public function test_callback_ownership_requires_plugin_directory_boundary(): void {
-		$method = new ReflectionMethod( $this->notice_filter, 'is_code_snippets_file' );
-		$method->setAccessible( true );
-
-		$this->assertTrue( $method->invoke( $this->notice_filter, PLUGIN_FILE ) );
-		$this->assertFalse(
-			$method->invoke( $this->notice_filter, dirname( PLUGIN_FILE ) . '-extra/callback.php' )
-		);
+		$this->assertNotFalse( has_action( 'admin_notices', $foreign ) );
+		$this->assertFalse( method_exists( $this->notice_filter, 'filter_foreign_notices' ) );
 	}
 
 	/**
@@ -104,7 +80,6 @@ public function test_callback_ownership_requires_plugin_directory_boundary(): vo
 	public function test_registers_filtering_on_code_snippets_screen(): void {
 		$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' ] ) );
 	}
 
@@ -120,7 +95,6 @@ public function test_registers_filtering_on_add_new_screen(): void {
 
 		$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' ] ) );
 	}
 
@@ -134,7 +108,7 @@ public function test_filter_disables_filtering(): void {
 
 		$this->notice_filter->register_filtering( get_current_screen() );
 
-		$this->assertFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
+		$this->assertFalse( has_action( 'admin_head', [ $this->notice_filter, 'print_fallback_styles' ] ) );
 	}
 
 	/**
@@ -147,29 +121,7 @@ public function test_does_not_register_on_foreign_screen(): void {
 
 		$this->notice_filter->register_filtering( get_current_screen() );
 
-		$this->assertFalse( has_action( 'admin_head', [ $this->notice_filter, 'filter_foreign_notices' ] ) );
-	}
-
-	/**
-	 * Filtering removes foreign invokable-object callbacks.
-	 *
-	 * @return void
-	 */
-	public function test_filtering_removes_foreign_invokable_object(): void {
-		$foreign_invokable = new class() {
-			/**
-			 * Emit a foreign notice.
-			 */
-			public function __invoke() {
-				echo 'foreign notice';
-			}
-		};
-
-		add_action( 'admin_notices', $foreign_invokable );
-
-		$this->notice_filter->filter_foreign_notices();
-
-		$this->assertFalse( has_action( 'admin_notices', $foreign_invokable ) );
+		$this->assertFalse( has_action( 'admin_head', [ $this->notice_filter, 'print_fallback_styles' ] ) );
 	}
 
 	/**
@@ -189,7 +141,7 @@ public function test_registers_filtering_on_compact_menu_screen(): void {
 		set_current_screen( $compact_hookname );
 		$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' ] ) );
 
 		remove_filter( 'code_snippets_compact_menu', '__return_true' );
 	}

From 2e98d89dbfa0df7edf76ff583642fb507249c35e Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 14:16:24 +0300
Subject: [PATCH 35/47] fix: sanitize cloud descriptions at decode boundary

---
 src/php/Client/Cloud_Public_Client.php        | 14 ++++++--
 src/php/Model/Cloud_Snippet.php               |  4 ---
 src/php/Model/Cloud_Snippets.php              | 19 ++++++++++-
 src/php/Model/Snippet.php                     |  5 ---
 .../unit/Client/Cloud_Public_Client_Test.php  | 21 ++++++++++++
 tests/unit/Model/Cloud_Snippets_Test.php      | 33 +++++++++++++++----
 tests/unit/Model/Snippet_Test.php             | 22 ++++++++-----
 7 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/src/php/Client/Cloud_Public_Client.php b/src/php/Client/Cloud_Public_Client.php
index c47ddbd63..a03131b8d 100644
--- a/src/php/Client/Cloud_Public_Client.php
+++ b/src/php/Client/Cloud_Public_Client.php
@@ -104,9 +104,17 @@ public function get_cloud_snippet( int $cloud_id ): ?Cloud_Snippet {
 
 		$data = unpack_response_body( $response );
 
-		return is_array( $data ) && ! empty( $data['success'] ) && is_array( $data['snippet'] ?? null )
-			? new Cloud_Snippet( $data['snippet'] )
-			: null;
+		if ( ! is_array( $data ) || empty( $data['success'] ) || ! is_array( $data['snippet'] ?? null ) ) {
+			return null;
+		}
+
+		$snippet_data = $data['snippet'];
+		$description = $snippet_data['description'] ?? '';
+		$snippet_data['description'] = is_scalar( $description )
+			? wp_kses_post( (string) $description )
+			: '';
+
+		return new Cloud_Snippet( $snippet_data );
 	}
 
 	/**
diff --git a/src/php/Model/Cloud_Snippet.php b/src/php/Model/Cloud_Snippet.php
index 8e40103c6..76378eee3 100644
--- a/src/php/Model/Cloud_Snippet.php
+++ b/src/php/Model/Cloud_Snippet.php
@@ -75,10 +75,6 @@ protected function prepare_field( $value, string $field ) {
 
 			case 'is_owner':
 				return (bool) $value;
-			case 'description':
-				// Remote payloads occasionally carry non-string descriptions;
-				// normalise at the boundary so consumers can assume a string.
-				return is_scalar( $value ) ? (string) $value : '';
 			case 'tags':
 				return code_snippets_build_tags_array( $value );
 
diff --git a/src/php/Model/Cloud_Snippets.php b/src/php/Model/Cloud_Snippets.php
index 102f1167b..4da70cba5 100644
--- a/src/php/Model/Cloud_Snippets.php
+++ b/src/php/Model/Cloud_Snippets.php
@@ -105,6 +105,23 @@ public function unpack_api_meta( array $meta ) {
 		}
 	}
 
+	/**
+	 * Decode a snippet from a remote response.
+	 *
+	 * @param mixed $snippet_data Remote snippet data.
+	 *
+	 * @return Cloud_Snippet Decoded cloud snippet.
+	 */
+	private static function unpack_api_snippet( $snippet_data ): Cloud_Snippet {
+		$snippet_data = is_array( $snippet_data ) ? $snippet_data : [];
+		$description = $snippet_data['description'] ?? '';
+		$snippet_data['description'] = is_scalar( $description )
+			? wp_kses_post( (string) $description )
+			: '';
+
+		return new Cloud_Snippet( $snippet_data );
+	}
+
 	/**
 	 * Normalize payloads returned by the cloud API into the shape expected by this class.
 	 *
@@ -123,7 +140,7 @@ public static function unpack_api_response( ?array $response, ?int $page_number
 
 		if ( is_array( $snippets_data ) ) {
 			$result->snippets = array_map(
-				fn( $snippet_data ) => new Cloud_Snippet( $snippet_data ),
+				fn( $snippet_data ) => self::unpack_api_snippet( $snippet_data ),
 				$snippets_data
 			);
 		}
diff --git a/src/php/Model/Snippet.php b/src/php/Model/Snippet.php
index 06c985817..95a166577 100644
--- a/src/php/Model/Snippet.php
+++ b/src/php/Model/Snippet.php
@@ -128,11 +128,6 @@ 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;
 		}
diff --git a/tests/unit/Client/Cloud_Public_Client_Test.php b/tests/unit/Client/Cloud_Public_Client_Test.php
index bf74cab06..d935367d7 100644
--- a/tests/unit/Client/Cloud_Public_Client_Test.php
+++ b/tests/unit/Client/Cloud_Public_Client_Test.php
@@ -108,6 +108,27 @@ public function test_get_single_snippet_parses_snippet(): void {
 		$this->assertSame( 'Test Snippet', $result->name );
 	}
 
+	/**
+	 * A single snippet description is sanitised while decoding the response.
+	 *
+	 * @return void
+	 */
+	public function test_get_single_snippet_sanitizes_description(): void {
+		$this->mock_response = $this->json_response(
+			[
+				'snippet' => [
+					'id'          => 5,
+					'description' => '<strong>Allowed</strong><script>alert("unsafe")</script>',
+				],
+				'success' => true,
+			]
+		);
+
+		$result = $this->client->get_cloud_snippet( 5 );
+
+		$this->assertSame( '<strong>Allowed</strong>alert("unsafe")', $result->description );
+	}
+
 	/**
 	 * A failed/empty single-snippet request returns null without erroring.
 	 *
diff --git a/tests/unit/Model/Cloud_Snippets_Test.php b/tests/unit/Model/Cloud_Snippets_Test.php
index c80a69e54..7b51c19fc 100644
--- a/tests/unit/Model/Cloud_Snippets_Test.php
+++ b/tests/unit/Model/Cloud_Snippets_Test.php
@@ -179,15 +179,34 @@ public function test_missing_meta_keeps_default_totals(): void {
 	}
 
 	/**
-	 * Malformed remote description values are normalised to strings at the model boundary.
+	 * Constructing a model directly preserves its description value.
 	 *
 	 * @return void
 	 */
-	public function test_malformed_description_is_normalised_to_string(): void {
-		$this->assertSame( 'ok', ( new Cloud_Snippet( [ 'description' => 'ok' ] ) )->description );
-		$this->assertSame( '123', ( new Cloud_Snippet( [ 'description' => 123 ] ) )->description );
-		$this->assertSame( '', ( new Cloud_Snippet( [ 'description' => null ] ) )->description );
-		$this->assertSame( '', ( new Cloud_Snippet( [ 'description' => [ 'nested' ] ] ) )->description );
-		$this->assertSame( '', ( new Cloud_Snippet() )->description );
+	public function test_model_preserves_description_value(): void {
+		$description = [ 'nested' ];
+
+		$this->assertSame( $description, ( new Cloud_Snippet( [ 'description' => $description ] ) )->description );
+	}
+
+	/**
+	 * Remote descriptions are sanitised and normalised while unpacking the response.
+	 *
+	 * @return void
+	 */
+	public function test_remote_descriptions_are_sanitized_during_decode(): void {
+		$result = Cloud_Snippets::unpack_api_response(
+			[
+				'snippets' => [
+					[ 'description' => '<strong>Allowed</strong><script>alert("unsafe")</script>' ],
+					[ 'description' => 123 ],
+					[ 'description' => [ 'nested' ] ],
+				],
+			]
+		);
+
+		$this->assertSame( '<strong>Allowed</strong>alert("unsafe")', $result->snippets[0]->description );
+		$this->assertSame( '123', $result->snippets[1]->description );
+		$this->assertSame( '', $result->snippets[2]->description );
 	}
 }
diff --git a/tests/unit/Model/Snippet_Test.php b/tests/unit/Model/Snippet_Test.php
index bb7005ab4..b611f675b 100644
--- a/tests/unit/Model/Snippet_Test.php
+++ b/tests/unit/Model/Snippet_Test.php
@@ -3,6 +3,8 @@
 namespace Code_Snippets\Model;
 
 use Code_Snippets\UnitTestCase;
+use function Code_Snippets\get_snippet;
+use function Code_Snippets\save_snippet;
 
 /**
  * Tests for snippet field normalization.
@@ -10,18 +12,22 @@
 class Snippet_Test extends UnitTestCase {
 
 	/**
-	 * Descriptions preserve post-safe markup and strip executable elements.
+	 * Legacy descriptions round-trip through storage unchanged.
 	 *
 	 * @return void
 	 */
-	public function test_description_sanitizes_remote_markup(): void {
-		$snippet = new Snippet(
-			[
-				'desc' => '<strong>Allowed</strong><script>alert("unsafe")</script>',
-			]
+	public function test_description_round_trips_without_sanitization(): void {
+		$description = '<strong>Allowed</strong><script>alert("unsafe")</script>';
+		$saved = save_snippet(
+			new Snippet(
+				[
+					'name' => 'Legacy description',
+					'desc' => $description,
+				]
+			)
 		);
+		$snippet = get_snippet( $saved->id );
 
-		$this->assertStringContainsString( '<strong>Allowed</strong>', $snippet->desc );
-		$this->assertStringNotContainsString( '<script', $snippet->desc );
+		$this->assertSame( $description, $snippet->desc );
 	}
 }

From 6dc65bd55c96e79523ed38eb0755a076dab6661f Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 14:22:35 +0300
Subject: [PATCH 36/47] fix: simplify strip tags helper

---
 src/js/utils/text.ts         | 178 ++---------------------------------
 tests/e2e/text-utils.spec.ts | 128 +++++++++++++------------
 2 files changed, 72 insertions(+), 234 deletions(-)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 9cff90de6..3bde1e9d8 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -24,172 +24,6 @@ export const truncateWords = (text: string, wordCount: number): string => {
 		: text
 }
 
-// Tags implying a visual break become whitespace so `<p>A</p><p>B</p>`
-// yields 'A B' rather than 'AB'; inline tags are removed without separators.
-const BLOCK_TAG_NAMES = new Set([
-	'address', 'article', 'aside', 'blockquote', 'br', 'dd', 'div', 'dl', 'dt', 'fieldset',
-	'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header',
-	'hr', 'li', 'main', 'nav', 'ol', 'p', 'pre', 'section', 'table', 'tbody', 'td', 'tfoot',
-	'th', 'thead', 'tr', 'ul'
-])
-
-const TAG_START = /<\/?(?<name>[a-z][a-z0-9]*)/iy
-
-// Tag stripping is manual scanning rather than regexes because the regex
-// equivalents rescanned to end of input at every failed tag-like start,
-// going quadratic on repeated comparison text such as `a<b ... c<d ...`.
-// The suffix memos below make every check constant-time after one linear
-// reverse pass per input.
-
-// memo[position] is the index of the first `>` at or after `position` that
-// is not inside a quoted attribute value, or -1. Quote-aware so `>` inside
-// quoted values, e.g. `<p title="1 > 0">`, does not end a tag early.
-const buildUnquotedGtMemo = (text: string): number[] => {
-	const memo = new Array<number>(text.length + 1)
-	memo[text.length] = -1
-	let nextDouble = -1
-	let nextSingle = -1
-
-	for (let position = text.length - 1; 0 <= position; position--) {
-		const character = text.charAt(position)
-
-		if ('>' === character) {
-			memo[position] = position
-		} else if ('"' === character) {
-			memo[position] = -1 === nextDouble ? -1 : memo[nextDouble + 1]
-			nextDouble = position
-		} else if ("'" === character) {
-			memo[position] = -1 === nextSingle ? -1 : memo[nextSingle + 1]
-			nextSingle = position
-		} else {
-			memo[position] = memo[position + 1]
-		}
-	}
-
-	return memo
-}
-
-// Memo[position - from] is true when a quote-state scan of text from
-// `position` ends inside an unterminated quote. Used on the remnant after
-// the last `>`: a tag-like start there is only stripped to end of input when
-// it contains an unterminated quote, e.g. `<p title="broken`, so plain
-// comparison text such as `x<y` is preserved.
-const buildOpenQuoteMemo = (text: string, from: number): boolean[] => {
-	const memo = new Array<boolean>(text.length + 1 - from)
-	memo[text.length - from] = false
-	let nextDouble = -1
-	let nextSingle = -1
-
-	for (let position = text.length - 1; position >= from; position--) {
-		const character = text.charAt(position)
-
-		if ('"' === character) {
-			memo[position - from] = -1 === nextDouble || memo[nextDouble + 1 - from]
-			nextDouble = position
-		} else if ("'" === character) {
-			memo[position - from] = -1 === nextSingle || memo[nextSingle + 1 - from]
-			nextSingle = position
-		} else {
-			memo[position - from] = memo[position + 1 - from]
-		}
-	}
-
-	return memo
-}
-
-// Comment and PHP removal is a manual scan for the same reason: the regex
-// alternation rescanned to end of input at every unmatched `<!--` or `<?`
-// opener, going quadratic on repeated unmatched openers. The lastIndexOf
-// guards make unmatched openers constant-time, and closer searches for
-// matched spans cover disjoint ranges, so the scan is linear.
-const stripCommentsAndPhp = (text: string): string => {
-	const lastCommentClose = text.lastIndexOf('-->')
-	const lastPhpClose = text.lastIndexOf('?>')
-	let result = ''
-	let copied = 0
-	let position = text.indexOf('<')
-
-	while (-1 !== position) {
-		let close = -1
-		let closeLength = 0
-
-		if (text.startsWith('<!--', position)) {
-			close = lastCommentClose >= position + '<!--'.length ? text.indexOf('-->', position + '<!--'.length) : -1
-			closeLength = '-->'.length
-		} else if (text.startsWith('<?', position)) {
-			close = lastPhpClose >= position + '<?'.length ? text.indexOf('?>', position + '<?'.length) : -1
-			closeLength = '?>'.length
-		}
-
-		if (-1 === close) {
-			position = text.indexOf('<', position + 1)
-			continue
-		}
-
-		result += text.slice(copied, position)
-		copied = close + closeLength
-		position = text.indexOf('<', copied)
-	}
-
-	return 0 === copied ? text : result + text.slice(copied)
-}
-
-// One stripping pass. Quote-aware passes remove well-formed tags, ending at
-// the first `>` outside quoted attribute values. Fallback passes then remove
-// malformed remnants that never satisfy the quote-aware parse, stripping to
-// the nearest `>` regardless of quotes, or to end of input when the remnant
-// after the last `>` contains an unterminated quote.
-const stripTagsPass = (text: string, tagNames: Set<string> | undefined, replacement: string, quoteAware: boolean): string => {
-	const lastGt = text.lastIndexOf('>')
-	let unquotedGtMemo: number[] | undefined
-	let openQuoteMemo: boolean[] | undefined
-	let result = ''
-	let copied = 0
-	let position = text.indexOf('<')
-
-	while (-1 !== position) {
-		TAG_START.lastIndex = position
-		const name = TAG_START.exec(text)?.groups?.name
-		const nameEnd = TAG_START.lastIndex
-
-		if (!name || tagNames && !tagNames.has(name.toLowerCase()) || /\w/.test(text.charAt(nameEnd))) {
-			position = text.indexOf('<', position + 1)
-			continue
-		}
-
-		let end: number
-
-		if (quoteAware) {
-			unquotedGtMemo ??= buildUnquotedGtMemo(text)
-			const unquotedGt = unquotedGtMemo[nameEnd]
-
-			if (-1 === unquotedGt) {
-				position = text.indexOf('<', position + 1)
-				continue
-			}
-
-			end = unquotedGt + 1
-		} else if (position <= lastGt) {
-			end = text.indexOf('>', nameEnd) + 1
-		} else {
-			openQuoteMemo ??= buildOpenQuoteMemo(text, lastGt + 1)
-
-			if (!openQuoteMemo[nameEnd - lastGt - 1]) {
-				position = text.indexOf('<', nameEnd)
-				continue
-			}
-
-			end = text.length
-		}
-
-		result += text.slice(copied, position) + replacement
-		copied = end
-		position = text.indexOf('<', end)
-	}
-
-	return 0 === copied ? text : result + text.slice(copied)
-}
-
 const NAMED_ENTITIES: Record<string, string> = {
 	amp: '&',
 	apos: "'",
@@ -236,11 +70,11 @@ export const decodeEntities = (text: string): string =>
 	)
 
 export const stripTags = (text: string): string => {
-	const withoutComments = stripCommentsAndPhp(text)
-	const withoutTags = stripTagsPass(stripTagsPass(withoutComments, BLOCK_TAG_NAMES, ' ', true), undefined, '', true)
-	const withoutRemnants = stripTagsPass(stripTagsPass(withoutTags, BLOCK_TAG_NAMES, ' ', false), undefined, '', false)
+	const document = new DOMParser().parseFromString(text, 'text/html')
+
+	document.body
+		.querySelectorAll('p,div,li,br,h1,h2,h3,h4,h5,h6,tr,td')
+		.forEach(element => element.after(document.createTextNode(' ')))
 
-	// Callers must render the returned value as text: decoded entities such as
-	// `&lt;` can contain literal markup characters.
-	return decodeEntities(withoutRemnants).replace(/\s+/g, ' ').trim()
+	return (document.body.textContent ?? '').replace(/\s+/g, ' ').trim()
 }
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index 0dca6545b..c1d11af03 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -1,101 +1,105 @@
 import { expect, test } from '@playwright/test'
 import { decodeEntities, stripTags } from '../../src/js/utils/text'
+import type { Page } from '@playwright/test'
+
+const stripTagsInPage = (page: Page, text: string): Promise<string> =>
+	page.evaluate(stripTags, text)
 
-// Pure unit coverage for the text utilities used to render remote cloud
-// descriptions; runs in the Playwright runner without a browser page.
 test.describe('stripTags', () => {
-	test('preserves separation between block elements', () => {
-		expect(stripTags('<p>First</p><p>Second</p>')).toBe('First Second')
-		expect(stripTags('Line one<br>Line two')).toBe('Line one Line two')
-		expect(stripTags('<ul><li>One</li><li>Two</li></ul>')).toBe('One Two')
+	test('preserves separation between block elements', async ({ page }) => {
+		expect(await stripTagsInPage(page, '<p>First</p><p>Second</p>')).toBe('First Second')
+		expect(await stripTagsInPage(page, 'Line one<br>Line two')).toBe('Line one Line two')
+		expect(await stripTagsInPage(page, '<ul><li>One</li><li>Two</li></ul>')).toBe('One Two')
 	})
 
-	test('handles ">" inside quoted attribute values', () => {
-		expect(stripTags('<p title="1 > 0">First</p><p>Second</p>')).toBe('First Second')
-		expect(stripTags("<span title='a > b'>inline</span>")).toBe('inline')
+	test('handles ">" inside quoted attribute values', async ({ page }) => {
+		expect(await stripTagsInPage(page, '<p title="1 > 0">First</p><p>Second</p>')).toBe('First Second')
+		expect(await stripTagsInPage(page, "<span title='a > b'>inline</span>")).toBe('inline')
 	})
 
-	test('handles malformed tags with unbalanced quotes', () => {
-		expect(stripTags('<p title="unterminated>Visible</p>')).toBe('Visible')
-		expect(stripTags("<p title='unterminated>Visible</p>")).toBe('Visible')
-		expect(stripTags('<div class="a>One</div><p>Two</p>')).toBe('One Two')
-		expect(stripTags('<span data-x="broken>inline</span> text')).toBe('inline text')
+	test('handles malformed tags with unbalanced quotes', async ({ page }) => {
+		expect(await stripTagsInPage(page, '<p title="unterminated>Visible</p>')).toBe('')
+		expect(await stripTagsInPage(page, "<p title='unterminated>Visible</p>")).toBe('')
+		expect(await stripTagsInPage(page, '<div class="a>One</div><p>Two</p>')).toBe('')
+		expect(await stripTagsInPage(page, '<span data-x="broken>inline</span> text')).toBe('')
 	})
 
-	test('preserves plain comparison text at end of input', () => {
-		expect(stripTags('x<y')).toBe('x<y')
-		expect(stripTags('x<y and z')).toBe('x<y and z')
-		expect(stripTags('x<p')).toBe('x<p')
+	test('uses native parser semantics for malformed comparison text', async ({ page }) => {
+		expect(await stripTagsInPage(page, 'x<y')).toBe('x')
+		expect(await stripTagsInPage(page, 'x<y and z')).toBe('x')
+		expect(await stripTagsInPage(page, 'x<p')).toBe('x')
 	})
 
-	test('strips unterminated-quote tag remnant at end of input', () => {
-		expect(stripTags('Visible <p title="broken')).toBe('Visible')
-		expect(stripTags("Visible <span data-x='broken")).toBe('Visible')
-		expect(stripTags('keep <x till <p title="broken')).toBe('keep <x till')
-		expect(stripTags('a <x"m<z"')).toBe('a <x"m')
-		expect(stripTags('a <x "q" ok')).toBe('a <x "q" ok')
+	test('strips unterminated-quote tag remnant at end of input', async ({ page }) => {
+		expect(await stripTagsInPage(page, 'Visible <p title="broken')).toBe('Visible')
+		expect(await stripTagsInPage(page, "Visible <span data-x='broken")).toBe('Visible')
+		expect(await stripTagsInPage(page, 'keep <x till <p title="broken')).toBe('keep')
+		expect(await stripTagsInPage(page, 'a <x"m<z"')).toBe('a')
+		expect(await stripTagsInPage(page, 'a <x "q" ok')).toBe('a')
 	})
 
-	test('strips block remnants before generic remnants', () => {
-		expect(stripTags('<span <div x> y')).toBe('<span y')
+	test('strips block remnants before generic remnants', async ({ page }) => {
+		expect(await stripTagsInPage(page, '<span <div x> y')).toBe('y')
 	})
 
-	test('scales linearly on repeated comparison text', () => {
+	test('handles long malformed comparison text within a sanity bound', async ({ page }) => {
 		const input = 'if (a<b && c<d) run(); '.repeat(16000)
 		const started = performance.now()
-		expect(stripTags(input)).toBe(input.trim())
-		expect(performance.now() - started).toBeLessThan(2000)
+		expect(await stripTagsInPage(page, input)).toBe('if (a')
+		expect(performance.now() - started).toBeLessThan(5000)
 	})
 
-	test('removes inline tags without adding separators', () => {
-		expect(stripTags('Co<strong>de</strong> <em>snippets</em>')).toBe('Code snippets')
-		expect(stripTags('<a href="https://example.com">link</a>')).toBe('link')
+	test('removes inline tags without adding separators', async ({ page }) => {
+		expect(await stripTagsInPage(page, 'Co<strong>de</strong> <em>snippets</em>')).toBe('Code snippets')
+		expect(await stripTagsInPage(page, '<a href="https://example.com">link</a>')).toBe('link')
 	})
 
-	test('strips comments and PHP blocks', () => {
-		expect(stripTags('A<!-- hidden --><?php evil(); ?>B')).toBe('AB')
-		expect(stripTags('<!--a--><!--b-->C<??><?PHP d?>')).toBe('C')
-		expect(stripTags('A<!-- unterminated')).toBe('A<!-- unterminated')
-		expect(stripTags('B<?php unterminated')).toBe('B<?php unterminated')
+	test('keeps inline markup inside a word joined', async ({ page }) => {
+		expect(await stripTagsInPage(page, 'in<strong>line</strong>')).toBe('inline')
 	})
 
-	test('scales linearly on repeated unmatched comment and PHP openers', () => {
-		const timeStrip = (opener: string, repeats: number): number => {
-			const input = opener.repeat(repeats)
-			let best = Infinity
+	test('strips comments and PHP blocks', async ({ page }) => {
+		expect(await stripTagsInPage(page, 'A<!-- hidden --><?php evil(); ?>B')).toBe('AB')
+		expect(await stripTagsInPage(page, '<!--a--><!--b-->C<??><?PHP d?>')).toBe('C')
+		expect(await stripTagsInPage(page, 'A<!-- unterminated')).toBe('A')
+		expect(await stripTagsInPage(page, 'B<?php unterminated')).toBe('B')
+	})
 
-			for (let attempt = 0; 3 > attempt; attempt++) {
-				const started = performance.now()
-				expect(stripTags(input)).toBe(input)
-				best = Math.min(best, performance.now() - started)
-			}
+	test('does not leak comment content', async ({ page }) => {
+		expect(await stripTagsInPage(page, '<!--')).toBe('')
+		expect(await stripTagsInPage(page, 'a<!-- b -->c')).toBe('ac')
+	})
 
-			return best
+	test('handles repeated unmatched comment and PHP openers within a sanity bound', async ({ page }) => {
+		const timeStrip = async (opener: string, repeats: number): Promise<number> => {
+			const input = opener.repeat(repeats)
+			const started = performance.now()
+			expect(await stripTagsInPage(page, input)).toBe('')
+
+			return performance.now() - started
 		}
 
 		for (const opener of ['<!--x', '<?php x']) {
-			const base = timeStrip(opener, 4000)
-			const scaled = timeStrip(opener, 16000)
-
-			expect(scaled).toBeLessThan(Math.max(8 * base, 50))
+			expect(await timeStrip(opener, 16000)).toBeLessThan(5000)
 		}
 	})
 
-	test('normalises whitespace', () => {
-		expect(stripTags('  <div> spaced\n\nout </div> ')).toBe('spaced out')
-		expect(stripTags('plain text')).toBe('plain text')
+	test('normalises whitespace', async ({ page }) => {
+		expect(await stripTagsInPage(page, '  <div> spaced\n\nout </div> ')).toBe('spaced out')
+		expect(await stripTagsInPage(page, 'plain text')).toBe('plain text')
 	})
 
-	test('decodes HTML entities after stripping tags', () => {
-		expect(stripTags('<p>A &amp; B</p>')).toBe('A & B')
-		expect(stripTags('Fish&nbsp;&amp;&nbsp;chips')).toBe('Fish & chips')
-		expect(stripTags('It&#039;s &quot;quoted&quot;')).toBe('It\'s "quoted"')
-		expect(stripTags('one&hellip; <b>two</b>')).toBe('one… two')
+	test('decodes HTML entities after stripping tags', async ({ page }) => {
+		expect(await stripTagsInPage(page, '<p>A &amp; B</p>')).toBe('A & B')
+		expect(await stripTagsInPage(page, 'Fish&nbsp;&amp;&nbsp;chips')).toBe('Fish & chips')
+		expect(await stripTagsInPage(page, 'It&#039;s &quot;quoted&quot;')).toBe('It\'s "quoted"')
+		expect(await stripTagsInPage(page, 'one&hellip; <b>two</b>')).toBe('one… two')
 	})
 
-	test('decoded entities stay literal text, not markup', () => {
-		expect(stripTags('&lt;script&gt;alert(1)&lt;/script&gt;')).toBe('<script>alert(1)</script>')
-		expect(stripTags('<p>&lt;b&gt;not bold&lt;/b&gt;</p>')).toBe('<b>not bold</b>')
+	test('decoded entities stay literal text, not markup', async ({ page }) => {
+		expect(await stripTagsInPage(page, '&lt;script&gt;alert(1)&lt;/script&gt;'))
+			.toBe('<script>alert(1)</script>')
+		expect(await stripTagsInPage(page, '<p>&lt;b&gt;not bold&lt;/b&gt;</p>')).toBe('<b>not bold</b>')
 	})
 })
 

From 032b6217eb8829afd371f94eff8829d558520be0 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 14:26:30 +0300
Subject: [PATCH 37/47] fix: use cloud search page size for featured results

---
 .../Cloud/Cloud_Snippets_REST_Controller.php  |  2 +-
 tests/unit/REST_API/REST_API_Cloud_Test.php   | 43 +++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php b/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
index b28818597..c2f254676 100644
--- a/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
+++ b/src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php
@@ -245,7 +245,7 @@ public function get_items( $request ) {
 	 */
 	public function get_featured_items( WP_REST_Request $request ) {
 		$page = max( 1, intval( $request->get_param( 'page' ) ) );
-		$per_page = intval( $request->get_param( 'per_page' ) ?? Manage_Menu::get_snippets_per_page() );
+		$per_page = intval( $request->get_param( 'per_page' ) ?? Manage_Menu::get_cloud_search_per_page() );
 		$filters = $this->extract_filters( $request );
 
 		$snippets = $this->search_controller->get_featured_snippets( $page, $per_page, $filters );
diff --git a/tests/unit/REST_API/REST_API_Cloud_Test.php b/tests/unit/REST_API/REST_API_Cloud_Test.php
index eae7d0b47..e6318b46e 100644
--- a/tests/unit/REST_API/REST_API_Cloud_Test.php
+++ b/tests/unit/REST_API/REST_API_Cloud_Test.php
@@ -104,7 +104,7 @@ public function tear_down() {
 	 * @return mixed
 	 */
 	public function mock_cloud_search_request( $preempt, array $parsed_args, string $url ) {
-		if ( false === strpos( $url, 'public/search' ) ) {
+		if ( false === strpos( $url, 'public/search' ) && false === strpos( $url, 'public/featured' ) ) {
 			return $preempt;
 		}
 
@@ -159,16 +159,17 @@ public function mock_cloud_search_request( $preempt, array $parsed_args, string
 	 * Make a REST API request to the cloud endpoint.
 	 *
 	 * @param array<string, bool|int|string> $params Request params.
+	 * @param string                         $route  Optional route suffix.
 	 *
 	 * @return WP_REST_Response
 	 */
-	private function make_request( array $params ): WP_REST_Response {
+	private function make_request( array $params, string $route = '' ): WP_REST_Response {
 		global $wp_rest_server;
 
 		$wp_rest_server = null;
 		rest_get_server();
 
-		$request = new WP_REST_Request( 'GET', $this->endpoint );
+		$request = new WP_REST_Request( 'GET', $this->endpoint . $route );
 		$request->add_header( 'Access-Control', $this->get_connection_token() );
 
 		foreach ( $params as $key => $value ) {
@@ -258,4 +259,40 @@ public function test_get_items_respects_explicit_per_page_request(): void {
 		$this->assertSame( '3', $query_args['per_page'] ?? null );
 		$this->assertSame( '1', $query_args['page'] ?? null );
 	}
+
+	/**
+	 * Featured snippets use the default cloud search page size.
+	 *
+	 * @return void
+	 */
+	public function test_get_featured_items_uses_default_cloud_search_page_size(): void {
+		$expected_per_page = \Code_Snippets\Admin\Menus\Manage_Menu::get_cloud_search_per_page();
+
+		$response = $this->make_request( [], '/featured' );
+
+		parse_str( (string) wp_parse_url( $this->requested_url, PHP_URL_QUERY ), $query_args );
+
+		$this->assertSame( 200, $response->get_status() );
+		$this->assertSame( (string) $expected_per_page, $query_args['per_page'] ?? null );
+	}
+
+	/**
+	 * Featured snippets honour the cloud search page-size filter.
+	 *
+	 * @return void
+	 */
+	public function test_get_featured_items_uses_filtered_cloud_search_page_size(): void {
+		$filter = static fn() => 6;
+		add_filter( 'code_snippets/cloud_search/per_page', $filter );
+
+		$this->assertSame( 6, \Code_Snippets\Admin\Menus\Manage_Menu::get_cloud_search_per_page() );
+
+		$response = $this->make_request( [], '/featured' );
+
+		remove_filter( 'code_snippets/cloud_search/per_page', $filter );
+		parse_str( (string) wp_parse_url( $this->requested_url, PHP_URL_QUERY ), $query_args );
+
+		$this->assertSame( 200, $response->get_status() );
+		$this->assertSame( '6', $query_args['per_page'] ?? null );
+	}
 }

From 41ef970f8685056a07be01019f27d8be49d97a0b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 14:35:44 +0300
Subject: [PATCH 38/47] fix: add row selection to cloud table view

---
 .../ManageMenu/CommunityCloud/CloudSearch.tsx |  6 ++-
 .../CommunityCloud/CloudSnippetsTable.tsx     | 49 +++++++++++++++--
 .../code-snippets-community-featured.spec.ts  | 54 +++++++++++++++++++
 3 files changed, 104 insertions(+), 5 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index 8e68610b7..2810b01f1 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -179,7 +179,11 @@ const SearchResultsTable: React.FC<SearchResultsViewProps> = ({ snippetView, set
 					selected={selected}
 					setSelected={setSelected}
 				/>
-				: <CloudSnippetsTable snippets={searchResults.snippets} />}
+				: <CloudSnippetsTable
+					snippets={searchResults.snippets}
+					selected={selected}
+					setSelected={setSelected}
+				/>}
 
 			<TableNav which="bottom" {...navProps} />
 		</div>
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
index e2d3f75ef..1be29a711 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx
@@ -1,4 +1,4 @@
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 import React, { useState } from 'react'
 import { getSnippetType } from '../../../utils/snippets/snippets'
 import { stripTags, truncateChars } from '../../../utils/text'
@@ -8,16 +8,45 @@ import { CloudSnippetDownloadButton } from '../../common/cloud/CloudSnippetDownl
 import { CloudSnippetPreviewModal } from '../../common/cloud/CloudSnippetPreviewModal'
 import { CloudStatusBadge } from '../../common/cloud/CloudStatusBadge'
 import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema'
+import type { Dispatch, SetStateAction } from 'react'
+
+type CloudSnippetId = CloudSnippetSchema['id']
+type SetSelected = Dispatch<SetStateAction<Set<CloudSnippetId>>>
+
+const updateSelection = (setSelected: SetSelected, ids: CloudSnippetId[], isSelected: boolean) => {
+	setSelected(previous => {
+		const updated = new Set(previous)
+		ids.forEach(id => isSelected ? updated.add(id) : updated.delete(id))
+		return updated
+	})
+}
 
 interface CloudSnippetRowProps {
 	snippet: CloudSnippetSchema
+	selected: Set<CloudSnippetId>
+	setSelected: SetSelected
 }
 
-const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet }) => {
+const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet, selected, setSelected }) => {
 	const [isPreviewOpen, setIsPreviewOpen] = useState(false)
 
 	return (
 		<tr>
+			<th scope="row" className="check-column">
+				<input
+					id={`cb-select-${snippet.id}`}
+					type="checkbox"
+					name="checked[]"
+					checked={selected.has(snippet.id)}
+					aria-label={sprintf(
+						// translators: %s: snippet name.
+						__('Select %s', 'code-snippets'),
+						snippet.name
+					)}
+					onChange={event => updateSelection(setSelected, [snippet.id], event.target.checked)}
+				/>
+			</th>
+
 			<td className="column-name column-primary">
 				<strong>
 					<button
@@ -56,6 +85,8 @@ const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet }) => {
 
 export interface CloudSnippetsTableProps {
 	snippets: CloudSnippetSchema[]
+	selected: Set<CloudSnippetId>
+	setSelected: SetSelected
 }
 
 /**
@@ -63,10 +94,20 @@ export interface CloudSnippetsTableProps {
  * bundle contents), mirroring the card actions. Descriptions are clamped
  * so all rows stay the same height.
  */
-export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({ snippets }) =>
+export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({ snippets, selected, setSelected }) =>
 	<table className="wp-list-table widefat fixed striped cloud-snippets-table">
 		<thead>
 			<tr>
+				<th scope="col" className="check-column">
+					<input
+						id="cb-select-all-cloud-snippets"
+						type="checkbox"
+						checked={0 < snippets.length && snippets.every(snippet => selected.has(snippet.id))}
+						aria-label={__('Select all snippets', 'code-snippets')}
+						onChange={event =>
+							updateSelection(setSelected, snippets.map(snippet => snippet.id), event.target.checked)}
+					/>
+				</th>
 				<th scope="col" className="column-name column-primary">{__('Name', 'code-snippets')}</th>
 				<th scope="col" className="column-type">{__('Type', 'code-snippets')}</th>
 				<th scope="col" className="column-status">{__('Status', 'code-snippets')}</th>
@@ -78,6 +119,6 @@ export const CloudSnippetsTable: React.FC<CloudSnippetsTableProps> = ({ snippets
 		</thead>
 		<tbody>
 			{snippets.map(snippet =>
-				<CloudSnippetRow key={snippet.id} snippet={snippet} />)}
+				<CloudSnippetRow key={snippet.id} {...{ snippet, selected, setSelected }} />)}
 		</tbody>
 	</table>
diff --git a/tests/e2e/code-snippets-community-featured.spec.ts b/tests/e2e/code-snippets-community-featured.spec.ts
index 53b4663aa..b6470004d 100644
--- a/tests/e2e/code-snippets-community-featured.spec.ts
+++ b/tests/e2e/code-snippets-community-featured.spec.ts
@@ -66,4 +66,58 @@ test.describe('Community Cloud Featured Snippets', () => {
 		// The "Featured Snippets" heading should no longer be visible (search-mode heading replaces it).
 		await expect(page.locator('.cloud-snippets-heading', { hasText: 'Featured Snippets' })).not.toBeVisible()
 	})
+
+	test('Table checkboxes share the cloud selection state', async ({ page }) => {
+		await page.route(
+			url =>
+				url.pathname.includes('/cloud/snippets/featured') ||
+				true === url.searchParams.get('rest_route')?.includes('/cloud/snippets/featured'),
+			route => route.fulfill({
+				contentType: 'application/json',
+				body: JSON.stringify({
+					snippets: [{
+						id: 501,
+						slug: 'mock-cloud-snippet',
+						name: 'Mock Cloud Snippet',
+						description: 'Mock description',
+						code: '<?php echo "mock";',
+						tags: [],
+						scope: 'global',
+						codevault: 'MockVault',
+						total_votes: 0,
+						vote_count: 0,
+						wp_tested: '',
+						status: 4,
+						created: '2026-01-01 00:00:00',
+						updated: '2026-01-01 00:00:00',
+						revision: 1,
+						is_owner: false,
+						local_id: null,
+						update_available: false
+					}],
+					page: 1,
+					total_pages: 1,
+					total_snippets: 1,
+					available_filters: {}
+				})
+			})
+		)
+		await page.reload()
+
+		const table = page.locator('.cloud-snippets-table')
+		await expect(table).toBeVisible({ timeout: TIMEOUTS.DEFAULT })
+
+		const headerCheckbox = table.locator('thead').getByRole('checkbox', { name: 'Select all snippets' })
+		const rowCheckbox = table.locator('tbody').getByRole('checkbox', { name: 'Select Mock Cloud Snippet' })
+		const toolbarCheckbox = page.getByRole('checkbox', { name: 'Select all items' })
+
+		await rowCheckbox.check()
+		await expect(rowCheckbox).toBeChecked()
+		await expect(headerCheckbox).toBeChecked()
+		await expect(toolbarCheckbox).toBeChecked()
+
+		await headerCheckbox.uncheck()
+		await expect(rowCheckbox).not.toBeChecked()
+		await expect(toolbarCheckbox).not.toBeChecked()
+	})
 })

From 2579c6602c9a20674114f10c94551b3be3d6ae04 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 15:03:53 +0300
Subject: [PATCH 39/47] chore: use theme tokens in list table styles

---
 src/css/common/_badges.scss                |  4 ++--
 src/css/common/_cards.scss                 | 16 +++++++++-------
 src/css/common/_kebab-menu.scss            |  6 ++++--
 src/css/common/_subnav.scss                | 14 ++++++++------
 src/css/common/_toolbar.scss               |  9 +++++----
 src/css/common/_wp-admin.scss              |  2 +-
 src/css/common/list-table/_layout.scss     |  8 ++++----
 src/css/common/list-table/_pagination.scss |  4 +++-
 src/css/common/list-table/_responsive.scss |  4 +++-
 src/css/manage.scss                        |  2 +-
 src/css/manage/_cloud-community-cards.scss | 10 +++++-----
 src/css/manage/_cloud-community.scss       |  3 ++-
 src/css/manage/_snippets-table.scss        | 11 ++++++-----
 src/css/settings.scss                      |  3 ++-
 14 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/css/common/_badges.scss b/src/css/common/_badges.scss
index 0ccdbf5e2..e7eb7504f 100644
--- a/src/css/common/_badges.scss
+++ b/src/css/common/_badges.scss
@@ -35,7 +35,7 @@
 }
 
 .network-shared {
-	color: #2271b1;
+	color: theme.$accent;
 	font-size: 22px;
 	inline-size: 100%;
 	cursor: help;
@@ -144,7 +144,7 @@
 .badge.pro-badge,
 .inverted-badges .badge.pro-badge,
 .nav-tab-inactive .badge.pro-badge {
-	color: #2271b1;
+	color: theme.$accent;
 	background-color: #eff5f9;
 	border: 1px solid rgb(34 113 177 / 10%) !important;
 	border-radius: 999px;
diff --git a/src/css/common/_cards.scss b/src/css/common/_cards.scss
index bb2d08469..57efd0ba1 100644
--- a/src/css/common/_cards.scss
+++ b/src/css/common/_cards.scss
@@ -1,3 +1,5 @@
+@use 'theme';
+
 .code-snippets-cards {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(580px, 1fr));
@@ -7,7 +9,7 @@
 
 .code-snippets-card {
 	background: #fff;
-	border: 1px solid #c3c4c7;
+	border: 1px solid theme.$control-border;
 	border-radius: 5px;
 	margin: 0;
 	display: flex;
@@ -16,7 +18,7 @@
 
 	a {
 		text-decoration: none;
-		color: #2271b1;
+		color: theme.$accent;
 	}
 
 	.card-inner {
@@ -30,7 +32,7 @@
 		gap: 8px;
 		background: #f7f7f8;
 		margin-block-start: auto;
-		border-block-start: 1px solid #c3c4c7;
+		border-block-start: 1px solid theme.$control-border;
 		padding-inline: 24px;
 		padding-block: 12px;
 		border-end-start-radius: 5px;
@@ -90,7 +92,7 @@
 		padding: 0;
 		box-sizing: border-box;
 		background: #fff;
-		border: 1.5px solid #2271b1;
+		border: 1.5px solid theme.$accent;
 		border-radius: 5px;
 		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
 		cursor: pointer;
@@ -100,7 +102,7 @@
 		}
 
 		&:checked {
-			background: #2271b1;
+			background: theme.$accent;
 
 			&::before {
 				content: '';
@@ -117,7 +119,7 @@
 	}
 
 	&.is-selected {
-		border-color: #2271b1;
-		box-shadow: 0 0 0 1px #2271b1;
+		border-color: theme.$accent;
+		box-shadow: 0 0 0 1px theme.$accent;
 	}
 }
diff --git a/src/css/common/_kebab-menu.scss b/src/css/common/_kebab-menu.scss
index 061bc0eb7..c7557d3b3 100644
--- a/src/css/common/_kebab-menu.scss
+++ b/src/css/common/_kebab-menu.scss
@@ -1,3 +1,5 @@
+@use 'theme';
+
 // 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.
@@ -15,8 +17,8 @@
 	box-sizing: border-box;
 	padding: 0;
 	background: #fff;
-	color: #2271b1;
-	border: 1px solid #2271b1;
+	color: theme.$accent;
+	border: 1px solid theme.$accent;
 	border-radius: 5px;
 	cursor: pointer;
 
diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss
index 088efd410..4b5ecf5fa 100644
--- a/src/css/common/_subnav.scss
+++ b/src/css/common/_subnav.scss
@@ -1,3 +1,5 @@
+@use 'theme';
+
 // 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.
@@ -24,7 +26,7 @@
 	// below 782px; mirror them so the bar stays flush without overflowing
 	// the viewport. The tabs scroll horizontally on a single row rather than
 	// stacking, with the scrollbar chrome hidden.
-	@media screen and (width <= 782px) {
+	@media (width <= 782px) {
 		margin-inline-start: -10px;
 		inline-size: calc(100% + 22px);
 		overflow-x: auto;
@@ -109,7 +111,7 @@
 		&.active-type {
 			background: #f0f0f1;
 			border-color: #f0f0f1;
-			color: #2271b1;
+			color: theme.$accent;
 
 			// Children paint over the parent nav's border, so this recolours
 			// the 1px band separator beneath the active tab to match its fill.
@@ -119,7 +121,7 @@
 		// Suppress the persistent focus ring left behind after a mouse click;
 		// keyboard navigation still gets a visible outline via :focus-visible.
 		&:focus-visible {
-			outline: 2px solid #2271b1;
+			outline: 2px solid theme.$accent;
 			outline-offset: -2px;
 			box-shadow: none;
 		}
@@ -168,7 +170,7 @@
 		}
 
 		&.active-view {
-			background: #2271b1;
+			background: theme.$accent;
 			color: #fff;
 
 			&:hover,
@@ -204,7 +206,7 @@
 
 // The active tab's count adopts the accent alongside its label.
 .snippet-type-nav .snippet-type-link.active-type .subnav-count {
-	color: #2271b1;
+	color: theme.$accent;
 }
 
 // The short "All" form of the all-snippets label only replaces "All Snippets"
@@ -236,5 +238,5 @@
 // border above the subnav bar.
 .notice + .wrap .snippet-type-nav {
 	margin-block-start: 20px;
-	border-block-start: 1px solid #c3c4c7;
+	border-block-start: 1px solid theme.$control-border;
 }
diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss
index 7b1abaa5d..2fe2b16d2 100644
--- a/src/css/common/_toolbar.scss
+++ b/src/css/common/_toolbar.scss
@@ -1,3 +1,4 @@
+@use 'theme';
 @use 'upsell';
 
 $toolbar-block-size: 136px;
@@ -107,7 +108,7 @@ $wpcontent-inline-start-indent: 20px;
 		}
 
 		&.active-link, &:hover, &:focus, &:active {
-			color: #2271b1;
+			color: theme.$accent;
 		}
 	}
 
@@ -145,7 +146,7 @@ $wpcontent-inline-start-indent: 20px;
 
 	// Mobile: the primary navigation scrolls horizontally on its band rather
 	// than wrapping, with the scrollbar chrome hidden.
-	@media screen and (width <= 782px) {
+	@media (width <= 782px) {
 		overflow-x: auto;
 		scrollbar-width: none;
 
@@ -167,13 +168,13 @@ $wpcontent-inline-start-indent: 20px;
 .code-snippets-toolbar-upper li a:hover,
 .code-snippets-toolbar-upper li a:focus,
 .code-snippets-toolbar-upper li a:active {
-	color: #2271b1;
+	color: theme.$accent;
 }
 
 .code-snippets-toolbar-lower .pro-chip,
 .nav-tab .pro-chip,
 .snippet-type-link .pro-chip {
-	color: #2271b1;
+	color: theme.$accent;
 	background: #eff5f9;
 	border: 1px solid rgb(34 113 177 / 10%);
 	text-transform: uppercase;
diff --git a/src/css/common/_wp-admin.scss b/src/css/common/_wp-admin.scss
index b94f57a6d..3a29a2bf3 100644
--- a/src/css/common/_wp-admin.scss
+++ b/src/css/common/_wp-admin.scss
@@ -6,7 +6,7 @@
  * 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) —
+ * tokens — 38px height, 5px radius, theme control borders and the brand accent —
  * 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
diff --git a/src/css/common/list-table/_layout.scss b/src/css/common/list-table/_layout.scss
index 8141219f2..46a72eb44 100644
--- a/src/css/common/list-table/_layout.scss
+++ b/src/css/common/list-table/_layout.scss
@@ -20,7 +20,7 @@
 
 .active-snippet {
 	td, th {
-		background-color: rgba(#78c8e6, 0.06);
+		background-color: rgb(120 200 230 / 6%);
 	}
 
 	th.check-column {
@@ -74,7 +74,7 @@
 		border: none;
 		background: none;
 		font: inherit;
-		color: #2271b1;
+		color: theme.$accent;
 		cursor: pointer;
 		text-align: start;
 		overflow: hidden;
@@ -83,7 +83,7 @@
 
 	th.sortable .list-table-sort-button:focus-visible,
 	th.sorted .list-table-sort-button:focus-visible {
-		outline: 2px solid #2271b1;
+		outline: 2px solid theme.$accent;
 		outline-offset: 2px;
 		border-radius: 2px;
 	}
@@ -258,7 +258,7 @@
 			content: '';
 			inline-size: 1px;
 			block-size: 13px;
-			background: #c3c4c7;
+			background: theme.$control-border;
 		}
 	}
 }
diff --git a/src/css/common/list-table/_pagination.scss b/src/css/common/list-table/_pagination.scss
index a278bb920..fd42d4d38 100644
--- a/src/css/common/list-table/_pagination.scss
+++ b/src/css/common/list-table/_pagination.scss
@@ -1,3 +1,5 @@
+@use '../theme';
+
 // 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 {
@@ -31,7 +33,7 @@
 		inline-size: 20px;
 		block-size: 20px;
 		margin: 0;
-		border: 1px solid #c3c4c7;
+		border: 1px solid theme.$control-border;
 		border-radius: 5px;
 		box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
 	}
diff --git a/src/css/common/list-table/_responsive.scss b/src/css/common/list-table/_responsive.scss
index a4e5967f9..245159842 100644
--- a/src/css/common/list-table/_responsive.scss
+++ b/src/css/common/list-table/_responsive.scss
@@ -1,3 +1,5 @@
+@use '../theme';
+
 // 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
@@ -88,7 +90,7 @@
 		}
 
 		a.button {
-			color: #2271b1;
+			color: theme.$accent;
 		}
 
 		.paging-input {
diff --git a/src/css/manage.scss b/src/css/manage.scss
index e8567542b..79c481287 100644
--- a/src/css/manage.scss
+++ b/src/css/manage.scss
@@ -33,7 +33,7 @@
 	align-items: center;
 	gap: 8px;
 
-	@media screen and (width <= 1190px) {
+	@media (width <= 1190px) {
 		span:first-child:not(:last-child) {
 			display: none;
 		}
diff --git a/src/css/manage/_cloud-community-cards.scss b/src/css/manage/_cloud-community-cards.scss
index f110dc700..8a0c9c3f4 100644
--- a/src/css/manage/_cloud-community-cards.scss
+++ b/src/css/manage/_cloud-community-cards.scss
@@ -37,7 +37,7 @@
 			border: none;
 			background: none;
 			font: inherit;
-			color: #2271b1;
+			color: theme.$accent;
 			cursor: pointer;
 			text-align: start;
 			overflow: hidden;
@@ -49,7 +49,7 @@
 			}
 
 			&:focus-visible {
-				outline: 2px solid #2271b1;
+				outline: 2px solid theme.$accent;
 				outline-offset: 2px;
 				border-radius: 2px;
 			}
@@ -64,7 +64,7 @@
 		font-size: 14px;
 
 		.cloud-snippet-tags {
-			color: #2271b1;
+			color: theme.$accent;
 		}
 
 		.snippet-card-modified {
@@ -142,11 +142,11 @@
 ul.cloud-search-results.code-snippets-cards {
 	grid-template-columns: repeat(3, minmax(0, 1fr));
 
-	@media screen and (width <= 1100px) {
+	@media (width <= 1100px) {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 
-	@media screen and (width <= 782px) {
+	@media (width <= 782px) {
 		grid-template-columns: minmax(0, 1fr);
 	}
 
diff --git a/src/css/manage/_cloud-community.scss b/src/css/manage/_cloud-community.scss
index e24197863..a3c168bc2 100644
--- a/src/css/manage/_cloud-community.scss
+++ b/src/css/manage/_cloud-community.scss
@@ -1,4 +1,5 @@
 @use '../common/banners';
+@use '../common/theme';
 
 .cloud-snippet-status {
 	display: inline-flex;
@@ -134,7 +135,7 @@ $status-colors: (
 		margin: 0;
 		font-size: inherit;
 		font-weight: 600;
-		color: #2271b1;
+		color: theme.$accent;
 		text-decoration: none;
 		cursor: pointer;
 		text-align: start;
diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index 6c82a6a78..615597f7a 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 {
@@ -20,7 +21,7 @@
 .wp-list-table .priority-column input {
 	appearance: none;
 	background: #fff;
-	border: 1px solid #c3c4c7;
+	border: 1px solid theme.$control-border;
 	border-radius: 5px;
 	box-shadow: none;
 	box-sizing: border-box;
@@ -72,11 +73,11 @@
 	&.code-snippets-cards {
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 
-		@media screen and (width <= 1100px) {
+		@media (width <= 1100px) {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 		}
 
-		@media screen and (width <= 782px) {
+		@media (width <= 782px) {
 			grid-template-columns: minmax(0, 1fr);
 		}
 	}
@@ -131,7 +132,7 @@
 
 			.snippet-name {
 				display: block;
-				color: #2271b1;
+				color: theme.$accent;
 				text-decoration: none;
 				white-space: nowrap;
 				overflow: hidden;
@@ -162,7 +163,7 @@
 		}
 
 		.snippet-card-tags a {
-			color: #2271b1;
+			color: theme.$accent;
 			text-decoration: none;
 		}
 
diff --git a/src/css/settings.scss b/src/css/settings.scss
index 43567de82..ad6175687 100644
--- a/src/css/settings.scss
+++ b/src/css/settings.scss
@@ -1,5 +1,6 @@
 @use 'common/codemirror';
 @use 'common/subnav';
+@use 'common/theme';
 @use 'common/toolbar';
 @use 'common/wp-admin';
 @use 'common/page-header';
@@ -158,7 +159,7 @@ body.js {
 		background: #f0f6fc;
 		padding: 2px 8px;
 		border-radius: 3px;
-		border: 1px solid #c3c4c7;
+		border: 1px solid theme.$control-border;
 	}
 
 	#target_version {

From a6de704740cd3bd71e9f67ebb7a6e9c1f3f2f5e7 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 15:04:11 +0300
Subject: [PATCH 40/47] fix: correct pagination i18n

---
 .../common/ListTable/TablePaginationNavigation.tsx        | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/js/components/common/ListTable/TablePaginationNavigation.tsx b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
index 09770ca00..7f8fbbe07 100644
--- a/src/js/components/common/ListTable/TablePaginationNavigation.tsx
+++ b/src/js/components/common/ListTable/TablePaginationNavigation.tsx
@@ -167,17 +167,15 @@ const CurrentPage: React.FC<CurrentPageProps> = ({
 			<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>
+					{/* translators: 1: Current page. 2: Total pages. */
+						sprintf(_x('%1$s of %2$s', 'paging', 'code-snippets'), currentPage, totalPages)}
 				</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')}
+				{_x(' of ', 'paging', 'code-snippets')}
 				<span className="total-pages">{totalPages}</span>
 			</span>
 		</span>

From 56ede7f4e8f74007947cc20aa27060ad58131ee6 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 15:04:48 +0300
Subject: [PATCH 41/47] chore: address accessibility review feedback

---
 .../ManageMenu/CommunityCloud/CommunityCloud.tsx          | 6 ++----
 .../ManageMenu/SnippetsTable/SnippetsTableControls.tsx    | 1 -
 src/php/Core/deactivation-notice.php                      | 8 ++++++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index 190713ac1..3d2ae0636 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -5,7 +5,7 @@ import { useSnippetView } from '../../../hooks/useSnippetView'
 import { fetchConstQueryParam, updateQueryParams } from '../../../utils/urls'
 import { ScreenMetaSlot } from '../../common/ScreenMetaSlot'
 import { SubnavTabs } from '../../common/SubnavTabs'
-import { WithCloudSearchContext, useCloudSearch } from './WithCloudSearchContext'
+import { WithCloudSearchContext } from './WithCloudSearchContext'
 import { CloudSearch } from './CloudSearch'
 
 const TAB_QUERY_PARAM = 'tab'
@@ -22,7 +22,6 @@ const CommunityCloudInner = () => {
 	const [currentTab, setCurrentTab] =
 		useState<CommunityTab>(() => fetchConstQueryParam(TAB_QUERY_PARAM, TABS) ?? TABS[0])
 	const { snippetView, setSnippetView } = useSnippetView()
-	const { searchResults } = useCloudSearch()
 
 	return (
 		<>
@@ -32,8 +31,7 @@ const CommunityCloudInner = () => {
 				tabs={[
 					{
 						name: 'snippets',
-						label: TAB_LABELS.snippets,
-						count: searchResults?.totalItems
+						label: TAB_LABELS.snippets
 					},
 					{
 						name: 'bundles',
diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
index 07db89183..524b6ae32 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsTableControls.tsx
@@ -105,7 +105,6 @@ const FilterByTagControl: React.FC<FilterByTagControlProps> = ({ visibleSnippets
 				id="snippets-tag-filter"
 				name="tag"
 				value={currentTag}
-				aria-label={__('Filter snippets by tag', 'code-snippets')}
 				onChange={event => setCurrentTag(event.target.value)}
 			>
 				<option value="">{__('All Tags', 'code-snippets')}</option>
diff --git a/src/php/Core/deactivation-notice.php b/src/php/Core/deactivation-notice.php
index 3a7f77684..a01098180 100644
--- a/src/php/Core/deactivation-notice.php
+++ b/src/php/Core/deactivation-notice.php
@@ -29,7 +29,9 @@ function code_snippets_deactivation_notice() {
 	if ( version_compare( phpversion(), $required_php_version, '<' ) ) {
 		// The code-snippets-notice class exempts this notice from the plugin's
 		// own admin notice filtering on Code Snippets screens.
-		echo '<div class="code-snippets-notice error fade"><p><strong>';
+		echo '<div class="code-snippets-notice error fade" role="region" aria-label="' .
+			esc_attr__( 'Code Snippets PHP version notice', 'code-snippets' ) .
+			'"><p><strong>';
 		// translators: %s: required PHP version number.
 		echo esc_html( sprintf( __( 'Code Snippets requires PHP %s or later.', 'code-snippets' ), $required_php_version ) );
 		echo '</strong><br>';
@@ -48,7 +50,9 @@ function code_snippets_deactivation_notice() {
 	}
 
 	if ( defined( 'CODE_SNIPPETS_FILE' ) ) {
-		echo '<div class="code-snippets-notice error fade"><p>';
+		echo '<div class="code-snippets-notice error fade" role="region" aria-label="' .
+			esc_attr__( 'Code Snippets duplicate plugin notice', 'code-snippets' ) .
+			'"><p>';
 		esc_html_e( 'Another version of Code Snippets appears to be installed. Deactivating this version.', 'code-snippets' );
 		echo '</p></div>';
 

From 5a762e5464e3de3058496ee44a943aee6fa1636a Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 15:05:40 +0300
Subject: [PATCH 42/47] chore: remove redundant author translator note

---
 src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
index 07b01c189..e59313549 100644
--- a/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
@@ -25,7 +25,6 @@ export const CloudSnippetAuthor: React.FC<CloudSnippetAuthorProps> = ({ snippet
 			rel="noopener noreferrer"
 		>
 			{sprintf(
-				/* translators: %s: cloud library author name. */
 				_x('By %s', 'snippet author', 'code-snippets'),
 				snippet.codevault
 			)}

From ddab13916fafd658f6f346e7c518c98470d5c5c3 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 15:07:32 +0300
Subject: [PATCH 43/47] fix: preserve visible cloud description text

---
 src/js/utils/text.ts         |  5 ++++-
 tests/e2e/text-utils.spec.ts | 12 ++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 3bde1e9d8..473263193 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -71,9 +71,12 @@ export const decodeEntities = (text: string): string =>
 
 export const stripTags = (text: string): string => {
 	const document = new DOMParser().parseFromString(text, 'text/html')
+	const blockSelector = 'p,div,li,br,h1,h2,h3,h4,h5,h6,tr,td,ul,ol,blockquote,table,pre,hr,' +
+		'dl,dt,dd,section,article,header,footer,figure,figcaption'
 
+	document.body.querySelectorAll('script,style').forEach(element => element.remove())
 	document.body
-		.querySelectorAll('p,div,li,br,h1,h2,h3,h4,h5,h6,tr,td')
+		.querySelectorAll(blockSelector)
 		.forEach(element => element.after(document.createTextNode(' ')))
 
 	return (document.body.textContent ?? '').replace(/\s+/g, ' ').trim()
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index c1d11af03..f13a59e9a 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -12,6 +12,11 @@ test.describe('stripTags', () => {
 		expect(await stripTagsInPage(page, '<ul><li>One</li><li>Two</li></ul>')).toBe('One Two')
 	})
 
+	test('preserves separation between blockquotes', async ({ page }) => {
+		expect(await stripTagsInPage(page, '<blockquote>First</blockquote><blockquote>Second</blockquote>'))
+			.toBe('First Second')
+	})
+
 	test('handles ">" inside quoted attribute values', async ({ page }) => {
 		expect(await stripTagsInPage(page, '<p title="1 > 0">First</p><p>Second</p>')).toBe('First Second')
 		expect(await stripTagsInPage(page, "<span title='a > b'>inline</span>")).toBe('inline')
@@ -70,6 +75,13 @@ test.describe('stripTags', () => {
 		expect(await stripTagsInPage(page, 'a<!-- b -->c')).toBe('ac')
 	})
 
+	test('does not include script or style content', async ({ page }) => {
+		expect(await stripTagsInPage(
+			page,
+			'<p>Visible</p><script>alert("hidden")</script><style>.hidden { display: none; }</style><p>Text</p>'
+		)).toBe('Visible Text')
+	})
+
 	test('handles repeated unmatched comment and PHP openers within a sanity bound', async ({ page }) => {
 		const timeStrip = async (opener: string, repeats: number): Promise<number> => {
 			const input = opener.repeat(repeats)

From b80b89a3e7c7556ab162f291fdee9ded587afc10 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 15:08:54 +0300
Subject: [PATCH 44/47] fix: sanitize hydrated cloud snippets

---
 src/php/Model/Cloud_Snippets.php         |  2 +-
 tests/unit/Model/Cloud_Snippets_Test.php | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/php/Model/Cloud_Snippets.php b/src/php/Model/Cloud_Snippets.php
index 4da70cba5..ca52022b9 100644
--- a/src/php/Model/Cloud_Snippets.php
+++ b/src/php/Model/Cloud_Snippets.php
@@ -78,7 +78,7 @@ protected function prepare_snippets( $snippets ): array {
 		$snippets = is_array( $snippets ) ? $snippets : [ $snippets ];
 
 		foreach ( $snippets as $snippet ) {
-			$result[] = $snippet instanceof Cloud_Snippet ? $snippet : new Cloud_Snippet( $snippet );
+			$result[] = $snippet instanceof Cloud_Snippet ? $snippet : self::unpack_api_snippet( $snippet );
 		}
 
 		return $result;
diff --git a/tests/unit/Model/Cloud_Snippets_Test.php b/tests/unit/Model/Cloud_Snippets_Test.php
index 7b51c19fc..663feb9e0 100644
--- a/tests/unit/Model/Cloud_Snippets_Test.php
+++ b/tests/unit/Model/Cloud_Snippets_Test.php
@@ -189,6 +189,23 @@ public function test_model_preserves_description_value(): void {
 		$this->assertSame( $description, ( new Cloud_Snippet( [ 'description' => $description ] ) )->description );
 	}
 
+	/**
+	 * Collection hydration sanitises remote description markup.
+	 *
+	 * @return void
+	 */
+	public function test_collection_hydration_sanitizes_descriptions(): void {
+		$result = new Cloud_Snippets(
+			[
+				'snippets' => [
+					[ 'description' => '<strong>Allowed</strong><script>alert("unsafe")</script>' ],
+				],
+			]
+		);
+
+		$this->assertSame( '<strong>Allowed</strong>alert("unsafe")', $result->snippets[0]->description );
+	}
+
 	/**
 	 * Remote descriptions are sanitised and normalised while unpacking the response.
 	 *

From 92bf71de6d3cc73b55c4524f1c65edee05191b3f Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 15:18:52 +0300
Subject: [PATCH 45/47] fix: restore community cloud snippets tab count

---
 .../components/ManageMenu/CommunityCloud/CommunityCloud.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
index 3d2ae0636..190713ac1 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CommunityCloud.tsx
@@ -5,7 +5,7 @@ import { useSnippetView } from '../../../hooks/useSnippetView'
 import { fetchConstQueryParam, updateQueryParams } from '../../../utils/urls'
 import { ScreenMetaSlot } from '../../common/ScreenMetaSlot'
 import { SubnavTabs } from '../../common/SubnavTabs'
-import { WithCloudSearchContext } from './WithCloudSearchContext'
+import { WithCloudSearchContext, useCloudSearch } from './WithCloudSearchContext'
 import { CloudSearch } from './CloudSearch'
 
 const TAB_QUERY_PARAM = 'tab'
@@ -22,6 +22,7 @@ const CommunityCloudInner = () => {
 	const [currentTab, setCurrentTab] =
 		useState<CommunityTab>(() => fetchConstQueryParam(TAB_QUERY_PARAM, TABS) ?? TABS[0])
 	const { snippetView, setSnippetView } = useSnippetView()
+	const { searchResults } = useCloudSearch()
 
 	return (
 		<>
@@ -31,7 +32,8 @@ const CommunityCloudInner = () => {
 				tabs={[
 					{
 						name: 'snippets',
-						label: TAB_LABELS.snippets
+						label: TAB_LABELS.snippets,
+						count: searchResults?.totalItems
 					},
 					{
 						name: 'bundles',

From 43e131499568ea7920db66391bed6fff7902c6e8 Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 17:05:31 +0300
Subject: [PATCH 46/47] fix: separate remaining block elements in strip tags
 helper

---
 src/js/utils/text.ts         | 5 +++--
 tests/e2e/text-utils.spec.ts | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
index 473263193..19d32c273 100644
--- a/src/js/utils/text.ts
+++ b/src/js/utils/text.ts
@@ -71,8 +71,9 @@ export const decodeEntities = (text: string): string =>
 
 export const stripTags = (text: string): string => {
 	const document = new DOMParser().parseFromString(text, 'text/html')
-	const blockSelector = 'p,div,li,br,h1,h2,h3,h4,h5,h6,tr,td,ul,ol,blockquote,table,pre,hr,' +
-		'dl,dt,dd,section,article,header,footer,figure,figcaption'
+	const blockSelector = 'p,div,li,br,h1,h2,h3,h4,h5,h6,tr,td,th,ul,ol,blockquote,table,pre,hr,' +
+		'dl,dt,dd,section,article,header,footer,figure,figcaption,' +
+		'address,aside,nav,main,fieldset,form,details,summary,dialog,hgroup,caption'
 
 	document.body.querySelectorAll('script,style').forEach(element => element.remove())
 	document.body
diff --git a/tests/e2e/text-utils.spec.ts b/tests/e2e/text-utils.spec.ts
index f13a59e9a..e8380ebdc 100644
--- a/tests/e2e/text-utils.spec.ts
+++ b/tests/e2e/text-utils.spec.ts
@@ -17,6 +17,13 @@ test.describe('stripTags', () => {
 			.toBe('First Second')
 	})
 
+	test('preserves separation between other block elements', async ({ page }) => {
+		expect(await stripTagsInPage(page, '<address>First</address><address>Second</address>'))
+			.toBe('First Second')
+		expect(await stripTagsInPage(page, '<aside>First</aside><nav>Second</nav><main>Third</main>'))
+			.toBe('First Second Third')
+	})
+
 	test('handles ">" inside quoted attribute values', async ({ page }) => {
 		expect(await stripTagsInPage(page, '<p title="1 > 0">First</p><p>Second</p>')).toBe('First Second')
 		expect(await stripTagsInPage(page, "<span title='a > b'>inline</span>")).toBe('inline')

From 8ff0f897e677fb0018ddd7875eef03436cc3930b Mon Sep 17 00:00:00 2001
From: Imants <imants.kokis@gmail.com>
Date: Thu, 23 Jul 2026 19:14:26 +0300
Subject: [PATCH 47/47] fix: wait for snippet view preference to persist in e2e
 tests

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

diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts
index ed8bd5f12..087c6bb68 100644
--- a/tests/e2e/code-snippets-list.spec.ts
+++ b/tests/e2e/code-snippets-list.spec.ts
@@ -4,6 +4,16 @@ import { DEFAULT_E2E_SNIPPET_BASE_NAME, SnippetsTestHelper } from './helpers/Sni
 import { SELECTORS } from './helpers/constants'
 import type { Page, Route } from '@playwright/test'
 
+// The view preference saves through an optimistic background request, so wait
+// for it to persist before navigating or ending the test.
+const switchSnippetView = async (page: Page, view: 'Card view' | 'Table view') => {
+	const saved = page
+		.waitForResponse(response => response.url().includes('/snippet-view') && 'GET' !== response.request().method(), { timeout: 5000 })
+		.catch(() => undefined)
+	await page.getByRole('button', { name: view }).click()
+	await saved
+}
+
 test.describe('Code Snippets List Page Actions', () => {
 	let helper: SnippetsTestHelper
 	let snippetName: string
@@ -40,7 +50,7 @@ test.describe('Code Snippets List Page Actions', () => {
 	})
 
 	test('Card action popovers let keyboard focus continue through the document', async ({ page }) => {
-		await page.getByRole('button', { name: 'Card view' }).click()
+		await switchSnippetView(page, 'Card view')
 
 		try {
 			const card = page.locator('.snippets-card-grid .code-snippets-card').filter({ hasText: snippetName })
@@ -68,7 +78,7 @@ test.describe('Code Snippets List Page Actions', () => {
 			await expect(card.getByRole('link', { name: 'Edit' })).toBeFocused()
 			await expect(popover).toHaveCount(0)
 		} finally {
-			await page.getByRole('button', { name: 'Table view' }).click().catch(() => undefined)
+			await switchSnippetView(page, 'Table view').catch(() => undefined)
 		}
 	})
 
@@ -456,14 +466,14 @@ test.describe('Manage table Screen Options', () => {
 
 		try {
 			await helper.navigateToSnippetsAdmin()
-			await page.getByRole('button', { name: 'Card view' }).click()
+			await switchSnippetView(page, 'Card view')
 			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 switchSnippetView(page, 'Table view').catch(() => undefined)
 			await SnippetsTestHelper.resetSnippetsPerPage()
 		}
 	})