feat: preview modal actions and large-snippet UX

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;
+			}
+		}
 	}
 }

src/css/common/_subnav.scss

@@ -199,8 +199,7 @@
 	font-size: 14px;
 	font-weight: 600;
 	line-height: 1.5;
-	color: #2c3337;
-	opacity: 0.4;
+	color: #646970;
 }
 
 // The active tab's count adopts the accent alongside its label.

src/css/manage/_snippets-table.scss

@@ -167,7 +167,7 @@
 		}
 
 		.snippet-card-modified {
-			color: #6c7e7e;
+			color: #646970;
 			margin-inline-start: auto;
 		}
 	}

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;
 	}

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')

src/js/components/EditMenu/SnippetForm/SnippetForm.tsx

@@ -1,12 +1,17 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../../hooks/useRestAPI'
 import { WithSnippetsAPIContext } from '../../../hooks/useSnippetsAPI'
 import { WithSnippetsListContext, useSnippetsList } from '../../../hooks/useSnippetsList'
 import { SubmitSnippetAction, useSubmitSnippet } from '../../../hooks/useSubmitSnippet'
 import { handleUnknownError } from '../../../utils/errors'
-import { createSnippetObject, getSnippetType, isCondition, validateSnippet } from '../../../utils/snippets/snippets'
+import {
+	createSnippetObject,
+	getSnippetType,
+	isCondition,
+	validateSnippet
+} from '../../../utils/snippets/snippets'
 import { buildUrl } from '../../../utils/urls'
 import { ConfirmDialog } from '../../common/ConfirmDialog'
 import { Toolbar } from '../../common/Toolbar'
@@ -96,7 +101,7 @@ const EditForm: React.FC<EditFormProps> = ({ children, className }) => {
 							.replace(__('Create New Condition', 'code-snippets'), __('Edit Condition', 'code-snippets'))
 
 						const newUrl = buildUrl(window.CODE_SNIPPETS.urls.edit, { id: response.id })
-						window.history.pushState({}, document.title, newUrl)
+						window.history.replaceState({}, document.title, newUrl)
 					}
 				}
 			})
@@ -126,7 +131,9 @@ const EditForm: React.FC<EditFormProps> = ({ children, className }) => {
 				{children}
 			</form>
 
-			<ConfirmSubmitDialog {...{ doSubmit, submitAction, setSubmitAction, validationWarning, setValidationWarning }} />
+			<ConfirmSubmitDialog
+				{...{ doSubmit, submitAction, setSubmitAction, validationWarning, setValidationWarning }}
+			/>
 		</>
 	)
 }
@@ -141,17 +148,58 @@ const ConditionsEditor: React.FC = () => {
 		: null
 }
 
-const EditFormWrap: React.FC = () => {
-	const { snippet, isReadOnly } = useSnippetForm()
-	const [isExpanded, setIsExpanded] = useState(false)
-	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+const useReloadOnPopState = (isDirty: boolean) => {
+	const currentUrl = useRef(window.location.href)
+	const skipNextUnloadPrompt = useRef(false)
+
+	useEffect(() => {
+		currentUrl.current = window.location.href
+	})
 
-	// Restoring history after pushState requires a reload to render the matching snippet.
 	useEffect(() => {
-		const handlePopState = () => window.location.reload()
+		const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+			if (skipNextUnloadPrompt.current) {
+				skipNextUnloadPrompt.current = false
+				return
+			}
+
+			event.preventDefault()
+			// Required by Chrome and Edge versions before 119.
+			// eslint-disable-next-line @typescript-eslint/no-deprecated
+			event.returnValue = true
+		}
+
+		if (isDirty) {
+			window.addEventListener('beforeunload', handleBeforeUnload)
+		}
+
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+	}, [isDirty])
+
+	useEffect(() => {
+		const handlePopState = () => {
+			if (isDirty && !window.confirm(
+				__('You have unsaved changes. Leave this page and discard them?', 'code-snippets')
+			)) {
+				window.history.pushState({}, document.title, currentUrl.current)
+				return
+			}
+
+			skipNextUnloadPrompt.current = isDirty
+			window.location.reload()
+		}
+
 		window.addEventListener('popstate', handlePopState)
 		return () => window.removeEventListener('popstate', handlePopState)
-	}, [])
+	}, [isDirty])
+}
+
+const EditFormWrap: React.FC = () => {
+	const { snippet, isReadOnly, isDirty } = useSnippetForm()
+	const [isExpanded, setIsExpanded] = useState(false)
+	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
+
+	useReloadOnPopState(isDirty)
 
 	return (
 		<>
@@ -187,7 +235,9 @@ export const SnippetForm: React.FC = () =>
 	<WithRestAPIContext>
 		<WithSnippetsAPIContext>
 			<WithSnippetsListContext>
-				<WithSnippetFormContext initialSnippet={() => createSnippetObject(window.CODE_SNIPPETS_EDIT?.snippet)}>
+				<WithSnippetFormContext
+					initialSnippet={() => createSnippetObject(window.CODE_SNIPPETS_EDIT?.snippet)}
+				>
 					<Toolbar />
 					<EditFormWrap />
 				</WithSnippetFormContext>

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,

src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx

@@ -50,6 +50,7 @@ const CardPreviewButton: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
 				type={getSnippetType(snippet)}
 				isOpen={isPreviewOpen}
 				setIsOpen={setIsPreviewOpen}
+				snippet={snippet}
 			/>
 		</>
 	)

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}
 			/>
 		</>
 	)