fix: beta issues

.github/instructions/code-review.instructions.md

@@ -15,6 +15,20 @@ Severity labels used in this file:
 - **MUST** — Flag as a blocking issue; must be resolved before merge.
 - **SHOULD** — Flag as a recommendation; resolve before merge unless a risk-aware rationale is provided.
 
+## Practical Reviewer Checks
+
+- Don't silently widen types or drop generics when refactoring. If typing gets weaker, require a clear reason. [MUST]
+- In namespaced PHP, call WordPress globals with `\function_name()` and do not assume pluggable/core functions exist on very early execution paths. If a callback can run during early bootstrap, guard availability appropriately. [MUST]
+- Ensure hook callbacks that respond to options/actions are tightly gated to the intended option/action. Be suspicious of inverted or overly broad conditionals that can be triggered by other plugins. [MUST]
+- Avoid no-op abstractions (pass-through helpers, one-liner wrappers) unless they materially improve readability, reuse, or testability. [SHOULD]
+- Inline single-use extractions that do not clarify intent (local functions/variables used once). [SHOULD]
+- Prefer `undefined` for absent optional values in TypeScript/React unless `null` has explicit semantics in that API. [SHOULD]
+- For conditional class names, prefer the repository `classnames.classnames` helper over manual array filtering and joining. [SHOULD]
+- Prefer JSX for React markup. If a hook/util needs to render elements, suggest moving the markup into a `.tsx` component instead of using `createElement` in a `.ts` file. [SHOULD]
+- For simple key-to-value parsing/transforms, prefer a literal object/record map over a loop + `switch` when it improves clarity. [SHOULD]
+- Do not stack redundant `catch` blocks (e.g., `ParseError` plus `Throwable`) unless the handlers differ. [SHOULD]
+- When a screen is React-driven, question heavy PHP view logic. If PHP is used due to WordPress admin primitives (e.g., Screen Options, non-REST file streaming), require a short rationale. [SHOULD]
+
 ## Scope and Diff Hygiene
 
 - Flag PRs that mix behavior changes with refactors, renames, or formatting-only edits. Each change should be single-purpose. [MUST]

eslint.config.mjs

@@ -26,7 +26,11 @@ export default eslintTs.config(
 		rules: reactHooks.configs.recommended.rules,
 	},
 	{
-		ignores: ['bundle/*', 'src/dist/*', 'src/vendor/*', 'svn/*', '*.config.mjs', '*.config.js', '.*/*', 'tmp/*']
+		ignores: [
+			'bundle/*', 'src/dist/*', 'src/vendor/*', 'svn/*',
+			'*.config.mjs', '*.config.js',
+			'.*/*', 'tmp/*', 'playwright-report/*'
+		]
 	},
 	{
 		languageOptions: {

src/css/common/_notices.scss

@@ -0,0 +1,27 @@
+.code-snippets-notice {
+	.notice-dismiss {
+		position: absolute;
+		transform: initial;
+		inset-inline-end: 0;
+		inset-block-start: 0;
+	}
+
+	details {
+		margin: .5em 0;
+		padding: 2px;
+
+		summary {
+			cursor: pointer;
+		}
+
+		pre {
+			max-inline-size: 100%;
+			overflow: auto hidden;
+			white-space: pre;
+		}
+
+		.stack-trace-hint {
+			opacity: 0.5;
+		}
+	}
+}

src/css/edit.scss

@@ -9,6 +9,7 @@
 @use 'common/select';
 @use 'common/tooltips';
 @use 'common/modal';
+@use 'common/notices';
 @use 'common/upsell';
 @use 'common/toolbar';
 @use 'edit/form';
@@ -28,6 +29,10 @@
 	margin: 0;
 }
 
+#adminmenu a.code-snippets-edit-menu-link {
+	cursor: pointer;
+}
+
 .snippet-description-container {
 	.wp-editor-tools {
 		padding-block-start: 5px;
@@ -96,13 +101,3 @@
 form.condition-snippet .snippet-code-container {
 	display: none;
 }
-
-.cs-back {
-	cursor: pointer;
-
-	&::before {
-		content: '<';
-		color: #2271b1;
-		margin-inline-end: 3px;
-	}
-}

src/css/manage.scss

@@ -4,6 +4,7 @@
 @use 'common/tooltips';
 @use 'common/direction';
 @use 'common/select';
+@use 'common/notices';
 @use 'common/upsell';
 @use 'common/toolbar';
 @use 'prism';
@@ -61,10 +62,6 @@
 	}
 }
 
-.code-snippets-notice a.notice-dismiss {
-	text-decoration: none;
-}
-
 .refresh-button-container {
 	display: flex;
 	align-items: center;

src/css/manage/_cloud-community.scss

@@ -1,12 +1,61 @@
 @use '../common/theme';
 @use '../common/banners';
 
+.cloud-search-form {
+	display: flex;
+	gap: 8px;
+	margin-block: 31px 47px;
+	block-size: 54px;
+
+	> select {
+		flex: 0 0 250px;
+	}
+
+	.button {
+		flex: 0 0 165px;
+	}
+
+	.cloud-search-query {
+		flex: 1;
+		position: relative;
+
+		input {
+			inline-size: 100%;
+			block-size: 100%;
+		}
+
+		> .components-spinner {
+			position: absolute;
+			inset-inline-end: 1.5em;
+			inset-block-start: 25%;
+		}
+	}
+}
+
 .cloud-search {
 	@include banners.banners;
 
 	.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%;
+		}
+
+		.tablenav-pages {
+			margin: 0;
+			margin-inline-start: auto;
+		}
+	}
 }
 
 .cloud-search-results {
@@ -79,10 +128,6 @@
 		padding-block: 12px;
 		align-items: center;
 
-		.components-spinner {
-			margin: 0;
-		}
-
 		.dashicons-warning {
 			color: #b32d2e;
 		}
@@ -100,51 +145,6 @@
 	}
 }
 
