feat(next): version view overhaul (#12027)

#11769 improved the lexical version view diff component. This PR
improves the rest of the version view.

## What changed

- Column layout when selecting a version:
	- Previously: Selected version on the left, latest version on the left
- Now: Previous version on the left, previous version on the right
(mimics behavior of GitHub)
- Locale selector now displayed in pill selector, rather than
react-select
- Smoother, more reliable locale, modifiedOnly and version selection.
Now uses clean event callbacks rather than useEffects
- React-diff-viewer-continued has been replaced with the html differ we
use in lexical
- Updated Design for all field diffs
- Version columns now have a clearly defined separator line
- Fixed collapsibles showing in version view despite having no modified
fields if modifiedOnly is true
- New, redesigned header
	

## Screenshots

### Before

![CleanShot 2025-04-11 at 20 10
03@2x](https://github.com/user-attachments/assets/a93a500a-3cdd-4cf0-84dd-cf5481aac2b3)

![CleanShot 2025-04-11 at 20 10
28@2x](https://github.com/user-attachments/assets/59bc5885-cbaf-49ea-8d1d-8d145463fd80)

### After

![Screenshot 2025-06-09 at 17 43
49@2x](https://github.com/user-attachments/assets/f6ff0369-76c9-4c1c-9aa7-cbd88806ddc1)

![Screenshot 2025-06-09 at 17 44
50@2x](https://github.com/user-attachments/assets/db93a3db-48d6-4e5d-b080-86a34fff5d22)

![Screenshot 2025-06-09 at 17 45
19@2x](https://github.com/user-attachments/assets/27b6c720-05fe-4957-85af-1305d6b65cfd)

![Screenshot 2025-06-09 at 17 45
34@2x](https://github.com/user-attachments/assets/6d42f458-515a-4611-b27a-f4d6bafbf555)

Author: AlessioGr

package.json

@@ -64,7 +64,7 @@
     "clean:build": "node ./scripts/delete-recursively.js 'media/' '**/dist/' '**/.cache/' '**/.next/' '**/.turbo/' '**/tsconfig.tsbuildinfo' '**/payload*.tgz' '**/meta_*.json'",
     "clean:build:allowtgz": "node ./scripts/delete-recursively.js 'media/' '**/dist/' '**/.cache/' '**/.next/' '**/.turbo/' '**/tsconfig.tsbuildinfo' '**/meta_*.json'",
     "clean:cache": "node ./scripts/delete-recursively.js node_modules/.cache! packages/payload/node_modules/.cache! .next/*",
-    "dev": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/dev.ts",
+    "dev": "cross-env NODE_OPTIONS=\"--no-deprecation --max-old-space-size=16384\" tsx ./test/dev.ts",
     "dev:generate-db-schema": "pnpm runts ./test/generateDatabaseSchema.ts",
     "dev:generate-graphql-schema": "pnpm runts ./test/generateGraphQLSchema.ts",
     "dev:generate-importmap": "pnpm runts ./test/generateImportMap.ts",
@@ -111,7 +111,7 @@
     "test:int:sqlite": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" NODE_NO_WARNINGS=1 PAYLOAD_DATABASE=sqlite DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
     "test:types": "tstyche",
     "test:unit": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" NODE_NO_WARNINGS=1 DISABLE_LOGGING=true jest --forceExit --detectOpenHandles  --config=jest.config.js --runInBand",
-    "translateNewKeys": "pnpm --filter translations run translateNewKeys"
+    "translateNewKeys": "pnpm --filter @tools/scripts run generateTranslations:core"
   },
   "lint-staged": {
     "**/package.json": "sort-package-json",

packages/next/package.json

@@ -103,7 +103,6 @@
     "http-status": "2.1.0",
     "path-to-regexp": "6.3.0",
     "qs-esm": "7.0.2",
-    "react-diff-viewer-continued": "4.0.5",
     "sass": "1.77.4",
     "uuid": "10.0.0"
   },

packages/next/src/utilities/handleServerFunctions.ts

@@ -11,6 +11,17 @@ import { renderDocumentSlotsHandler } from '../views/Document/renderDocumentSlot
 import { renderListHandler } from '../views/List/handleServerFunction.js'
 import { initReq } from './initReq.js'
 
+const serverFunctions: Record<string, ServerFunction> = {
+  'copy-data-from-locale': copyDataFromLocaleHandler,
+  'form-state': buildFormStateHandler,
+  'get-folder-results-component-and-data': getFolderResultsComponentAndDataHandler,
+  'render-document': renderDocumentHandler,
+  'render-document-slots': renderDocumentSlotsHandler,
+  'render-list': renderListHandler,
+  'schedule-publish': schedulePublishHandler,
+  'table-state': buildTableStateHandler,
+}
+
 export const handleServerFunctions: ServerFunctionHandler = async (args) => {
   const { name: fnKey, args: fnArgs, config: configPromise, importMap } = args
 
@@ -26,18 +37,6 @@ export const handleServerFunctions: ServerFunctionHandler = async (args) => {
     req,
   }
 
-  const serverFunctions = {
-    'copy-data-from-locale': copyDataFromLocaleHandler as any as ServerFunction,
-    'form-state': buildFormStateHandler as any as ServerFunction,
-    'get-folder-results-component-and-data':
-      getFolderResultsComponentAndDataHandler as any as ServerFunction,
-    'render-document': renderDocumentHandler as any as ServerFunction,
-    'render-document-slots': renderDocumentSlotsHandler as any as ServerFunction,
-    'render-list': renderListHandler as any as ServerFunction,
-    'schedule-publish': schedulePublishHandler as any as ServerFunction,
-    'table-state': buildTableStateHandler as any as ServerFunction,
-  }
-
   const fn = serverFunctions[fnKey]
 
   if (!fn) {

packages/next/src/views/Account/index.tsx

@@ -148,6 +148,7 @@ export async function Account({ initPageResult, params, searchParams }: AdminVie
             importMap: payload.importMap,
             serverProps: {
               doc: data,
+              hasPublishedDoc,
               i18n,
               initPageResult,
               locale,

packages/next/src/views/Document/handleServerFunction.tsx

@@ -1,38 +1,13 @@
-import type {
-  Data,
-  DocumentPreferences,
-  FormState,
-  Locale,
-  PayloadRequest,
-  VisibleEntities,
-} from 'payload'
+import type { RenderDocumentServerFunction } from '@payloadcms/ui'
+import type { DocumentPreferences, VisibleEntities } from 'payload'
 
 import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig'
 import { headers as getHeaders } from 'next/headers.js'
 import { getAccessResults, isEntityHidden, parseCookies } from 'payload'
 
 import { renderDocument } from './index.js'
 
-type RenderDocumentResult = {
-  data: any
-  Document: React.ReactNode
-  preferences: DocumentPreferences
-}
-
-export const renderDocumentHandler = async (args: {
-  collectionSlug: string
-  disableActions?: boolean
-  docID: string
-  drawerSlug?: string
-  initialData?: Data
-  initialState?: FormState
-  locale?: Locale
-  overrideEntityVisibility?: boolean
-  redirectAfterCreate?: boolean
-  redirectAfterDelete: boolean
-  redirectAfterDuplicate: boolean
-  req: PayloadRequest
-}): Promise<RenderDocumentResult> => {
+export const renderDocumentHandler: RenderDocumentServerFunction = async (args) => {
   const {
     collectionSlug,
     disableActions,
@@ -41,6 +16,7 @@ export const renderDocumentHandler = async (args: {
     initialData,
     locale,
     overrideEntityVisibility,
+    paramsOverride,
     redirectAfterCreate,
     redirectAfterDelete,
     redirectAfterDuplicate,
@@ -51,6 +27,8 @@ export const renderDocumentHandler = async (args: {
       payload: { config },
       user,
     },
+    searchParams = {},
+    versions,
   } = args
 
   const headers = await getHeaders()
@@ -163,14 +141,15 @@ export const renderDocumentHandler = async (args: {
       visibleEntities,
     },
     overrideEntityVisibility,
-    params: {
-      segments: ['collections', collectionSlug, docID],
+    params: paramsOverride ?? {
+      segments: ['collections', collectionSlug, String(docID)],
     },
     payload,
     redirectAfterCreate,
     redirectAfterDelete,
     redirectAfterDuplicate,
-    searchParams: {},
+    searchParams,
+    versions,
     viewType: 'document',
   })
 

packages/next/src/views/Document/index.tsx

@@ -6,6 +6,7 @@ import type {
   DocumentViewServerPropsOnly,
   EditViewComponent,
   PayloadComponent,
+  RenderDocumentVersionsProperties,
 } from 'payload'
 
 import { DocumentInfoProvider, EditDepthProvider, HydrateAuthProvider } from '@payloadcms/ui'
@@ -57,13 +58,15 @@ export const renderDocument = async ({
   redirectAfterDelete,
   redirectAfterDuplicate,
   searchParams,
+  versions,
   viewType,
 }: {
   drawerSlug?: string
   overrideEntityVisibility?: boolean
   readonly redirectAfterCreate?: boolean
   readonly redirectAfterDelete?: boolean
   readonly redirectAfterDuplicate?: boolean
+  versions?: RenderDocumentVersionsProperties
 } & AdminViewServerProps): Promise<{
   data: Data
   Document: React.ReactNode
@@ -178,6 +181,7 @@ export const renderDocument = async ({
 
   const documentViewServerProps: DocumentViewServerPropsOnly = {
     doc,
+    hasPublishedDoc,
     i18n,
     initPageResult,
     locale,
@@ -187,6 +191,7 @@ export const renderDocument = async ({
     routeSegments: segments,
     searchParams,
     user,
+    versions,
   }
 
   if (

packages/next/src/views/Document/renderDocumentSlots.tsx

@@ -11,6 +11,7 @@ import type {
   SanitizedGlobalConfig,
   SaveButtonServerPropsOnly,
   SaveDraftButtonServerPropsOnly,
+  ServerFunction,
   ServerProps,
   StaticDescription,
   ViewDescriptionClientProps,
@@ -168,8 +169,8 @@ export const renderDocumentSlots: (args: {
   return components
 }
 
-export const renderDocumentSlotsHandler = async (
-  args: { collectionSlug: string } & DefaultServerFunctionArgs,
+export const renderDocumentSlotsHandler: ServerFunction<{ collectionSlug: string }> = async (
+  args,
 ) => {
   const { collectionSlug, req } = args
 

packages/next/src/views/List/handleServerFunction.tsx

@@ -1,4 +1,4 @@
-import type { ListPreferences, ListQuery, PayloadRequest, VisibleEntities } from 'payload'
+import type { ListPreferences, ListQuery, ServerFunction, VisibleEntities } from 'payload'
 
 import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig'
 import { headers as getHeaders } from 'next/headers.js'
@@ -11,21 +11,23 @@ type RenderListResult = {
   preferences: ListPreferences
 }
 
-export const renderListHandler = async (args: {
-  collectionSlug: string
-  disableActions?: boolean
-  disableBulkDelete?: boolean
-  disableBulkEdit?: boolean
-  disableQueryPresets?: boolean
-  documentDrawerSlug: string
-  drawerSlug?: string
-  enableRowSelections: boolean
-  overrideEntityVisibility?: boolean
-  query: ListQuery
-  redirectAfterDelete: boolean
-  redirectAfterDuplicate: boolean
-  req: PayloadRequest
-}): Promise<RenderListResult> => {
+export const renderListHandler: ServerFunction<
+  {
+    collectionSlug: string
+    disableActions?: boolean
+    disableBulkDelete?: boolean
+    disableBulkEdit?: boolean
+    disableQueryPresets?: boolean
+    documentDrawerSlug: string
+    drawerSlug?: string
+    enableRowSelections: boolean
+    overrideEntityVisibility?: boolean
+    query: ListQuery
+    redirectAfterDelete: boolean
+    redirectAfterDuplicate: boolean
+  },
+  Promise<RenderListResult>
+> = async (args) => {
   const {
     collectionSlug,
     disableActions,