-.cloud-search-form {
-	display: flex;
-	gap: 8px;
-	margin-block: 31px 47px;
-	block-size: 54px;
-
-	select {
-		flex: 0 0 250px;
-	}
-
-	.button {
-		flex: 0 0 165px;
-	}
-
-	.cloud-search-query {
-		flex: 1;
-		position: relative;
-
-		input {
-			inline-size: 100%;
-			block-size: 100%;
-		}
-
-		.components-spinner {
-			position: absolute;
-			inset-inline-end: 1.5em;
-			inset-block-start: 25%;
-		}
-	}
-}
-
-.tablenav.top {
-	display: flex;
-	gap: 20px;
-	block-size: 40px;
-	margin-block-end: 31px;
-	align-items: center;
-
-	select {
-		inline-size: 245px;
-		block-size: 100%;
-	}
-
-	.tablenav-pages {
-		margin: 0;
-		margin-inline-start: auto;
-	}
+.cloud-search-results .cloud-search-result footer > .components-spinner {
+	margin: 0;
 }

src/css/manage/_snippets-table.scss

@@ -166,10 +166,31 @@
 		min-inline-size: 130px;
 		max-inline-size: 130px;
 		text-align: end;
-		padding-inline: 8px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	td.column-date .modified-column-content {
+		display: block;
+		text-align: start;
+	}
+}
+
+.wp-list-table.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);
+	}
 }
 
 .wp-core-ui .button.clear-filters {

src/js/components/EditMenu/EditMenu.tsx

@@ -1,5 +1,118 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { SnippetForm } from './SnippetForm'
 
-export const EditMenu = () =>
-	<SnippetForm />
+const EVENT_NAME = 'code_snippets_focus_editor'
+
+interface EditMenuLinkBinding {
+	menuLink: HTMLAnchorElement
+	originalHref: string | undefined
+	originalRole: string | undefined
+	originalTabIndex: string | undefined
+	handleClick: (event: MouseEvent) => void
+	handleKeyDown: (event: KeyboardEvent) => void
+}
+
+const focusCodeEditor = () => {
+	window.dispatchEvent(new CustomEvent(EVENT_NAME))
+}
+
+const restoreAttribute = (menuLink: HTMLAnchorElement, name: string, value: string | undefined) => {
+	if (undefined !== value) {
+		menuLink.setAttribute(name, value)
+		return
+	}
+
+	menuLink.removeAttribute(name)
+}
+
+const getEditPage = (): string | undefined => {
+	const editUrl = window.CODE_SNIPPETS?.urls.edit
+
+	return editUrl ? new URL(editUrl, window.location.origin).searchParams.get('page') ?? undefined : undefined
+}
+
+const bindEditMenuLink = (menuLink: HTMLAnchorElement, page: string): EditMenuLinkBinding | undefined => {
+	const menuUrl = new URL(menuLink.href, window.location.origin)
+
+	if (page !== menuUrl.searchParams.get('page')) {
+		return undefined
+	}
+
+	const handleClick = (event: MouseEvent) => {
+		event.preventDefault()
+		focusCodeEditor()
+	}
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if ('Enter' !== event.key && ' ' !== event.key) {
+			return
+		}
+
+		event.preventDefault()
+		focusCodeEditor()
+	}
+
+	const binding = {
+		menuLink,
+		originalHref: menuLink.getAttribute('href') ?? undefined,
+		originalRole: menuLink.getAttribute('role') ?? undefined,
+		originalTabIndex: menuLink.getAttribute('tabindex') ?? undefined,
+		handleClick,
+		handleKeyDown
+	}
+
+	menuLink.dataset.codeSnippetsDisabled = 'true'
+	menuLink.setAttribute('role', 'button')
+	menuLink.setAttribute('tabindex', '0')
+	menuLink.classList.add('code-snippets-edit-menu-link')
+	menuLink.removeAttribute('href')
+	menuLink.addEventListener('click', handleClick)
+	menuLink.addEventListener('keydown', handleKeyDown)
+
+	return binding
+}
+
+const unbindEditMenuLink = ({
+	menuLink,
+	originalHref,
+	originalRole,
+	originalTabIndex,
+	handleClick,
+	handleKeyDown
+}: EditMenuLinkBinding) => {
+	menuLink.removeEventListener('click', handleClick)
+	menuLink.removeEventListener('keydown', handleKeyDown)
+	menuLink.classList.remove('code-snippets-edit-menu-link')
+	delete menuLink.dataset.codeSnippetsDisabled
+
+	restoreAttribute(menuLink, 'href', originalHref)
+	restoreAttribute(menuLink, 'role', originalRole)
+	restoreAttribute(menuLink, 'tabindex', originalTabIndex)
+}
+
+const useEditMenuLinkFocus = () => {
+	useEffect(() => {
+		const page = getEditPage()
+
+		if (!page) {
+			return
+		}
+
+		const editMenuLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('#adminmenu a[href]'))
+			.flatMap(menuLink => {
+				const binding = bindEditMenuLink(menuLink, page)
+
+				return binding ? [binding] : []
+			})
+
+		return () => {
+			editMenuLinks.forEach(unbindEditMenuLink)
+		}
+	}, [])
+}
+
+export const EditMenu = () => {
+	useEditMenuLinkFocus()
+
+	return <SnippetForm />
+}